@tradecanvas/chart 1.3.0 → 1.4.0

package/dist/widget/index.js

@@ -1,12 +1,13 @@
-import { r as e, t } from "../DragDropImporter-cURSpfUb.js";
-import { DARK_THEME as n, LIGHT_THEME as r, timeframeBucketStart as i, timeframeToMs as a } from "@tradecanvas/commons";
+import { r as e, t } from "../DragDropImporter-Dd9Mud5J.js";
+import { DARK_THEME as n, LIGHT_THEME as r, formatPrice as i, timeframeBucketStart as a, timeframeToMs as o } from "@tradecanvas/commons";
+import { RANGE_PRESETS as s } from "@tradecanvas/core";
 //#region src/io/resampleOHLCV.ts
-function o(e, t, n = {}) {
+function c(e, t, n = {}) {
 	if (e.length === 0) return [];
-	let r = n.weekStartsOn ?? 1, a = [], o = null, s = NaN;
+	let r = n.weekStartsOn ?? 1, i = [], o = null, s = NaN;
 	for (let n of e) {
-		let e = i(n.time, t, r);
-		o === null || e !== s ? (o !== null && a.push(o), o = {
+		let e = a(n.time, t, r);
+		o === null || e !== s ? (o !== null && i.push(o), o = {
 			time: e,
 			open: n.open,
 			high: n.high,
@@ -22,9 +23,9 @@ function o(e, t, n = {}) {
 			volume: o.volume + n.volume
 		};
 	}
-	return o !== null && a.push(o), a;
+	return o !== null && i.push(o), i;
 }
-function s(e) {
+function l(e) {
 	if (e.length < 2) return 0;
 	let t = [];
 	for (let n = 1; n < e.length; n++) {
@@ -35,32 +36,7 @@ function s(e) {
 }
 //#endregion
 //#region src/widget/widgetConfig.ts
-var c = [
-	{
-		label: "1m",
-		value: "1m"
-	},
-	{
-		label: "5m",
-		value: "5m"
-	},
-	{
-		label: "15m",
-		value: "15m"
-	},
-	{
-		label: "1H",
-		value: "1h"
-	},
-	{
-		label: "4H",
-		value: "4h"
-	},
-	{
-		label: "1D",
-		value: "1d"
-	}
-], l = [
+var u = [
 	{
 		label: "Candlestick",
 		value: "candlestick"
@@ -109,7 +85,7 @@ var c = [
 		label: "Line + Markers",
 		value: "lineWithMarkers"
 	}
-], u = [
+], d = [
 	{
 		label: "Lines",
 		tools: [
@@ -317,7 +293,7 @@ var c = [
 			}
 		]
 	}
-], d = [
+], f = [
 	{
 		id: "sma",
 		name: "SMA",
@@ -668,7 +644,7 @@ var c = [
 		name: "Volume Profile",
 		type: "panel"
 	}
-], f = [
+], ee = [
 	"sma",
 	"ema",
 	"bb",
@@ -679,7 +655,7 @@ var c = [
 	"atr",
 	"obv",
 	"ichimoku"
-], ee = [
+], te = [
 	"BTCUSDT",
 	"ETHUSDT",
 	"SOLUSDT",
@@ -712,68 +688,364 @@ var c = [
 	logScale: !1,
 	scaleMode: "regular",
 	autoScale: !0,
+	invertScale: !1,
 	crosshairMode: "magnet",
 	numberLocale: "en-US",
 	timezone: "local"
-}, te = "/* === TradeCanvas Widget — Premium Styles === */\r\n\r\n/*\r\n * The HTML `hidden` attribute only sets `display: none` via the UA stylesheet,\r\n * which any author `display` rule (e.g. `.tcw-alerts-panel { display: flex }`)\r\n * silently overrides — leaving panels stuck open when JS sets `el.hidden = true`.\r\n * Force `hidden` to win for every namespaced widget element. Scoped to `tcw-`\r\n * so it never touches the host page.\r\n */\r\n[class^=\"tcw-\"][hidden],\r\n[class*=\" tcw-\"][hidden] {\r\n  display: none !important;\r\n}\r\n\r\n.tcw-root {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  height: 100%;\r\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;\r\n  font-feature-settings: 'cv11', 'ss01', 'ss03';\r\n  font-size: 13px;\r\n  line-height: 1.4;\r\n  color: #d9dde4;\r\n  background: #080b10;\r\n  position: relative;\r\n  overflow: hidden;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n\r\n  /* --- Dark theme tokens (default) --- */\r\n  --tcw-bg: #080b10;\r\n  --tcw-bg-surface: #0c1016;\r\n  --tcw-bg-elevated: #141922;\r\n  --tcw-bg-overlay: rgba(20, 25, 34, 0.5);\r\n  --tcw-border: #1f2630;\r\n  --tcw-border-strong: #2a323e;\r\n  --tcw-text: #e7e9ee;\r\n  --tcw-text-dim: #aab1bd;\r\n  --tcw-text-muted: #758091;\r\n\r\n  /* TradeCanvas amber. --tcw-accent-ink is the text colour on an accent fill. */\r\n  --tcw-accent: #f2a93b;\r\n  --tcw-accent-hover: #f5b95c;\r\n  --tcw-accent-ink: #1a1204;\r\n  --tcw-accent-soft: rgba(242, 169, 59, 0.14);\r\n  --tcw-accent-glow: rgba(242, 169, 59, 0.22);\r\n  --tcw-accent-line: rgba(242, 169, 59, 0.55);\r\n\r\n  --tcw-red: #e8505b;\r\n  --tcw-red-soft: rgba(232, 80, 91, 0.12);\r\n  --tcw-green: #1fa874;\r\n  --tcw-green-soft: rgba(31, 168, 116, 0.12);\r\n  --tcw-amber: #ff9f43;\r\n\r\n  --tcw-hover-bg: rgba(255, 255, 255, 0.05);\r\n  --tcw-active-bg: rgba(255, 255, 255, 0.08);\r\n  --tcw-divider: rgba(255, 255, 255, 0.06);\r\n\r\n  /* Motion */\r\n  --tcw-ease: cubic-bezier(0.2, 0, 0, 1);\r\n  --tcw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\r\n  --tcw-dur-fast: 120ms;\r\n  --tcw-dur-normal: 180ms;\r\n  --tcw-dur-slow: 260ms;\r\n\r\n  /* Shape */\r\n  --tcw-radius-sm: 4px;\r\n  --tcw-radius: 6px;\r\n  --tcw-radius-lg: 10px;\r\n  --tcw-radius-xl: 14px;\r\n\r\n  /* Elevation */\r\n  --tcw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\r\n  --tcw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);\r\n  --tcw-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);\r\n  --tcw-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35);\r\n  --tcw-ring: 0 0 0 2px rgba(242, 169, 59, 0.45);\r\n\r\n  /* Type */\r\n  --tcw-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', ui-monospace, monospace;\r\n}\r\n\r\n.tcw-root[data-tcw-theme='light'] {\r\n  color: #0c1016;\r\n  background: #fcfcfd;\r\n\r\n  --tcw-bg: #fcfcfd;\r\n  --tcw-bg-surface: #ffffff;\r\n  --tcw-bg-elevated: #ffffff;\r\n  --tcw-bg-overlay: rgba(255, 255, 255, 0.75);\r\n  --tcw-border: #e3e6eb;\r\n  --tcw-border-strong: #d2d6dd;\r\n  --tcw-text: #0c1016;\r\n  --tcw-text-dim: #3f4754;\r\n  --tcw-text-muted: #626a77;\r\n\r\n  /* Deeper amber: readable as text on the light ground, white text readable on it. */\r\n  --tcw-accent: #a0610a;\r\n  --tcw-accent-hover: #874f07;\r\n  --tcw-accent-ink: #ffffff;\r\n  --tcw-accent-soft: rgba(160, 97, 10, 0.10);\r\n  --tcw-accent-glow: rgba(160, 97, 10, 0.16);\r\n  --tcw-accent-line: rgba(160, 97, 10, 0.45);\r\n  --tcw-ring: 0 0 0 2px rgba(160, 97, 10, 0.4);\r\n\r\n  /* Darker semantic colours: used as text on white. */\r\n  --tcw-red: #c42f3e;\r\n  --tcw-red-soft: rgba(196, 47, 62, 0.10);\r\n  --tcw-green: #0b7d50;\r\n  --tcw-green-soft: rgba(11, 125, 80, 0.10);\r\n\r\n  --tcw-hover-bg: rgba(0, 0, 0, 0.04);\r\n  --tcw-active-bg: rgba(160, 97, 10, 0.08);\r\n  --tcw-divider: rgba(0, 0, 0, 0.06);\r\n\r\n  --tcw-shadow-sm: 0 1px 2px rgba(20, 28, 56, 0.05);\r\n  --tcw-shadow-md: 0 4px 12px rgba(20, 28, 56, 0.08), 0 1px 3px rgba(20, 28, 56, 0.04);\r\n  --tcw-shadow-lg: 0 12px 36px rgba(20, 28, 56, 0.14), 0 4px 12px rgba(20, 28, 56, 0.08);\r\n  --tcw-shadow-xl: 0 24px 64px rgba(20, 28, 56, 0.18), 0 12px 24px rgba(20, 28, 56, 0.1);\r\n}\r\n\r\n/* === Toolbar === */\r\n\r\n.tcw-toolbar {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0;\r\n  padding: 0 10px;\r\n  height: 44px;\r\n  border-bottom: 1px solid var(--tcw-border);\r\n  background:\r\n    linear-gradient(180deg, var(--tcw-bg-elevated) 0%, var(--tcw-bg-surface) 100%);\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 20;\r\n  box-shadow: var(--tcw-shadow-sm);\r\n}\r\n\r\n.tcw-toolbar-symbol {\r\n  font-size: 14px;\r\n  font-weight: 650;\r\n  color: var(--tcw-text);\r\n  padding: 6px 12px;\r\n  white-space: nowrap;\r\n  letter-spacing: -0.015em;\r\n  cursor: pointer;\r\n  border: none;\r\n  background: transparent;\r\n  font-family: inherit;\r\n  border-radius: var(--tcw-radius);\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\r\n}\r\n\r\n.tcw-toolbar-symbol:hover {\r\n  background: var(--tcw-hover-bg);\r\n}\r\n\r\n.tcw-toolbar-sep {\r\n  width: 1px;\r\n  height: 22px;\r\n  background: var(--tcw-border);\r\n  flex-shrink: 0;\r\n  margin: 0 4px;\r\n}\r\n\r\n.tcw-toolbar-group {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2px;\r\n  padding: 0 4px;\r\n}\r\n\r\n.tcw-toolbar-spacer {\r\n  flex: 1;\r\n}\r\n\r\n.tcw-btn {\r\n  padding: 6px 10px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  font-family: inherit;\r\n  border: none;\r\n  border-radius: var(--tcw-radius);\r\n  background: transparent;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  transition:\r\n    background var(--tcw-dur-fast) var(--tcw-ease),\r\n    color var(--tcw-dur-fast) var(--tcw-ease),\r\n    transform var(--tcw-dur-fast) var(--tcw-ease);\r\n  white-space: nowrap;\r\n  line-height: 1;\r\n  letter-spacing: -0.005em;\r\n}\r\n\r\n.tcw-btn:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-btn:active {\r\n  transform: translateY(0.5px);\r\n}\r\n\r\n.tcw-btn.tcw-active {\r\n  background: var(--tcw-accent-soft);\r\n  color: var(--tcw-accent);\r\n  font-weight: 600;\r\n  box-shadow: inset 0 0 0 1px var(--tcw-accent-line);\r\n}\r\n\r\n.tcw-btn:focus-visible,\r\n.tcw-btn-icon:focus-visible,\r\n.tcw-sidebar-btn:focus-visible,\r\n.tcw-dropdown-trigger:focus-visible {\r\n  outline: none;\r\n  box-shadow: var(--tcw-ring);\r\n}\r\n\r\n.tcw-btn-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-family: inherit;\r\n  border: none;\r\n  border-radius: var(--tcw-radius);\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  cursor: pointer;\r\n  transition:\r\n    background var(--tcw-dur-fast) var(--tcw-ease),\r\n    color var(--tcw-dur-fast) var(--tcw-ease);\r\n  line-height: 1;\r\n  position: relative;\r\n}\r\n\r\n.tcw-btn-icon:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-btn-icon svg {\r\n  display: block;\r\n}\r\n\r\n.tcw-badge-count {\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  color: var(--tcw-accent);\r\n  background: var(--tcw-accent-soft);\r\n  padding: 1px 5px;\r\n  border-radius: 9px;\r\n  font-family: var(--tcw-font-mono);\r\n}\r\n\r\n.tcw-indicator-chips {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  padding: 0 4px;\r\n  flex-wrap: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n.tcw-indicator-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  padding: 3px 6px 3px 9px;\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  background: var(--tcw-accent-soft);\r\n  color: var(--tcw-accent);\r\n  border-radius: 9999px;\r\n  white-space: nowrap;\r\n  line-height: 1.4;\r\n  letter-spacing: -0.005em;\r\n  border: 1px solid transparent;\r\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\r\n}\r\n\r\n.tcw-indicator-chip:hover {\r\n  border-color: var(--tcw-accent-line);\r\n}\r\n\r\n.tcw-chip-remove {\r\n  cursor: pointer;\r\n  opacity: 0.55;\r\n  padding: 0 2px;\r\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\r\n  border: none;\r\n  background: transparent;\r\n  color: inherit;\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n.tcw-chip-remove:hover {\r\n  opacity: 1;\r\n}\r\n\r\n/* === Dropdown === */\r\n\r\n.tcw-dropdown-trigger {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  padding: 6px 10px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  font-family: inherit;\r\n  border: none;\r\n  border-radius: var(--tcw-radius);\r\n  background: transparent;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\r\n  white-space: nowrap;\r\n  line-height: 1;\r\n}\r\n\r\n.tcw-dropdown-trigger:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-dropdown {\r\n  position: absolute;\r\n  top: 100%;\r\n  margin-top: 6px;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  z-index: 50;\r\n  padding: 6px;\r\n  max-height: 420px;\r\n  overflow-y: auto;\r\n  backdrop-filter: blur(12px);\r\n  -webkit-backdrop-filter: blur(12px);\r\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\r\n}\r\n\r\n@keyframes tcw-pop-in {\r\n  from { opacity: 0; transform: translateY(-4px) scale(0.98); }\r\n  to { opacity: 1; transform: translateY(0) scale(1); }\r\n}\r\n\r\n.tcw-dropdown-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 7px 10px;\r\n  font-size: 12.5px;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\r\n  width: 100%;\r\n  border: none;\r\n  background: transparent;\r\n  font-family: inherit;\r\n  text-align: left;\r\n  border-radius: var(--tcw-radius-sm);\r\n  gap: 12px;\r\n}\r\n\r\n.tcw-dropdown-item:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-dropdown-item.tcw-active {\r\n  color: var(--tcw-accent);\r\n  background: var(--tcw-accent-soft);\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-dropdown-label {\r\n  text-transform: uppercase;\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  letter-spacing: 0.08em;\r\n  padding: 8px 10px 4px;\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-dropdown-divider {\r\n  border-top: 1px solid var(--tcw-divider);\r\n  margin: 6px 4px;\r\n}\r\n\r\n.tcw-tag {\r\n  font-size: 10px;\r\n  font-family: var(--tcw-font-mono);\r\n  color: var(--tcw-text-muted);\r\n  padding: 2px 6px;\r\n  border-radius: 4px;\r\n  background: var(--tcw-hover-bg);\r\n  letter-spacing: 0.02em;\r\n}\r\n\r\n/* === Body === */\r\n\r\n.tcw-body {\r\n  display: flex;\r\n  flex: 1;\r\n  min-height: 0;\r\n  background: var(--tcw-bg);\r\n}\r\n\r\n.tcw-chart-container {\r\n  flex: 1;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  position: relative;\r\n}\r\n\r\n/* === Loading overlay (candle skeleton) === */\r\n\r\n.tcw-loading-overlay {\r\n  /* Uses a modifier class rather than the `hidden` attribute — the global\r\n     `[hidden] { display: none !important }` rule above would cut the\r\n     opacity transition off before it can play. */\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 5;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: var(--tcw-bg);\r\n  opacity: 1;\r\n  transition: opacity var(--tcw-dur-slow) var(--tcw-ease-out);\r\n  pointer-events: none;\r\n}\r\n\r\n.tcw-loading-overlay--hidden {\r\n  opacity: 0;\r\n}\r\n\r\n.tcw-loading-card {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 14px;\r\n  padding: 22px 26px 20px;\r\n  border: 1px solid transparent;\r\n  border-radius: var(--tcw-radius-lg);\r\n}\r\n\r\n/* A slow switch: the previous chart stays readable underneath, dimmed, so the\r\n   click visibly registered without blanking the screen. */\r\n.tcw-loading-overlay--veil {\r\n  background: color-mix(in srgb, var(--tcw-bg) 55%, transparent);\r\n}\r\n\r\n.tcw-loading-overlay--veil .tcw-loading-card {\r\n  background: var(--tcw-bg-elevated);\r\n  border-color: var(--tcw-border);\r\n  box-shadow: var(--tcw-shadow-lg);\r\n}\r\n\r\n.tcw-loading-candles {\r\n  position: relative;\r\n  display: flex;\r\n  gap: 7px;\r\n  height: 64px;\r\n}\r\n\r\n/* One candle: the element is the wick's column, ::before the wick, ::after the body. */\r\n.tcw-loading-candle {\r\n  position: relative;\r\n  width: 8px;\r\n  height: 100%;\r\n  color: var(--tcw-red);\r\n  opacity: 0.28;\r\n  animation: tcw-candle-light 1.6s var(--tcw-ease) infinite;\r\n}\r\n\r\n.tcw-loading-candle--up { color: var(--tcw-green); }\r\n\r\n.tcw-loading-candle::before,\r\n.tcw-loading-candle::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 50%;\r\n  background: currentColor;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.tcw-loading-candle::before {\r\n  top: var(--tcw-wick-top);\r\n  width: 1.5px;\r\n  height: var(--tcw-wick-h);\r\n}\r\n\r\n.tcw-loading-candle::after {\r\n  top: var(--tcw-body-top);\r\n  width: 8px;\r\n  height: var(--tcw-body-h);\r\n  border-radius: 1.5px;\r\n}\r\n\r\n/* Each candle brightens and lifts slightly in turn, left to right. */\r\n@keyframes tcw-candle-light {\r\n  0%, 55%, 100% { opacity: 0.28; transform: translateY(0); }\r\n  20% { opacity: 1; transform: translateY(-2px); }\r\n}\r\n\r\n.tcw-loading-track {\r\n  position: relative;\r\n  width: 100%;\r\n  min-width: 88px;\r\n  height: 2px;\r\n  border-radius: 1px;\r\n  background: var(--tcw-border);\r\n  overflow: hidden;\r\n}\r\n\r\n.tcw-loading-track > span {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 40%;\r\n  border-radius: 1px;\r\n  background: linear-gradient(90deg, transparent, var(--tcw-accent), transparent);\r\n  animation: tcw-loading-sweep 1.6s var(--tcw-ease) infinite;\r\n}\r\n\r\n@keyframes tcw-loading-sweep {\r\n  from { transform: translateX(-100%); }\r\n  to { transform: translateX(250%); }\r\n}\r\n\r\n/* The status text is announced, not shown — the candles say \"loading\". */\r\n.tcw-loading-label {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  clip-path: inset(50%);\r\n  white-space: nowrap;\r\n}\r\n\r\n.tcw-loading-overlay--error .tcw-loading-candles,\r\n.tcw-loading-overlay--error .tcw-loading-track {\r\n  display: none;\r\n}\r\n\r\n/* A failure is shown: why the chart is empty and that a retry is running. */\r\n.tcw-loading-overlay--error .tcw-loading-label {\r\n  position: static;\r\n  width: auto;\r\n  height: auto;\r\n  overflow: visible;\r\n  clip-path: none;\r\n  white-space: normal;\r\n  max-width: 320px;\r\n  text-align: center;\r\n  color: var(--tcw-red);\r\n  font-size: 13px;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .tcw-loading-candle,\r\n  .tcw-loading-track > span {\r\n    animation: none;\r\n  }\r\n  .tcw-loading-candle { opacity: 0.6; }\r\n  .tcw-loading-track > span { transform: translateX(75%); }\r\n  /* Static candles don't say \"loading\" on their own: show the text. */\r\n  .tcw-loading-label {\r\n    position: static;\r\n    width: auto;\r\n    height: auto;\r\n    overflow: visible;\r\n    clip-path: none;\r\n    font-size: 12px;\r\n    color: var(--tcw-text-muted);\r\n  }\r\n}\r\n\r\n/* === Sidebar === */\r\n\r\n.tcw-sidebar {\r\n  width: 40px;\r\n  flex-shrink: 0;\r\n  background: linear-gradient(180deg, var(--tcw-bg-elevated) 0%, var(--tcw-bg-surface) 100%);\r\n  border-right: 1px solid var(--tcw-border);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 6px 0;\r\n  overflow: visible;\r\n  box-shadow: var(--tcw-shadow-sm);\r\n}\r\n\r\n.tcw-tool-group-wrap {\r\n  position: relative;\r\n}\r\n\r\n.tcw-sidebar-btn {\r\n  width: 32px;\r\n  height: 32px;\r\n  margin: 1px 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n  transition:\r\n    background var(--tcw-dur-fast) var(--tcw-ease),\r\n    color var(--tcw-dur-fast) var(--tcw-ease);\r\n  position: relative;\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n  border-radius: var(--tcw-radius);\r\n}\r\n\r\n.tcw-sidebar-btn:hover {\r\n  color: var(--tcw-text);\r\n  background: var(--tcw-hover-bg);\r\n}\r\n\r\n.tcw-sidebar-btn.tcw-active {\r\n  color: var(--tcw-accent);\r\n  background: var(--tcw-accent-soft);\r\n  box-shadow: inset 2px 0 0 var(--tcw-accent);\r\n}\r\n\r\n.tcw-sidebar-btn.tcw-danger:hover {\r\n  color: var(--tcw-red);\r\n  background: var(--tcw-red-soft);\r\n}\r\n\r\n.tcw-multi-dot {\r\n  position: absolute;\r\n  bottom: 3px;\r\n  right: 3px;\r\n  width: 4px;\r\n  height: 4px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-text-muted);\r\n  opacity: 0.7;\r\n}\r\n\r\n.tcw-sidebar-divider {\r\n  width: 22px;\r\n  height: 1px;\r\n  background: var(--tcw-divider);\r\n  margin: 6px 0;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-sidebar-spacer {\r\n  flex: 1;\r\n}\r\n\r\n/* === Flyout === */\r\n\r\n.tcw-flyout {\r\n  position: absolute;\r\n  left: 100%;\r\n  top: 0;\r\n  margin-left: 6px;\r\n  min-width: 180px;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  z-index: 30;\r\n  padding: 6px;\r\n  backdrop-filter: blur(12px);\r\n  -webkit-backdrop-filter: blur(12px);\r\n  animation: tcw-slide-right var(--tcw-dur-normal) var(--tcw-ease-out);\r\n}\r\n\r\n@keyframes tcw-slide-right {\r\n  from { opacity: 0; transform: translateX(-4px); }\r\n  to { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n.tcw-flyout-header {\r\n  text-transform: uppercase;\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  letter-spacing: 0.08em;\r\n  padding: 6px 10px 4px;\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-flyout-item {\r\n  padding: 7px 10px;\r\n  font-size: 12.5px;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  width: 100%;\r\n  display: block;\r\n  border: none;\r\n  background: transparent;\r\n  text-align: left;\r\n  font-family: inherit;\r\n  border-radius: var(--tcw-radius-sm);\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\r\n}\r\n\r\n.tcw-flyout-item:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-flyout-item.tcw-active {\r\n  color: var(--tcw-accent);\r\n  background: var(--tcw-accent-soft);\r\n  font-weight: 600;\r\n}\r\n\r\n/* Pinned (favorited) flyout item — a star marker on the right. */\r\n.tcw-flyout-item.tcw-flyout-faved::after {\r\n  content: '★';\r\n  float: right;\r\n  color: var(--tcw-accent);\r\n  font-size: 11px;\r\n  line-height: 1.4;\r\n}\r\n\r\n/* Favorites strip — pinned drawing tools above the tool groups. */\r\n.tcw-sidebar-favorites {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n}\r\n.tcw-sidebar-favorites .tcw-sidebar-btn {\r\n  position: relative;\r\n}\r\n.tcw-sidebar-favorites .tcw-sidebar-btn::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 3px;\r\n  right: 3px;\r\n  width: 4px;\r\n  height: 4px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-accent);\r\n  opacity: 0.7;\r\n}\r\n\r\n/* === Modal === */\r\n\r\n.tcw-modal-backdrop {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(8, 10, 18, 0.55);\r\n  backdrop-filter: blur(6px) saturate(140%);\r\n  -webkit-backdrop-filter: blur(6px) saturate(140%);\r\n  z-index: 100;\r\n  animation: tcw-fade-in var(--tcw-dur-normal) var(--tcw-ease-out);\r\n}\r\n\r\n@keyframes tcw-fade-in {\r\n  from { opacity: 0; }\r\n  to { opacity: 1; }\r\n}\r\n\r\n.tcw-modal {\r\n  position: fixed;\r\n  z-index: 101;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-xl);\r\n  width: 520px;\r\n  max-width: 92vw;\r\n  max-height: 82vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: var(--tcw-shadow-xl);\r\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\r\n}\r\n\r\n@keyframes tcw-modal-in {\r\n  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }\r\n  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\r\n}\r\n\r\n.tcw-modal-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 18px 22px;\r\n  border-bottom: 1px solid var(--tcw-divider);\r\n}\r\n\r\n.tcw-modal-header h3 {\r\n  font-size: 15px;\r\n  font-weight: 650;\r\n  margin: 0;\r\n  color: var(--tcw-text);\r\n  letter-spacing: -0.015em;\r\n}\r\n\r\n.tcw-modal-close {\r\n  width: 28px;\r\n  height: 28px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  cursor: pointer;\r\n  border-radius: var(--tcw-radius);\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\r\n}\r\n\r\n.tcw-modal-close:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-modal-tabs {\r\n  display: flex;\r\n  gap: 4px;\r\n  padding: 0 18px;\r\n  border-bottom: 1px solid var(--tcw-divider);\r\n}\r\n\r\n.tcw-modal-tab {\r\n  padding: 11px 14px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  color: var(--tcw-text-muted);\r\n  border: none;\r\n  background: transparent;\r\n  cursor: pointer;\r\n  border-bottom: 2px solid transparent;\r\n  margin-bottom: -1px;\r\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\r\n  font-family: inherit;\r\n  text-transform: capitalize;\r\n  letter-spacing: -0.005em;\r\n}\r\n\r\n.tcw-modal-tab:hover {\r\n  color: var(--tcw-text-dim);\r\n}\r\n\r\n.tcw-modal-tab.tcw-active {\r\n  color: var(--tcw-accent);\r\n  border-bottom-color: var(--tcw-accent);\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-modal-body {\r\n  padding: 20px 22px;\r\n  overflow-y: auto;\r\n  flex: 1;\r\n}\r\n\r\n.tcw-settings-section {\r\n  margin-bottom: 22px;\r\n}\r\n\r\n.tcw-settings-section:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tcw-settings-section-title {\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.09em;\r\n  color: var(--tcw-text-muted);\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.tcw-settings-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 10px 0;\r\n}\r\n\r\n.tcw-settings-row + .tcw-settings-row {\r\n  border-top: 1px solid var(--tcw-divider);\r\n}\r\n\r\n.tcw-settings-label {\r\n  font-size: 13px;\r\n  color: var(--tcw-text-dim);\r\n  letter-spacing: -0.005em;\r\n}\r\n\r\n.tcw-color-picker-wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n.tcw-color-picker-wrap input[type='color'] {\r\n  width: 28px;\r\n  height: 28px;\r\n  border: 1px solid var(--tcw-border-strong);\r\n  border-radius: var(--tcw-radius-sm);\r\n  background: transparent;\r\n  cursor: pointer;\r\n  padding: 2px;\r\n}\r\n\r\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch-wrapper {\r\n  padding: 0;\r\n}\r\n\r\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch {\r\n  border: none;\r\n  border-radius: 2px;\r\n}\r\n\r\n.tcw-color-hex {\r\n  font-size: 11px;\r\n  font-family: var(--tcw-font-mono);\r\n  color: var(--tcw-text-muted);\r\n  min-width: 64px;\r\n  letter-spacing: 0.01em;\r\n}\r\n\r\n.tcw-toggle {\r\n  width: 36px;\r\n  height: 20px;\r\n  background: rgba(255, 255, 255, 0.12);\r\n  border-radius: 10px;\r\n  position: relative;\r\n  cursor: pointer;\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\r\n  border: none;\r\n  padding: 0;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-toggle::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 2px;\r\n  left: 2px;\r\n  width: 16px;\r\n  height: 16px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-text-muted);\r\n  transition:\r\n    left var(--tcw-dur-normal) var(--tcw-ease-out),\r\n    background var(--tcw-dur-fast) var(--tcw-ease);\r\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.tcw-toggle.tcw-on {\r\n  background: var(--tcw-accent);\r\n  box-shadow: 0 0 0 2px var(--tcw-accent-glow);\r\n}\r\n\r\n.tcw-toggle.tcw-on::after {\r\n  left: 18px;\r\n  background: #fff;\r\n}\r\n\r\n.tcw-root[data-tcw-theme='light'] .tcw-toggle {\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.tcw-root[data-tcw-theme='light'] .tcw-toggle::after {\r\n  background: #999;\r\n}\r\n\r\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on {\r\n  background: var(--tcw-accent);\r\n}\r\n\r\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on::after {\r\n  background: #fff;\r\n}\r\n\r\n.tcw-settings-select {\r\n  padding: 6px 10px;\r\n  font-size: 12px;\r\n  font-family: inherit;\r\n  background: var(--tcw-bg-surface);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius);\r\n  color: var(--tcw-text);\r\n  cursor: pointer;\r\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\r\n}\r\n\r\n.tcw-settings-select:hover {\r\n  border-color: var(--tcw-border-strong);\r\n}\r\n\r\n.tcw-settings-select:focus-visible {\r\n  outline: none;\r\n  border-color: var(--tcw-accent);\r\n  box-shadow: var(--tcw-ring);\r\n}\r\n\r\n.tcw-modal-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 14px 22px;\r\n  border-top: 1px solid var(--tcw-divider);\r\n  background: var(--tcw-bg-surface);\r\n  border-radius: 0 0 var(--tcw-radius-xl) var(--tcw-radius-xl);\r\n}\r\n\r\n.tcw-reset-link {\r\n  font-size: 12px;\r\n  color: var(--tcw-text-muted);\r\n  cursor: pointer;\r\n  border: none;\r\n  background: transparent;\r\n  font-family: inherit;\r\n  text-decoration: underline;\r\n  text-underline-offset: 2px;\r\n  text-decoration-color: var(--tcw-border-strong);\r\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), text-decoration-color var(--tcw-dur-fast) var(--tcw-ease);\r\n}\r\n\r\n.tcw-reset-link:hover {\r\n  color: var(--tcw-text-dim);\r\n  text-decoration-color: currentColor;\r\n}\r\n\r\n.tcw-done-btn {\r\n  padding: 8px 18px;\r\n  font-size: 12.5px;\r\n  font-weight: 600;\r\n  background: var(--tcw-accent);\r\n  color: var(--tcw-accent-ink);\r\n  border: none;\r\n  border-radius: var(--tcw-radius);\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n  transition:\r\n    background var(--tcw-dur-fast) var(--tcw-ease),\r\n    transform var(--tcw-dur-fast) var(--tcw-ease),\r\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\r\n  letter-spacing: -0.005em;\r\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n.tcw-done-btn:hover {\r\n  background: var(--tcw-accent-hover);\r\n  box-shadow: var(--tcw-shadow-md), 0 0 0 3px var(--tcw-accent-glow);\r\n}\r\n\r\n.tcw-done-btn:active {\r\n  transform: translateY(0.5px);\r\n}\r\n\r\n/* === Status Bar === */\r\n\r\n.tcw-statusbar {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 7px 16px;\r\n  border-top: 1px solid var(--tcw-border);\r\n  background: var(--tcw-bg-surface);\r\n  font-size: 11px;\r\n  color: var(--tcw-text-muted);\r\n  flex-shrink: 0;\r\n  font-feature-settings: 'tnum';\r\n}\r\n\r\n.tcw-status-indicator {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 7px;\r\n  font-weight: 500;\r\n}\r\n\r\n.tcw-status-dot {\r\n  width: 7px;\r\n  height: 7px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-text-muted);\r\n  transition: background var(--tcw-dur-normal) var(--tcw-ease), box-shadow var(--tcw-dur-normal) var(--tcw-ease);\r\n  position: relative;\r\n}\r\n\r\n.tcw-status-dot.tcw-connected {\r\n  background: var(--tcw-green);\r\n  box-shadow: 0 0 0 3px rgba(31, 168, 116, 0.18);\r\n}\r\n\r\n.tcw-status-dot.tcw-connected::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: -3px;\r\n  border-radius: 50%;\r\n  border: 2px solid var(--tcw-green);\r\n  opacity: 0;\r\n  animation: tcw-pulse 2.2s ease-out infinite;\r\n}\r\n\r\n@keyframes tcw-pulse {\r\n  0% { opacity: 0.6; transform: scale(0.6); }\r\n  100% { opacity: 0; transform: scale(2.2); }\r\n}\r\n\r\n.tcw-status-dot.tcw-error {\r\n  background: var(--tcw-red);\r\n  box-shadow: 0 0 0 3px rgba(232, 80, 91, 0.2);\r\n}\r\n\r\n/* === Command Palette === */\r\n\r\n.tcw-cmd-palette {\r\n  position: fixed;\r\n  z-index: 102;\r\n  top: 18%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-xl);\r\n  width: 560px;\r\n  max-width: 92vw;\r\n  max-height: 62vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: var(--tcw-shadow-xl);\r\n  overflow: hidden;\r\n  backdrop-filter: blur(20px);\r\n  -webkit-backdrop-filter: blur(20px);\r\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\r\n}\r\n\r\n.tcw-cmd-header {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 14px 18px;\r\n  border-bottom: 1px solid var(--tcw-divider);\r\n  gap: 12px;\r\n}\r\n\r\n.tcw-cmd-icon {\r\n  font-size: 18px;\r\n  color: var(--tcw-text-muted);\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n.tcw-cmd-input {\r\n  flex: 1;\r\n  background: transparent;\r\n  border: none;\r\n  outline: none;\r\n  font-size: 14.5px;\r\n  font-family: inherit;\r\n  color: var(--tcw-text);\r\n  caret-color: var(--tcw-accent);\r\n  letter-spacing: -0.005em;\r\n}\r\n\r\n.tcw-cmd-input::placeholder {\r\n  color: var(--tcw-text-muted);\r\n}\r\n\r\n.tcw-cmd-hint {\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  font-family: var(--tcw-font-mono);\r\n  border: 1px solid var(--tcw-border);\r\n  background: var(--tcw-bg-surface);\r\n  padding: 3px 7px;\r\n  border-radius: 4px;\r\n  flex-shrink: 0;\r\n  box-shadow: inset 0 -1px 0 var(--tcw-border);\r\n}\r\n\r\n.tcw-cmd-list {\r\n  overflow-y: auto;\r\n  flex: 1;\r\n  padding: 6px;\r\n  max-height: 380px;\r\n}\r\n\r\n.tcw-cmd-category {\r\n  text-transform: uppercase;\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  letter-spacing: 0.09em;\r\n  padding: 10px 10px 4px;\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-cmd-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 9px 12px;\r\n  font-size: 13px;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  width: 100%;\r\n  border: none;\r\n  background: transparent;\r\n  font-family: inherit;\r\n  text-align: left;\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\r\n  gap: 10px;\r\n  border-radius: var(--tcw-radius);\r\n  letter-spacing: -0.005em;\r\n}\r\n\r\n.tcw-cmd-item:hover,\r\n.tcw-cmd-item.tcw-selected {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-cmd-item.tcw-selected {\r\n  box-shadow: inset 2px 0 0 var(--tcw-accent);\r\n}\r\n\r\n.tcw-cmd-item.tcw-active .tcw-cmd-item-label {\r\n  color: var(--tcw-accent);\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-cmd-item-label {\r\n  flex: 1;\r\n}\r\n\r\n.tcw-cmd-check {\r\n  color: var(--tcw-accent);\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n}\r\n\r\n.tcw-cmd-kbd {\r\n  font-size: 10px;\r\n  font-family: var(--tcw-font-mono);\r\n  color: var(--tcw-text-muted);\r\n  background: var(--tcw-bg-surface);\r\n  border: 1px solid var(--tcw-border);\r\n  padding: 2px 6px;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 -1px 0 var(--tcw-border);\r\n}\r\n\r\n.tcw-cmd-empty {\r\n  padding: 32px 16px;\r\n  text-align: center;\r\n  color: var(--tcw-text-muted);\r\n  font-size: 13px;\r\n}\r\n\r\n.tcw-cmd-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 18px;\r\n  padding: 10px 18px;\r\n  border-top: 1px solid var(--tcw-divider);\r\n  font-size: 11px;\r\n  color: var(--tcw-text-muted);\r\n  background: var(--tcw-bg-surface);\r\n}\r\n\r\n/* === Watchlist === */\r\n\r\n.tcw-watchlist {\r\n  width: 220px;\r\n  flex-shrink: 0;\r\n  background: var(--tcw-bg-surface);\r\n  border-left: 1px solid var(--tcw-border);\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  box-shadow: var(--tcw-shadow-sm);\r\n}\r\n\r\n.tcw-watchlist-header {\r\n  padding: 10px 14px;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.08em;\r\n  color: var(--tcw-text-muted);\r\n  border-bottom: 1px solid var(--tcw-divider);\r\n}\r\n\r\n.tcw-watchlist-list {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  padding: 4px 0;\r\n}\r\n\r\n.tcw-watchlist-row {\r\n  display: grid;\r\n  grid-template-columns: 1fr auto auto;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 8px 12px;\r\n  cursor: pointer;\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\r\n  border-left: 2px solid transparent;\r\n  outline: none;\r\n}\r\n\r\n.tcw-watchlist-row:hover {\r\n  background: var(--tcw-hover-bg);\r\n}\r\n\r\n.tcw-watchlist-row:focus-visible {\r\n  background: var(--tcw-hover-bg);\r\n  border-left-color: var(--tcw-accent);\r\n}\r\n\r\n.tcw-watchlist-row.tcw-watchlist-active {\r\n  background: var(--tcw-accent-soft);\r\n  border-left-color: var(--tcw-accent);\r\n}\r\n\r\n.tcw-watchlist-symbol {\r\n  font-size: 12.5px;\r\n  font-weight: 600;\r\n  color: var(--tcw-text);\r\n  letter-spacing: -0.005em;\r\n  white-space: nowrap;\r\n}\r\n\r\n.tcw-watchlist-spark {\r\n  width: 56px;\r\n  height: 22px;\r\n  align-self: center;\r\n}\r\n\r\n.tcw-watchlist-stats {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n  gap: 1px;\r\n  font-variant-numeric: tabular-nums;\r\n  font-family: var(--tcw-font-mono);\r\n}\r\n\r\n.tcw-watchlist-price {\r\n  font-size: 12px;\r\n  color: var(--tcw-text);\r\n  font-weight: 500;\r\n}\r\n\r\n.tcw-watchlist-change {\r\n  font-size: 10.5px;\r\n  color: var(--tcw-text-muted);\r\n  font-weight: 500;\r\n}\r\n\r\n.tcw-watchlist-change.tcw-up {\r\n  color: var(--tcw-green);\r\n}\r\n\r\n.tcw-watchlist-change.tcw-down {\r\n  color: var(--tcw-red);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .tcw-watchlist {\r\n    display: none;\r\n  }\r\n}\r\n\r\n/* === Toast === */\r\n\r\n.tcw-toast {\r\n  position: absolute;\r\n  bottom: 60px;\r\n  left: 50%;\r\n  transform: translate(-50%, 12px);\r\n  z-index: 40;\r\n  padding: 9px 14px;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border-strong);\r\n  border-radius: 9999px;\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  font-size: 12.5px;\r\n  font-weight: 500;\r\n  color: var(--tcw-text);\r\n  opacity: 0;\r\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out), transform var(--tcw-dur-normal) var(--tcw-ease-out);\r\n  pointer-events: none;\r\n  max-width: calc(100% - 32px);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  letter-spacing: -0.005em;\r\n}\r\n\r\n.tcw-toast.tcw-toast-in {\r\n  opacity: 1;\r\n  transform: translate(-50%, 0);\r\n}\r\n\r\n.tcw-toast-error {\r\n  border-color: var(--tcw-red);\r\n  color: var(--tcw-red);\r\n}\r\n\r\n/* === Replay scrubber === */\r\n\r\n.tcw-replay-bar {\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: 16px;\r\n  transform: translateX(-50%);\r\n  z-index: 25;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 6px 10px;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: 9999px;\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  backdrop-filter: blur(12px);\r\n  -webkit-backdrop-filter: blur(12px);\r\n  font-size: 12px;\r\n  color: var(--tcw-text);\r\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\r\n}\r\n\r\n.tcw-replay-btn {\r\n  width: 28px;\r\n  height: 28px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-dim);\r\n  border-radius: 9999px;\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\r\n}\r\n\r\n.tcw-replay-btn:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-replay-btn.tcw-replay-play {\r\n  background: var(--tcw-accent);\r\n  color: var(--tcw-accent-ink);\r\n  width: 32px;\r\n  height: 32px;\r\n  box-shadow: 0 0 0 3px var(--tcw-accent-glow);\r\n}\r\n\r\n.tcw-replay-btn.tcw-replay-play:hover {\r\n  background: var(--tcw-accent-hover);\r\n}\r\n\r\n.tcw-replay-scrubber {\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  width: 220px;\r\n  height: 4px;\r\n  background: var(--tcw-border-strong);\r\n  border-radius: 2px;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.tcw-replay-scrubber::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  width: 14px;\r\n  height: 14px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-accent);\r\n  border: 2px solid var(--tcw-bg-elevated);\r\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\r\n  cursor: pointer;\r\n}\r\n\r\n.tcw-replay-scrubber::-moz-range-thumb {\r\n  width: 14px;\r\n  height: 14px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-accent);\r\n  border: 2px solid var(--tcw-bg-elevated);\r\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\r\n  cursor: pointer;\r\n}\r\n\r\n.tcw-replay-progress {\r\n  font-size: 11px;\r\n  font-family: var(--tcw-font-mono);\r\n  color: var(--tcw-text-muted);\r\n  min-width: 64px;\r\n  text-align: center;\r\n  font-feature-settings: 'tnum';\r\n}\r\n\r\n.tcw-replay-speed {\r\n  padding: 4px 8px;\r\n  font-size: 11px;\r\n  font-family: var(--tcw-font-mono);\r\n  background: var(--tcw-bg-surface);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius);\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n}\r\n\r\n.tcw-replay-speed:hover {\r\n  border-color: var(--tcw-border-strong);\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .tcw-replay-scrubber {\r\n    width: 140px;\r\n  }\r\n  .tcw-replay-progress {\r\n    display: none;\r\n  }\r\n}\r\n\r\n/* === Hotkey sheet === */\r\n\r\n.tcw-hotkey-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 24px 32px;\r\n}\r\n\r\n.tcw-hotkey-section .tcw-settings-section-title {\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.tcw-hotkey-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 12px;\r\n  padding: 6px 0;\r\n  border-bottom: 1px solid var(--tcw-divider);\r\n}\r\n\r\n.tcw-hotkey-row:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n.tcw-hotkey-keys {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-hotkey-sep {\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n}\r\n\r\n.tcw-hotkey-label {\r\n  font-size: 12.5px;\r\n  color: var(--tcw-text-dim);\r\n  text-align: right;\r\n  letter-spacing: -0.005em;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .tcw-hotkey-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 18px;\r\n  }\r\n}\r\n\r\n/* === Scrollbar (subtle, premium feel) === */\r\n\r\n.tcw-dropdown::-webkit-scrollbar,\r\n.tcw-modal-body::-webkit-scrollbar,\r\n.tcw-cmd-list::-webkit-scrollbar {\r\n  width: 8px;\r\n  height: 8px;\r\n}\r\n\r\n.tcw-dropdown::-webkit-scrollbar-track,\r\n.tcw-modal-body::-webkit-scrollbar-track,\r\n.tcw-cmd-list::-webkit-scrollbar-track {\r\n  background: transparent;\r\n}\r\n\r\n.tcw-dropdown::-webkit-scrollbar-thumb,\r\n.tcw-modal-body::-webkit-scrollbar-thumb,\r\n.tcw-cmd-list::-webkit-scrollbar-thumb {\r\n  background: var(--tcw-border-strong);\r\n  border-radius: 4px;\r\n  border: 2px solid transparent;\r\n  background-clip: padding-box;\r\n}\r\n\r\n.tcw-dropdown::-webkit-scrollbar-thumb:hover,\r\n.tcw-modal-body::-webkit-scrollbar-thumb:hover,\r\n.tcw-cmd-list::-webkit-scrollbar-thumb:hover {\r\n  background: var(--tcw-text-muted);\r\n  background-clip: padding-box;\r\n  border: 2px solid transparent;\r\n}\r\n\r\n/* === Responsive === */\r\n\r\n@media (max-width: 768px) {\r\n  .tcw-toolbar {\r\n    padding: 0 4px;\r\n    height: 44px;            /* Apple HIG minimum touch target */\r\n  }\r\n  .tcw-toolbar-sep {\r\n    display: none;\r\n  }\r\n  .tcw-indicator-chips {\r\n    display: none;\r\n  }\r\n  .tcw-btn,\r\n  .tcw-dropdown-trigger {\r\n    padding: 10px 12px;      /* fatter tap target */\r\n    font-size: 13px;\r\n  }\r\n  .tcw-btn-icon {\r\n    width: 40px;\r\n    height: 40px;\r\n  }\r\n  .tcw-sidebar {\r\n    width: 44px;\r\n  }\r\n  .tcw-sidebar-btn {\r\n    width: 40px;\r\n    height: 40px;\r\n  }\r\n  .tcw-modal,\r\n  .tcw-cmd-palette {\r\n    width: 94vw;\r\n    border-radius: var(--tcw-radius-lg);\r\n  }\r\n\r\n  /* Hide the right-side watchlist on tablets too — already declared but\r\n   * grouped here for clarity. */\r\n  .tcw-watchlist {\r\n    display: none;\r\n  }\r\n\r\n  /* Replay scrubber compact mode */\r\n  .tcw-replay-scrubber {\r\n    width: 120px;\r\n  }\r\n  .tcw-replay-progress {\r\n    display: none;\r\n  }\r\n}\r\n\r\n/* === Mobile bottom-sheet pattern ===\r\n * On phones, swap floating-centered modals for full-width sheets that slide\r\n * up from the bottom. Bigger hit targets, no awkward off-screen clipping,\r\n * matches how every modern iOS/Android app handles overflow UI.\r\n */\r\n@media (max-width: 640px) {\r\n  .tcw-modal,\r\n  .tcw-cmd-palette {\r\n    top: auto;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    transform: none;\r\n    width: 100vw;\r\n    max-width: 100vw;\r\n    max-height: 92vh;\r\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\r\n    border-bottom: none;\r\n    /* Grab handle */\r\n    padding-top: 8px;\r\n  }\r\n\r\n  /* Visual \"grab handle\" affordance — a short pill at the top of every sheet */\r\n  .tcw-modal::before,\r\n  .tcw-cmd-palette::before {\r\n    content: '';\r\n    display: block;\r\n    width: 36px;\r\n    height: 4px;\r\n    border-radius: 2px;\r\n    background: var(--tcw-border-strong);\r\n    margin: 0 auto 8px;\r\n    opacity: 0.7;\r\n  }\r\n\r\n  /* Reuse the existing modal-in animation but slide from below instead of\r\n   * popping from center, so the entrance reads as a sheet, not a dialog. */\r\n  @keyframes tcw-modal-in {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  .tcw-modal,\r\n  .tcw-cmd-palette {\r\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\r\n  }\r\n\r\n  /* Safe-area-aware footer padding for iPhone notch / home indicator */\r\n  .tcw-modal-footer,\r\n  .tcw-cmd-footer {\r\n    padding-bottom: max(14px, env(safe-area-inset-bottom));\r\n  }\r\n\r\n  /* Larger tap targets inside sheets */\r\n  .tcw-modal-tab {\r\n    padding: 14px 16px;\r\n  }\r\n  .tcw-cmd-item {\r\n    padding: 12px 14px;\r\n    font-size: 14px;\r\n  }\r\n  .tcw-dropdown-item {\r\n    padding: 12px 12px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  /* Hotkey sheet — single column on phones */\r\n  .tcw-hotkey-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n\r\n/* === Price alerts panel === */\r\n\r\n.tcw-alerts-panel {\r\n  position: absolute;\r\n  top: 50px;\r\n  right: 12px;\r\n  z-index: 40;\r\n  width: 300px;\r\n  max-width: calc(100vw - 24px);\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border-strong);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  overflow: hidden;\r\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\r\n}\r\n\r\n@keyframes tcw-alerts-in {\r\n  from { opacity: 0; transform: translateY(-6px) scale(0.98); }\r\n  to { opacity: 1; transform: none; }\r\n}\r\n\r\n.tcw-alerts-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 10px 12px;\r\n  font-weight: 600;\r\n  font-size: 13px;\r\n  color: var(--tcw-text);\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n\r\n.tcw-alerts-close {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-alerts-close:hover {\r\n  background: var(--tcw-bg-surface);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-alerts-form {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 8px;\r\n  padding: 12px;\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n\r\n.tcw-alerts-form input,\r\n.tcw-alerts-form select {\r\n  width: 100%;\r\n  min-width: 0;\r\n  box-sizing: border-box;\r\n  height: 32px;\r\n  padding: 0 8px;\r\n  font-size: 12px;\r\n  color: var(--tcw-text);\r\n  background: var(--tcw-bg-surface);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-sm);\r\n  outline: none;\r\n}\r\n.tcw-alerts-form input:focus,\r\n.tcw-alerts-form select:focus {\r\n  border-color: var(--tcw-accent);\r\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\r\n}\r\n.tcw-alerts-message,\r\n.tcw-alerts-source {\r\n  grid-column: 1 / -1;\r\n}\r\n\r\n.tcw-alerts-add {\r\n  grid-column: 1 / -1;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 6px;\r\n  height: 34px;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  color: var(--tcw-accent-ink);\r\n  background: var(--tcw-accent);\r\n  border: none;\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-alerts-add:hover {\r\n  background: var(--tcw-accent-hover);\r\n}\r\n\r\n.tcw-alerts-list {\r\n  max-height: 260px;\r\n  overflow-y: auto;\r\n  padding: 6px;\r\n}\r\n\r\n.tcw-alerts-empty {\r\n  padding: 18px 12px;\r\n  text-align: center;\r\n  font-size: 12px;\r\n  color: var(--tcw-text-muted);\r\n  line-height: 1.5;\r\n}\r\n\r\n.tcw-alerts-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 8px;\r\n  padding: 8px 8px;\r\n  border-radius: var(--tcw-radius-sm);\r\n}\r\n.tcw-alerts-row:hover {\r\n  background: var(--tcw-bg-surface);\r\n}\r\n.tcw-alerts-triggered {\r\n  background: var(--tcw-accent-soft);\r\n}\r\n\r\n.tcw-alerts-info {\r\n  min-width: 0;\r\n}\r\n.tcw-alerts-row-main {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  color: var(--tcw-text);\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.tcw-alerts-row-note {\r\n  margin-top: 2px;\r\n  font-size: 11px;\r\n  color: var(--tcw-text-muted);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.tcw-alerts-badge {\r\n  font-size: 9px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n  padding: 2px 5px;\r\n  border-radius: 999px;\r\n  color: var(--tcw-accent);\r\n  background: var(--tcw-accent-soft);\r\n}\r\n\r\n.tcw-alerts-del {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-alerts-del:hover {\r\n  background: var(--tcw-red-soft);\r\n  color: var(--tcw-red);\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .tcw-alerts-panel {\r\n    top: auto;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    width: 100vw;\r\n    max-width: 100vw;\r\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\r\n  }\r\n  .tcw-alerts-list {\r\n    max-height: 40vh;\r\n    padding-bottom: max(8px, env(safe-area-inset-bottom));\r\n  }\r\n}\r\n\r\n/* === Data Window === */\r\n\r\n.tcw-datawin {\r\n  position: absolute;\r\n  top: 50px;\r\n  right: 12px;\r\n  z-index: 38;\r\n  width: 200px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border-strong);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  overflow: hidden;\r\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\r\n}\r\n.tcw-datawin-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 9px 12px;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  color: var(--tcw-text);\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n.tcw-datawin-close {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 24px;\r\n  height: 24px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-datawin-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\r\n.tcw-datawin-body { padding: 6px 4px; max-height: 360px; overflow-y: auto; }\r\n.tcw-datawin-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--tcw-text-muted); }\r\n.tcw-datawin-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 10px;\r\n  padding: 3px 8px;\r\n  font-size: 12px;\r\n}\r\n.tcw-datawin-label { color: var(--tcw-text-muted); }\r\n.tcw-datawin-value { color: var(--tcw-text); font-variant-numeric: tabular-nums; font-weight: 600; }\r\n.tcw-datawin-value.tcw-up { color: var(--tcw-green); }\r\n.tcw-datawin-value.tcw-down { color: var(--tcw-red); }\r\n.tcw-datawin-sub {\r\n  margin: 6px 8px 2px;\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n  color: var(--tcw-text-muted);\r\n  border-top: 1px solid var(--tcw-border);\r\n  padding-top: 6px;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .tcw-datawin { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\r\n}\r\n\r\n/* === Depth-of-market ladder === */\r\n\r\n.tcw-ladder {\r\n  position: absolute;\r\n  top: 50px;\r\n  right: 12px;\r\n  z-index: 41;\r\n  width: 240px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border-strong);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  overflow: hidden;\r\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\r\n}\r\n.tcw-ladder-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: var(--tcw-text);\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n.tcw-ladder-close {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-ladder-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\r\n.tcw-ladder-cols {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  padding: 4px 0;\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n  color: var(--tcw-text-muted);\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n.tcw-ladder-cols span { text-align: center; }\r\n.tcw-ladder-body { max-height: 360px; overflow-y: auto; }\r\n.tcw-ladder-empty { padding: 18px; text-align: center; font-size: 12px; color: var(--tcw-text-muted); }\r\n\r\n.tcw-ladder-row {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  height: 22px;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.tcw-ladder-cell {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background: transparent;\r\n  font-size: 11px;\r\n  cursor: pointer;\r\n  font-variant-numeric: tabular-nums;\r\n  overflow: hidden;\r\n}\r\n.tcw-ladder-cell:disabled { cursor: default; }\r\n/* Depth bar grows from the centre column outward. */\r\n.tcw-ladder-cell::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 1px; bottom: 1px;\r\n  width: var(--w, 0%);\r\n}\r\n.tcw-ladder-bid { justify-content: flex-end; padding-right: 8px; color: var(--tcw-green); }\r\n.tcw-ladder-bid::before { right: 0; background: var(--tcw-green-soft); }\r\n.tcw-ladder-bid span, .tcw-ladder-bid { position: relative; }\r\n.tcw-ladder-ask { justify-content: flex-start; padding-left: 8px; color: var(--tcw-red); }\r\n.tcw-ladder-ask::before { left: 0; background: var(--tcw-red-soft); }\r\n.tcw-ladder-cell:not(:disabled):hover::before { opacity: 0.7; filter: brightness(1.4); }\r\n.tcw-ladder-cell > * { position: relative; }\r\n.tcw-ladder-price {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: var(--tcw-text-dim);\r\n  border-left: 1px solid var(--tcw-border);\r\n  border-right: 1px solid var(--tcw-border);\r\n}\r\n.tcw-ladder-price.tcw-ask { color: var(--tcw-red); }\r\n.tcw-ladder-price.tcw-bid { color: var(--tcw-green); }\r\n\r\n@media (max-width: 640px) {\r\n  .tcw-ladder { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\r\n  .tcw-ladder-body { max-height: 45vh; padding-bottom: max(0px, env(safe-area-inset-bottom)); }\r\n}\r\n\r\n/* === Bracket order placement === */\r\n\r\n.tcw-btn-long:hover { color: var(--tcw-green) !important; }\r\n.tcw-btn-short:hover { color: var(--tcw-red) !important; }\r\n\r\n.tcw-bracket-bar {\r\n  position: absolute;\r\n  top: 52px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 45;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 7px 8px 7px 14px;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border-strong);\r\n  border-radius: 999px;\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\r\n}\r\n.tcw-bracket-label {\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n}\r\n.tcw-bracket-label[data-side='buy'] { color: var(--tcw-green); }\r\n.tcw-bracket-label[data-side='sell'] { color: var(--tcw-red); }\r\n.tcw-bracket-hint {\r\n  font-size: 11px;\r\n  color: var(--tcw-text-muted);\r\n}\r\n.tcw-bracket-cancel, .tcw-bracket-confirm {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  height: 30px;\r\n  padding: 0 12px;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  border: none;\r\n  border-radius: 999px;\r\n  cursor: pointer;\r\n}\r\n.tcw-bracket-cancel {\r\n  color: var(--tcw-text-dim);\r\n  background: var(--tcw-bg-surface);\r\n}\r\n.tcw-bracket-cancel:hover { color: var(--tcw-text); }\r\n.tcw-bracket-confirm {\r\n  color: var(--tcw-accent-ink);\r\n  background: var(--tcw-accent);\r\n}\r\n.tcw-bracket-confirm:hover { background: var(--tcw-accent-hover); }\r\n\r\n@media (max-width: 640px) {\r\n  .tcw-bracket-bar { width: calc(100vw - 24px); justify-content: space-between; }\r\n  .tcw-bracket-hint { display: none; }\r\n}\r\n\r\n/* === Drawing style + templates popover === */\r\n\r\n.tcw-style-panel {\r\n  position: absolute;\r\n  bottom: 12px;\r\n  left: 52px;\r\n  z-index: 40;\r\n  width: 220px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 12px;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border-strong);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\r\n}\r\n.tcw-style-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  color: var(--tcw-text);\r\n}\r\n.tcw-style-close {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 24px;\r\n  height: 24px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-style-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\r\n\r\n.tcw-style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\r\n.tcw-style-swatch {\r\n  width: 18px;\r\n  height: 18px;\r\n  border-radius: 50%;\r\n  border: 1px solid var(--tcw-border-strong);\r\n  cursor: pointer;\r\n  padding: 0;\r\n}\r\n.tcw-style-swatch.tcw-on { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\r\n.tcw-style-picker {\r\n  width: 22px;\r\n  height: 22px;\r\n  padding: 0;\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-sm);\r\n  background: transparent;\r\n  cursor: pointer;\r\n}\r\n.tcw-style-width, .tcw-style-dash {\r\n  flex: 1;\r\n  min-width: 0;\r\n  height: 26px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: var(--tcw-bg-surface);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-sm);\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  font-size: 11px;\r\n}\r\n.tcw-style-width span { width: 16px; background: currentColor; border-radius: 2px; }\r\n.tcw-style-width.tcw-on, .tcw-style-dash.tcw-on {\r\n  border-color: var(--tcw-accent);\r\n  color: var(--tcw-accent);\r\n}\r\n\r\n.tcw-style-subhead {\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n  color: var(--tcw-text-muted);\r\n  margin-top: 2px;\r\n}\r\n.tcw-style-save { display: flex; gap: 6px; }\r\n.tcw-style-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  height: 28px;\r\n  padding: 0 8px;\r\n  font-size: 12px;\r\n  color: var(--tcw-text);\r\n  background: var(--tcw-bg-surface);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-sm);\r\n  outline: none;\r\n}\r\n.tcw-style-name:focus { border-color: var(--tcw-accent); }\r\n.tcw-style-savebtn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  padding: 0 10px;\r\n  height: 28px;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  color: var(--tcw-accent-ink);\r\n  background: var(--tcw-accent);\r\n  border: none;\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-style-savebtn:hover { background: var(--tcw-accent-hover); }\r\n\r\n.tcw-style-templates { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }\r\n.tcw-style-empty { font-size: 11px; color: var(--tcw-text-muted); padding: 4px 0; }\r\n.tcw-style-template { display: flex; align-items: center; gap: 4px; }\r\n.tcw-style-apply {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 7px;\r\n  padding: 5px 7px;\r\n  font-size: 12px;\r\n  color: var(--tcw-text);\r\n  background: transparent;\r\n  border: none;\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n  text-align: left;\r\n}\r\n.tcw-style-apply:hover { background: var(--tcw-bg-surface); }\r\n.tcw-style-tdot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }\r\n.tcw-style-tdel {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-style-tdel:hover { background: var(--tcw-red-soft); color: var(--tcw-red); }\r\n\r\n/* === Settings range slider === */\r\n\r\n.tcw-settings-range {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n.tcw-settings-range input[type='range'] {\r\n  width: 110px;\r\n  accent-color: var(--tcw-accent);\r\n  cursor: pointer;\r\n}\r\n.tcw-settings-range-val {\r\n  min-width: 38px;\r\n  text-align: right;\r\n  font-size: 12px;\r\n  font-variant-numeric: tabular-nums;\r\n  color: var(--tcw-text-dim);\r\n}\r\n\r\n/* === Indicator settings dialog === */\r\n\r\n.tcw-modal-narrow {\r\n  max-width: 360px;\r\n}\r\n.tcw-indi-input {\r\n  width: 110px;\r\n  height: 30px;\r\n  padding: 0 8px;\r\n  font-size: 12px;\r\n  color: var(--tcw-text);\r\n  background: var(--tcw-bg-surface);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-sm);\r\n  outline: none;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.tcw-indi-input:focus {\r\n  border-color: var(--tcw-accent);\r\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\r\n}\r\n.tcw-indi-color {\r\n  width: 36px;\r\n  height: 28px;\r\n  padding: 2px;\r\n  background: var(--tcw-bg-surface);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n\r\n/* === Object tree panel === */\r\n\r\n.tcw-tree-panel {\r\n  position: absolute;\r\n  top: 50px;\r\n  right: 12px;\r\n  z-index: 39;\r\n  width: 280px;\r\n  max-width: calc(100vw - 24px);\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border-strong);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: var(--tcw-shadow-lg);\r\n  overflow: hidden;\r\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\r\n}\r\n\r\n.tcw-tree-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 10px 12px;\r\n  font-weight: 600;\r\n  font-size: 13px;\r\n  color: var(--tcw-text);\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n.tcw-tree-close {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-tree-close:hover {\r\n  background: var(--tcw-bg-surface);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-tree-section {\r\n  padding: 6px;\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n.tcw-tree-section:last-child {\r\n  border-bottom: none;\r\n}\r\n.tcw-tree-section-head {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 6px 8px 4px;\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n  color: var(--tcw-text-muted);\r\n}\r\n.tcw-tree-add {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 22px;\r\n  height: 22px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-tree-add:hover {\r\n  background: var(--tcw-accent-soft);\r\n  color: var(--tcw-accent);\r\n}\r\n.tcw-tree-dot {\r\n  flex-shrink: 0;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n}\r\n.tcw-tree-list {\r\n  max-height: 200px;\r\n  overflow-y: auto;\r\n}\r\n\r\n.tcw-tree-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 8px;\r\n  padding: 6px 8px;\r\n  border-radius: var(--tcw-radius-sm);\r\n}\r\n.tcw-tree-row:hover {\r\n  background: var(--tcw-bg-surface);\r\n}\r\n.tcw-tree-hidden .tcw-tree-name {\r\n  opacity: 0.5;\r\n}\r\n.tcw-tree-name {\r\n  min-width: 0;\r\n  font-size: 12px;\r\n  color: var(--tcw-text);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.tcw-tree-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2px;\r\n  flex-shrink: 0;\r\n}\r\n.tcw-tree-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  border-radius: var(--tcw-radius-sm);\r\n  cursor: pointer;\r\n}\r\n.tcw-tree-btn:hover {\r\n  background: var(--tcw-bg-elevated);\r\n  color: var(--tcw-text);\r\n}\r\n.tcw-tree-btn.tcw-tree-on {\r\n  color: var(--tcw-accent);\r\n}\r\n.tcw-tree-btn.tcw-tree-del:hover {\r\n  background: var(--tcw-red-soft);\r\n  color: var(--tcw-red);\r\n}\r\n.tcw-tree-empty {\r\n  padding: 8px;\r\n  font-size: 12px;\r\n  color: var(--tcw-text-muted);\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .tcw-tree-panel {\r\n    top: auto;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    width: 100vw;\r\n    max-width: 100vw;\r\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\r\n  }\r\n  .tcw-tree-list {\r\n    max-height: 30vh;\r\n  }\r\n  .tcw-tree-section:last-child {\r\n    padding-bottom: max(6px, env(safe-area-inset-bottom));\r\n  }\r\n}\r\n\r\n/* === Reduced motion === */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .tcw-root *,\r\n  .tcw-root *::before,\r\n  .tcw-root *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n}\r\n", m = 0, h = "tcw-styles";
-function g() {
-	if (m++, m > 1 || document.getElementById(h)) return;
+}, m = "/* === TradeCanvas Widget — Premium Styles === */\n\n/*\n * The HTML `hidden` attribute only sets `display: none` via the UA stylesheet,\n * which any author `display` rule (e.g. `.tcw-alerts-panel { display: flex }`)\n * silently overrides — leaving panels stuck open when JS sets `el.hidden = true`.\n * Force `hidden` to win for every namespaced widget element. Scoped to `tcw-`\n * so it never touches the host page.\n */\n[class^=\"tcw-\"][hidden],\n[class*=\" tcw-\"][hidden] {\n  display: none !important;\n}\n\n/* Control tooltips (WidgetTooltip): quick to appear, slide in from the control. */\n.tcw-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 60;\n  max-width: 240px;\n  padding: 5px 8px;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);\n  width: max-content;\n  font-size: 11.5px;\n  font-weight: 500;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transform: translate(var(--tcw-tip-dx, 0), var(--tcw-tip-dy, 0));\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s linear 110ms;\n}\n\n.tcw-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n  transform: none;\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s;\n}\n\n/* The modal portal: carries the tokens and fonts, but no box of its own. */\n.tcw-root.tcw-portal {\n  display: contents;\n}\n\n/* Fullscreen: the root fills the screen; the chart resizes with it. */\n.tcw-root:fullscreen {\n  width: 100vw;\n  height: 100vh;\n}\n\n.tcw-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;\n  font-feature-settings: 'cv11', 'ss01', 'ss03';\n  font-size: 13px;\n  line-height: 1.4;\n  color: #d9dde4;\n  background: #080b10;\n  position: relative;\n  overflow: hidden;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  /* --- Dark theme tokens (default) --- */\n  --tcw-bg: #080b10;\n  --tcw-bg-surface: #0c1016;\n  --tcw-bg-elevated: #141922;\n  --tcw-bg-overlay: rgba(20, 25, 34, 0.5);\n  --tcw-border: #1f2630;\n  --tcw-border-strong: #2a323e;\n  --tcw-tooltip-bg: #262e3a;\n  --tcw-tooltip-fg: #eef0f4;\n  --tcw-text: #e7e9ee;\n  --tcw-text-dim: #aab1bd;\n  --tcw-text-muted: #758091;\n\n  /* TradeCanvas amber. --tcw-accent-ink is the text colour on an accent fill. */\n  --tcw-accent: #f2a93b;\n  --tcw-accent-hover: #f5b95c;\n  --tcw-accent-ink: #1a1204;\n  --tcw-accent-soft: rgba(242, 169, 59, 0.14);\n  --tcw-accent-glow: rgba(242, 169, 59, 0.22);\n  --tcw-accent-line: rgba(242, 169, 59, 0.55);\n\n  --tcw-red: #e8505b;\n  --tcw-red-soft: rgba(232, 80, 91, 0.12);\n  --tcw-green: #1fa874;\n  --tcw-green-soft: rgba(31, 168, 116, 0.12);\n  --tcw-amber: #ff9f43;\n\n  --tcw-hover-bg: rgba(255, 255, 255, 0.05);\n  --tcw-active-bg: rgba(255, 255, 255, 0.08);\n  --tcw-divider: rgba(255, 255, 255, 0.06);\n\n  /* Motion */\n  --tcw-ease: cubic-bezier(0.2, 0, 0, 1);\n  --tcw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --tcw-dur-fast: 120ms;\n  --tcw-dur-normal: 180ms;\n  --tcw-dur-slow: 260ms;\n\n  /* Shape */\n  --tcw-radius-sm: 4px;\n  --tcw-radius: 6px;\n  --tcw-radius-lg: 10px;\n  --tcw-radius-xl: 14px;\n\n  /* Elevation */\n  --tcw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);\n  --tcw-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35);\n  --tcw-ring: 0 0 0 2px rgba(242, 169, 59, 0.45);\n\n  /* Type */\n  --tcw-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', ui-monospace, monospace;\n}\n\n.tcw-root[data-tcw-theme='light'] {\n  color: #0c1016;\n  background: #fcfcfd;\n\n  --tcw-bg: #fcfcfd;\n  --tcw-bg-surface: #ffffff;\n  --tcw-bg-elevated: #ffffff;\n  --tcw-bg-overlay: rgba(255, 255, 255, 0.75);\n  --tcw-border: #e3e6eb;\n  --tcw-border-strong: #d2d6dd;\n  --tcw-tooltip-bg: #1f2630;\n  --tcw-tooltip-fg: #f4f5f8;\n  --tcw-text: #0c1016;\n  --tcw-text-dim: #3f4754;\n  --tcw-text-muted: #626a77;\n\n  /* Deeper amber: readable as text on the light ground, white text readable on it. */\n  --tcw-accent: #a0610a;\n  --tcw-accent-hover: #874f07;\n  --tcw-accent-ink: #ffffff;\n  --tcw-accent-soft: rgba(160, 97, 10, 0.10);\n  --tcw-accent-glow: rgba(160, 97, 10, 0.16);\n  --tcw-accent-line: rgba(160, 97, 10, 0.45);\n  --tcw-ring: 0 0 0 2px rgba(160, 97, 10, 0.4);\n\n  /* Darker semantic colours: used as text on white. */\n  --tcw-red: #c42f3e;\n  --tcw-red-soft: rgba(196, 47, 62, 0.10);\n  --tcw-green: #0b7d50;\n  --tcw-green-soft: rgba(11, 125, 80, 0.10);\n\n  --tcw-hover-bg: rgba(0, 0, 0, 0.04);\n  --tcw-active-bg: rgba(160, 97, 10, 0.08);\n  --tcw-divider: rgba(0, 0, 0, 0.06);\n\n  --tcw-shadow-sm: 0 1px 2px rgba(20, 28, 56, 0.05);\n  --tcw-shadow-md: 0 4px 12px rgba(20, 28, 56, 0.08), 0 1px 3px rgba(20, 28, 56, 0.04);\n  --tcw-shadow-lg: 0 12px 36px rgba(20, 28, 56, 0.14), 0 4px 12px rgba(20, 28, 56, 0.08);\n  --tcw-shadow-xl: 0 24px 64px rgba(20, 28, 56, 0.18), 0 12px 24px rgba(20, 28, 56, 0.1);\n}\n\n/* === Toolbar === */\n\n.tcw-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 10px;\n  height: 44px;\n  border-bottom: 1px solid var(--tcw-border);\n  background:\n    linear-gradient(180deg, var(--tcw-bg-elevated) 0%, var(--tcw-bg-surface) 100%);\n  flex-shrink: 0;\n  position: relative;\n  z-index: 20;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-toolbar-symbol {\n  font-size: 14px;\n  font-weight: 650;\n  color: var(--tcw-text);\n  padding: 6px 12px;\n  white-space: nowrap;\n  letter-spacing: -0.015em;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  border-radius: var(--tcw-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-toolbar-symbol:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-toolbar-sep {\n  width: 1px;\n  height: 22px;\n  background: var(--tcw-border);\n  flex-shrink: 0;\n  margin: 0 4px;\n}\n\n.tcw-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 0 4px;\n}\n\n.tcw-toolbar-spacer {\n  flex: 1;\n}\n\n.tcw-btn {\n  padding: 6px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n  letter-spacing: -0.005em;\n}\n\n.tcw-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn:active {\n  transform: translateY(0.5px);\n}\n\n.tcw-btn.tcw-active {\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  font-weight: 600;\n  box-shadow: inset 0 0 0 1px var(--tcw-accent-line);\n}\n\n.tcw-btn:focus-visible,\n.tcw-btn-icon:focus-visible,\n.tcw-sidebar-btn:focus-visible,\n.tcw-dropdown-trigger:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-btn-icon {\n  width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  line-height: 1;\n  position: relative;\n}\n\n.tcw-btn-icon:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn-icon svg {\n  display: block;\n}\n\n.tcw-badge-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  padding: 1px 5px;\n  border-radius: 9px;\n  font-family: var(--tcw-font-mono);\n}\n\n/* === Dropdown === */\n\n.tcw-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.tcw-dropdown-trigger:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dropdown {\n  position: absolute;\n  top: 100%;\n  margin-top: 6px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  z-index: 50;\n  padding: 6px;\n  max-height: 420px;\n  overflow-y: auto;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-pop-in {\n  from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.tcw-dropdown-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 7px 10px;\n  font-size: 12.5px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  width: 100%;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-align: left;\n  border-radius: var(--tcw-radius-sm);\n  gap: 12px;\n}\n\n.tcw-dropdown-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* A menu row led by an icon (chart types): icon then label, not spread apart. */\n.tcw-dropdown-item--icon {\n  justify-content: flex-start;\n  gap: 10px;\n}\n\n.tcw-dropdown-item svg,\n.tcw-flyout-item svg {\n  flex-shrink: 0;\n}\n\n/* The drawing-group button's icon holder: a plain box for the swapped SVG. */\n.tcw-sidebar-icon {\n  display: inline-flex;\n}\n\n.tcw-dropdown-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: 600;\n}\n\n/* Timeframe menu: pick on the left, pin (star) on the right. */\n.tcw-tf-more {\n  padding: 6px 5px;\n}\n\n.tcw-tf-more svg {\n  display: block;\n}\n\n.tcw-tf-row {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.tcw-tf-row .tcw-dropdown-item {\n  flex: 1;\n  min-width: 0;\n}\n\n.tcw-tf-star {\n  display: inline-grid;\n  place-items: center;\n  width: 26px;\n  height: 26px;\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-star:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-tf-star.tcw-active {\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-star.tcw-active svg {\n  fill: currentColor;\n}\n\n.tcw-tf-star:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-dropdown-label {\n  text-transform: uppercase;\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  letter-spacing: 0.08em;\n  padding: 8px 10px 4px;\n  font-weight: 600;\n}\n\n.tcw-dropdown-divider {\n  border-top: 1px solid var(--tcw-divider);\n  margin: 6px 4px;\n}\n\n.tcw-tag {\n  font-size: 10px;\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--tcw-hover-bg);\n  letter-spacing: 0.02em;\n}\n\n/* === Body === */\n\n.tcw-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n\n.tcw-chart-container {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n/* === Loading overlay (candle skeleton) === */\n\n.tcw-loading-overlay {\n  /* Uses a modifier class rather than the `hidden` attribute — the global\n     `[hidden] { display: none !important }` rule above would cut the\n     opacity transition off before it can play. */\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-slow) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-loading-overlay--hidden {\n  opacity: 0;\n}\n\n.tcw-loading-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n  padding: 22px 26px 20px;\n  border: 1px solid transparent;\n  border-radius: var(--tcw-radius-lg);\n}\n\n/* A slow switch: the previous chart stays readable underneath, dimmed, so the\n   click visibly registered without blanking the screen. */\n.tcw-loading-overlay--veil {\n  background: color-mix(in srgb, var(--tcw-bg) 55%, transparent);\n}\n\n.tcw-loading-overlay--veil .tcw-loading-card {\n  background: var(--tcw-bg-elevated);\n  border-color: var(--tcw-border);\n  box-shadow: var(--tcw-shadow-lg);\n}\n\n.tcw-loading-candles {\n  position: relative;\n  display: flex;\n  gap: 7px;\n  height: 64px;\n}\n\n/* One candle: the element is the wick's column, ::before the wick, ::after the body. */\n.tcw-loading-candle {\n  position: relative;\n  width: 8px;\n  height: 100%;\n  color: var(--tcw-red);\n  opacity: 0.28;\n  animation: tcw-candle-light 1.6s var(--tcw-ease) infinite;\n  animation-delay: var(--tcw-delay, 0ms);\n}\n\n.tcw-loading-candle--up { color: var(--tcw-green); }\n\n.tcw-loading-candle::before,\n.tcw-loading-candle::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  background: currentColor;\n  transform: translateX(-50%);\n}\n\n.tcw-loading-candle::before {\n  top: var(--tcw-wick-top);\n  width: 1.5px;\n  height: var(--tcw-wick-h);\n}\n\n.tcw-loading-candle::after {\n  top: var(--tcw-body-top);\n  width: 8px;\n  height: var(--tcw-body-h);\n  border-radius: 1.5px;\n}\n\n/* Each candle brightens and lifts slightly in turn, left to right. */\n@keyframes tcw-candle-light {\n  0%, 55%, 100% { opacity: 0.28; transform: translateY(0); }\n  20% { opacity: 1; transform: translateY(-2px); }\n}\n\n.tcw-loading-track {\n  position: relative;\n  width: 100%;\n  min-width: 88px;\n  height: 2px;\n  border-radius: 1px;\n  background: var(--tcw-border);\n  overflow: hidden;\n}\n\n.tcw-loading-track > span {\n  position: absolute;\n  inset: 0;\n  width: 40%;\n  border-radius: 1px;\n  background: linear-gradient(90deg, transparent, var(--tcw-accent), transparent);\n  animation: tcw-loading-sweep 1.6s var(--tcw-ease) infinite;\n}\n\n@keyframes tcw-loading-sweep {\n  from { transform: translateX(-100%); }\n  to { transform: translateX(250%); }\n}\n\n/* The status text is announced, not shown — the candles say \"loading\". */\n.tcw-loading-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.tcw-loading-overlay--error .tcw-loading-candles,\n.tcw-loading-overlay--error .tcw-loading-track {\n  display: none;\n}\n\n/* A failure is shown: why the chart is empty and that a retry is running. */\n.tcw-loading-overlay--error .tcw-loading-label {\n  position: static;\n  width: auto;\n  height: auto;\n  overflow: visible;\n  clip-path: none;\n  white-space: normal;\n  max-width: 320px;\n  text-align: center;\n  color: var(--tcw-red);\n  font-size: 13px;\n}\n\n/* Reduced motion: nothing slides or lifts, but the candles still glow in\n   turn and the track breathes, so the wait never looks frozen. */\n@media (prefers-reduced-motion: reduce) {\n  .tcw-loading-candle {\n    animation: tcw-candle-glow 2.4s ease-in-out infinite;\n    animation-delay: var(--tcw-delay, 0ms);\n  }\n  .tcw-loading-track > span {\n    width: 100%;\n    background: var(--tcw-accent);\n    animation: tcw-loading-breathe 2.4s ease-in-out infinite;\n  }\n}\n\n@keyframes tcw-candle-glow {\n  0%, 60%, 100% { opacity: 0.28; }\n  25% { opacity: 0.9; }\n}\n\n@keyframes tcw-loading-breathe {\n  0%, 100% { opacity: 0.15; }\n  50% { opacity: 0.7; }\n}\n\n/* === On-chart indicator legend (WidgetIndicatorLegend) === */\n\n.tcw-ind-legend {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1px;\n  max-width: calc(100% - 140px);\n  pointer-events: none;\n}\n\n.tcw-ind-legend--collapsed > .tcw-ind-legend-row {\n  display: none;\n}\n\n.tcw-ind-legend-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  max-width: 100%;\n  padding: 0 4px;\n  border-radius: var(--tcw-radius-sm);\n  font-size: 11.5px;\n  line-height: 19px;\n  font-feature-settings: 'tnum';\n  white-space: nowrap;\n  color: var(--tcw-text-dim);\n  pointer-events: auto;\n  cursor: default;\n  /* A narrow pane: the values shrink first, then the row is clipped. */\n  overflow: hidden;\n}\n\n/* A pane's indicator: at the top of its pane, where the canvas title was. */\n.tcw-ind-legend-row--pane {\n  position: absolute;\n  z-index: 3;\n}\n\n.tcw-ind-legend-row:hover,\n.tcw-ind-legend-row:focus-within {\n  background: color-mix(in srgb, var(--tcw-bg-elevated) 90%, transparent);\n  box-shadow: 0 0 0 1px var(--tcw-border);\n}\n\n.tcw-ind-legend-name {\n  padding: 0;\n  border: none;\n  background: none;\n  font: inherit;\n  font-weight: 600;\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-name:hover {\n  color: var(--tcw-accent);\n}\n\n.tcw-ind-legend-values {\n  display: inline-flex;\n  gap: 7px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.tcw-ind-legend-row--hidden .tcw-ind-legend-name,\n.tcw-ind-legend-row--hidden .tcw-ind-legend-values {\n  opacity: 0.45;\n}\n\n/* Show / settings / remove: on hover or keyboard focus (always on touch). */\n.tcw-ind-legend-actions {\n  display: none;\n  gap: 1px;\n  margin-left: -2px;\n}\n\n.tcw-ind-legend-row:hover .tcw-ind-legend-actions,\n.tcw-ind-legend-row:focus-within .tcw-ind-legend-actions {\n  display: inline-flex;\n}\n\n@media (hover: none) {\n  .tcw-ind-legend-actions {\n    display: inline-flex;\n  }\n\n  /* Finger-sized targets. */\n  .tcw-ind-legend-act,\n  .tcw-ind-legend-toggle {\n    min-width: 28px;\n    min-height: 24px;\n  }\n}\n\n.tcw-ind-legend-act {\n  display: inline-grid;\n  place-items: center;\n  width: 20px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-act:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-act[data-act='remove']:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ind-legend-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  margin-top: 1px;\n  padding: 1px 5px;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: 11px;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.tcw-ind-legend-toggle[hidden] {\n  display: none;\n}\n\n.tcw-ind-legend-toggle:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-name:focus-visible,\n.tcw-ind-legend-act:focus-visible,\n.tcw-ind-legend-toggle:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* === Sidebar === */\n\n.tcw-sidebar {\n  width: 40px;\n  flex-shrink: 0;\n  background: linear-gradient(180deg, var(--tcw-bg-elevated) 0%, var(--tcw-bg-surface) 100%);\n  border-right: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 6px 0;\n  overflow: visible;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-tool-group-wrap {\n  position: relative;\n}\n\n.tcw-sidebar-btn {\n  width: 32px;\n  height: 32px;\n  margin: 1px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  position: relative;\n  flex-shrink: 0;\n  line-height: 1;\n  border-radius: var(--tcw-radius);\n}\n\n.tcw-sidebar-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-sidebar-btn.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  box-shadow: inset 2px 0 0 var(--tcw-accent);\n}\n\n.tcw-sidebar-btn.tcw-danger:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-red-soft);\n}\n\n.tcw-multi-dot {\n  position: absolute;\n  bottom: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  opacity: 0.7;\n}\n\n.tcw-sidebar-divider {\n  width: 22px;\n  height: 1px;\n  background: var(--tcw-divider);\n  margin: 6px 0;\n  flex-shrink: 0;\n}\n\n.tcw-sidebar-spacer {\n  flex: 1;\n}\n\n/* === Flyout === */\n\n.tcw-flyout {\n  position: absolute;\n  left: 100%;\n  top: 0;\n  margin-left: 6px;\n  min-width: 180px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  z-index: 30;\n  padding: 6px;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  animation: tcw-slide-right var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n/* Spans the gap to the toolbar button: crossing it stays inside the menu. */\n.tcw-flyout::before {\n  content: '';\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  right: 100%;\n  width: 8px;\n}\n\n@keyframes tcw-slide-right {\n  from { opacity: 0; transform: translateX(-4px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.tcw-flyout-header {\n  text-transform: uppercase;\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  letter-spacing: 0.08em;\n  padding: 6px 10px 4px;\n  font-weight: 600;\n}\n\n.tcw-flyout-hint {\n  padding: 6px 10px 2px;\n  border-top: 1px solid var(--tcw-border);\n  margin-top: 4px;\n  font-size: 10.5px;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-flyout-item {\n  padding: 7px 10px;\n  font-size: 12.5px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  border: none;\n  background: transparent;\n  text-align: left;\n  font-family: inherit;\n  border-radius: var(--tcw-radius-sm);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-flyout-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-flyout-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: 600;\n}\n\n/* Pinned (favorited) flyout item — a star marker on the right. */\n.tcw-flyout-item.tcw-flyout-faved::after {\n  content: '★';\n  float: right;\n  color: var(--tcw-accent);\n  font-size: 11px;\n  line-height: 1.4;\n}\n\n/* Favorites strip — pinned drawing tools above the tool groups. */\n.tcw-sidebar-favorites {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn {\n  position: relative;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  opacity: 0.7;\n}\n\n/* === Modal === */\n\n.tcw-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(8, 10, 18, 0.55);\n  backdrop-filter: blur(6px) saturate(140%);\n  -webkit-backdrop-filter: blur(6px) saturate(140%);\n  z-index: 100;\n  animation: tcw-fade-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.tcw-modal {\n  position: fixed;\n  z-index: 101;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-xl);\n  width: 520px;\n  max-width: 92vw;\n  max-height: 82vh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--tcw-shadow-xl);\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n}\n\n@keyframes tcw-modal-in {\n  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }\n  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n}\n\n.tcw-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 18px 22px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-modal-header h3 {\n  font-size: 15px;\n  font-weight: 650;\n  margin: 0;\n  color: var(--tcw-text);\n  letter-spacing: -0.015em;\n}\n\n.tcw-modal-close {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border-radius: var(--tcw-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-modal-close:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-modal-tabs {\n  display: flex;\n  gap: 4px;\n  padding: 0 18px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-modal-tab {\n  padding: 11px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--tcw-text-muted);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n  font-family: inherit;\n  text-transform: capitalize;\n  letter-spacing: -0.005em;\n}\n\n.tcw-modal-tab:hover {\n  color: var(--tcw-text-dim);\n}\n\n.tcw-modal-tab.tcw-active {\n  color: var(--tcw-accent);\n  border-bottom-color: var(--tcw-accent);\n  font-weight: 600;\n}\n\n.tcw-modal-body {\n  padding: 20px 22px;\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tcw-settings-section {\n  margin-bottom: 22px;\n}\n\n.tcw-settings-section:last-child {\n  margin-bottom: 0;\n}\n\n.tcw-settings-section-title {\n  font-size: 10.5px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.09em;\n  color: var(--tcw-text-muted);\n  margin-bottom: 12px;\n}\n\n.tcw-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 0;\n}\n\n.tcw-settings-row + .tcw-settings-row {\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-settings-label {\n  font-size: 13px;\n  color: var(--tcw-text-dim);\n  letter-spacing: -0.005em;\n}\n\n.tcw-color-picker-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tcw-color-picker-wrap input[type='color'] {\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n  padding: 2px;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch {\n  border: none;\n  border-radius: 2px;\n}\n\n.tcw-color-hex {\n  font-size: 11px;\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  letter-spacing: 0.01em;\n}\n\n.tcw-toggle {\n  width: 36px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  position: relative;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border: none;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n.tcw-toggle::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition:\n    left var(--tcw-dur-normal) var(--tcw-ease-out),\n    background var(--tcw-dur-fast) var(--tcw-ease);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-glow);\n}\n\n.tcw-toggle.tcw-on::after {\n  left: 18px;\n  background: #fff;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle::after {\n  background: #999;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on::after {\n  background: #fff;\n}\n\n.tcw-settings-select {\n  padding: 6px 10px;\n  font-size: 12px;\n  font-family: inherit;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius);\n  color: var(--tcw-text);\n  cursor: pointer;\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-settings-select:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n.tcw-settings-select:focus-visible {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 22px;\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  border-radius: 0 0 var(--tcw-radius-xl) var(--tcw-radius-xl);\n}\n\n.tcw-reset-link {\n  font-size: 12px;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-color: var(--tcw-border-strong);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), text-decoration-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-reset-link:hover {\n  color: var(--tcw-text-dim);\n  text-decoration-color: currentColor;\n}\n\n.tcw-done-btn {\n  padding: 8px 18px;\n  font-size: 12.5px;\n  font-weight: 600;\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  border: none;\n  border-radius: var(--tcw-radius);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n  letter-spacing: -0.005em;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);\n}\n\n.tcw-done-btn:hover {\n  background: var(--tcw-accent-hover);\n  box-shadow: var(--tcw-shadow-md), 0 0 0 3px var(--tcw-accent-glow);\n}\n\n.tcw-done-btn:active {\n  transform: translateY(0.5px);\n}\n\n/* === Status Bar === */\n\n.tcw-statusbar {\n  /* Above sidebar buttons that overflow a short chart; menus (z 30+) stay on top. */\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 7px 16px;\n  border-top: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n  font-feature-settings: 'tnum';\n}\n\n.tcw-status-right {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-left: auto;\n  min-width: 0;\n  white-space: nowrap;\n}\n\n/* Narrow screens: the toolbar already names the symbol and timeframe, so the\n   range bar gets the room. */\n@media (max-width: 640px) {\n  .tcw-status-info {\n    display: none;\n  }\n\n  .tcw-range-btn {\n    padding: 4px 5px;\n  }\n}\n\n/* Range presets + go to date, bottom left */\n.tcw-range-bar {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  margin: -4px 12px -4px -8px;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.tcw-range-bar::-webkit-scrollbar {\n  display: none;\n}\n\n.tcw-range-btn {\n  flex-shrink: 0;\n  padding: 4px 7px;\n  font: inherit;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-range-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-range-btn:active {\n  color: var(--tcw-accent);\n}\n\n.tcw-range-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-range-goto {\n  display: inline-grid;\n  place-items: center;\n  margin-left: 6px;\n  padding: 4px 6px;\n}\n\n.tcw-range-goto svg {\n  display: block;\n}\n\n/* Go-to-date popover, anchored above the range bar */\n.tcw-goto {\n  position: absolute;\n  left: 10px;\n  bottom: 40px;\n  z-index: 40;\n  display: grid;\n  gap: 10px;\n  width: 232px;\n  padding: 14px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius);\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);\n  color: var(--tcw-text);\n  font-size: 12px;\n}\n\n.tcw-goto-title {\n  font-weight: 600;\n  font-size: 13px;\n}\n\n.tcw-goto-field {\n  display: grid;\n  gap: 4px;\n  color: var(--tcw-text-muted);\n  font-size: 11px;\n}\n\n.tcw-goto-input {\n  height: 30px;\n  padding: 0 8px;\n  font: inherit;\n  font-size: 12.5px;\n  color: var(--tcw-text);\n  background: var(--tcw-bg);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  color-scheme: dark;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-goto-input {\n  color-scheme: light;\n}\n\n.tcw-goto-input:focus {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n\n.tcw-goto-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}\n\n.tcw-goto-submit {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  font-weight: 600;\n}\n\n.tcw-goto-submit:hover {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  filter: brightness(1.08);\n}\n\n.tcw-status-indicator {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-weight: 500;\n}\n\n.tcw-status-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition: background var(--tcw-dur-normal) var(--tcw-ease), box-shadow var(--tcw-dur-normal) var(--tcw-ease);\n  position: relative;\n}\n\n.tcw-status-dot.tcw-connected {\n  background: var(--tcw-green);\n  box-shadow: 0 0 0 3px rgba(31, 168, 116, 0.18);\n}\n\n.tcw-status-dot.tcw-connected::after {\n  content: '';\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--tcw-green);\n  opacity: 0;\n  animation: tcw-pulse 2.2s ease-out infinite;\n}\n\n@keyframes tcw-pulse {\n  0% { opacity: 0.6; transform: scale(0.6); }\n  100% { opacity: 0; transform: scale(2.2); }\n}\n\n.tcw-status-dot.tcw-error {\n  background: var(--tcw-red);\n  box-shadow: 0 0 0 3px rgba(232, 80, 91, 0.2);\n}\n\n/* === Command Palette === */\n\n.tcw-cmd-palette {\n  position: fixed;\n  z-index: 102;\n  top: 18%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-xl);\n  width: 560px;\n  max-width: 92vw;\n  max-height: 62vh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--tcw-shadow-xl);\n  overflow: hidden;\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n}\n\n.tcw-cmd-header {\n  display: flex;\n  align-items: center;\n  padding: 14px 18px;\n  border-bottom: 1px solid var(--tcw-divider);\n  gap: 12px;\n}\n\n.tcw-cmd-icon {\n  font-size: 18px;\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n}\n\n.tcw-cmd-input {\n  flex: 1;\n  background: transparent;\n  border: none;\n  outline: none;\n  font-size: 14.5px;\n  font-family: inherit;\n  color: var(--tcw-text);\n  caret-color: var(--tcw-accent);\n  letter-spacing: -0.005em;\n}\n\n.tcw-cmd-input::placeholder {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-cmd-hint {\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  border: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  padding: 3px 7px;\n  border-radius: 4px;\n  flex-shrink: 0;\n  box-shadow: inset 0 -1px 0 var(--tcw-border);\n}\n\n.tcw-cmd-list {\n  overflow-y: auto;\n  flex: 1;\n  padding: 6px;\n  max-height: 380px;\n}\n\n.tcw-cmd-category {\n  text-transform: uppercase;\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  letter-spacing: 0.09em;\n  padding: 10px 10px 4px;\n  font-weight: 600;\n}\n\n.tcw-cmd-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: 13px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-align: left;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  gap: 10px;\n  border-radius: var(--tcw-radius);\n  letter-spacing: -0.005em;\n}\n\n.tcw-cmd-item:hover,\n.tcw-cmd-item.tcw-selected {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-cmd-item.tcw-selected {\n  box-shadow: inset 2px 0 0 var(--tcw-accent);\n}\n\n.tcw-cmd-item.tcw-active .tcw-cmd-item-label {\n  color: var(--tcw-accent);\n  font-weight: 600;\n}\n\n.tcw-cmd-item-label {\n  flex: 1;\n}\n\n.tcw-cmd-check {\n  color: var(--tcw-accent);\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.tcw-cmd-kbd {\n  font-size: 10px;\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  padding: 2px 6px;\n  border-radius: 4px;\n  box-shadow: inset 0 -1px 0 var(--tcw-border);\n}\n\n.tcw-cmd-empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--tcw-text-muted);\n  font-size: 13px;\n}\n\n.tcw-cmd-footer {\n  display: flex;\n  align-items: center;\n  gap: 18px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--tcw-divider);\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n  background: var(--tcw-bg-surface);\n}\n\n/* === Watchlist === */\n\n.tcw-watchlist {\n  width: 220px;\n  flex-shrink: 0;\n  background: var(--tcw-bg-surface);\n  border-left: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-watchlist-header {\n  padding: 10px 14px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--tcw-text-muted);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-watchlist-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.tcw-watchlist-row {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border-left: 2px solid transparent;\n  outline: none;\n}\n\n.tcw-watchlist-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-watchlist-row:focus-visible {\n  background: var(--tcw-hover-bg);\n  border-left-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-row.tcw-watchlist-active {\n  background: var(--tcw-accent-soft);\n  border-left-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-symbol {\n  font-size: 12.5px;\n  font-weight: 600;\n  color: var(--tcw-text);\n  letter-spacing: -0.005em;\n  white-space: nowrap;\n}\n\n.tcw-watchlist-spark {\n  width: 56px;\n  height: 22px;\n  align-self: center;\n}\n\n.tcw-watchlist-stats {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1px;\n  font-variant-numeric: tabular-nums;\n  font-family: var(--tcw-font-mono);\n}\n\n.tcw-watchlist-price {\n  font-size: 12px;\n  color: var(--tcw-text);\n  font-weight: 500;\n}\n\n.tcw-watchlist-change {\n  font-size: 10.5px;\n  color: var(--tcw-text-muted);\n  font-weight: 500;\n}\n\n.tcw-watchlist-change.tcw-up {\n  color: var(--tcw-green);\n}\n\n.tcw-watchlist-change.tcw-down {\n  color: var(--tcw-red);\n}\n\n@media (max-width: 768px) {\n  .tcw-watchlist {\n    display: none;\n  }\n}\n\n/* === Toast === */\n\n.tcw-toast {\n  position: absolute;\n  bottom: 60px;\n  left: 50%;\n  transform: translate(-50%, 12px);\n  z-index: 40;\n  padding: 9px 14px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: 9999px;\n  box-shadow: var(--tcw-shadow-lg);\n  font-size: 12.5px;\n  font-weight: 500;\n  color: var(--tcw-text);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out), transform var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n  max-width: calc(100% - 32px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  letter-spacing: -0.005em;\n}\n\n.tcw-toast.tcw-toast-in {\n  opacity: 1;\n  transform: translate(-50%, 0);\n}\n\n.tcw-toast-error {\n  border-color: var(--tcw-red);\n  color: var(--tcw-red);\n}\n\n/* === Replay scrubber === */\n\n/* Picking the replay start: the bars right of the pointer would be hidden. */\n.tcw-replay-shade {\n  position: absolute;\n  z-index: 4;\n  pointer-events: none;\n  background: color-mix(in srgb, var(--tcw-bg) 62%, transparent);\n  border-left: 1.5px dashed var(--tcw-accent);\n}\n\n.tcw-replay-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tcw-replay-group[hidden] { display: none; }\n\n.tcw-replay-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  color: var(--tcw-text-dim);\n  white-space: nowrap;\n}\n\n.tcw-replay-text-btn {\n  height: 26px;\n  padding: 0 10px;\n  border: 1px solid var(--tcw-border);\n  border-radius: 9999px;\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast), border-color var(--tcw-dur-fast), color var(--tcw-dur-fast);\n}\n\n.tcw-replay-text-btn:hover { background: var(--tcw-hover-bg); border-color: var(--tcw-border-strong); }\n.tcw-replay-text-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* At the last bar: the way out is the next thing to do. */\n.tcw-replay-bar--ended .tcw-replay-realtime {\n  background: var(--tcw-accent);\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n\n.tcw-replay-btn:disabled { opacity: 0.4; cursor: default; }\n\n@media (max-width: 640px) {\n  .tcw-replay-bar {\n    flex-wrap: wrap;\n    justify-content: center;\n    max-width: calc(100% - 24px);\n    border-radius: 14px;\n  }\n  .tcw-replay-hint { white-space: normal; }\n}\n\n.tcw-replay-bar {\n  position: absolute;\n  left: 50%;\n  bottom: 16px;\n  transform: translateX(-50%);\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: 9999px;\n  box-shadow: var(--tcw-shadow-lg);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  font-size: 12px;\n  color: var(--tcw-text);\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-replay-btn {\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  border-radius: 9999px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-replay-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-replay-btn.tcw-replay-play {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  width: 32px;\n  height: 32px;\n  box-shadow: 0 0 0 3px var(--tcw-accent-glow);\n}\n\n.tcw-replay-btn.tcw-replay-play:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-replay-scrubber {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 220px;\n  height: 4px;\n  background: var(--tcw-border-strong);\n  border-radius: 2px;\n  outline: none;\n  cursor: pointer;\n}\n\n.tcw-replay-scrubber::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n}\n\n.tcw-replay-scrubber::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n}\n\n.tcw-replay-progress {\n  font-size: 11px;\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  text-align: center;\n  font-feature-settings: 'tnum';\n}\n\n.tcw-replay-speed {\n  padding: 4px 8px;\n  font-size: 11px;\n  font-family: var(--tcw-font-mono);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n}\n\n.tcw-replay-speed:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n@media (max-width: 640px) {\n  .tcw-replay-scrubber {\n    width: 140px;\n  }\n  .tcw-replay-progress {\n    display: none;\n  }\n}\n\n/* === Hotkey sheet === */\n\n.tcw-hotkey-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px 32px;\n}\n\n.tcw-hotkey-section .tcw-settings-section-title {\n  margin-bottom: 8px;\n}\n\n.tcw-hotkey-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 6px 0;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-hotkey-row:last-child {\n  border-bottom: none;\n}\n\n.tcw-hotkey-keys {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.tcw-hotkey-sep {\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-hotkey-label {\n  font-size: 12.5px;\n  color: var(--tcw-text-dim);\n  text-align: right;\n  letter-spacing: -0.005em;\n}\n\n@media (max-width: 640px) {\n  .tcw-hotkey-grid {\n    grid-template-columns: 1fr;\n    gap: 18px;\n  }\n}\n\n/* === Scrollbar (subtle, premium feel) === */\n\n.tcw-dropdown::-webkit-scrollbar,\n.tcw-modal-body::-webkit-scrollbar,\n.tcw-cmd-list::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.tcw-dropdown::-webkit-scrollbar-track,\n.tcw-modal-body::-webkit-scrollbar-track,\n.tcw-cmd-list::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.tcw-dropdown::-webkit-scrollbar-thumb,\n.tcw-modal-body::-webkit-scrollbar-thumb,\n.tcw-cmd-list::-webkit-scrollbar-thumb {\n  background: var(--tcw-border-strong);\n  border-radius: 4px;\n  border: 2px solid transparent;\n  background-clip: padding-box;\n}\n\n.tcw-dropdown::-webkit-scrollbar-thumb:hover,\n.tcw-modal-body::-webkit-scrollbar-thumb:hover,\n.tcw-cmd-list::-webkit-scrollbar-thumb:hover {\n  background: var(--tcw-text-muted);\n  background-clip: padding-box;\n  border: 2px solid transparent;\n}\n\n/* === Responsive === */\n\n@media (max-width: 768px) {\n  .tcw-toolbar {\n    padding: 0 4px;\n    height: 44px;            /* Apple HIG minimum touch target */\n  }\n  .tcw-toolbar-sep {\n    display: none;\n  }\n  .tcw-btn,\n  .tcw-dropdown-trigger {\n    padding: 10px 12px;      /* fatter tap target */\n    font-size: 13px;\n  }\n  .tcw-btn-icon {\n    width: 40px;\n    height: 40px;\n  }\n  .tcw-sidebar {\n    width: 44px;\n  }\n  .tcw-sidebar-btn {\n    width: 40px;\n    height: 40px;\n  }\n  .tcw-modal,\n  .tcw-cmd-palette {\n    width: 94vw;\n    border-radius: var(--tcw-radius-lg);\n  }\n\n  /* Hide the right-side watchlist on tablets too — already declared but\n   * grouped here for clarity. */\n  .tcw-watchlist {\n    display: none;\n  }\n\n  /* Replay scrubber compact mode */\n  .tcw-replay-scrubber {\n    width: 120px;\n  }\n  .tcw-replay-progress {\n    display: none;\n  }\n}\n\n/* === Mobile bottom-sheet pattern ===\n * On phones, swap floating-centered modals for full-width sheets that slide\n * up from the bottom. Bigger hit targets, no awkward off-screen clipping,\n * matches how every modern iOS/Android app handles overflow UI.\n */\n@media (max-width: 640px) {\n  .tcw-modal,\n  .tcw-cmd-palette {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    transform: none;\n    width: 100vw;\n    max-width: 100vw;\n    max-height: 92vh;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n    border-bottom: none;\n    /* Grab handle */\n    padding-top: 8px;\n  }\n\n  /* Visual \"grab handle\" affordance — a short pill at the top of every sheet */\n  .tcw-modal::before,\n  .tcw-cmd-palette::before {\n    content: '';\n    display: block;\n    width: 36px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--tcw-border-strong);\n    margin: 0 auto 8px;\n    opacity: 0.7;\n  }\n\n  /* Reuse the existing modal-in animation but slide from below instead of\n   * popping from center, so the entrance reads as a sheet, not a dialog. */\n  @keyframes tcw-modal-in {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .tcw-modal,\n  .tcw-cmd-palette {\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  /* Safe-area-aware footer padding for iPhone notch / home indicator */\n  .tcw-modal-footer,\n  .tcw-cmd-footer {\n    padding-bottom: max(14px, env(safe-area-inset-bottom));\n  }\n\n  /* Larger tap targets inside sheets */\n  .tcw-modal-tab {\n    padding: 14px 16px;\n  }\n  .tcw-cmd-item {\n    padding: 12px 14px;\n    font-size: 14px;\n  }\n  .tcw-dropdown-item {\n    padding: 12px 12px;\n    font-size: 14px;\n  }\n\n  /* Hotkey sheet — single column on phones */\n  .tcw-hotkey-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* === Price alerts panel === */\n\n.tcw-alerts-panel {\n  position: absolute;\n  top: 50px;\n  right: 12px;\n  z-index: 40;\n  width: 300px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n@keyframes tcw-alerts-in {\n  from { opacity: 0; transform: translateY(-6px) scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.tcw-alerts-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-alerts-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-alerts-form {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  padding: 12px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-form input,\n.tcw-alerts-form select {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n}\n.tcw-alerts-form input:focus,\n.tcw-alerts-form select:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-alerts-message,\n.tcw-alerts-source {\n  grid-column: 1 / -1;\n}\n\n.tcw-alerts-add {\n  grid-column: 1 / -1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 34px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-alerts-add:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-alerts-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 6px;\n}\n\n.tcw-alerts-empty {\n  padding: 18px 12px;\n  text-align: center;\n  font-size: 12px;\n  color: var(--tcw-text-muted);\n  line-height: 1.5;\n}\n\n.tcw-alerts-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-alerts-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-alerts-triggered {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-info {\n  min-width: 0;\n}\n.tcw-alerts-row-main {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--tcw-text);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-alerts-row-note {\n  margin-top: 2px;\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-alerts-badge {\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px 5px;\n  border-radius: 999px;\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-del {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-alerts-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n\n@media (max-width: 640px) {\n  .tcw-alerts-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-alerts-list {\n    max-height: 40vh;\n    padding-bottom: max(8px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Data Window === */\n\n.tcw-datawin {\n  position: absolute;\n  top: 50px;\n  right: 12px;\n  z-index: 38;\n  width: 200px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-datawin-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-datawin-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-datawin-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-datawin-body { padding: 6px 4px; max-height: 360px; overflow-y: auto; }\n.tcw-datawin-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--tcw-text-muted); }\n.tcw-datawin-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 3px 8px;\n  font-size: 12px;\n}\n.tcw-datawin-label { color: var(--tcw-text-muted); }\n.tcw-datawin-value { color: var(--tcw-text); font-variant-numeric: tabular-nums; font-weight: 600; }\n.tcw-datawin-value.tcw-up { color: var(--tcw-green); }\n.tcw-datawin-value.tcw-down { color: var(--tcw-red); }\n.tcw-datawin-sub {\n  margin: 6px 8px 2px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--tcw-text-muted);\n  border-top: 1px solid var(--tcw-border);\n  padding-top: 6px;\n}\n\n@media (max-width: 640px) {\n  .tcw-datawin { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n}\n\n/* === Depth-of-market ladder === */\n\n.tcw-ladder {\n  position: absolute;\n  top: 50px;\n  right: 12px;\n  z-index: 41;\n  width: 240px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-ladder-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-ladder-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-ladder-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-ladder-cols {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  padding: 4px 0;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--tcw-text-muted);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-ladder-cols span { text-align: center; }\n.tcw-ladder-body { max-height: 360px; overflow-y: auto; }\n.tcw-ladder-empty { padding: 18px; text-align: center; font-size: 12px; color: var(--tcw-text-muted); }\n\n.tcw-ladder-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  height: 22px;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ladder-cell {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: transparent;\n  font-size: 11px;\n  cursor: pointer;\n  font-variant-numeric: tabular-nums;\n  overflow: hidden;\n}\n.tcw-ladder-cell:disabled { cursor: default; }\n/* Depth bar grows from the centre column outward. */\n.tcw-ladder-cell::before {\n  content: '';\n  position: absolute;\n  top: 1px; bottom: 1px;\n  width: var(--w, 0%);\n}\n.tcw-ladder-bid { justify-content: flex-end; padding-right: 8px; color: var(--tcw-green); }\n.tcw-ladder-bid::before { right: 0; background: var(--tcw-green-soft); }\n.tcw-ladder-bid span, .tcw-ladder-bid { position: relative; }\n.tcw-ladder-ask { justify-content: flex-start; padding-left: 8px; color: var(--tcw-red); }\n.tcw-ladder-ask::before { left: 0; background: var(--tcw-red-soft); }\n.tcw-ladder-cell:not(:disabled):hover::before { opacity: 0.7; filter: brightness(1.4); }\n.tcw-ladder-cell > * { position: relative; }\n.tcw-ladder-price {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--tcw-text-dim);\n  border-left: 1px solid var(--tcw-border);\n  border-right: 1px solid var(--tcw-border);\n}\n.tcw-ladder-price.tcw-ask { color: var(--tcw-red); }\n.tcw-ladder-price.tcw-bid { color: var(--tcw-green); }\n\n@media (max-width: 640px) {\n  .tcw-ladder { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n  .tcw-ladder-body { max-height: 45vh; padding-bottom: max(0px, env(safe-area-inset-bottom)); }\n}\n\n/* === Bracket order placement === */\n\n.tcw-btn-long:hover { color: var(--tcw-green) !important; }\n.tcw-btn-short:hover { color: var(--tcw-red) !important; }\n\n.tcw-bracket-bar {\n  position: absolute;\n  top: 52px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 8px 7px 14px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: 999px;\n  box-shadow: var(--tcw-shadow-lg);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-bracket-label {\n  font-size: 12px;\n  font-weight: 700;\n}\n.tcw-bracket-label[data-side='buy'] { color: var(--tcw-green); }\n.tcw-bracket-label[data-side='sell'] { color: var(--tcw-red); }\n.tcw-bracket-hint {\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n}\n.tcw-bracket-cancel, .tcw-bracket-confirm {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  height: 30px;\n  padding: 0 12px;\n  font-size: 12px;\n  font-weight: 600;\n  border: none;\n  border-radius: 999px;\n  cursor: pointer;\n}\n.tcw-bracket-cancel {\n  color: var(--tcw-text-dim);\n  background: var(--tcw-bg-surface);\n}\n.tcw-bracket-cancel:hover { color: var(--tcw-text); }\n.tcw-bracket-confirm {\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n}\n.tcw-bracket-confirm:hover { background: var(--tcw-accent-hover); }\n\n@media (max-width: 640px) {\n  .tcw-bracket-bar { width: calc(100vw - 24px); justify-content: space-between; }\n  .tcw-bracket-hint { display: none; }\n}\n\n/* === Drawing style + templates popover === */\n\n.tcw-style-panel {\n  position: absolute;\n  bottom: 12px;\n  left: 52px;\n  z-index: 40;\n  width: 220px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-style-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--tcw-text);\n}\n.tcw-style-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-style-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n\n.tcw-style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.tcw-style-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 1px solid var(--tcw-border-strong);\n  cursor: pointer;\n  padding: 0;\n}\n.tcw-style-swatch.tcw-on { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-style-picker {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n}\n.tcw-style-width, .tcw-style-dash {\n  flex: 1;\n  min-width: 0;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  font-size: 11px;\n}\n.tcw-style-width span { width: 16px; background: currentColor; border-radius: 2px; }\n.tcw-style-width.tcw-on, .tcw-style-dash.tcw-on {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-style-subhead {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--tcw-text-muted);\n  margin-top: 2px;\n}\n.tcw-style-save { display: flex; gap: 6px; }\n.tcw-style-name {\n  flex: 1;\n  min-width: 0;\n  height: 28px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n}\n.tcw-style-name:focus { border-color: var(--tcw-accent); }\n.tcw-style-savebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n  height: 28px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-style-savebtn:hover { background: var(--tcw-accent-hover); }\n\n.tcw-style-templates { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }\n.tcw-style-empty { font-size: 11px; color: var(--tcw-text-muted); padding: 4px 0; }\n.tcw-style-template { display: flex; align-items: center; gap: 4px; }\n.tcw-style-apply {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 7px;\n  font-size: 12px;\n  color: var(--tcw-text);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n  text-align: left;\n}\n.tcw-style-apply:hover { background: var(--tcw-bg-surface); }\n.tcw-style-tdot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }\n.tcw-style-tdel {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-style-tdel:hover { background: var(--tcw-red-soft); color: var(--tcw-red); }\n\n/* === Settings range slider === */\n\n.tcw-settings-range {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.tcw-settings-range input[type='range'] {\n  width: 110px;\n  accent-color: var(--tcw-accent);\n  cursor: pointer;\n}\n.tcw-settings-range-val {\n  min-width: 38px;\n  text-align: right;\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-dim);\n}\n\n/* === Indicator settings dialog === */\n\n.tcw-modal-narrow {\n  max-width: 360px;\n}\n.tcw-indi-input {\n  width: 110px;\n  height: 30px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-indi-input:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-indi-color {\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n\n/* === Object tree panel === */\n\n.tcw-tree-panel {\n  position: absolute;\n  top: 50px;\n  right: 12px;\n  z-index: 39;\n  width: 280px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n.tcw-tree-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-tree-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-tree-section {\n  padding: 6px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-section:last-child {\n  border-bottom: none;\n}\n.tcw-tree-section-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px 4px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-tree-add:hover {\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n}\n.tcw-tree-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.tcw-tree-list {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.tcw-tree-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-tree-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-tree-hidden .tcw-tree-name {\n  opacity: 0.5;\n}\n.tcw-tree-name {\n  min-width: 0;\n  font-size: 12px;\n  color: var(--tcw-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-tree-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tcw-tree-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-tree-btn:hover {\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n}\n.tcw-tree-btn.tcw-tree-on {\n  color: var(--tcw-accent);\n}\n.tcw-tree-btn.tcw-tree-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n.tcw-tree-empty {\n  padding: 8px;\n  font-size: 12px;\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-tree-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-tree-list {\n    max-height: 30vh;\n  }\n  .tcw-tree-section:last-child {\n    padding-bottom: max(6px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Reduced motion === */\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root *,\n  .tcw-root *::before,\n  .tcw-root *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  /* Except the loader's slow glow (opacity only): without it a long wait\n     looks frozen. */\n  .tcw-root .tcw-loading-candle,\n  .tcw-root .tcw-loading-track > span {\n    animation-duration: 2.4s !important;\n    animation-iteration-count: infinite !important;\n    animation-delay: var(--tcw-delay, 0ms) !important;\n  }\n}\n", h = 0, g = "tcw-styles";
+function ne() {
+	if (h++, h > 1 || document.getElementById(g)) return;
 	let e = document.createElement("style");
-	e.id = h, e.textContent = te, document.head.appendChild(e);
+	e.id = g, e.textContent = m, document.head.appendChild(e);
 }
-function _() {
-	if (m--, m > 0) return;
-	let e = document.getElementById(h);
+function re() {
+	if (h--, h > 0) return;
+	let e = document.getElementById(g);
 	e && e.remove();
 }
 //#endregion
+//#region src/widget/iconSet.ts
+var _ = {
+	cursor: { d: "M6 3.5L18.5 12.5L12.6 13.6L9.7 19.4z" },
+	trendingUp: { d: "M3 17L9 11L13 14.5L21 6.5M15 6.5H21V12.5" },
+	trendingDown: { d: "M3 7L9 13L13 9.5L21 17.5M15 17.5H21V11.5" },
+	minus: { d: "M5 12H19" },
+	plus: { d: "M12 5V19M5 12H19" },
+	penLine: { d: "M14.5 5.5L18.5 9.5M4 20L5 15.5L15.8 4.7a2 2 0 0 1 2.83 0l.67.67a2 2 0 0 1 0 2.83L8.5 19z" },
+	zigzag: { d: "M3 17L8 9L13 15L21 6" },
+	hash: { d: "M5 9H19M5 15H19M10 4L8.5 20M15.5 4L14 20" },
+	square: { d: "M6.5 4.5h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z" },
+	gitBranch: { d: "M6 3V15M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9" },
+	ruler: { d: "M3.5 16.5L16.5 3.5L20.5 7.5L7.5 20.5zM6.5 13.5L8 15M9.5 10.5L11.5 12.5M12.5 7.5L14 9" },
+	type: { d: "M6 6V4.5H18V6M12 4.5V19.5M9.5 19.5H14.5" },
+	magnet: { d: "M6 4V11a6 6 0 0 0 12 0V4M6 4h3.5v7a2.5 2.5 0 0 0 5 0V4H18M6 8h3.5M14.5 8H18" },
+	undo: { d: "M9 14L4 9L9 4M4 9H14.5a5.5 5.5 0 0 1 0 11H11" },
+	redo: { d: "M15 14L20 9L15 4M20 9H9.5a5.5 5.5 0 0 0 0 11H13" },
+	trash: { d: "M4 7H20M9.5 7V4.5h5V7M6.5 7l.8 12.2A1.5 1.5 0 0 0 8.8 20.6h6.4a1.5 1.5 0 0 0 1.5-1.4L17.5 7M10 11v6M14 11v6" },
+	camera: { d: "M4.5 7.5h3L9 5h6l1.5 2.5h3A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5V9a1.5 1.5 0 0 1 1.5-1.5zM15.5 13.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z" },
+	settings: { d: "M4 7H14M18 7H20M4 17H8M12 17H20M18 7a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM12 17a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" },
+	moon: { d: "M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z" },
+	sun: { d: "M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4L6 18M18 6l1.4-1.4" },
+	chevronDown: { d: "M6 9L12 15L18 9" },
+	chevronUp: { d: "M6 15L12 9L18 15" },
+	barChart: { d: "M5 20V13M12 20V5M19 20V10" },
+	x: { d: "M6 6L18 18M18 6L6 18" },
+	play: { d: "M7 4.5v15L19.5 12z" },
+	pause: { d: "M8 5V19M16 5V19" },
+	stop: { d: "M7.5 6h9A1.5 1.5 0 0 1 18 7.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 16.5v-9A1.5 1.5 0 0 1 7.5 6z" },
+	receipt: { d: "M6 3.5h12v17l-2-1.25-2 1.25-2-1.25-2 1.25-2-1.25-2 1.25zM9 8h6M9 12h6M9 16h3" },
+	bell: { d: "M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2H4.5zM10 20.5a2.2 2.2 0 0 0 4 0" },
+	layers: { d: "M12 3.5L21 8.5L12 13.5L3 8.5zM3 12.5L12 17.5L21 12.5M3 16.5L12 21.5L21 16.5" },
+	eye: { d: "M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12zM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" },
+	eyeOff: { d: "M4 4L20 20M9.9 5.8A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a16 16 0 0 1-2.3 3.1M6.6 7.1C3.9 8.9 2.5 12 2.5 12S6 18.5 12 18.5a9.3 9.3 0 0 0 4.7-1.3M10 10.1a3 3 0 0 0 4 4" },
+	lock: { d: "M7 10.5h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2zM8 10.5V7.5a4 4 0 0 1 8 0v3" },
+	unlock: { d: "M7 10.5h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2zM8 10.5V7.5a4 4 0 0 1 7.7-1.5" },
+	palette: {
+		d: "M12 3.5a8.5 8.5 0 0 0 0 17c1.1 0 1.6-.8 1.6-1.6 0-.5-.2-.9-.5-1.2a1.6 1.6 0 0 1 1.2-2.7h1.9a4.3 4.3 0 0 0 4.3-4.3C20.5 6.9 16.7 3.5 12 3.5z",
+		dots: [
+			[
+				7.5,
+				11.5,
+				1.25
+			],
+			[
+				9.5,
+				7.75,
+				1.25
+			],
+			[
+				14,
+				7.25,
+				1.25
+			]
+		]
+	},
+	check: { d: "M5 12.5L10 17.5L19 7" },
+	maximize: { d: "M8 4H5a1 1 0 0 0-1 1v3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3" },
+	minimize: { d: "M4 8h3a1 1 0 0 0 1-1V4M16 4v3a1 1 0 0 0 1 1h3M20 16h-3a1 1 0 0 0-1 1v3M8 20v-3a1 1 0 0 0-1-1H4" },
+	repeat: { d: "M17 3.5L20.5 7L17 10.5M3.5 11.5V10a3 3 0 0 1 3-3h14M7 20.5L3.5 17L7 13.5M20.5 12.5V14a3 3 0 0 1-3 3h-14" },
+	calendar: { d: "M5.5 5h13a2 2 0 0 1 2 2v11.5a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM3.5 10H20.5M8 3V7M16 3V7" },
+	star: { d: "M12 3.5L14.6 9L20.5 9.6L16 13.6L17.3 19.5L12 16.5L6.7 19.5L8 13.6L3.5 9.6L9.4 9z" },
+	ladder: { d: "M4 6H11M13 6H17M6 10H11M13 10H20M8 14H11M13 14H15M5 18H11M13 18H19" }
+}, v = {
+	trendLine: {
+		d: "M5 18L19 6",
+		dots: [[5, 18], [19, 6]]
+	},
+	ray: {
+		d: "M5 17L21 5M17.5 4.81L21 5L20.2 8.41",
+		dots: [[5, 17], [11, 12.5]]
+	},
+	extendedLine: {
+		d: "M3 18.5L21 5M17.5 4.81L21 5L20.2 8.41M6.5 18.69L3 18.5L3.8 15.09",
+		dots: [[9, 14], [15, 9.5]]
+	},
+	infoLine: {
+		d: "M5 20L19 10M4.5 3.5h9a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zM6.5 6.5h5",
+		dots: [[5, 20], [19, 10]]
+	},
+	trendAngle: {
+		d: "M5 18L19 7M5 18H20M11 18A6 6 0 0 0 9.71 14.29",
+		dots: [[5, 18], [19, 7]]
+	},
+	horizontalLine: {
+		d: "M3 12H21",
+		dots: [[12, 12]]
+	},
+	horizontalRay: {
+		d: "M7 12H21M18.5 9.5L21 12L18.5 14.5",
+		dots: [[7, 12]]
+	},
+	verticalLine: {
+		d: "M12 3V21",
+		dots: [[12, 12]]
+	},
+	crossLine: {
+		d: "M3 12H21M12 3V21",
+		dots: [[12, 12]]
+	},
+	parallelChannel: {
+		d: "M3 15L15 5M9 19L21 9",
+		dots: [
+			[3, 15],
+			[15, 5],
+			[9, 19]
+		]
+	},
+	regressionChannel: {
+		d: "M3 12L21 4M3 20L21 12",
+		dash: "M3 16L21 8",
+		dots: [[3, 16], [21, 8]]
+	},
+	fibRetracement: {
+		d: "M3 4H21M3 9H21M3 13H21M3 20H21",
+		dots: [[5, 20], [19, 4]]
+	},
+	fibExtension: {
+		d: "M3 20L8 10L12 16M14 4H21M14 8H21M14 12H21",
+		dots: [
+			[3, 20],
+			[8, 10],
+			[12, 16]
+		]
+	},
+	fibChannel: {
+		d: "M3 9L21 3M3 13L21 7M3 16L21 10M3 21L21 15",
+		dots: [
+			[3, 21],
+			[21, 15],
+			[3, 9]
+		]
+	},
+	fibTimeZones: {
+		d: "M3 4V20M6 4V20M9.5 4V20M14 4V20M20.5 4V20",
+		dots: [[3, 20], [6, 20]]
+	},
+	fibSpeedResistanceFan: {
+		d: "M4 20L20 4M4 20L20 11M4 20L20 16M4 20L11 4",
+		dash: "M4 4H20V20",
+		dots: [[4, 20], [20, 4]]
+	},
+	rectangle: {
+		d: "M5.5 6h13A1.5 1.5 0 0 1 20 7.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 16.5v-9A1.5 1.5 0 0 1 5.5 6z",
+		dots: [[4, 6], [20, 18]]
+	},
+	circle: {
+		d: "M19.5 12a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0z",
+		dots: [[12, 12], [19.5, 12]]
+	},
+	ellipse: {
+		d: "M20.5 12c0 3-3.8 5.5-8.5 5.5S3.5 15 3.5 12 7.3 6.5 12 6.5s8.5 2.5 8.5 5.5z",
+		dots: [[3.5, 12], [20.5, 12]]
+	},
+	triangle: {
+		d: "M12 4.5L20 19H4z",
+		dots: [
+			[12, 4.5],
+			[20, 19],
+			[4, 19]
+		]
+	},
+	pitchfork: {
+		d: "M4 20L16.75 3M7 9L11.5 3M13 15L21 4.33M7 9L13 15",
+		dots: [
+			[4, 20],
+			[7, 9],
+			[13, 15]
+		]
+	},
+	schiffPitchfork: {
+		d: "M4 14.5L21 7.42M7 9L21 3.17M13 15L21 11.67M7 9L13 15",
+		dash: "M4 20V14.5",
+		dots: [
+			[4, 14.5],
+			[7, 9],
+			[13, 15]
+		]
+	},
+	modifiedSchiffPitchfork: {
+		d: "M5.5 14.5L21 5.89M7 9L17.8 3M13 15L21 10.56M7 9L13 15",
+		dash: "M4 20L5.5 14.5",
+		dots: [
+			[5.5, 14.5],
+			[7, 9],
+			[13, 15]
+		]
+	},
+	gannFan: {
+		d: "M4 20L20 4M4 20L20 12M4 20L12 4M4 20L20 16.5M4 20L7.5 4",
+		dots: [[4, 20], [20, 4]]
+	},
+	gannBox: {
+		d: "M4 4H20V20H4zM4 20L20 4M4 4L20 20M12 4V20",
+		dots: [[4, 20], [20, 4]]
+	},
+	cyclicLines: {
+		d: "M4 4V20M9 4V20M14 4V20M19 4V20",
+		dots: [[4, 20], [9, 20]]
+	},
+	xabcdPattern: {
+		d: "M3 18L7 6L11 13L15 8L21 19",
+		dash: "M3 18L11 13L21 19",
+		dots: [
+			[3, 18],
+			[7, 6],
+			[11, 13],
+			[15, 8],
+			[21, 19]
+		]
+	},
+	abcdPattern: {
+		d: "M4 19L9 8L13 14L20 4",
+		dots: [
+			[4, 19],
+			[9, 8],
+			[13, 14],
+			[20, 4]
+		]
+	},
+	headAndShoulders: {
+		d: "M3 19L6 11L8.5 15L12 5L15.5 15L18 11L21 19",
+		dash: "M4.5 15H19.5",
+		dots: [
+			[6, 11],
+			[12, 5],
+			[18, 11]
+		]
+	},
+	elliottWave: {
+		d: "M3 19L6 13L8.5 16L14 6L16 10L21 4",
+		dots: [[3, 19], [21, 4]]
+	},
+	priceRange: { d: "M5 4H19M5 20H19M12 6.5V17.5M9 9.5L12 6.5L15 9.5M9 14.5L12 17.5L15 14.5" },
+	dateRange: { d: "M4 5V19M20 5V19M6.5 12H17.5M9.5 9L6.5 12L9.5 15M14.5 9L17.5 12L14.5 15" },
+	dateAndPriceRange: {
+		d: "M6 18V4M3 7L6 4L9 7M6 18H20M17 15L20 18L17 21",
+		dash: "M6 4H20V18"
+	},
+	measure: { d: "M3.5 16.5L16.5 3.5L20.5 7.5L7.5 20.5zM6.5 13.5L8 15M9.5 10.5L11.5 12.5M12.5 7.5L14 9" },
+	text: { d: "M6 6V4.5H18V6M12 4.5V19.5M9.5 19.5H14.5" },
+	priceLabel: { d: "M9 5H19a1.5 1.5 0 0 1 1.5 1.5v11A1.5 1.5 0 0 1 19 19H9L3.5 12zM11 12H17" },
+	arrow: { d: "M5 19L19 5M10 5H19V14" },
+	riskReward: {
+		d: "M5 12V4H19V12M3 12H21",
+		dash: "M5 12V18H19V12",
+		dots: [[5, 12]]
+	},
+	anchoredVWAP: {
+		d: "M4 18C9 17 12 10 20 7M4 20.5V18",
+		dots: [[4, 18]]
+	},
+	volumeProfileRange: {
+		d: "M6 7H12M6 10.5H17M6 14H15M6 17.5H10",
+		dash: "M3.5 4V20M20.5 4V20",
+		dots: [[3.5, 20], [20.5, 20]]
+	}
+}, y = {
+	candlestick: {
+		d: "M8 3.5V7M8 16V20.5M16 5V8.5M16 15.5V19",
+		fills: ["M6.5 7h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z", "M14.5 8.5h3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z"]
+	},
+	hollowCandle: { d: "M8 3.5V7M8 16V20.5M16 5V8.5M16 15.5V19M6.5 7h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zM14.5 8.5h3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z" },
+	heikinAshi: {
+		d: "M5.5 9.5V12M5.5 18V20M12 5.5V8M12 14V16M18.5 3V4.5M18.5 10.5V12.5",
+		fills: [
+			"M4 12h3a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5v-5A.5.5 0 0 1 4 12z",
+			"M10.5 8h3a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5z",
+			"M17 4.5h3a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5z"
+		]
+	},
+	bar: { d: "M8 4V20M5 8H8M8 16H11M16 6V18M13 15H16M16 9H19" },
+	volumeCandles: {
+		d: "M6.5 5V8M6.5 16V19M15.5 3.5V6M15.5 16V20",
+		fills: ["M5.5 8h2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5z", "M11.5 6h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5z"]
+	},
+	equivolume: { d: "M4.5 10h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zM10 6h5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM18.5 4h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z" },
+	line: { d: "M3 17L8 11L12 14L21 5" },
+	area: {
+		d: "M3 17L8 11L12 14L21 5",
+		soft: "M3 17L8 11L12 14L21 5V20H3z"
+	},
+	baseline: {
+		d: "M3 16L7 9L11 14L15 7L21 15",
+		dash: "M3 12H21"
+	},
+	hlcArea: {
+		d: "M3 9L8 6L13 9L21 4M3 15L8 13L13 16L21 11",
+		dash: "M3 12L8 9.5L13 12.5L21 7.5",
+		soft: "M3 9L8 6L13 9L21 4V11L13 16L8 13L3 15z"
+	},
+	stepLine: { d: "M3 18H8V12H12V15H16V7H21" },
+	lineWithMarkers: {
+		d: "M4 17L9 10L14 14L20 6",
+		dots: [
+			[4, 17],
+			[9, 10],
+			[14, 14],
+			[20, 6]
+		]
+	}
+}, ie = 1.75, ae = .22, b = /* @__PURE__ */ new WeakMap();
+function oe(e) {
+	let t = b.get(e);
+	if (t) return t;
+	let n = "";
+	e.soft && (n += `<path d="${e.soft}" fill="currentColor" fill-opacity="${ae}" stroke="none"/>`);
+	for (let t of e.fills ?? []) n += `<path d="${t}" fill="currentColor" stroke="none"/>`;
+	e.d && (n += `<path d="${e.d}"/>`), e.dash && (n += `<path d="${e.dash}" stroke-dasharray="2 2.5"/>`);
+	for (let [t, r, i = ie] of e.dots ?? []) n += `<circle cx="${t}" cy="${r}" r="${i}" fill="currentColor" stroke="none"/>`;
+	return b.set(e, n), n;
+}
+function x(e, t) {
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${oe(e)}</svg>`;
+}
+//#endregion
 //#region src/widget/icons.ts
-var v = {
-	cursor: "<path d=\"M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z\"/><path d=\"M13 13l6 6\"/>",
-	trendingUp: "<polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\"/><polyline points=\"16 7 22 7 22 13\"/>",
-	minus: "<path d=\"M5 12h14\"/>",
-	penLine: "<path d=\"M12 20h9\"/><path d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z\"/>",
-	zigzag: "<polyline points=\"2 18 7 8 12 14 17 4 22 12\"/>",
-	hash: "<line x1=\"4\" y1=\"9\" x2=\"20\" y2=\"9\"/><line x1=\"4\" y1=\"15\" x2=\"20\" y2=\"15\"/><line x1=\"10\" y1=\"3\" x2=\"8\" y2=\"21\"/><line x1=\"16\" y1=\"3\" x2=\"14\" y2=\"21\"/>",
-	square: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/>",
-	gitBranch: "<line x1=\"6\" y1=\"3\" x2=\"6\" y2=\"15\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M18 9a9 9 0 0 1-9 9\"/>",
-	ruler: "<path d=\"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z\"/><path d=\"m14.5 12.5 2-2\"/><path d=\"m11.5 9.5 2-2\"/><path d=\"m8.5 6.5 2-2\"/><path d=\"m17.5 15.5 2-2\"/>",
-	type: "<polyline points=\"4 7 4 4 20 4 20 7\"/><line x1=\"9\" y1=\"20\" x2=\"15\" y2=\"20\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\"/>",
-	magnet: "<path d=\"m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3L6 15\"/><path d=\"m5 8 4 4\"/><path d=\"m12 15 4 4\"/>",
-	undo: "<path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/>",
-	redo: "<path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\"/>",
-	trash: "<path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"/><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"/>",
-	camera: "<path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\"/><circle cx=\"12\" cy=\"13\" r=\"3\"/>",
-	settings: "<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
-	moon: "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>",
-	sun: "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2\"/><path d=\"M12 20v2\"/><path d=\"m4.93 4.93 1.41 1.41\"/><path d=\"m17.66 17.66 1.41 1.41\"/><path d=\"M2 12h2\"/><path d=\"M20 12h2\"/><path d=\"m6.34 17.66-1.41 1.41\"/><path d=\"m19.07 4.93-1.41 1.41\"/>",
-	chevronDown: "<path d=\"m6 9 6 6 6-6\"/>",
-	chevronUp: "<path d=\"m18 15-6-6-6 6\"/>",
-	barChart: "<line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"/><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"/><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"/>",
-	x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>",
-	play: "<polygon points=\"6 3 20 12 6 21 6 3\"/>",
-	pause: "<rect width=\"4\" height=\"16\" x=\"6\" y=\"4\"/><rect width=\"4\" height=\"16\" x=\"14\" y=\"4\"/>",
-	stop: "<rect width=\"14\" height=\"14\" x=\"5\" y=\"5\" rx=\"1\"/>",
-	receipt: "<path d=\"M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z\"/><path d=\"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8\"/><path d=\"M12 17.5v-11\"/>",
-	bell: "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>",
-	plus: "<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>",
-	layers: "<path d=\"m12 2 9 5-9 5-9-5 9-5Z\"/><path d=\"m3 12 9 5 9-5\"/><path d=\"m3 17 9 5 9-5\"/>",
-	eye: "<path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
-	eyeOff: "<path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a13.2 13.2 0 0 1-1.67 2.68\"/><path d=\"M6.6 6.6A13.06 13.06 0 0 0 2 11s3.5 7 10 7a9.1 9.1 0 0 0 5.4-1.6\"/><path d=\"m2 2 20 20\"/>",
-	lock: "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>",
-	unlock: "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 9.9-1\"/>",
-	palette: "<circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z\"/>",
-	trendingDown: "<polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\"/><polyline points=\"16 17 22 17 22 11\"/>",
-	check: "<polyline points=\"20 6 9 17 4 12\"/>",
-	ladder: "<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"21\"/><line x1=\"3\" y1=\"8\" x2=\"21\" y2=\"8\"/><line x1=\"3\" y1=\"13\" x2=\"21\" y2=\"13\"/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"/>"
-};
-function y(e, t = 14) {
-	let n = v[e];
-	return n ? `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${n}</svg>` : "";
+var S = (e, t) => Object.prototype.hasOwnProperty.call(e, t) ? e[t] : void 0;
+function C(e, t = 14) {
+	let n = S(_, e);
+	return n ? x(n, t) : "";
+}
+function w(e, t = 16) {
+	return x(S(v, e) ?? _.penLine, t);
+}
+function T(e, t = 14) {
+	return x(S(y, e) ?? _.barChart, t);
+}
+//#endregion
+//#region src/widget/escapeHtml.ts
+function E(e) {
+	return e.replace(/[&<>"']/g, (e) => ({
+		"&": "&amp;",
+		"<": "&lt;",
+		">": "&gt;",
+		"\"": "&quot;",
+		"'": "&#39;"
+	})[e]);
 }
 //#endregion
 //#region src/widget/WidgetDropdown.ts
-var b = class {
+var D = class {
 	trigger;
 	panel;
 	_isOpen = !1;
@@ -804,37 +1076,39 @@ var b = class {
 	destroy() {
 		this.trigger.removeEventListener("click", this.onTriggerClick), document.removeEventListener("mousedown", this.onOutsideClick), document.removeEventListener("keydown", this.onEscapeKey), this.panel.remove();
 	}
-}, ne = class {
+}, se = class {
 	config;
 	callbacks;
 	t;
 	el;
 	chartTypeDropdown = null;
 	indicatorDropdown = null;
-	tfButtons = [];
-	chipsContainer = null;
+	tfGroup = null;
+	tfDropdown = null;
+	tfFavorites = [];
+	tfRendered = "";
 	themeBtn = null;
+	fullscreenBtn = null;
 	constructor(e, t, n, r) {
 		this.config = t, this.callbacks = n, this.t = r, this.el = document.createElement("div"), this.el.className = "tcw-toolbar", this.build(), e.appendChild(this.el);
 	}
 	build() {
 		let { config: e, callbacks: t, el: n } = this, r = document.createElement("button");
-		r.className = "tcw-toolbar-symbol", r.dataset.role = "symbol", r.addEventListener("click", t.onSymbolClick), n.appendChild(r), n.appendChild(this.sep());
-		let i = document.createElement("div");
-		i.className = "tcw-toolbar-group";
-		for (let n of e.timeframes) {
-			let e = document.createElement("button");
-			e.className = "tcw-btn", e.textContent = n.label, e.dataset.tf = n.value, e.addEventListener("click", () => t.onTimeframe(n.value)), i.appendChild(e), this.tfButtons.push(e);
+		if (r.className = "tcw-toolbar-symbol", r.dataset.role = "symbol", r.addEventListener("click", t.onSymbolClick), n.appendChild(r), n.appendChild(this.sep()), this.tfFavorites = [...e.timeframeFavorites ?? e.timeframes.map((e) => e.value)], this.tfGroup = document.createElement("div"), this.tfGroup.className = "tcw-toolbar-group", n.appendChild(this.tfGroup), t.onToggleTimeframeFavorite && e.timeframes.length > 0) {
+			let e = document.createElement("div");
+			e.style.position = "relative", e.style.display = "inline-flex";
+			let t = document.createElement("button");
+			t.className = "tcw-btn tcw-tf-more", t.dataset.role = "timeframes", t.title = this.t("toolbar.timeframes"), t.setAttribute("aria-label", this.t("toolbar.timeframes")), t.innerHTML = C("chevronDown", 12), e.appendChild(t), n.appendChild(e), this.tfDropdown = new D(e, { width: "150px" }), this.buildTimeframeMenu();
 		}
-		n.appendChild(i), n.appendChild(this.sep());
-		let a = document.createElement("div");
-		a.style.position = "relative", a.style.display = "inline-flex";
-		let o = document.createElement("button");
-		o.className = "tcw-dropdown-trigger", o.dataset.role = "charttype", a.appendChild(o), n.appendChild(a), this.chartTypeDropdown = new b(a, { width: "160px" }), this.buildChartTypeMenu(), n.appendChild(this.sep());
-		let s = document.createElement("div");
-		s.style.position = "relative", s.style.display = "inline-flex";
-		let c = document.createElement("button");
-		if (c.className = "tcw-dropdown-trigger", c.dataset.role = "indicators", s.appendChild(c), n.appendChild(s), this.indicatorDropdown = new b(s, { width: "280px" }), this.buildIndicatorMenu(), this.chipsContainer = document.createElement("div"), this.chipsContainer.className = "tcw-indicator-chips", n.appendChild(this.chipsContainer), n.appendChild(this.spacer()), t.onToggleReplay) {
+		n.appendChild(this.sep());
+		let i = document.createElement("div");
+		i.style.position = "relative", i.style.display = "inline-flex";
+		let a = document.createElement("button");
+		a.className = "tcw-dropdown-trigger", a.dataset.role = "charttype", i.appendChild(a), n.appendChild(i), this.chartTypeDropdown = new D(i, { width: "160px" }), this.buildChartTypeMenu(), n.appendChild(this.sep());
+		let o = document.createElement("div");
+		o.style.position = "relative", o.style.display = "inline-flex";
+		let s = document.createElement("button");
+		if (s.className = "tcw-dropdown-trigger", s.dataset.role = "indicators", o.appendChild(s), n.appendChild(o), this.indicatorDropdown = new D(o, { width: "280px" }), this.buildIndicatorMenu(), n.appendChild(this.spacer()), t.onToggleReplay) {
 			let e = this.iconBtn("play", this.t("toolbar.replay"), t.onToggleReplay);
 			e.dataset.role = "replay", n.appendChild(e);
 		}
@@ -856,10 +1130,15 @@ var b = class {
 			let e = this.iconBtn("bell", this.t("toolbar.priceAlerts"), t.onToggleAlerts);
 			e.dataset.role = "alerts", n.appendChild(e);
 		}
-		let l = this.iconBtn("camera", this.t("toolbar.screenshot"), t.onScreenshot);
-		n.appendChild(l);
-		let u = this.iconBtn("settings", this.t("toolbar.settings"), t.onSettings);
-		n.appendChild(u), this.themeBtn = this.iconBtn("moon", this.t("toolbar.toggleTheme"), t.onToggleTheme), this.themeBtn.dataset.role = "theme", n.appendChild(this.themeBtn);
+		let c = this.iconBtn("camera", this.t("toolbar.screenshot"), t.onScreenshot);
+		n.appendChild(c);
+		let l = this.iconBtn("settings", this.t("toolbar.settings"), t.onSettings);
+		n.appendChild(l), this.themeBtn = this.iconBtn("moon", this.t("toolbar.toggleTheme"), t.onToggleTheme), this.themeBtn.dataset.role = "theme", n.appendChild(this.themeBtn), t.onToggleFullscreen && (this.fullscreenBtn = this.iconBtn("maximize", this.t("toolbar.fullscreen"), t.onToggleFullscreen), this.fullscreenBtn.dataset.role = "fullscreen", this.fullscreenBtn.setAttribute("aria-pressed", "false"), n.appendChild(this.fullscreenBtn));
+	}
+	setFullscreen(e) {
+		if (!this.fullscreenBtn) return;
+		let t = this.t(e ? "toolbar.exitFullscreen" : "toolbar.fullscreen");
+		this.fullscreenBtn.innerHTML = C(e ? "minimize" : "maximize", 14), this.fullscreenBtn.title = t, this.fullscreenBtn.setAttribute("aria-pressed", String(e));
 	}
 	chartTypeLabel(e) {
 		let t = `chartType.${e.value}`, n = this.t(t);
@@ -867,7 +1146,7 @@ var b = class {
 	}
 	buildChartTypeMenu() {
 		if (!this.chartTypeDropdown) return;
-		let e = this.config.chartTypes.map((e) => `<button class="tcw-dropdown-item" data-ct="${e.value}">${this.chartTypeLabel(e)}</button>`).join("");
+		let e = this.config.chartTypes.map((e) => `<button class="tcw-dropdown-item tcw-dropdown-item--icon" data-ct="${E(e.value)}">${T(e.value, 16)}<span>${E(this.chartTypeLabel(e))}</span></button>`).join("");
 		this.chartTypeDropdown.setContent(e), this.chartTypeDropdown.panel.querySelectorAll(".tcw-dropdown-item").forEach((e) => {
 			e.addEventListener("click", (e) => {
 				let t = e.currentTarget.dataset.ct;
@@ -875,13 +1154,43 @@ var b = class {
 			});
 		});
 	}
+	setTimeframeFavorites(e) {
+		this.tfFavorites = [...e], this.tfRendered = "", this.buildTimeframeMenu();
+	}
+	buildTimeframeMenu() {
+		if (!this.tfDropdown) return;
+		let e = E(this.t("toolbar.timeframes.pin")), t = `<div class="tcw-dropdown-label">${E(this.t("toolbar.timeframes"))}</div>`;
+		for (let n of this.config.timeframes) {
+			let r = this.tfFavorites.includes(n.value), [i, a] = [E(n.value), E(n.label)];
+			t += `<div class="tcw-tf-row"><button class="tcw-dropdown-item" data-tf-pick="${i}">${a}</button><button class="tcw-tf-star${r ? " tcw-active" : ""}" data-tf-star="${i}" aria-pressed="${r}" title="${e}" aria-label="${e}: ${a}">${C("star", 12)}</button></div>`;
+		}
+		this.tfDropdown.setContent(t);
+		let n = this.tfDropdown.panel;
+		n.querySelectorAll("[data-tf-pick]").forEach((e) => {
+			e.addEventListener("click", () => this.callbacks.onTimeframe(e.dataset.tfPick));
+		}), n.querySelectorAll("[data-tf-star]").forEach((e) => {
+			e.addEventListener("click", (t) => {
+				t.stopPropagation(), this.callbacks.onToggleTimeframeFavorite?.(e.dataset.tfStar);
+			});
+		});
+	}
+	renderTimeframes(e) {
+		if (!this.tfGroup) return;
+		let t = this.config.timeframes.filter((t) => this.tfFavorites.includes(t.value) || t.value === e), n = `${t.map((e) => e.value).join(",")}|${e}`;
+		n !== this.tfRendered && (this.tfRendered = n, this.tfGroup.replaceChildren(...t.map((t) => {
+			let n = document.createElement("button");
+			return n.className = "tcw-btn", n.textContent = t.label, n.dataset.tf = t.value, n.classList.toggle("tcw-active", t.value === e), n.addEventListener("click", () => this.callbacks.onTimeframe(t.value)), n;
+		})), (this.tfDropdown?.panel)?.querySelectorAll("[data-tf-pick]").forEach((t) => {
+			t.classList.toggle("tcw-active", t.dataset.tfPick === e);
+		}));
+	}
 	buildIndicatorMenu() {
 		if (!this.indicatorDropdown) return;
-		let { indicators: e, popularIndicatorIds: t } = this.config, n = e.filter((e) => t.includes(e.id)), r = e.filter((e) => !t.includes(e.id)), i = (e) => this.t(`indicatorType.${e}`), a = `<div class="tcw-dropdown-label">${this.t("toolbar.indicators.popular")}</div>`;
-		for (let e of n) a += `<button class="tcw-dropdown-item" data-ind="${e.id}"><span>${e.name}</span><span class="tcw-tag">${i(e.type)}</span></button>`;
-		a += "<div class=\"tcw-dropdown-divider\"></div>", a += `<div class="tcw-dropdown-label">${this.t("toolbar.indicators.all")}</div>`;
-		for (let e of r) a += `<button class="tcw-dropdown-item" data-ind="${e.id}"><span>${e.name}</span><span class="tcw-tag">${i(e.type)}</span></button>`;
-		this.indicatorDropdown.setContent(a), this.indicatorDropdown.panel.querySelectorAll(".tcw-dropdown-item[data-ind]").forEach((e) => {
+		let { indicators: e, popularIndicatorIds: t } = this.config, n = e.filter((e) => t.includes(e.id)), r = e.filter((e) => !t.includes(e.id)), i = (e) => this.t(`indicatorType.${e}`), a = (e) => `<button class="tcw-dropdown-item" data-ind="${E(e.id)}"><span>${E(e.name)}</span><span class="tcw-tag">${E(i(e.type))}</span></button>`, o = `<div class="tcw-dropdown-label">${E(this.t("toolbar.indicators.popular"))}</div>`;
+		for (let e of n) o += a(e);
+		o += "<div class=\"tcw-dropdown-divider\"></div>", o += `<div class="tcw-dropdown-label">${E(this.t("toolbar.indicators.all"))}</div>`;
+		for (let e of r) o += a(e);
+		this.indicatorDropdown.setContent(o), this.indicatorDropdown.panel.querySelectorAll(".tcw-dropdown-item[data-ind]").forEach((e) => {
 			e.addEventListener("click", (e) => {
 				let t = e.currentTarget.dataset.ind;
 				this.callbacks.onAddIndicator(t);
@@ -890,40 +1199,18 @@ var b = class {
 	}
 	update(e) {
 		let t = this.el.querySelector("[data-role=\"symbol\"]");
-		t && (t.textContent = e.symbol);
-		for (let t of this.tfButtons) t.classList.toggle("tcw-active", t.dataset.tf === e.timeframe);
+		t && (t.textContent = e.symbol), this.renderTimeframes(e.timeframe);
 		let n = this.el.querySelector("[data-role=\"charttype\"]");
 		if (n) {
 			let t = this.config.chartTypes.find((t) => t.value === e.chartType), r = t ? this.chartTypeLabel(t) : e.chartType;
-			n.innerHTML = `${y("barChart", 14)} ${r} ${y("chevronDown", 12)}`;
+			n.innerHTML = `${T(e.chartType, 14)} ${E(r)} ${C("chevronDown", 12)}`;
 		}
 		let r = this.el.querySelector("[data-role=\"indicators\"]");
 		if (r) {
-			let t = e.activeIndicators.size, n = `${y("trendingUp", 14)} ${this.t("toolbar.indicators")}`;
+			let t = e.activeIndicators.size, n = `${C("trendingUp", 14)} ${this.t("toolbar.indicators")}`;
 			t > 0 && (n += ` <span class="tcw-badge-count">${t}</span>`), r.innerHTML = n;
 		}
-		if (this.chipsContainer) {
-			let t = this.getActiveIndicatorList(e);
-			this.chipsContainer.innerHTML = "";
-			for (let e of t) {
-				let t = document.createElement("div");
-				t.className = "tcw-indicator-chip";
-				let n = document.createElement("span");
-				n.textContent = e.label, t.appendChild(n);
-				let r = document.createElement("button");
-				r.className = "tcw-chip-remove", r.innerHTML = y("x", 10), r.addEventListener("click", () => this.callbacks.onRemoveIndicator(e.instanceId)), t.appendChild(r), this.chipsContainer.appendChild(t);
-			}
-		}
-		this.themeBtn && (this.themeBtn.innerHTML = e.isDark ? y("moon", 14) : y("sun", 14));
-	}
-	getActiveIndicatorList(e) {
-		let t = [];
-		for (let [n, r] of e.activeIndicators.entries()) t.push({
-			instanceId: r,
-			id: n,
-			label: n.toUpperCase()
-		});
-		return t;
+		this.themeBtn && (this.themeBtn.innerHTML = e.isDark ? C("moon", 14) : C("sun", 14));
 	}
 	sep() {
 		let e = document.createElement("span");
@@ -935,84 +1222,33 @@ var b = class {
 	}
 	iconBtn(e, t, n) {
 		let r = document.createElement("button");
-		return r.className = "tcw-btn-icon", r.title = t, r.innerHTML = y(e, 14), r.addEventListener("click", n), r;
+		return r.className = "tcw-btn-icon", r.title = t, r.innerHTML = C(e, 14), r.addEventListener("click", n), r;
 	}
 	destroy() {
 		this.chartTypeDropdown?.destroy(), this.indicatorDropdown?.destroy(), this.el.remove();
 	}
-}, re = [
-	"trendingUp",
-	"minus",
-	"penLine",
-	"hash",
-	"square",
-	"gitBranch",
-	"zigzag",
-	"ruler",
-	"type",
-	"ladder"
-], ie = {
-	trendLine: "trendingUp",
-	ray: "trendingUp",
-	extendedLine: "trendingUp",
-	infoLine: "trendingUp",
-	trendAngle: "trendingUp",
-	horizontalLine: "minus",
-	horizontalRay: "minus",
-	verticalLine: "penLine",
-	crossLine: "plus",
-	rectangle: "square",
-	circle: "square",
-	ellipse: "square",
-	triangle: "square",
-	arrow: "trendingUp",
-	parallelChannel: "gitBranch",
-	regressionChannel: "gitBranch",
-	pitchfork: "gitBranch",
-	schiffPitchfork: "gitBranch",
-	modifiedSchiffPitchfork: "gitBranch",
-	fibRetracement: "hash",
-	fibExtension: "hash",
-	fibTimeZones: "hash",
-	fibChannel: "hash",
-	fibSpeedResistanceFan: "hash",
-	gannBox: "hash",
-	gannFan: "gitBranch",
-	cyclicLines: "barChart",
-	elliottWave: "zigzag",
-	xabcdPattern: "zigzag",
-	abcdPattern: "zigzag",
-	headAndShoulders: "zigzag",
-	priceRange: "ruler",
-	dateRange: "ruler",
-	dateAndPriceRange: "ruler",
-	measure: "ruler",
-	text: "type",
-	textAnnotation: "type",
-	priceLabel: "type",
-	anchoredVWAP: "trendingUp",
-	volumeProfileRange: "barChart",
-	riskReward: "square"
-};
-function ae(e) {
-	return ie[e] ?? "penLine";
-}
-function oe(e, t) {
+}, O = 16, ce = 150;
+function k(e, t) {
 	for (let n of e) {
 		let e = n.tools.find((e) => e.value === t);
 		if (e) return e.label;
 	}
 	return t;
 }
-var se = class {
+var le = class {
 	config;
 	callbacks;
 	el;
 	groupWraps = [];
 	groupButtons = [];
+	groupIcons = [];
+	groupTools = [];
 	cursorBtn = null;
 	magnetBtn = null;
+	stayBtn = null;
 	flyoutEl = null;
+	flyoutIdx = -1;
+	flyoutHideTimer = null;
 	favoritesEl = null;
 	favoritesDivider = null;
 	favorites = [];
@@ -1021,28 +1257,37 @@ var se = class {
 	}
 	build() {
 		let { config: e, callbacks: t, el: n } = this;
-		this.cursorBtn = document.createElement("button"), this.cursorBtn.className = "tcw-sidebar-btn", this.cursorBtn.title = "Cursor", this.cursorBtn.innerHTML = y("cursor", 14), this.cursorBtn.addEventListener("click", t.onCancelDrawing), n.appendChild(this.cursorBtn), n.appendChild(this.divider()), t.onToggleFavorite && (this.favorites = [...e.favorites ?? []], this.favoritesEl = document.createElement("div"), this.favoritesEl.className = "tcw-sidebar-favorites", n.appendChild(this.favoritesEl), this.favoritesDivider = this.divider(), n.appendChild(this.favoritesDivider), this.renderFavorites()), e.drawingToolGroups.forEach((e, r) => {
+		this.cursorBtn = document.createElement("button"), this.cursorBtn.className = "tcw-sidebar-btn", this.cursorBtn.title = "Cursor", this.cursorBtn.innerHTML = C("cursor", 14), this.cursorBtn.addEventListener("click", t.onCancelDrawing), n.appendChild(this.cursorBtn), n.appendChild(this.divider()), t.onToggleFavorite && (this.favorites = [...e.favorites ?? []], this.favoritesEl = document.createElement("div"), this.favoritesEl.className = "tcw-sidebar-favorites", n.appendChild(this.favoritesEl), this.favoritesDivider = this.divider(), n.appendChild(this.favoritesDivider), this.renderFavorites()), e.drawingToolGroups.forEach((e, r) => {
 			let i = document.createElement("div");
 			i.className = "tcw-tool-group-wrap";
 			let a = document.createElement("button");
-			if (a.className = "tcw-sidebar-btn", a.title = e.label, a.innerHTML = y(re[r] ?? "square", 14), e.tools.length > 1) {
+			a.className = "tcw-sidebar-btn";
+			let o = e.tools[0]?.value;
+			if (!o) return;
+			e.tools.length > 1 ? a.setAttribute("aria-label", `${e.label}: ${e.tools[0].label}`) : a.title = e.label;
+			let s = document.createElement("span");
+			if (s.className = "tcw-sidebar-icon", s.innerHTML = w(o, O), a.appendChild(s), this.groupIcons.push(s), this.groupTools.push(o), e.tools.length > 1) {
 				let e = document.createElement("span");
 				e.className = "tcw-multi-dot", a.appendChild(e);
 			}
-			a.addEventListener("click", () => t.onDrawingTool(e.tools[0].value)), i.appendChild(a), i.addEventListener("mouseenter", () => this.showFlyout(r)), i.addEventListener("mouseleave", () => this.hideFlyout()), n.appendChild(i), this.groupWraps.push(i), this.groupButtons.push(a);
+			a.addEventListener("click", () => t.onDrawingTool(this.groupTools[r])), i.appendChild(a), i.addEventListener("mouseenter", () => this.showFlyout(r)), i.addEventListener("mouseleave", () => this.scheduleHideFlyout()), a.addEventListener("focus", () => {
+				a.matches(":focus-visible") && this.showFlyout(r);
+			}), i.addEventListener("focusout", (e) => {
+				i.contains(e.relatedTarget) || this.scheduleHideFlyout();
+			}), n.appendChild(i), this.groupWraps.push(i), this.groupButtons.push(a);
 		});
 		let r = document.createElement("div");
 		if (r.className = "tcw-sidebar-spacer", n.appendChild(r), n.appendChild(this.divider()), t.onToggleStyle) {
 			let e = document.createElement("button");
-			e.className = "tcw-sidebar-btn", e.title = "Drawing style & templates", e.dataset.role = "style", e.innerHTML = y("palette", 14), e.addEventListener("click", t.onToggleStyle), n.appendChild(e);
+			e.className = "tcw-sidebar-btn", e.title = "Drawing style & templates", e.dataset.role = "style", e.innerHTML = C("palette", 14), e.addEventListener("click", t.onToggleStyle), n.appendChild(e);
 		}
-		this.magnetBtn = document.createElement("button"), this.magnetBtn.className = "tcw-sidebar-btn", this.magnetBtn.title = "Magnet", this.magnetBtn.innerHTML = y("magnet", 14), this.magnetBtn.addEventListener("click", t.onToggleMagnet), n.appendChild(this.magnetBtn);
+		t.onToggleMagnet && (this.magnetBtn = document.createElement("button"), this.magnetBtn.className = "tcw-sidebar-btn", this.magnetBtn.title = "Magnet", this.magnetBtn.innerHTML = C("magnet", 14), this.magnetBtn.addEventListener("click", t.onToggleMagnet), n.appendChild(this.magnetBtn)), t.onToggleStayInDrawing && (this.stayBtn = document.createElement("button"), this.stayBtn.className = "tcw-sidebar-btn", this.stayBtn.dataset.role = "stay", this.stayBtn.title = "Stay in drawing mode", this.stayBtn.setAttribute("aria-pressed", "false"), this.stayBtn.innerHTML = C("repeat", 14), this.stayBtn.addEventListener("click", t.onToggleStayInDrawing), n.appendChild(this.stayBtn));
 		let i = document.createElement("button");
-		i.className = "tcw-sidebar-btn", i.title = "Undo", i.innerHTML = y("undo", 14), i.addEventListener("click", t.onUndo), n.appendChild(i);
+		i.className = "tcw-sidebar-btn", i.title = "Undo", i.innerHTML = C("undo", 14), i.addEventListener("click", t.onUndo), n.appendChild(i);
 		let a = document.createElement("button");
-		a.className = "tcw-sidebar-btn", a.title = "Redo", a.innerHTML = y("redo", 14), a.addEventListener("click", t.onRedo), n.appendChild(a);
+		a.className = "tcw-sidebar-btn", a.title = "Redo", a.innerHTML = C("redo", 14), a.addEventListener("click", t.onRedo), n.appendChild(a);
 		let o = document.createElement("button");
-		o.className = "tcw-sidebar-btn tcw-danger", o.title = "Clear all", o.innerHTML = y("trash", 14), o.addEventListener("click", t.onClearDrawings), n.appendChild(o);
+		o.className = "tcw-sidebar-btn tcw-danger", o.title = "Clear all", o.innerHTML = C("trash", 14), o.addEventListener("click", t.onClearDrawings), n.appendChild(o);
 	}
 	setFavorites(e) {
 		this.favorites = [...e], this.renderFavorites();
@@ -1054,14 +1299,18 @@ var se = class {
 		this.favoritesEl.style.display = e ? "" : "none", this.favoritesDivider && (this.favoritesDivider.style.display = e ? "" : "none");
 		for (let e of this.favorites) {
 			let t = document.createElement("button");
-			t.className = "tcw-sidebar-btn", t.title = `${oe(this.config.drawingToolGroups, e)} (right-click to unpin)`, t.dataset.toolValue = e, t.innerHTML = y(ae(e), 14), t.addEventListener("click", () => this.callbacks.onDrawingTool(e)), t.addEventListener("contextmenu", (t) => {
+			t.className = "tcw-sidebar-btn", t.title = `${k(this.config.drawingToolGroups, e)} (right-click to unpin)`, t.dataset.toolValue = e, t.innerHTML = w(e, O), t.addEventListener("click", () => this.callbacks.onDrawingTool(e)), t.addEventListener("contextmenu", (t) => {
 				t.preventDefault(), this.callbacks.onToggleFavorite?.(e);
 			}), this.favoritesEl.appendChild(t);
 		}
 	}
 	showFlyout(e) {
+		if (this.cancelHideFlyout(), this.flyoutEl && this.flyoutIdx === e) return;
 		let t = this.config.drawingToolGroups[e];
-		if (!t || t.tools.length <= 1) return;
+		if (!t || t.tools.length <= 1) {
+			this.hideFlyout();
+			return;
+		}
 		this.hideFlyout();
 		let n = document.createElement("div");
 		n.className = "tcw-flyout";
@@ -1069,28 +1318,42 @@ var se = class {
 		r.className = "tcw-flyout-header", r.textContent = t.label, n.appendChild(r);
 		for (let e of t.tools) {
 			let t = document.createElement("button");
-			t.className = "tcw-flyout-item", t.textContent = e.label, t.dataset.toolValue = e.value, t.addEventListener("click", () => {
+			t.className = "tcw-flyout-item", t.innerHTML = w(e.value, O);
+			let r = document.createElement("span");
+			r.textContent = e.label, t.appendChild(r), t.dataset.toolValue = e.value, t.addEventListener("click", () => {
 				this.callbacks.onDrawingTool(e.value), this.hideFlyout();
-			}), this.callbacks.onToggleFavorite && (this.favorites.includes(e.value) && t.classList.add("tcw-flyout-faved"), t.title = "Right-click to pin/unpin", t.addEventListener("contextmenu", (t) => {
+			}), this.callbacks.onToggleFavorite && (this.favorites.includes(e.value) && t.classList.add("tcw-flyout-faved"), t.addEventListener("contextmenu", (t) => {
 				t.preventDefault(), this.callbacks.onToggleFavorite?.(e.value);
 			})), n.appendChild(t);
 		}
-		this.flyoutEl = n, this.groupWraps[e].appendChild(n);
+		if (this.callbacks.onToggleFavorite) {
+			let e = document.createElement("div");
+			e.className = "tcw-flyout-hint", e.textContent = "Right-click a tool to pin it", n.appendChild(e);
+		}
+		this.flyoutEl = n, this.flyoutIdx = e, this.groupWraps[e].appendChild(n);
+	}
+	scheduleHideFlyout() {
+		this.cancelHideFlyout(), this.flyoutHideTimer = setTimeout(() => {
+			this.flyoutHideTimer = null, this.hideFlyout();
+		}, ce);
+	}
+	cancelHideFlyout() {
+		this.flyoutHideTimer !== null && (clearTimeout(this.flyoutHideTimer), this.flyoutHideTimer = null);
 	}
 	hideFlyout() {
-		this.flyoutEl &&= (this.flyoutEl.remove(), null);
+		this.cancelHideFlyout(), this.flyoutEl &&= (this.flyoutEl.remove(), null), this.flyoutIdx = -1;
 	}
 	update(e) {
 		this.cursorBtn && this.cursorBtn.classList.toggle("tcw-active", e.activeTool === null);
 		let { drawingToolGroups: t } = this.config;
 		for (let n = 0; n < t.length; n++) {
 			let r = t[n].tools.some((t) => t.value === e.activeTool);
-			this.groupButtons[n].classList.toggle("tcw-active", r);
+			this.groupButtons[n].classList.toggle("tcw-active", r), r && e.activeTool && e.activeTool !== this.groupTools[n] && (this.groupTools[n] = e.activeTool, this.groupIcons[n].innerHTML = w(e.activeTool, O), t[n].tools.length > 1 && this.groupButtons[n].setAttribute("aria-label", `${t[n].label}: ${k(t, e.activeTool)}`));
 		}
 		this.flyoutEl && this.flyoutEl.querySelectorAll(".tcw-flyout-item").forEach((t) => {
 			let n = t;
 			n.classList.toggle("tcw-active", n.dataset.toolValue === e.activeTool);
-		}), this.magnetBtn && (this.magnetBtn.classList.toggle("tcw-active", e.magnetEnabled), this.magnetBtn.title = e.magnetEnabled ? "Magnet ON" : "Magnet OFF");
+		}), this.magnetBtn && (this.magnetBtn.classList.toggle("tcw-active", e.magnetEnabled), this.magnetBtn.title = e.magnetEnabled ? "Magnet ON" : "Magnet OFF"), this.stayBtn && (this.stayBtn.classList.toggle("tcw-active", e.stayInDrawing), this.stayBtn.setAttribute("aria-pressed", String(e.stayInDrawing)));
 	}
 	divider() {
 		let e = document.createElement("div");
@@ -1099,11 +1362,11 @@ var se = class {
 	destroy() {
 		this.hideFlyout(), this.el.remove();
 	}
-}, x = [
+}, ue = [
 	"style",
 	"display",
 	"scale"
-], S = class {
+], de = class {
 	callbacks;
 	t;
 	backdrop = null;
@@ -1112,8 +1375,8 @@ var se = class {
 	currentSettings = null;
 	bodyEl = null;
 	tabButtons = [];
-	constructor(e, t) {
-		this.callbacks = e, this.t = t;
+	constructor(e, t, n = {}, r = () => document.body) {
+		this.available = n, this.host = r, this.callbacks = e, this.t = t;
 	}
 	open(e) {
 		this.currentSettings = { ...e }, this.currentTab = "style", this.buildModal();
@@ -1124,18 +1387,18 @@ var se = class {
 	buildModal() {
 		this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.addEventListener("click", () => {
 			this.callbacks.onClose(), this.close();
-		}), document.body.appendChild(this.backdrop), this.modal = document.createElement("div"), this.modal.className = "tcw-modal";
+		}), this.host().appendChild(this.backdrop), this.modal = document.createElement("div"), this.modal.className = "tcw-modal";
 		let e = document.createElement("div");
 		e.className = "tcw-modal-header";
 		let t = document.createElement("h3");
 		t.textContent = this.t("settings.title"), e.appendChild(t);
 		let n = document.createElement("button");
-		n.className = "tcw-modal-close", n.innerHTML = y("x", 16), n.addEventListener("click", () => {
+		n.className = "tcw-modal-close", n.innerHTML = C("x", 16), n.addEventListener("click", () => {
 			this.callbacks.onClose(), this.close();
 		}), e.appendChild(n), this.modal.appendChild(e);
 		let r = document.createElement("div");
 		r.className = "tcw-modal-tabs", this.tabButtons = [];
-		for (let e of x) {
+		for (let e of ue) {
 			let t = document.createElement("button");
 			t.className = "tcw-modal-tab", t.textContent = this.t(`settings.tab.${e}`), t.dataset.tab = e, e === this.currentTab && t.classList.add("tcw-active"), t.addEventListener("click", () => {
 				this.currentTab = e, this.tabButtons.forEach((t) => t.classList.toggle("tcw-active", t.dataset.tab === e)), this.renderTabContent();
@@ -1149,7 +1412,7 @@ var se = class {
 		let o = document.createElement("button");
 		o.className = "tcw-done-btn", o.textContent = this.t("settings.done"), o.addEventListener("click", () => {
 			this.callbacks.onClose(), this.close();
-		}), i.appendChild(o), this.modal.appendChild(i), document.body.appendChild(this.modal);
+		}), i.appendChild(o), this.modal.appendChild(i), this.host().appendChild(this.modal);
 		let s = (e) => {
 			e.key === "Escape" && (document.removeEventListener("keydown", s), this.callbacks.onClose(), this.close());
 		};
@@ -1184,7 +1447,7 @@ var se = class {
 		}, {
 			value: "week",
 			label: "Prior Week (PWH/PWL)"
-		}], (e) => this.patch({ periodLevelsPeriod: e }))), t.appendChild(this.toggleRow("OHLC Legend", e.legendVisible, (e) => this.patch({ legendVisible: e }))), t.appendChild(this.toggleRow("Bar Countdown", e.barCountdown, (e) => this.patch({ barCountdown: e }))), t.appendChild(this.selectRow("Crosshair Mode", e.crosshairMode, [
+		}], (e) => this.patch({ periodLevelsPeriod: e }))), t.appendChild(this.toggleRow("OHLC Legend", e.legendVisible, (e) => this.patch({ legendVisible: e }))), this.available.barCountdown !== !1 && t.appendChild(this.toggleRow("Bar Countdown", e.barCountdown, (e) => this.patch({ barCountdown: e }))), t.appendChild(this.selectRow("Crosshair Mode", e.crosshairMode, [
 			{
 				label: "Magnet",
 				value: "magnet"
@@ -1260,7 +1523,8 @@ var se = class {
 	renderScaleTab() {
 		if (!this.bodyEl || !this.currentSettings) return;
 		let e = this.currentSettings, t = this.section();
-		t.appendChild(this.toggleRow("Auto Scale", e.autoScale, (e) => this.patch({ autoScale: e }))), t.appendChild(this.selectRow("Price Scale", e.scaleMode, [
+		t.appendChild(this.toggleRow("Auto Scale", e.autoScale, (e) => this.patch({ autoScale: e }))), t.appendChild(this.toggleRow("Invert Scale (Alt+I)", e.invertScale, (e) => this.patch({ invertScale: e })));
+		let n = [
 			{
 				value: "regular",
 				label: "Regular"
@@ -1277,7 +1541,8 @@ var se = class {
 				value: "indexedTo100",
 				label: "Indexed to 100"
 			}
-		], (e) => this.patch({ scaleMode: e }))), this.bodyEl.appendChild(t);
+		].filter((e) => e.value !== "logarithmic" || this.available.logScale !== !1);
+		t.appendChild(this.selectRow("Price Scale", e.scaleMode, n, (e) => this.patch({ scaleMode: e }))), this.bodyEl.appendChild(t);
 	}
 	patch(e) {
 		this.currentSettings && Object.assign(this.currentSettings, e), this.callbacks.onChange(e);
@@ -1346,15 +1611,17 @@ var se = class {
 	destroy() {
 		this.close();
 	}
-}, C = class {
+}, fe = class {
 	el;
 	dotEl;
 	messageEl;
 	infoEl;
-	constructor(e) {
-		this.el = document.createElement("div"), this.el.className = "tcw-statusbar";
-		let t = document.createElement("div");
-		t.className = "tcw-status-indicator", this.dotEl = document.createElement("span"), this.dotEl.className = "tcw-status-dot", t.appendChild(this.dotEl), this.messageEl = document.createElement("span"), t.appendChild(this.messageEl), this.el.appendChild(t), this.infoEl = document.createElement("span"), this.el.appendChild(this.infoEl), e.appendChild(this.el);
+	constructor(e, t) {
+		this.el = document.createElement("div"), this.el.className = "tcw-statusbar", t && this.el.appendChild(this.buildRange(t));
+		let n = document.createElement("div");
+		n.className = "tcw-status-right";
+		let r = document.createElement("div");
+		r.className = "tcw-status-indicator", this.dotEl = document.createElement("span"), this.dotEl.className = "tcw-status-dot", r.appendChild(this.dotEl), this.messageEl = document.createElement("span"), r.appendChild(this.messageEl), n.appendChild(r), this.infoEl = document.createElement("span"), this.infoEl.className = "tcw-status-info", n.appendChild(this.infoEl), this.el.appendChild(n), e.appendChild(this.el);
 	}
 	update(e) {
 		this.dotEl.className = "tcw-status-dot", e.connectionState === "connected" ? this.dotEl.classList.add("tcw-connected") : e.connectionState === "error" && this.dotEl.classList.add("tcw-error"), this.messageEl.textContent = e.message, this.infoEl.textContent = `${e.symbol} ${e.timeframe}`;
@@ -1362,7 +1629,17 @@ var se = class {
 	destroy() {
 		this.el.remove();
 	}
-}, w = class {
+	buildRange(e) {
+		let t = document.createElement("div");
+		t.className = "tcw-range-bar", t.setAttribute("role", "group"), t.setAttribute("aria-label", e.groupLabel);
+		for (let n of e.presets) {
+			let r = document.createElement("button");
+			r.type = "button", r.className = "tcw-range-btn", r.dataset.range = n, r.textContent = e.presetLabels?.[n] ?? n, r.addEventListener("click", () => e.onPreset(n)), t.appendChild(r);
+		}
+		let n = document.createElement("button");
+		return n.type = "button", n.className = "tcw-range-btn tcw-range-goto", n.dataset.role = "goto", n.title = `${e.goToLabel} (Alt+G)`, n.setAttribute("aria-label", e.goToLabel), n.innerHTML = C("calendar", 13), n.addEventListener("click", e.onGoTo), t.appendChild(n), t;
+	}
+}, pe = class {
 	backdrop = null;
 	modal = null;
 	input = null;
@@ -1372,8 +1649,8 @@ var se = class {
 	selectedIndex = 0;
 	callbacks;
 	boundKeydown;
-	constructor(e) {
-		this.callbacks = e, this.boundKeydown = this.handleKeydown.bind(this);
+	constructor(e, t = () => document.body) {
+		this.host = t, this.callbacks = e, this.boundKeydown = this.handleKeydown.bind(this);
 	}
 	open(e) {
 		if (this.backdrop) return;
@@ -1385,7 +1662,7 @@ var se = class {
 		let r = document.createElement("span");
 		r.className = "tcw-cmd-hint", r.textContent = "ESC", t.appendChild(r), this.modal.appendChild(t), this.list = document.createElement("div"), this.list.className = "tcw-cmd-list", this.modal.appendChild(this.list);
 		let i = document.createElement("div");
-		i.className = "tcw-cmd-footer", i.innerHTML = "<span>↑↓ Navigate</span><span>⏎ Select</span><span>Esc Close</span>", this.modal.appendChild(i), document.body.appendChild(this.backdrop), document.body.appendChild(this.modal), this.renderList(), this.input.focus(), document.addEventListener("keydown", this.boundKeydown);
+		i.className = "tcw-cmd-footer", i.innerHTML = "<span>↑↓ Navigate</span><span>⏎ Select</span><span>Esc Close</span>", this.modal.appendChild(i), this.host().append(this.backdrop, this.modal), this.renderList(), this.input.focus(), document.addEventListener("keydown", this.boundKeydown);
 	}
 	close() {
 		document.removeEventListener("keydown", this.boundKeydown), this.backdrop?.remove(), this.modal?.remove(), this.backdrop = null, this.modal = null, this.input = null, this.list = null, this.callbacks.onClose();
@@ -1487,7 +1764,7 @@ var se = class {
 	destroy() {
 		this.close();
 	}
-}, T = class {
+}, me = class {
 	backdrop = null;
 	modal = null;
 	input = null;
@@ -1499,8 +1776,8 @@ var se = class {
 	callbacks;
 	boundKeydown;
 	pickOverride = null;
-	constructor(e) {
-		this.callbacks = e, this.boundKeydown = this.handleKeydown.bind(this);
+	constructor(e, t = () => document.body) {
+		this.host = t, this.callbacks = e, this.boundKeydown = this.handleKeydown.bind(this);
 	}
 	open(e, t, n) {
 		if (this.backdrop) return;
@@ -1511,11 +1788,11 @@ var se = class {
 		let r = document.createElement("div");
 		r.className = "tcw-cmd-header";
 		let i = document.createElement("span");
-		i.className = "tcw-cmd-icon", i.innerHTML = k(), r.appendChild(i), this.input = document.createElement("input"), this.input.className = "tcw-cmd-input", this.input.type = "text", this.input.placeholder = "Search symbol… (e.g. BTC, ETH, AAPL)", this.input.autocomplete = "off", this.input.spellcheck = !1, this.input.addEventListener("input", () => this.filter()), r.appendChild(this.input);
+		i.className = "tcw-cmd-icon", i.innerHTML = _e(), r.appendChild(i), this.input = document.createElement("input"), this.input.className = "tcw-cmd-input", this.input.type = "text", this.input.placeholder = "Search symbol… (e.g. BTC, ETH, AAPL)", this.input.autocomplete = "off", this.input.spellcheck = !1, this.input.addEventListener("input", () => this.filter()), r.appendChild(this.input);
 		let a = document.createElement("span");
 		a.className = "tcw-cmd-hint", a.textContent = "ESC", r.appendChild(a), this.modal.appendChild(r), this.list = document.createElement("div"), this.list.className = "tcw-cmd-list", this.modal.appendChild(this.list);
 		let o = document.createElement("div");
-		o.className = "tcw-cmd-footer", o.innerHTML = "<span>↑↓ Navigate</span><span>⏎ Open</span><span>Esc Close</span>", this.modal.appendChild(o), document.body.appendChild(this.backdrop), document.body.appendChild(this.modal), this.renderList(), this.input.focus(), document.addEventListener("keydown", this.boundKeydown);
+		o.className = "tcw-cmd-footer", o.innerHTML = "<span>↑↓ Navigate</span><span>⏎ Open</span><span>Esc Close</span>", this.modal.appendChild(o), this.host().append(this.backdrop, this.modal), this.renderList(), this.input.focus(), document.addEventListener("keydown", this.boundKeydown);
 	}
 	close() {
 		document.removeEventListener("keydown", this.boundKeydown), this.backdrop?.remove(), this.modal?.remove(), this.backdrop = null, this.modal = null, this.input = null, this.list = null, this.pickOverride = null, this.callbacks.onClose();
@@ -1530,7 +1807,7 @@ var se = class {
 		let e = (this.input?.value ?? "").toUpperCase().trim();
 		e ? this.filtered = this.symbols.map((t) => ({
 			symbol: t,
-			score: E(t.toUpperCase(), e)
+			score: he(t.toUpperCase(), e)
 		})).filter((e) => e.score > 0).sort((e, t) => t.score - e.score) : this.filtered = this.symbols.map((e) => ({
 			symbol: e,
 			score: 0
@@ -1548,7 +1825,7 @@ var se = class {
 			let { symbol: n } = this.filtered[t], r = document.createElement("button");
 			r.className = "tcw-cmd-item", t === this.selectedIndex && r.classList.add("tcw-selected"), n === this.current && r.classList.add("tcw-active");
 			let i = document.createElement("span");
-			if (i.className = "tcw-cmd-item-label", i.innerHTML = D(n, e), r.appendChild(i), n === this.current) {
+			if (i.className = "tcw-cmd-item-label", i.innerHTML = ge(n, e), r.appendChild(i), n === this.current) {
 				let e = document.createElement("span");
 				e.className = "tcw-cmd-check", e.textContent = "✓", r.appendChild(e);
 			}
@@ -1585,7 +1862,7 @@ var se = class {
 		}
 	}
 };
-function E(e, t) {
+function he(e, t) {
 	if (e === t) return 1e3;
 	if (e.startsWith(t)) return 500 + (50 - Math.min(50, e.length - t.length));
 	if (e.includes(t)) return 200 + (50 - Math.min(50, e.length - t.length));
@@ -1593,44 +1870,43 @@ function E(e, t) {
 	for (let a = 0; a < e.length && n < t.length; a++) e[a] === t[n] && (r >= 0 && (i += a - r - 1), r = a, n++);
 	return n < t.length ? 0 : 100 - Math.min(99, i);
 }
-function D(e, t) {
-	if (!t) return O(e);
+function ge(e, t) {
+	if (!t) return E(e);
 	let n = e.toUpperCase(), r = "", i = 0;
-	for (let a = 0; a < e.length; a++) i < t.length && n[a] === t[i] ? (r += `<mark style="background:transparent;color:var(--tcw-accent);font-weight:700">${O(e[a])}</mark>`, i++) : r += O(e[a]);
+	for (let a = 0; a < e.length; a++) i < t.length && n[a] === t[i] ? (r += `<mark style="background:transparent;color:var(--tcw-accent);font-weight:700">${E(e[a])}</mark>`, i++) : r += E(e[a]);
 	return r;
 }
-function O(e) {
-	return e.replace(/[&<>"']/g, (e) => ({
-		"&": "&amp;",
-		"<": "&lt;",
-		">": "&gt;",
-		"\"": "&quot;",
-		"'": "&#39;"
-	})[e]);
-}
-function k() {
+function _e() {
 	return "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m21 21-4.3-4.3\"/></svg>";
 }
 //#endregion
 //#region src/widget/WidgetHotkeySheet.ts
-var A = {
+var ve = {
 	"Search & navigation": "hotkeys.group.searchNavigation",
 	"Chart manipulation": "hotkeys.group.chartManipulation",
 	"Touch (mobile / tablet)": "hotkeys.group.touch",
 	Keyboard: "hotkeys.group.keyboard",
 	Drawing: "hotkeys.group.drawing"
-}, j = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent) ? "⌘" : "Ctrl", M = [
+}, A = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent) ? "⌘" : "Ctrl", ye = [
 	{
 		title: "Search & navigation",
 		entries: [
 			{
-				keys: [j, "K"],
+				keys: [A, "K"],
 				label: "Command palette"
 			},
 			{
-				keys: [j, "P"],
+				keys: [A, "P"],
 				label: "Symbol search"
 			},
+			{
+				keys: ["Alt", "G"],
+				label: "Go to date"
+			},
+			{
+				keys: ["Alt", "I"],
+				label: "Invert price scale"
+			},
 			{
 				keys: ["?"],
 				label: "Show this sheet"
@@ -1645,11 +1921,11 @@ var A = {
 				label: "Pan — past the last bar into empty future space"
 			},
 			{
-				keys: [j, "Drag"],
+				keys: [A, "Drag"],
 				label: "Select drawings in a box"
 			},
 			{
-				keys: [j, "Click"],
+				keys: [A, "Click"],
 				label: "Add / remove a drawing from the selection"
 			},
 			{
@@ -1728,12 +2004,12 @@ var A = {
 		title: "Drawing",
 		entries: [
 			{
-				keys: [j, "Z"],
+				keys: [A, "Z"],
 				label: "Undo"
 			},
 			{
 				keys: [
-					j,
+					A,
 					"Shift",
 					"Z"
 				],
@@ -1742,17 +2018,25 @@ var A = {
 			{
 				keys: ["Esc"],
 				label: "Cancel active drawing"
+			},
+			{
+				keys: [A, "C"],
+				label: "Copy selected drawings"
+			},
+			{
+				keys: [A, "V"],
+				label: "Paste drawings (into any chart on the page)"
 			}
 		]
 	}
-], N = class {
+], be = class {
 	backdrop = null;
 	modal = null;
 	callbacks;
 	t;
 	boundKeydown;
-	constructor(e, t) {
-		this.callbacks = e, this.t = t, this.boundKeydown = (e) => {
+	constructor(e, t, n = () => document.body) {
+		this.host = n, this.callbacks = e, this.t = t, this.boundKeydown = (e) => {
 			e.key === "Escape" && (e.preventDefault(), this.close());
 		};
 	}
@@ -1767,12 +2051,12 @@ var A = {
 		n.className = "tcw-modal-body";
 		let r = document.createElement("div");
 		r.className = "tcw-hotkey-grid";
-		for (let e of M) {
+		for (let e of ye) {
 			let t = document.createElement("section");
 			t.className = "tcw-hotkey-section";
 			let n = document.createElement("div");
 			n.className = "tcw-settings-section-title";
-			let i = A[e.title];
+			let i = ve[e.title];
 			n.textContent = i ? this.t(i) : e.title, t.appendChild(n);
 			for (let n of e.entries) {
 				let e = document.createElement("div");
@@ -1797,7 +2081,7 @@ var A = {
 		let i = document.createElement("div");
 		i.className = "tcw-modal-footer", i.innerHTML = "<span style=\"font-size:11px;color:var(--tcw-text-muted)\">Press ? anytime to show this sheet</span>";
 		let a = document.createElement("button");
-		a.className = "tcw-done-btn", a.textContent = this.t("hotkeys.gotIt"), a.addEventListener("click", () => this.close()), i.appendChild(a), this.modal.appendChild(i), document.body.appendChild(this.backdrop), document.body.appendChild(this.modal), document.addEventListener("keydown", this.boundKeydown);
+		a.className = "tcw-done-btn", a.textContent = this.t("hotkeys.gotIt"), a.addEventListener("click", () => this.close()), i.appendChild(a), this.modal.appendChild(i), this.host().append(this.backdrop, this.modal), document.addEventListener("keydown", this.boundKeydown);
 	}
 	close() {
 		document.removeEventListener("keydown", this.boundKeydown), this.backdrop?.remove(), this.modal?.remove(), this.backdrop = null, this.modal = null, this.callbacks.onClose();
@@ -1808,90 +2092,127 @@ var A = {
 	destroy() {
 		this.close();
 	}
-}, P = [
-	.5,
+}, xe = {
+	selectHint: "Click a bar to start the replay",
+	random: "Random bar",
+	realtime: "Back to realtime",
+	barsPerSecond: "bars/s",
+	play: "Play",
+	pause: "Pause",
+	stepBack: "Step back (Shift+←)",
+	stepForward: "Step forward (Shift+→)"
+}, Se = [
 	1,
 	2,
+	3,
 	5,
 	10,
-	20,
-	50,
-	100
-], F = class {
+	25,
+	50
+], Ce = class {
 	root = null;
 	scrubber = null;
 	progressLabel = null;
 	playBtn = null;
+	realtimeBtn = null;
 	state = "stopped";
+	mode = "select";
+	ended = !1;
 	total = 0;
 	speed = 5;
-	callbacks;
-	constructor(e) {
-		this.callbacks = e;
+	labels;
+	constructor(e, t = {}) {
+		this.callbacks = e, this.labels = {
+			...xe,
+			...t
+		};
 	}
 	mount(e, t) {
-		this.root || (this.total = Math.max(0, t.total), this.speed = t.speed ?? 5, this.state = "paused", this.root = document.createElement("div"), this.root.className = "tcw-replay-bar", this.root.innerHTML = this.markup(), e.appendChild(this.root), this.wireEvents(), this.syncUi());
+		this.root || (this.total = Math.max(0, t.total), this.speed = t.speed ?? 5, this.state = "paused", this.mode = t.mode ?? "select", this.root = document.createElement("div"), this.root.className = "tcw-replay-bar", this.root.setAttribute("role", "toolbar"), this.root.setAttribute("aria-label", "Replay"), this.root.innerHTML = this.markup(), e.appendChild(this.root), this.wireEvents(), this.syncUi());
 	}
 	unmount() {
-		this.root?.remove(), this.root = null, this.scrubber = null, this.progressLabel = null, this.playBtn = null, this.state = "stopped";
+		this.root?.remove(), this.root = null, this.scrubber = null, this.progressLabel = null, this.playBtn = null, this.realtimeBtn = null, this.state = "stopped", this.ended = !1;
 	}
 	isMounted() {
 		return this.root !== null;
 	}
+	getMode() {
+		return this.mode;
+	}
+	setMode(e) {
+		let t = !!this.root?.contains(document.activeElement);
+		this.mode = e, this.syncUi(), t && e === "replay" && this.playBtn?.focus();
+	}
 	setState(e) {
 		this.state = e, this.syncUi();
 	}
+	setEnded(e) {
+		this.ended !== e && (this.ended = e, this.syncUi());
+	}
 	setProgress(e, t) {
-		this.total = t, this.scrubber && (this.scrubber.max = String(Math.max(0, t - 1)), this.scrubber.value = String(e)), this.progressLabel && (this.progressLabel.textContent = `${e + 1} / ${t}`);
+		this.total = t, this.scrubber && (this.scrubber.max = String(Math.max(0, t - 1)), this.scrubber.value = String(e)), this.progressLabel && (this.progressLabel.textContent = `${Math.min(e + 1, t)} / ${t}`);
 	}
 	destroy() {
 		this.unmount();
 	}
 	markup() {
-		let e = P.map((e) => `<option value="${e}"${e === this.speed ? " selected" : ""}>${e}× bars/s</option>`).join("");
+		let e = this.labels, t = Se.map((t) => `<option value="${t}"${t === this.speed ? " selected" : ""}>${t} ${E(e.barsPerSecond)}</option>`).join("");
 		return `
-      <button class="tcw-replay-btn" data-act="close" title="Exit replay" aria-label="Exit replay">${B()}</button>
-      <button class="tcw-replay-btn" data-act="stepBack" title="Step back" aria-label="Step back">${R()}</button>
-      <button class="tcw-replay-btn tcw-replay-play" data-act="play" title="Play / pause" aria-label="Play / pause">${I()}</button>
-      <button class="tcw-replay-btn" data-act="stepForward" title="Step forward" aria-label="Step forward">${z()}</button>
-      <input type="range" class="tcw-replay-scrubber" data-act="seek" min="0" max="${Math.max(0, this.total - 1)}" value="0" step="1" />
-      <span class="tcw-replay-progress" data-tcw="progress">1 / ${this.total}</span>
-      <select class="tcw-replay-speed" data-act="speed">${e}</select>
+      <span class="tcw-replay-group" data-mode="select">
+        <span class="tcw-replay-hint" role="status">${De()}${E(e.selectHint)}</span>
+        <button class="tcw-replay-text-btn" data-act="random">${E(e.random)}</button>
+      </span>
+      <span class="tcw-replay-group" data-mode="replay">
+        <button class="tcw-replay-btn" data-act="stepBack" title="${E(e.stepBack)}" aria-label="${E(e.stepBack)}">${Te()}</button>
+        <button class="tcw-replay-btn tcw-replay-play" data-act="play" title="${E(e.play)}" aria-label="${E(e.play)}">${j()}</button>
+        <button class="tcw-replay-btn" data-act="stepForward" title="${E(e.stepForward)}" aria-label="${E(e.stepForward)}">${Ee()}</button>
+        <input type="range" class="tcw-replay-scrubber" data-act="seek" min="0" max="${Math.max(0, this.total - 1)}" value="0" step="1" aria-label="Replay position" />
+        <span class="tcw-replay-progress" data-tcw="progress">1 / ${this.total}</span>
+        <select class="tcw-replay-speed" data-act="speed" aria-label="Speed">${t}</select>
+      </span>
+      <button class="tcw-replay-text-btn tcw-replay-realtime" data-act="realtime">${E(e.realtime)}</button>
     `;
 	}
 	wireEvents() {
-		this.root && (this.scrubber = this.root.querySelector("input[data-act=\"seek\"]"), this.progressLabel = this.root.querySelector("[data-tcw=\"progress\"]"), this.playBtn = this.root.querySelector("button[data-act=\"play\"]"), this.root.querySelector("[data-act=\"close\"]")?.addEventListener("click", () => this.callbacks.onClose()), this.root.querySelector("[data-act=\"stepBack\"]")?.addEventListener("click", () => this.callbacks.onStepBack()), this.root.querySelector("[data-act=\"stepForward\"]")?.addEventListener("click", () => this.callbacks.onStepForward()), this.playBtn?.addEventListener("click", () => {
+		let e = this.root;
+		e && (this.scrubber = e.querySelector("input[data-act=\"seek\"]"), this.progressLabel = e.querySelector("[data-tcw=\"progress\"]"), this.playBtn = e.querySelector("button[data-act=\"play\"]"), this.realtimeBtn = e.querySelector("button[data-act=\"realtime\"]"), this.realtimeBtn?.addEventListener("click", () => this.callbacks.onClose()), e.querySelector("[data-act=\"random\"]")?.addEventListener("click", () => this.callbacks.onRandomStart()), e.querySelector("[data-act=\"stepBack\"]")?.addEventListener("click", () => this.callbacks.onStepBack()), e.querySelector("[data-act=\"stepForward\"]")?.addEventListener("click", () => this.callbacks.onStepForward()), this.playBtn?.addEventListener("click", () => {
 			this.state === "playing" ? this.callbacks.onPause() : this.callbacks.onPlay();
-		}), this.scrubber?.addEventListener("input", () => {
-			let e = Number(this.scrubber.value);
-			this.callbacks.onSeek(e);
-		}), this.root.querySelector("[data-act=\"speed\"]")?.addEventListener("change", (e) => {
+		}), this.scrubber?.addEventListener("input", () => this.callbacks.onSeek(Number(this.scrubber.value))), e.querySelector("[data-act=\"speed\"]")?.addEventListener("change", (e) => {
 			let t = Number(e.target.value);
 			this.speed = t, this.callbacks.onSpeedChange(t);
 		}));
 	}
 	syncUi() {
-		this.playBtn && (this.playBtn.innerHTML = this.state === "playing" ? L() : I(), this.playBtn.title = this.state === "playing" ? "Pause" : "Play");
+		let e = this.root;
+		if (e) {
+			for (let t of e.querySelectorAll(".tcw-replay-group")) t.hidden = t.dataset.mode !== this.mode;
+			if (e.classList.toggle("tcw-replay-bar--ended", this.ended), this.playBtn) {
+				let e = this.state === "playing";
+				this.playBtn.innerHTML = e ? we() : j(), this.playBtn.title = e ? this.labels.pause : this.labels.play, this.playBtn.setAttribute("aria-label", this.playBtn.title);
+				let t = this.ended && !e;
+				t && document.activeElement === this.playBtn && this.realtimeBtn?.focus(), this.playBtn.disabled = t;
+			}
+		}
 	}
 };
-function I() {
-	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7L8 5z\"/></svg>";
+function j() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7L8 5z\"/></svg>";
 }
-function L() {
-	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M6 5h4v14H6zM14 5h4v14h-4z\"/></svg>";
+function we() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M6 5h4v14H6zM14 5h4v14h-4z\"/></svg>";
 }
-function R() {
-	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M6 6h2v12H6zM20 6L9 12l11 6V6z\"/></svg>";
+function Te() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M6 6h2v12H6zM20 6L9 12l11 6V6z\"/></svg>";
 }
-function z() {
-	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4 6l11 6L4 18V6zM16 6h2v12h-2z\"/></svg>";
+function Ee() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M4 6l11 6L4 18V6zM16 6h2v12h-2z\"/></svg>";
 }
-function B() {
-	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>";
+function De() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3v18M8 7l4-4 4 4M8 17l4 4 4-4\"/></svg>";
 }
 //#endregion
 //#region src/widget/WidgetWatchlist.ts
-var V = class {
+var Oe = class {
 	el;
 	listEl;
 	rowMap = /* @__PURE__ */ new Map();
@@ -1935,7 +2256,7 @@ var V = class {
 		let t = document.createElement("div");
 		t.className = "tcw-watchlist-row", t.tabIndex = 0;
 		let n = document.createElement("div");
-		n.className = "tcw-watchlist-symbol", n.textContent = H(e);
+		n.className = "tcw-watchlist-symbol", n.textContent = ke(e);
 		let r = document.createElement("canvas");
 		r.className = "tcw-watchlist-spark", r.width = 64, r.height = 22;
 		let i = document.createElement("div");
@@ -1959,18 +2280,18 @@ var V = class {
 	renderRow(e) {
 		let t = this.rowMap.get(e), n = this.entries.get(e);
 		if (!(!t || !n)) {
-			if (n.lastPrice !== void 0 && (t.priceEl.textContent = U(n.lastPrice, this.locale)), n.lastPrice !== void 0 && n.refPrice !== void 0 && n.refPrice !== 0) {
+			if (n.lastPrice !== void 0 && (t.priceEl.textContent = Ae(n.lastPrice, this.locale)), n.lastPrice !== void 0 && n.refPrice !== void 0 && n.refPrice !== 0) {
 				let e = n.lastPrice - n.refPrice, r = e / n.refPrice * 100, i = e >= 0 ? "+" : "-", a = Math.abs(r).toLocaleString(this.locale, {
 					minimumFractionDigits: 2,
 					maximumFractionDigits: 2
 				});
 				t.changeEl.textContent = `${i}${a}%`, t.changeEl.className = `tcw-watchlist-change ${e >= 0 ? "tcw-up" : "tcw-down"}`;
 			} else t.changeEl.textContent = "";
-			n.sparkline && n.sparkline.length >= 2 && W(t.sparkCanvas, n.sparkline, n.refPrice ?? n.sparkline[0]);
+			n.sparkline && n.sparkline.length >= 2 && je(t.sparkCanvas, n.sparkline, n.refPrice ?? n.sparkline[0]);
 		}
 	}
 };
-function H(e) {
+function ke(e) {
 	for (let t of [
 		"USDT",
 		"USD",
@@ -1980,7 +2301,7 @@ function H(e) {
 	]) if (e.length > t.length && e.endsWith(t)) return e.slice(0, -t.length) + "/" + t;
 	return e;
 }
-function U(e, t) {
+function Ae(e, t) {
 	if (e === 0) return "0";
 	let n = Math.abs(e);
 	return n >= 1e3 ? e.toLocaleString(t, {
@@ -1991,7 +2312,7 @@ function U(e, t) {
 		maximumFractionDigits: 4
 	}) : Number(e.toPrecision(4)).toLocaleString(t, { maximumFractionDigits: 10 });
 }
-function W(e, t, n) {
+function je(e, t, n) {
 	let r = e.getContext("2d");
 	if (!r) return;
 	let i = window.devicePixelRatio || 1;
@@ -2009,7 +2330,7 @@ function W(e, t, n) {
 }
 //#endregion
 //#region src/widget/WidgetAlertsPanel.ts
-var G = [
+var M = [
 	{
 		value: "crossing",
 		label: "Crossing"
@@ -2030,15 +2351,15 @@ var G = [
 		value: "lessThan",
 		label: "Less than"
 	}
-], K = new Map(G.map((e) => [e.value, e.label]));
-function ce(e) {
+], Me = new Map(M.map((e) => [e.value, e.label]));
+function Ne(e) {
 	return Math.round(e * 1e6) / 1e6;
 }
-function le(e) {
+function Pe(e) {
 	let t = Math.abs(e);
 	return t >= 1e3 || t >= 1 ? e.toFixed(2) : e.toPrecision(4);
 }
-var ue = class {
+var Fe = class {
 	el;
 	listEl;
 	priceInput;
@@ -2060,16 +2381,16 @@ var ue = class {
 		let r = document.createElement("span");
 		r.textContent = "Price Alerts";
 		let i = document.createElement("button");
-		i.className = "tcw-alerts-close", i.type = "button", i.setAttribute("aria-label", "Close alerts"), i.innerHTML = y("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n);
+		i.className = "tcw-alerts-close", i.type = "button", i.setAttribute("aria-label", "Close alerts"), i.innerHTML = C("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n);
 		let a = document.createElement("form");
 		a.className = "tcw-alerts-form", this.sourceSelect = document.createElement("select"), this.sourceSelect.className = "tcw-alerts-source", this.sourceSelect.addEventListener("change", () => this.prefillPrice()), this.priceInput = document.createElement("input"), this.priceInput.type = "number", this.priceInput.step = "any", this.priceInput.placeholder = "Value", this.priceInput.className = "tcw-alerts-price", this.priceInput.required = !0, this.conditionSelect = document.createElement("select"), this.conditionSelect.className = "tcw-alerts-condition";
-		for (let e of G) {
+		for (let e of M) {
 			let t = document.createElement("option");
 			t.value = e.value, t.textContent = e.label, this.conditionSelect.appendChild(t);
 		}
 		this.messageInput = document.createElement("input"), this.messageInput.type = "text", this.messageInput.placeholder = "Note (optional)", this.messageInput.className = "tcw-alerts-message";
 		let o = document.createElement("button");
-		o.type = "submit", o.className = "tcw-alerts-add", o.innerHTML = `${y("plus", 14)}<span>Add alert</span>`, a.appendChild(this.sourceSelect), a.appendChild(this.priceInput), a.appendChild(this.conditionSelect), a.appendChild(this.messageInput), a.appendChild(o), a.addEventListener("submit", (e) => {
+		o.type = "submit", o.className = "tcw-alerts-add", o.innerHTML = `${C("plus", 14)}<span>Add alert</span>`, a.appendChild(this.sourceSelect), a.appendChild(this.priceInput), a.appendChild(this.conditionSelect), a.appendChild(this.messageInput), a.appendChild(o), a.addEventListener("submit", (e) => {
 			e.preventDefault(), this.submitForm();
 		}), this.el.appendChild(a), this.listEl = document.createElement("div"), this.listEl.className = "tcw-alerts-list", this.el.appendChild(this.listEl), this.emptyEl = document.createElement("div"), this.emptyEl.className = "tcw-alerts-empty", this.emptyEl.textContent = "No alerts yet. Add one above, or right-click the chart.", this.listEl.appendChild(this.emptyEl), this.renderSources(), e.appendChild(this.el);
 	}
@@ -2099,7 +2420,7 @@ var ue = class {
 	}
 	prefillPrice() {
 		let e = this.callbacks.getChannelValue(this.sourceSelect.value || "price");
-		this.priceInput.value = e === null ? "" : String(ce(e));
+		this.priceInput.value = e === null ? "" : String(Ne(e));
 	}
 	close() {
 		this.open = !1, this.el.hidden = !0;
@@ -2128,7 +2449,7 @@ var ue = class {
 			n.className = "tcw-alerts-info";
 			let r = document.createElement("div");
 			r.className = "tcw-alerts-row-main";
-			let i = K.get(e.condition) ?? e.condition, a = e.channel && e.channel !== "price", o = a ? le(e.price) : this.callbacks.formatPrice(e.price);
+			let i = Me.get(e.condition) ?? e.condition, a = e.channel && e.channel !== "price", o = a ? Pe(e.price) : this.callbacks.formatPrice(e.price);
 			if (r.textContent = `${a && e.label ? `${e.label} ` : ""}${i} ${o}`, n.appendChild(r), e.message) {
 				let t = document.createElement("div");
 				t.className = "tcw-alerts-row-note", t.textContent = e.message, n.appendChild(t);
@@ -2138,10 +2459,10 @@ var ue = class {
 				e.className = "tcw-alerts-badge", e.textContent = "triggered", r.appendChild(e);
 			}
 			let s = document.createElement("button");
-			s.type = "button", s.className = "tcw-alerts-del", s.setAttribute("aria-label", "Delete alert"), s.innerHTML = y("trash", 14), s.addEventListener("click", () => this.callbacks.onRemove(e.id)), t.appendChild(n), t.appendChild(s), this.listEl.appendChild(t);
+			s.type = "button", s.className = "tcw-alerts-del", s.setAttribute("aria-label", "Delete alert"), s.innerHTML = C("trash", 14), s.addEventListener("click", () => this.callbacks.onRemove(e.id)), t.appendChild(n), t.appendChild(s), this.listEl.appendChild(t);
 		}
 	}
-}, de = class {
+}, Ie = class {
 	el;
 	indicatorsEl;
 	drawingsEl;
@@ -2155,7 +2476,7 @@ var ue = class {
 		let r = document.createElement("span");
 		r.textContent = "Objects";
 		let i = document.createElement("button");
-		i.type = "button", i.className = "tcw-tree-close", i.setAttribute("aria-label", "Close objects"), i.innerHTML = y("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n), this.indicatorsEl = this.makeSection("Indicators"), this.drawingsEl = this.makeSection("Drawings"), this.callbacks.onAddCompare && (this.compareEl = this.makeSection("Compare", () => this.callbacks.onAddCompare?.())), e.appendChild(this.el);
+		i.type = "button", i.className = "tcw-tree-close", i.setAttribute("aria-label", "Close objects"), i.innerHTML = C("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n), this.indicatorsEl = this.makeSection("Indicators"), this.drawingsEl = this.makeSection("Drawings"), this.callbacks.onAddCompare && (this.compareEl = this.makeSection("Compare", () => this.callbacks.onAddCompare?.())), e.appendChild(this.el);
 	}
 	isOpen() {
 		return this.open;
@@ -2183,7 +2504,7 @@ var ue = class {
 		let i = document.createElement("span");
 		if (i.textContent = e, r.appendChild(i), t) {
 			let n = document.createElement("button");
-			n.type = "button", n.className = "tcw-tree-add", n.setAttribute("aria-label", `Add ${e.toLowerCase()}`), n.title = `Add ${e.toLowerCase()}`, n.innerHTML = y("plus", 13), n.addEventListener("click", t), r.appendChild(n);
+			n.type = "button", n.className = "tcw-tree-add", n.setAttribute("aria-label", `Add ${e.toLowerCase()}`), n.title = `Add ${e.toLowerCase()}`, n.innerHTML = C("plus", 13), n.addEventListener("click", t), r.appendChild(n);
 		}
 		let a = document.createElement("div");
 		return a.className = "tcw-tree-list", n.appendChild(r), n.appendChild(a), this.el.appendChild(n), a;
@@ -2236,9 +2557,9 @@ var ue = class {
 	}
 	iconButton(e, t, n, r) {
 		let i = document.createElement("button");
-		return i.type = "button", i.className = `tcw-tree-btn ${n}`.trim(), i.setAttribute("aria-label", t), i.title = t, i.innerHTML = y(e, 14), i.addEventListener("click", r), i;
+		return i.type = "button", i.className = `tcw-tree-btn ${n}`.trim(), i.setAttribute("aria-label", t), i.title = t, i.innerHTML = C(e, 14), i.addEventListener("click", r), i;
 	}
-}, fe = {
+}, Le = {
 	trendLine: "Trend Line",
 	ray: "Ray",
 	extendedLine: "Extended Line",
@@ -2281,16 +2602,16 @@ var ue = class {
 	volumeProfileRange: "Volume Profile",
 	riskReward: "Long/Short Position"
 };
-function pe(e) {
-	return fe[e] ?? e;
+function Re(e) {
+	return Le[e] ?? e;
 }
 //#endregion
 //#region src/widget/WidgetIndicatorSettings.ts
-var me = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-function he(e) {
+var ze = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function Be(e) {
 	return e.replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^./, (e) => e.toUpperCase());
 }
-var ge = class {
+var Ve = class {
 	backdrop;
 	modal;
 	bodyEl;
@@ -2305,7 +2626,7 @@ var ge = class {
 		let n = document.createElement("div");
 		n.className = "tcw-modal-header", this.titleEl = document.createElement("h3"), this.titleEl.textContent = "Indicator";
 		let r = document.createElement("button");
-		r.className = "tcw-modal-close", r.setAttribute("aria-label", "Close"), r.innerHTML = y("x", 16), r.addEventListener("click", () => this.close()), n.appendChild(this.titleEl), n.appendChild(r), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-modal-body";
+		r.className = "tcw-modal-close", r.setAttribute("aria-label", "Close"), r.innerHTML = C("x", 16), r.addEventListener("click", () => this.close()), n.appendChild(this.titleEl), n.appendChild(r), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-modal-body";
 		let i = document.createElement("div");
 		i.className = "tcw-modal-footer";
 		let a = document.createElement("button");
@@ -2355,9 +2676,9 @@ var ge = class {
 		let t = document.createElement("div");
 		t.className = "tcw-settings-row";
 		let n = document.createElement("span");
-		n.className = "tcw-settings-label", n.textContent = he(e), t.appendChild(n);
+		n.className = "tcw-settings-label", n.textContent = Be(e), t.appendChild(n);
 		let r = this.currentValue(e), i = typeof (this.target?.defaults[e] ?? r);
-		return i === "boolean" ? t.appendChild(this.toggleControl(e, !!r)) : i === "number" ? t.appendChild(this.numberControl(e, Number(r))) : typeof r == "string" && me.test(r) ? t.appendChild(this.colorControl(e, r)) : t.appendChild(this.textControl(e, String(r ?? ""))), t;
+		return i === "boolean" ? t.appendChild(this.toggleControl(e, !!r)) : i === "number" ? t.appendChild(this.numberControl(e, Number(r))) : typeof r == "string" && ze.test(r) ? t.appendChild(this.colorControl(e, r)) : t.appendChild(this.textControl(e, String(r ?? ""))), t;
 	}
 	toggleControl(e, t) {
 		let n = document.createElement("button");
@@ -2375,27 +2696,27 @@ var ge = class {
 	}
 	colorControl(e, t) {
 		let n = document.createElement("input");
-		return n.type = "color", n.className = "tcw-indi-color", n.value = t.length === 4 ? _e(t) : t, n.addEventListener("input", () => this.setValue(e, n.value)), n;
+		return n.type = "color", n.className = "tcw-indi-color", n.value = t.length === 4 ? He(t) : t, n.addEventListener("input", () => this.setValue(e, n.value)), n;
 	}
 	textControl(e, t) {
 		let n = document.createElement("input");
 		return n.type = "text", n.className = "tcw-indi-input", n.value = t, n.addEventListener("change", () => this.setValue(e, n.value)), n;
 	}
 };
-function _e(e) {
+function He(e) {
 	let t = e[1], n = e[2], r = e[3];
 	return `#${t}${t}${n}${n}${r}${r}`;
 }
 //#endregion
 //#region src/widget/DrawingTemplateStore.ts
-function ve() {
+function Ue() {
 	try {
 		return typeof localStorage < "u" ? localStorage : null;
 	} catch {
 		return null;
 	}
 }
-var ye = [
+var We = [
 	"color",
 	"lineWidth",
 	"lineStyle",
@@ -2403,15 +2724,15 @@ var ye = [
 	"fillOpacity",
 	"fontSize"
 ];
-function q(e) {
+function N(e) {
 	if (!e || typeof e != "object") return {};
 	let t = {}, n = e;
-	for (let e of ye) n[e] !== void 0 && (t[e] = n[e]);
+	for (let e of We) n[e] !== void 0 && (t[e] = n[e]);
 	return t;
 }
-var be = class {
+var Ge = class {
 	templates = [];
-	constructor(e = "tcw:draw-templates", t = ve()) {
+	constructor(e = "tcw:draw-templates", t = Ue()) {
 		this.storageKey = e, this.storage = t, this.load();
 	}
 	list() {
@@ -2430,7 +2751,7 @@ var be = class {
 	save(e, t) {
 		let n = e.trim();
 		if (!n) return;
-		let r = q(t);
+		let r = N(t);
 		this.templates = this.templates.filter((e) => e.name !== n), this.templates.push({
 			name: n,
 			style: r
@@ -2451,7 +2772,7 @@ var be = class {
 			if (!Array.isArray(t)) return;
 			this.templates = t.filter((e) => e && typeof e.name == "string").map((e) => ({
 				name: e.name,
-				style: q(e.style)
+				style: N(e.style)
 			}));
 		} catch {}
 	}
@@ -2460,7 +2781,7 @@ var be = class {
 			this.storage.setItem(this.storageKey, JSON.stringify(this.templates));
 		} catch {}
 	}
-}, xe = [
+}, Ke = [
 	"#4c8dff",
 	"#1fa874",
 	"#e8505b",
@@ -2469,16 +2790,16 @@ var be = class {
 	"#1398a8",
 	"#ffffff",
 	"#7d8696"
-], Se = [
+], qe = [
 	1,
 	2,
 	3,
 	4
-], Ce = [
+], Je = [
 	"solid",
 	"dashed",
 	"dotted"
-], we = class {
+], Ye = class {
 	el;
 	templatesEl;
 	nameInput;
@@ -2492,13 +2813,13 @@ var be = class {
 		let i = document.createElement("span");
 		i.textContent = "Drawing Style";
 		let a = document.createElement("button");
-		a.type = "button", a.className = "tcw-style-close", a.setAttribute("aria-label", "Close"), a.innerHTML = y("x", 14), a.addEventListener("click", () => this.close()), r.appendChild(i), r.appendChild(a), this.el.appendChild(r), this.el.appendChild(this.colorRow()), this.el.appendChild(this.widthRow()), this.el.appendChild(this.lineStyleRow());
+		a.type = "button", a.className = "tcw-style-close", a.setAttribute("aria-label", "Close"), a.innerHTML = C("x", 14), a.addEventListener("click", () => this.close()), r.appendChild(i), r.appendChild(a), this.el.appendChild(r), this.el.appendChild(this.colorRow()), this.el.appendChild(this.widthRow()), this.el.appendChild(this.lineStyleRow());
 		let o = document.createElement("div");
 		o.className = "tcw-style-subhead", o.textContent = "Templates", this.el.appendChild(o);
 		let s = document.createElement("div");
 		s.className = "tcw-style-save", this.nameInput = document.createElement("input"), this.nameInput.type = "text", this.nameInput.placeholder = "Template name", this.nameInput.className = "tcw-style-name";
 		let c = document.createElement("button");
-		c.type = "button", c.className = "tcw-style-savebtn", c.innerHTML = `${y("plus", 13)}<span>Save</span>`, c.addEventListener("click", () => this.saveTemplate()), s.appendChild(this.nameInput), s.appendChild(c), this.el.appendChild(s), this.templatesEl = document.createElement("div"), this.templatesEl.className = "tcw-style-templates", this.el.appendChild(this.templatesEl), e.appendChild(this.el), this.renderTemplates();
+		c.type = "button", c.className = "tcw-style-savebtn", c.innerHTML = `${C("plus", 13)}<span>Save</span>`, c.addEventListener("click", () => this.saveTemplate()), s.appendChild(this.nameInput), s.appendChild(c), this.el.appendChild(s), this.templatesEl = document.createElement("div"), this.templatesEl.className = "tcw-style-templates", this.el.appendChild(this.templatesEl), e.appendChild(this.el), this.renderTemplates();
 	}
 	isOpen() {
 		return this.open;
@@ -2518,7 +2839,7 @@ var be = class {
 	colorRow() {
 		let e = document.createElement("div");
 		e.className = "tcw-style-row tcw-style-colors";
-		for (let t of xe) {
+		for (let t of Ke) {
 			let n = document.createElement("button");
 			n.type = "button", n.className = "tcw-style-swatch", n.style.background = t, n.dataset.color = t, n.setAttribute("aria-label", t), n.addEventListener("click", () => this.applyStyle({ color: t })), e.appendChild(n);
 		}
@@ -2528,7 +2849,7 @@ var be = class {
 	widthRow() {
 		let e = document.createElement("div");
 		e.className = "tcw-style-row tcw-style-widths";
-		for (let t of Se) {
+		for (let t of qe) {
 			let n = document.createElement("button");
 			n.type = "button", n.className = "tcw-style-width", n.dataset.width = String(t);
 			let r = document.createElement("span");
@@ -2539,7 +2860,7 @@ var be = class {
 	lineStyleRow() {
 		let e = document.createElement("div");
 		e.className = "tcw-style-row tcw-style-dashes";
-		for (let t of Ce) {
+		for (let t of Je) {
 			let n = document.createElement("button");
 			n.type = "button", n.className = "tcw-style-dash", n.dataset.linestyle = t, n.textContent = t === "solid" ? "──" : t === "dashed" ? "╌╌" : "┄┄", n.title = t, n.addEventListener("click", () => this.applyStyle({ lineStyle: t })), e.appendChild(n);
 		}
@@ -2582,7 +2903,7 @@ var be = class {
 				this.callbacks.onStyleChange({ ...t.style }), this.syncActiveControls();
 			});
 			let a = document.createElement("button");
-			a.type = "button", a.className = "tcw-style-tdel", a.setAttribute("aria-label", "Delete template"), a.innerHTML = y("trash", 13), a.addEventListener("click", () => {
+			a.type = "button", a.className = "tcw-style-tdel", a.setAttribute("aria-label", "Delete template"), a.innerHTML = C("trash", 13), a.addEventListener("click", () => {
 				this.store.remove(t.name), this.renderTemplates();
 			}), e.appendChild(n), e.appendChild(a), this.templatesEl.appendChild(e);
 		}
@@ -2590,16 +2911,16 @@ var be = class {
 };
 //#endregion
 //#region src/widget/DrawingFavoritesStore.ts
-function Te() {
+function Xe() {
 	try {
 		return typeof localStorage < "u" ? localStorage : null;
 	} catch {
 		return null;
 	}
 }
-var Ee = class {
+var P = class {
 	favorites = [];
-	constructor(e = "tcw:draw-favorites", t = Te()) {
+	constructor(e = "tcw:draw-favorites", t = Xe()) {
 		this.storageKey = e, this.storage = t, this.load();
 	}
 	list() {
@@ -2633,7 +2954,397 @@ var Ee = class {
 			this.storage.setItem(this.storageKey, JSON.stringify(this.favorites));
 		} catch {}
 	}
-}, De = class {
+}, Ze = [
+	"1m",
+	"3m",
+	"5m",
+	"15m",
+	"30m",
+	"1h",
+	"2h",
+	"4h",
+	"1d",
+	"1w",
+	"1M"
+], Qe = [
+	"1m",
+	"5m",
+	"15m",
+	"1h",
+	"4h",
+	"1d"
+], $e = 6;
+function F(e) {
+	let t = e.slice(-1);
+	return t === "h" || t === "d" || t === "w" ? e.slice(0, -1) + t.toUpperCase() : e;
+}
+var et = (e) => Number.isFinite(o(e));
+function tt(e, t) {
+	let n = t?.length ? t : null, r = e?.length ? e : n ?? Ze;
+	return [...new Set(r)].filter((e) => et(e) && (!n || n.includes(e))).sort((e, t) => o(e) - o(t));
+}
+function nt(e, t, n = !1) {
+	if (t?.length) return e.filter((e) => t.includes(e));
+	if (n) return [...e];
+	let r = e.filter((e) => Qe.includes(e));
+	return r.length > 0 ? r : e.slice(0, $e);
+}
+//#endregion
+//#region src/widget/WidgetGoToDate.ts
+var I = 6e4, rt = /^(\d{4})-(\d{2})-(\d{2})$/, it = /^(\d{2}):(\d{2})$/;
+function at(e, t, n) {
+	let r = rt.exec(e), i = t ? it.exec(t) : [
+		"",
+		"00",
+		"00"
+	];
+	if (!r || !i) return null;
+	let [a, o, s, c, l] = [
+		+r[1],
+		+r[2],
+		+r[3],
+		+i[1],
+		+i[2]
+	];
+	if (o < 1 || o > 12 || s < 1 || s > 31 || c > 23 || l > 59) return null;
+	if (n === null) {
+		let e = new Date(a, o - 1, s, c, l);
+		return e.getDate() === s ? e.getTime() : null;
+	}
+	let u = Date.UTC(a, o - 1, s, c, l);
+	return new Date(u).getUTCDate() === s ? u - n * I : null;
+}
+function ot(e, t) {
+	let n = (e) => String(e).padStart(2, "0");
+	if (t === null) {
+		let t = new Date(e);
+		return {
+			date: `${t.getFullYear()}-${n(t.getMonth() + 1)}-${n(t.getDate())}`,
+			time: `${n(t.getHours())}:${n(t.getMinutes())}`
+		};
+	}
+	let r = new Date(e + t * I);
+	return {
+		date: `${r.getUTCFullYear()}-${n(r.getUTCMonth() + 1)}-${n(r.getUTCDate())}`,
+		time: `${n(r.getUTCHours())}:${n(r.getUTCMinutes())}`
+	};
+}
+var st = class {
+	form = null;
+	returnFocus = null;
+	opener = null;
+	onOutside = (e) => {
+		let t = e.target;
+		this.form && !this.form.contains(t) && !this.opener?.contains(t) && this.close();
+	};
+	constructor(e, t, n) {
+		this.host = e, this.labels = t, this.onSubmit = n;
+	}
+	isOpen() {
+		return this.form !== null;
+	}
+	open(e, t = null) {
+		this.close(), this.opener = t, this.returnFocus = document.activeElement;
+		let n = document.createElement("form");
+		n.className = "tcw-goto", n.setAttribute("role", "dialog"), n.setAttribute("aria-label", this.labels.title);
+		let r = document.createElement("div");
+		r.className = "tcw-goto-title", r.textContent = this.labels.title;
+		let i = this.field(n, this.labels.date, "date", e.date);
+		i.required = !0;
+		let a = this.field(n, this.labels.time, "time", e.time), o = document.createElement("div");
+		o.className = "tcw-goto-actions";
+		let s = document.createElement("button");
+		s.type = "button", s.className = "tcw-btn", s.textContent = this.labels.cancel, s.addEventListener("click", () => this.close());
+		let c = document.createElement("button");
+		c.type = "submit", c.className = "tcw-btn tcw-goto-submit", c.textContent = this.labels.submit, o.append(s, c), n.prepend(r), n.append(o), n.addEventListener("submit", (e) => {
+			if (e.preventDefault(), !i.value) return;
+			let t = {
+				date: i.value,
+				time: a.value
+			};
+			this.close(), this.onSubmit(t);
+		}), n.addEventListener("keydown", (e) => {
+			e.stopPropagation(), e.key === "Escape" && this.close();
+		}), this.host.appendChild(n), this.form = n, document.addEventListener("mousedown", this.onOutside), i.focus();
+	}
+	close() {
+		if (!this.form) return;
+		document.removeEventListener("mousedown", this.onOutside), this.form.remove(), this.form = null;
+		let e = this.returnFocus;
+		this.returnFocus = null, e?.isConnected && e.focus();
+	}
+	destroy() {
+		this.close();
+	}
+	field(e, t, n, r) {
+		let i = document.createElement("label");
+		i.className = "tcw-goto-field";
+		let a = document.createElement("span");
+		a.textContent = t;
+		let o = document.createElement("input");
+		return o.type = n, o.value = r, o.className = "tcw-goto-input", i.append(a, o), e.appendChild(i), o;
+	}
+}, L = 8, R = 4, z = 3, ct = "[title]:not([title=\"\"]), [data-tip]:not([data-tip=\"\"])", lt = class {
+	el;
+	target = null;
+	source = null;
+	pressed = null;
+	showTimer = null;
+	watchFrame = 0;
+	warmUntil = 0;
+	observer;
+	constructor(e) {
+		this.root = e, this.el = document.createElement("div"), this.el.className = "tcw-tooltip", this.el.setAttribute("aria-hidden", "true"), e.appendChild(this.el), e.addEventListener("pointerover", this.onOver), e.addEventListener("pointerout", this.onOut), e.addEventListener("pointerdown", this.onPress, !0), e.addEventListener("keydown", this.onPress, !0), e.addEventListener("focusin", this.onFocus), e.addEventListener("focusout", this.onBlur), e.addEventListener("wheel", this.hide, { passive: !0 }), this.observer = new MutationObserver(() => {
+			this.pressed?.hasAttribute("title") && B(this.pressed);
+			let e = this.target;
+			!e || this.source !== "pointer" || !e.hasAttribute("title") || (B(e), this.isVisible() && this.show(e));
+		}), this.observer.observe(e, {
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["title"]
+		});
+	}
+	destroy() {
+		this.hide(), this.pressed && V(this.pressed), this.observer.disconnect(), this.root.removeEventListener("pointerover", this.onOver), this.root.removeEventListener("pointerout", this.onOut), this.root.removeEventListener("pointerdown", this.onPress, !0), this.root.removeEventListener("keydown", this.onPress, !0), this.root.removeEventListener("focusin", this.onFocus), this.root.removeEventListener("focusout", this.onBlur), this.root.removeEventListener("wheel", this.hide), this.el.remove();
+	}
+	onOver = (e) => {
+		if (e.pointerType === "touch") return;
+		let t = this.tipTarget(e.target);
+		!t || t === this.pressed || t === this.target && this.source === "pointer" || (B(t), this.schedule(t, "pointer", Date.now() < this.warmUntil || this.isVisible()));
+	};
+	onOut = (e) => {
+		let t = e.relatedTarget, n = (e) => !!e && !!t && e.contains(t);
+		this.pressed && !n(this.pressed) && (V(this.pressed), this.pressed = null), this.source === "pointer" && !n(this.target) && this.hide();
+	};
+	onPress = () => {
+		let e = this.target, t = this.source === "pointer";
+		this.warmUntil = 0, this.clearTimer(), cancelAnimationFrame(this.watchFrame), this.el.classList.remove("tcw-tooltip--visible"), this.target = null, this.source = null, this.pressed && this.pressed !== e && V(this.pressed), this.pressed = t ? e : null;
+	};
+	onFocus = (e) => {
+		let t = this.tipTarget(e.target);
+		!t || !dt(t) || t === this.pressed || this.schedule(t, "focus", !0);
+	};
+	onBlur = (e) => {
+		if (this.source !== "focus") return;
+		let t = e.relatedTarget;
+		this.target && t && this.target.contains(t) || this.hide();
+	};
+	hide = () => {
+		this.clearTimer(), cancelAnimationFrame(this.watchFrame), this.isVisible() && (this.warmUntil = Date.now() + 500), this.el.classList.remove("tcw-tooltip--visible"), this.target && this.source === "pointer" && V(this.target), this.target = null, this.source = null;
+	};
+	tipTarget(e) {
+		if (!(e instanceof Element)) return null;
+		let t = e.closest(ct);
+		return t && t !== this.el && this.root.contains(t) ? t : null;
+	}
+	schedule(e, t, n) {
+		let r = this.target;
+		if (this.clearTimer(), cancelAnimationFrame(this.watchFrame), r && r !== e && this.source === "pointer" && V(r), this.target = e, this.source = t, n) {
+			this.show(e);
+			return;
+		}
+		this.el.classList.remove("tcw-tooltip--visible"), this.showTimer = setTimeout(() => {
+			this.showTimer = null, this.target === e && this.show(e);
+		}, 300);
+	}
+	show(e) {
+		if (!H(e)) {
+			this.hide();
+			return;
+		}
+		this.el.textContent = ut(e), this.place(e), this.el.classList.add("tcw-tooltip--visible"), this.watch(e);
+	}
+	watch(e) {
+		cancelAnimationFrame(this.watchFrame), this.watchFrame = requestAnimationFrame(() => {
+			this.target === e && (H(e) ? this.watch(e) : this.hide());
+		});
+	}
+	place(e) {
+		let t = this.root.getBoundingClientRect(), n = e.getBoundingClientRect(), r = this.el.offsetWidth, i = this.el.offsetHeight, a = n.left - t.left, o = n.top - t.top, s = ft(e);
+		s === "bottom" && o + n.height + L + i > t.height ? s = "top" : s === "top" && o - L - i < 0 ? s = "bottom" : s === "right" && a + n.width + L + r > t.width && (s = "left");
+		let c, l;
+		s === "top" || s === "bottom" ? (c = a + n.width / 2 - r / 2, l = s === "bottom" ? o + n.height + L : o - L - i) : (c = s === "right" ? a + n.width + L : a - L - r, l = o + n.height / 2 - i / 2), c = Math.max(R, Math.min(t.width - r - R, c)), l = Math.max(R, Math.min(t.height - i - R, l)), this.el.style.left = `${Math.round(c)}px`, this.el.style.top = `${Math.round(l)}px`;
+		let u = {
+			top: [0, z],
+			bottom: [0, -z],
+			left: [z, 0],
+			right: [-z, 0]
+		}[s];
+		this.el.style.setProperty("--tcw-tip-dx", `${u[0]}px`), this.el.style.setProperty("--tcw-tip-dy", `${u[1]}px`), this.el.dataset.side = s;
+	}
+	isVisible() {
+		return this.el.classList.contains("tcw-tooltip--visible");
+	}
+	clearTimer() {
+		this.showTimer !== null && (clearTimeout(this.showTimer), this.showTimer = null);
+	}
+};
+function B(e) {
+	let t = e.getAttribute("title");
+	t !== null && (e.dataset.tip = t, e.removeAttribute("title"));
+}
+function V(e) {
+	e.dataset.tip !== void 0 && !e.hasAttribute("title") && (e.setAttribute("title", e.dataset.tip), delete e.dataset.tip);
+}
+function ut(e) {
+	return e.dataset.tip ?? e.getAttribute("title") ?? "";
+}
+function H(e) {
+	return e.isConnected && e.getClientRects().length > 0 && !e.disabled;
+}
+function dt(e) {
+	try {
+		return e.matches(":focus-visible");
+	} catch {
+		return !1;
+	}
+}
+function ft(e) {
+	return e.dataset.tipSide || (e.closest(".tcw-sidebar") ? "right" : e.closest(".tcw-statusbar, .tcw-replay-bar") ? "top" : "bottom");
+}
+//#endregion
+//#region src/widget/WidgetIndicatorLegend.ts
+var pt = 2, mt = class {
+	stack;
+	toggle;
+	rows = /* @__PURE__ */ new Map();
+	collapsed = !1;
+	toggleKey = "";
+	stackKey = "";
+	constructor(e, t, n) {
+		this.host = e, this.callbacks = t, this.labels = n, this.stack = document.createElement("div"), this.stack.className = "tcw-ind-legend", this.toggle = document.createElement("button"), this.toggle.type = "button", this.toggle.className = "tcw-ind-legend-toggle", this.toggle.addEventListener("click", () => {
+			this.setCollapsed(!this.collapsed), this.renderToggle(this.overlayCount());
+		}), this.stack.appendChild(this.toggle), e.appendChild(this.stack);
+	}
+	update(e, t) {
+		let n = `${Math.round(t.left)},${Math.round(t.top)}`;
+		n !== this.stackKey && (this.stackKey = n, this.stack.style.left = `${Math.round(t.left)}px`, this.stack.style.top = `${Math.round(t.top)}px`);
+		let r = /* @__PURE__ */ new Set(), i = !1;
+		for (let t of e) {
+			r.add(t.instanceId);
+			let e = this.rows.get(t.instanceId) ?? this.createRow(t.instanceId);
+			this.fill(e, t), t.pane ? e.el.parentElement !== this.host && this.host.appendChild(e.el) : e.el.parentElement !== this.stack && (this.stack.insertBefore(e.el, this.toggle), i = !0), this.place(e, t.pane);
+		}
+		for (let [e, t] of this.rows) r.has(e) || (t.el.remove(), this.rows.delete(e));
+		i && this.collapsed && this.setCollapsed(!1), this.renderToggle(e.filter((e) => !e.pane).length);
+	}
+	destroy() {
+		for (let e of this.rows.values()) e.el.remove();
+		this.rows.clear(), this.stack.remove();
+	}
+	createRow(e) {
+		let t = document.createElement("div");
+		t.className = "tcw-ind-legend-row", t.dataset.instance = e;
+		let n = document.createElement("button");
+		n.type = "button", n.className = "tcw-ind-legend-name", n.addEventListener("click", () => this.callbacks.onSettings(e));
+		let r = document.createElement("span");
+		r.className = "tcw-ind-legend-values";
+		let i = document.createElement("span");
+		i.className = "tcw-ind-legend-actions";
+		let a = (e, t, n) => {
+			let r = document.createElement("button");
+			return r.type = "button", r.className = "tcw-ind-legend-act", r.dataset.act = e, r.innerHTML = C(t, 13), r.addEventListener("click", n), i.appendChild(r), r;
+		}, o = a("visible", "eye", () => {
+			this.callbacks.onToggleVisible(e, !l.visible);
+		}), s = a("settings", "settings", () => this.callbacks.onSettings(e)), c = a("remove", "x", () => this.callbacks.onRemove(e));
+		t.append(n, r, i);
+		let l = {
+			el: t,
+			name: n,
+			values: r,
+			eye: o,
+			settings: s,
+			remove: c,
+			visible: !0,
+			valuesKey: "",
+			state: "",
+			placeKey: ""
+		};
+		return this.rows.set(e, l), l;
+	}
+	fill(e, t) {
+		let n = `${t.label}|${t.visible}`;
+		n !== e.state && (e.state = n, e.visible = t.visible, e.name.textContent = t.label, e.name.title = this.labels.settings, e.el.classList.toggle("tcw-ind-legend-row--hidden", !t.visible), e.eye.innerHTML = C(t.visible ? "eye" : "eyeOff", 13), U(e.eye, t.visible ? this.labels.hide : this.labels.show, t.label), U(e.settings, this.labels.settings, t.label), U(e.remove, this.labels.remove, t.label));
+		let r = t.values.map((e) => `${e.text}${e.color ?? ""}`).join("
");
+		r !== e.valuesKey && (e.valuesKey = r, e.values.replaceChildren(...t.values.map((e) => {
+			let t = document.createElement("span");
+			return t.textContent = e.text, e.color && (t.style.color = e.color), t;
+		})));
+	}
+	place(e, t) {
+		let n = t ? `${Math.round(t.x)},${Math.round(t.y)},${Math.round(t.width)}` : "";
+		n !== e.placeKey && (e.placeKey = n, e.el.classList.toggle("tcw-ind-legend-row--pane", t !== null), e.el.style.left = t ? `${Math.round(t.x)}px` : "", e.el.style.top = t ? `${Math.round(t.y)}px` : "", e.el.style.maxWidth = t ? `${Math.max(0, Math.round(t.width))}px` : "");
+	}
+	setCollapsed(e) {
+		this.collapsed = e, this.stack.classList.toggle("tcw-ind-legend--collapsed", e);
+	}
+	overlayCount() {
+		return this.stack.querySelectorAll(":scope > .tcw-ind-legend-row").length;
+	}
+	renderToggle(e) {
+		let t = e >= pt;
+		!t && this.collapsed && this.setCollapsed(!1);
+		let n = `${t}|${this.collapsed}|${e}`;
+		if (n === this.toggleKey || (this.toggleKey = n, this.toggle.hidden = !t, !t)) return;
+		let r = this.collapsed ? this.labels.expand : this.labels.collapse;
+		U(this.toggle, r, this.collapsed ? `(${e})` : void 0), this.toggle.setAttribute("aria-expanded", String(!this.collapsed));
+		let i = C(this.collapsed ? "chevronDown" : "chevronUp", 12);
+		this.toggle.innerHTML = this.collapsed ? `${i}<span>${e}</span>` : i;
+	}
+};
+function U(e, t, n) {
+	e.title = t, e.setAttribute("aria-label", n ? `${t} ${n}` : t);
+}
+//#endregion
+//#region src/widget/legendValues.ts
+var ht = {
+	psar: ["trend"],
+	supertrend: ["trend"],
+	svwap: ["session"],
+	ao: ["up"],
+	voldelta: ["up"],
+	chaikinOsc: ["adl"],
+	adx: ["dx"],
+	lrc: ["slope"],
+	ichimoku: ["chikou"]
+}, gt = {
+	psar: (e) => e.trend === 1,
+	supertrend: (e) => e.trend === 1,
+	ao: (e) => e.up === 1,
+	voldelta: (e) => e.up === 1,
+	chaikinOsc: (e) => (e.value ?? 0) >= 0,
+	cmf: (e) => (e.value ?? 0) >= 0,
+	dpo: (e) => (e.value ?? 0) >= 0
+}, _t = new Set(["ac"]);
+function W(e, t) {
+	if (!t) return [];
+	let n = ht[e], r = [];
+	for (let e in t) {
+		let i = t[e];
+		typeof i == "number" && Number.isFinite(i) && !n?.includes(e) && r.push(i);
+	}
+	return r;
+}
+function vt(e, t, n) {
+	if (_t.has(e)) return null;
+	let r = gt[e];
+	return r ? n ? (r(n) ? t[0] : t[1]) ?? null : null : t[0] ?? null;
+}
+var G = /* @__PURE__ */ new Map();
+function yt(e) {
+	let t = G.get(e);
+	return t || (t = new Intl.NumberFormat(e, {
+		notation: "compact",
+		maximumFractionDigits: 2
+	}), G.set(e, t)), t;
+}
+function bt(e, t = "en-US") {
+	let n = Math.abs(e);
+	return n >= 1e6 ? yt(t).format(e) : i(e, n >= 1e3 ? 1 : n >= 1 ? 2 : n >= .01 ? 4 : 6, t);
+}
+//#endregion
+//#region src/widget/WidgetBracketBar.ts
+var xt = class {
 	el;
 	labelEl;
 	callbacks;
@@ -2643,9 +3354,9 @@ var Ee = class {
 		let n = document.createElement("span");
 		n.className = "tcw-bracket-hint", n.textContent = "drag lines to adjust", this.el.appendChild(n);
 		let r = document.createElement("button");
-		r.type = "button", r.className = "tcw-bracket-cancel", r.innerHTML = `${y("x", 14)}<span>Cancel</span>`, r.addEventListener("click", () => this.callbacks.onCancel());
+		r.type = "button", r.className = "tcw-bracket-cancel", r.innerHTML = `${C("x", 14)}<span>Cancel</span>`, r.addEventListener("click", () => this.callbacks.onCancel());
 		let i = document.createElement("button");
-		i.type = "button", i.className = "tcw-bracket-confirm", i.innerHTML = `${y("check", 14)}<span>Place</span>`, i.addEventListener("click", () => this.callbacks.onConfirm()), this.el.appendChild(r), this.el.appendChild(i), e.appendChild(this.el);
+		i.type = "button", i.className = "tcw-bracket-confirm", i.innerHTML = `${C("check", 14)}<span>Place</span>`, i.addEventListener("click", () => this.callbacks.onConfirm()), this.el.appendChild(r), this.el.appendChild(i), e.appendChild(this.el);
 	}
 	show(e) {
 		this.visible = !0, this.labelEl.textContent = e === "buy" ? "Long bracket" : "Short bracket", this.labelEl.dataset.side = e, this.el.hidden = !1;
@@ -2659,7 +3370,7 @@ var Ee = class {
 	destroy() {
 		this.el.remove();
 	}
-}, Oe = class {
+}, St = class {
 	options;
 	audioCtx = null;
 	audioEl = null;
@@ -2722,7 +3433,7 @@ var Ee = class {
 };
 //#endregion
 //#region src/widget/ladderRows.ts
-function ke(e, t = 12) {
+function Ct(e, t = 12) {
 	let n = [...e.asks].sort((e, t) => e.price - t.price).slice(0, t), r = [...e.bids].sort((e, t) => t.price - e.price).slice(0, t), i = n.length > 0 ? n[0].price : null, a = r.length > 0 ? r[0].price : null, o = i !== null && a !== null ? (i + a) / 2 : null, s = /* @__PURE__ */ new Map(), c = (e) => {
 		let t = s.get(e);
 		return t || (t = {
@@ -2743,7 +3454,7 @@ function ke(e, t = 12) {
 }
 //#endregion
 //#region src/widget/WidgetDepthLadder.ts
-var Ae = class {
+var wt = class {
 	el;
 	bodyEl;
 	callbacks;
@@ -2756,7 +3467,7 @@ var Ae = class {
 		let i = document.createElement("span");
 		i.textContent = "Depth Ladder";
 		let a = document.createElement("button");
-		a.type = "button", a.className = "tcw-ladder-close", a.setAttribute("aria-label", "Close"), a.innerHTML = y("x", 14), a.addEventListener("click", () => this.close()), r.appendChild(i), r.appendChild(a), this.el.appendChild(r);
+		a.type = "button", a.className = "tcw-ladder-close", a.setAttribute("aria-label", "Close"), a.innerHTML = C("x", 14), a.addEventListener("click", () => this.close()), r.appendChild(i), r.appendChild(a), this.el.appendChild(r);
 		let o = document.createElement("div");
 		o.className = "tcw-ladder-cols", o.innerHTML = "<span>Bid</span><span>Price</span><span>Ask</span>", this.el.appendChild(o), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-ladder-body", this.el.appendChild(this.bodyEl), e.appendChild(this.el);
 	}
@@ -2777,7 +3488,7 @@ var Ae = class {
 			this.renderEmpty();
 			return;
 		}
-		this.render(ke(e, this.levels));
+		this.render(Ct(e, this.levels));
 	}
 	destroy() {
 		this.el.remove();
@@ -2797,20 +3508,20 @@ var Ae = class {
 			let e = n.askVolume > 0, r = document.createElement("div");
 			r.className = "tcw-ladder-row";
 			let i = document.createElement("button");
-			i.type = "button", i.className = "tcw-ladder-cell tcw-ladder-bid", n.bidVolume > 0 ? (i.textContent = J(n.bidVolume), i.style.setProperty("--w", `${(n.bidVolume * t * 100).toFixed(1)}%`), i.title = `Sell @ ${this.callbacks.formatPrice(n.price)}`, i.addEventListener("click", () => this.callbacks.onTrade("sell", n.price))) : i.disabled = !0;
+			i.type = "button", i.className = "tcw-ladder-cell tcw-ladder-bid", n.bidVolume > 0 ? (i.textContent = K(n.bidVolume), i.style.setProperty("--w", `${(n.bidVolume * t * 100).toFixed(1)}%`), i.title = `Sell @ ${this.callbacks.formatPrice(n.price)}`, i.addEventListener("click", () => this.callbacks.onTrade("sell", n.price))) : i.disabled = !0;
 			let a = document.createElement("div");
 			a.className = `tcw-ladder-price ${e ? "tcw-ask" : "tcw-bid"}`, a.textContent = this.callbacks.formatPrice(n.price);
 			let o = document.createElement("button");
-			o.type = "button", o.className = "tcw-ladder-cell tcw-ladder-ask", n.askVolume > 0 ? (o.textContent = J(n.askVolume), o.style.setProperty("--w", `${(n.askVolume * t * 100).toFixed(1)}%`), o.title = `Buy @ ${this.callbacks.formatPrice(n.price)}`, o.addEventListener("click", () => this.callbacks.onTrade("buy", n.price))) : o.disabled = !0, r.appendChild(i), r.appendChild(a), r.appendChild(o), this.bodyEl.appendChild(r);
+			o.type = "button", o.className = "tcw-ladder-cell tcw-ladder-ask", n.askVolume > 0 ? (o.textContent = K(n.askVolume), o.style.setProperty("--w", `${(n.askVolume * t * 100).toFixed(1)}%`), o.title = `Buy @ ${this.callbacks.formatPrice(n.price)}`, o.addEventListener("click", () => this.callbacks.onTrade("buy", n.price))) : o.disabled = !0, r.appendChild(i), r.appendChild(a), r.appendChild(o), this.bodyEl.appendChild(r);
 		}
 	}
 };
-function J(e) {
+function K(e) {
 	return e >= 1e3 ? (e / 1e3).toFixed(1) + "k" : e >= 1 ? e.toFixed(2).replace(/\.00$/, "") : e.toPrecision(2);
 }
 //#endregion
 //#region src/widget/WidgetDataWindow.ts
-var je = class {
+var Tt = class {
 	el;
 	bodyEl;
 	callbacks;
@@ -2822,7 +3533,7 @@ var je = class {
 		let r = document.createElement("span");
 		r.textContent = "Data Window";
 		let i = document.createElement("button");
-		i.type = "button", i.className = "tcw-datawin-close", i.setAttribute("aria-label", "Close"), i.innerHTML = y("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-datawin-body", this.el.appendChild(this.bodyEl), e.appendChild(this.el);
+		i.type = "button", i.className = "tcw-datawin-close", i.setAttribute("aria-label", "Close"), i.innerHTML = C("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-datawin-body", this.el.appendChild(this.bodyEl), e.appendChild(this.el);
 	}
 	isOpen() {
 		return this.open;
@@ -2849,11 +3560,11 @@ var je = class {
 		let t = this.callbacks.formatPrice, n = e.ohlc;
 		this.bodyEl.appendChild(this.row("Open", t(n.open))), this.bodyEl.appendChild(this.row("High", t(n.high))), this.bodyEl.appendChild(this.row("Low", t(n.low))), this.bodyEl.appendChild(this.row("Close", t(n.close)));
 		let r = e.change > 0 ? "up" : e.change < 0 ? "down" : "", i = e.change > 0 ? "+" : "";
-		this.bodyEl.appendChild(this.row("Change", `${i}${t(e.change)} (${i}${e.changePct.toFixed(2)}%)`, r)), this.bodyEl.appendChild(this.row("Volume", Ne(n.volume)));
+		this.bodyEl.appendChild(this.row("Change", `${i}${t(e.change)} (${i}${e.changePct.toFixed(2)}%)`, r)), this.bodyEl.appendChild(this.row("Volume", Dt(n.volume)));
 		for (let t of e.indicators) {
 			let e = document.createElement("div");
 			e.className = "tcw-datawin-sub", e.textContent = t.name, this.bodyEl.appendChild(e);
-			for (let e of t.values) this.bodyEl.appendChild(this.row(e.key, Me(e.value)));
+			for (let e of t.values) this.bodyEl.appendChild(this.row(e.key, Et(e.value)));
 		}
 	}
 	row(e, t, n = "") {
@@ -2865,43 +3576,43 @@ var je = class {
 		return a.className = `tcw-datawin-value${n ? ` tcw-${n}` : ""}`, a.textContent = t, r.appendChild(i), r.appendChild(a), r;
 	}
 };
-function Me(e) {
+function Et(e) {
 	if (!Number.isFinite(e)) return "—";
 	let t = Math.abs(e);
 	return t >= 1e3 ? e.toFixed(2) : t >= 1 ? e.toFixed(4) : e.toPrecision(4);
 }
-function Ne(e) {
+function Dt(e) {
 	return e >= 1e9 ? (e / 1e9).toFixed(2) + "B" : e >= 1e6 ? (e / 1e6).toFixed(2) + "M" : e >= 1e3 ? (e / 1e3).toFixed(2) + "K" : e.toFixed(0);
 }
 //#endregion
 //#region src/widget/widgetShareState.ts
-var Y = globalThis.Buffer;
-function Pe(e) {
-	if (Y) return Y.from(e, "utf8").toString("base64");
+var q = globalThis.Buffer;
+function Ot(e) {
+	if (q) return q.from(e, "utf8").toString("base64");
 	let t = new TextEncoder().encode(e), n = "";
 	for (let e of t) n += String.fromCharCode(e);
 	return btoa(n);
 }
-function Fe(e) {
-	if (Y) return Y.from(e, "base64").toString("utf8");
+function kt(e) {
+	if (q) return q.from(e, "base64").toString("utf8");
 	let t = atob(e), n = new Uint8Array(t.length);
 	for (let e = 0; e < t.length; e++) n[e] = t.charCodeAt(e);
 	return new TextDecoder().decode(n);
 }
-function Ie(e) {
+function At(e) {
 	return e.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
-function Le(e) {
+function jt(e) {
 	let t = e.replace(/-/g, "+").replace(/_/g, "/");
 	return t + (t.length % 4 == 0 ? "" : "=".repeat(4 - t.length % 4));
 }
-function Re(e) {
-	return Ie(Pe(JSON.stringify(e)));
+function Mt(e) {
+	return At(Ot(JSON.stringify(e)));
 }
-function ze(e) {
+function Nt(e) {
 	if (!e) return null;
 	try {
-		let t = Fe(Le(e)), n = JSON.parse(t);
+		let t = kt(jt(e)), n = JSON.parse(t);
 		return !n || n.v !== 1 || typeof n.symbol != "string" ? null : {
 			v: 1,
 			symbol: n.symbol,
@@ -2915,28 +3626,36 @@ function ze(e) {
 		return null;
 	}
 }
-var X = "tcw";
-function Be(e) {
+var J = "tcw";
+function Pt(e) {
 	let t = e.startsWith("#") ? e.slice(1) : e;
 	for (let e of t.split("&")) {
 		let t = e.indexOf("=");
-		if (t > 0 && e.slice(0, t) === X) return decodeURIComponent(e.slice(t + 1));
+		if (t > 0 && e.slice(0, t) === J) return decodeURIComponent(e.slice(t + 1));
 	}
 	return null;
 }
-function Ve(e, t) {
+function Ft(e, t) {
 	let [n] = e.split("#");
-	return `${n}#${X}=${t}`;
+	return `${n}#${J}=${t}`;
 }
 //#endregion
 //#region src/widget/i18n.ts
-var Z = {
+var Y = {
 	"toolbar.indicators": "Indicators",
 	"toolbar.indicators.popular": "Popular",
 	"toolbar.indicators.all": "All",
 	"indicatorType.overlay": "overlay",
 	"indicatorType.panel": "panel",
 	"toolbar.replay": "Bar replay",
+	"replay.selectHint": "Click a bar to start the replay",
+	"replay.random": "Random bar",
+	"replay.realtime": "Back to realtime",
+	"replay.barsPerSecond": "bars/s",
+	"replay.play": "Play",
+	"replay.pause": "Pause",
+	"replay.stepBack": "Step back (Shift+←)",
+	"replay.stepForward": "Step forward (Shift+→)",
 	"toolbar.longBracket": "Long bracket",
 	"toolbar.shortBracket": "Short bracket",
 	"toolbar.depthLadder": "Depth ladder",
@@ -2945,6 +3664,24 @@ var Z = {
 	"toolbar.screenshot": "Screenshot",
 	"toolbar.settings": "Chart Settings",
 	"toolbar.toggleTheme": "Toggle theme",
+	"toolbar.timeframes": "Timeframes",
+	"toolbar.timeframes.pin": "Pin to toolbar",
+	"toolbar.fullscreen": "Fullscreen",
+	"legend.show": "Show",
+	"legend.hide": "Hide",
+	"legend.settings": "Settings",
+	"legend.remove": "Remove",
+	"legend.collapse": "Collapse indicators",
+	"legend.expand": "Show indicators",
+	"toolbar.exitFullscreen": "Exit fullscreen",
+	"range.presets": "Visible range",
+	"range.all": "All",
+	"range.goTo": "Go to date",
+	"range.goToSubmit": "Go to",
+	"range.date": "Date",
+	"range.time": "Time",
+	"range.cancel": "Cancel",
+	"range.beforeData": "Showing the earliest loaded bar",
 	"chartType.candlestick": "Candlestick",
 	"chartType.line": "Line",
 	"chartType.area": "Area",
@@ -2978,8 +3715,8 @@ var Z = {
 	"hotkeys.group.touch": "Touch (mobile / tablet)",
 	"hotkeys.group.keyboard": "Keyboard",
 	"hotkeys.group.drawing": "Drawing"
-}, He = {
-	en: Z,
+}, It = {
+	en: Y,
 	vi: {
 		"toolbar.indicators": "Chỉ báo",
 		"toolbar.indicators.popular": "Phổ biến",
@@ -2987,6 +3724,14 @@ var Z = {
 		"indicatorType.overlay": "phủ lên",
 		"indicatorType.panel": "bảng riêng",
 		"toolbar.replay": "Phát lại",
+		"replay.selectHint": "Bấm vào một nến để bắt đầu phát lại",
+		"replay.random": "Nến ngẫu nhiên",
+		"replay.realtime": "Về thời gian thực",
+		"replay.barsPerSecond": "nến/giây",
+		"replay.play": "Phát",
+		"replay.pause": "Tạm dừng",
+		"replay.stepBack": "Lùi một nến (Shift+←)",
+		"replay.stepForward": "Tiến một nến (Shift+→)",
 		"toolbar.longBracket": "Lệnh Long",
 		"toolbar.shortBracket": "Lệnh Short",
 		"toolbar.depthLadder": "Sổ lệnh",
@@ -2995,6 +3740,24 @@ var Z = {
 		"toolbar.screenshot": "Chụp màn hình",
 		"toolbar.settings": "Cài đặt biểu đồ",
 		"toolbar.toggleTheme": "Đổi giao diện",
+		"toolbar.timeframes": "Khung thời gian",
+		"toolbar.timeframes.pin": "Ghim lên thanh công cụ",
+		"toolbar.fullscreen": "Toàn màn hình",
+		"legend.show": "Hiện",
+		"legend.hide": "Ẩn",
+		"legend.settings": "Cài đặt",
+		"legend.remove": "Xoá",
+		"legend.collapse": "Thu gọn chỉ báo",
+		"legend.expand": "Hiện chỉ báo",
+		"toolbar.exitFullscreen": "Thoát toàn màn hình",
+		"range.presets": "Khoảng hiển thị",
+		"range.all": "Tất cả",
+		"range.goTo": "Đi tới ngày",
+		"range.goToSubmit": "Đi tới",
+		"range.date": "Ngày",
+		"range.time": "Giờ",
+		"range.cancel": "Huỷ",
+		"range.beforeData": "Đang hiện nến sớm nhất đã tải",
 		"chartType.candlestick": "Nến",
 		"chartType.line": "Đường",
 		"chartType.area": "Vùng",
@@ -3030,14 +3793,14 @@ var Z = {
 		"hotkeys.group.drawing": "Vẽ"
 	}
 };
-function Q(e, t) {
-	let n = { ...Z }, r = e ? He[e] : void 0;
+function Lt(e, t) {
+	let n = { ...Y }, r = e ? It[e] : void 0;
 	return r && Object.assign(n, r), t && Object.assign(n, t), n;
 }
-function Ue(e) {
-	return (t) => e[t] ?? Z[t] ?? t;
+function Rt(e) {
+	return (t) => e[t] ?? Y[t] ?? t;
 }
-var We = [
+var zt = [
 	[
 		34,
 		16,
@@ -3094,7 +3857,7 @@ var We = [
 		30,
 		!0
 	]
-], Ge = class {
+], Bt = class {
 	el;
 	label;
 	showTimer = null;
@@ -3104,9 +3867,9 @@ var We = [
 		let n = document.createElement("div");
 		n.className = "tcw-loading-card";
 		let r = document.createElement("div");
-		r.className = "tcw-loading-candles", r.setAttribute("aria-hidden", "true"), We.forEach(([e, t, n, i, a], o) => {
+		r.className = "tcw-loading-candles", r.setAttribute("aria-hidden", "true"), zt.forEach(([e, t, n, i, a], o) => {
 			let s = document.createElement("span");
-			s.className = a ? "tcw-loading-candle tcw-loading-candle--up" : "tcw-loading-candle", s.style.setProperty("--tcw-body-top", `${e}px`), s.style.setProperty("--tcw-body-h", `${t}px`), s.style.setProperty("--tcw-wick-top", `${n}px`), s.style.setProperty("--tcw-wick-h", `${i}px`), s.style.animationDelay = `${o * 110}ms`, r.appendChild(s);
+			s.className = a ? "tcw-loading-candle tcw-loading-candle--up" : "tcw-loading-candle", s.style.setProperty("--tcw-body-top", `${e}px`), s.style.setProperty("--tcw-body-h", `${t}px`), s.style.setProperty("--tcw-wick-top", `${n}px`), s.style.setProperty("--tcw-wick-h", `${i}px`), s.style.setProperty("--tcw-delay", `${o * 110}ms`), r.appendChild(s);
 		}), n.appendChild(r);
 		let i = document.createElement("div");
 		i.className = "tcw-loading-track", i.setAttribute("aria-hidden", "true"), i.appendChild(document.createElement("span")), n.appendChild(i), this.label = document.createElement("div"), this.label.className = "tcw-loading-label", this.label.textContent = t, n.appendChild(this.label), this.el.appendChild(n), e.appendChild(this.el);
@@ -3141,33 +3904,51 @@ var We = [
 	clearTimer() {
 		this.showTimer !== null && (clearTimeout(this.showTimer), this.showTimer = null);
 	}
-}, Ke = 48, qe = 5e4, Je = 100;
-function Ye() {
+}, Vt = 48, Ht = 5e4, Ut = 100;
+function Wt() {
 	return new Promise((e) => {
 		if (typeof requestAnimationFrame != "function" || document.hidden) {
 			setTimeout(e, 0);
 			return;
 		}
-		let t = setTimeout(e, Je);
+		let t = setTimeout(e, Ut);
 		requestAnimationFrame(() => setTimeout(() => {
 			clearTimeout(t), e();
 		}, 0));
 	});
 }
-var $ = [
+var X = [
 	"#4c8dff",
 	"#a57cff",
 	"#1398a8",
 	"#e25592",
 	"#8a93a3",
 	"#62c895"
-], Xe = class {
+], Z = 4, Q = null, $ = (e) => (e[e.length - 1]?.time ?? 0) > 0xe8d4a51000 ? 1 : 1e3, Gt = () => {
+	let e = document.activeElement;
+	return !!e && (e.tagName === "INPUT" || e.tagName === "TEXTAREA" || e.tagName === "SELECT" || e.isContentEditable);
+}, Kt = class {
 	chart;
 	state;
 	toolbar = null;
 	sidebar = null;
 	settings = null;
 	statusBar = null;
+	goToDate = null;
+	tooltip;
+	indicatorLegend = null;
+	legendFrame = 0;
+	portal = document.createElement("div");
+	overlayHost = () => {
+		let e = document.fullscreenElement === this.root ? this.root : document.body;
+		return this.portal.parentElement !== e && e.appendChild(this.portal), this.portal;
+	};
+	onRootPointerDown = () => {
+		Q = this;
+	};
+	onFullscreenChange = () => {
+		this.toolbar?.setFullscreen(document.fullscreenElement === this.root), this.portal.isConnected && this.overlayHost();
+	};
 	commandPalette = null;
 	symbolSearch = null;
 	hotkeySheet = null;
@@ -3182,15 +3963,18 @@ var $ = [
 	depthLadder = null;
 	dataWindow = null;
 	lastHoverIndex = null;
-	favoritesStore = new Ee();
+	legendHoverIndex = null;
+	favoritesStore = new P();
+	timeframeFavorites = new P("tcw:tf-favorites");
+	timeframes = [];
 	watchlist = null;
 	watchlistSparkBuffer = /* @__PURE__ */ new Map();
 	sessionRefPrice = null;
 	hostWatchlistRefPrice = /* @__PURE__ */ new Map();
 	watchlistInterval = null;
-	replayOriginalData = null;
 	replayPollInterval = null;
 	replaySpeed = 5;
+	replayShade = null;
 	layoutKeyPrefix = null;
 	layoutDebounceMs = 1500;
 	activeLayoutKey = null;
@@ -3211,36 +3995,64 @@ var $ = [
 	baseTimeframeMs = 0;
 	compares = [];
 	constructor(n, r = {}) {
-		if (this.options = r, this.symbols = r.symbols ?? ee, this.settingsState = {
+		if (this.options = r, this.symbols = r.symbols ?? te, this.settingsState = {
 			...p,
 			...r.chartOptions?.numberLocale ? { numberLocale: r.chartOptions.numberLocale } : {}
-		}, this.t = Ue(Q(r.locale, r.messages)), r.persistLayouts) {
+		}, this.t = Rt(Lt(r.locale, r.messages)), r.persistLayouts) {
 			let e = r.persistLayouts === !0 ? {} : r.persistLayouts;
 			this.layoutKeyPrefix = e.keyPrefix ?? "tcw:layout:", this.layoutDebounceMs = e.debounceMs ?? 1500;
 		}
-		let i = this.resolveIsDark(r.theme), a = this.resolveTheme(r.theme);
+		let i = this.resolveIsDark(r.theme), a = this.resolveTheme(r.theme), o = {
+			drawings: !0,
+			drawingMagnet: !0,
+			drawingUndoRedo: !0,
+			indicators: !0,
+			trading: r.trading !== !1,
+			tradingContextMenu: !1,
+			volume: !0,
+			legend: !0,
+			crosshair: !0,
+			crosshairTooltip: !1,
+			keyboard: !0,
+			screenshot: !0,
+			alerts: !0,
+			barCountdown: !0,
+			logScale: !0,
+			watermark: !0,
+			...r.chartOptions?.features
+		};
+		if (this.timeframes = tt(r.timeframes, o.timeframes), !this.timeframes.some((e) => this.timeframeFavorites.has(e))) {
+			let e = nt(this.timeframes, o.defaultTimeframeFavorites, !!r.timeframes?.length);
+			for (let t of e) this.timeframeFavorites.add(t);
+		}
+		let c = r.timeframe ?? "5m", l = !o.timeframes?.length || o.timeframes.includes(c) ? c : this.timeframes[0] ?? c;
 		this.state = {
 			symbol: r.symbol ?? this.symbols[0] ?? "BTCUSDT",
-			timeframe: r.timeframe ?? "5m",
+			timeframe: l,
 			chartType: r.chartOptions?.chartType ?? "candlestick",
 			isDark: i,
 			activeIndicators: /* @__PURE__ */ new Map(),
 			activeTool: null,
-			magnetEnabled: !0,
+			magnetEnabled: o.drawingMagnet !== !1,
+			stayInDrawing: !1,
 			connectionState: r.adapter ? "connecting" : "disconnected",
 			connectionMessage: r.adapter ? this.t("status.connecting") : ""
-		}, g(), this.root = document.createElement("div"), this.root.className = "tcw-root", this.root.dataset.tcwTheme = i ? "dark" : "light", n.appendChild(this.root), r.toolbar !== !1 && (this.toolbar = new ne(this.root, {
+		}, ne(), this.root = document.createElement("div"), this.root.className = "tcw-root", this.root.dataset.tcwTheme = i ? "dark" : "light", n.appendChild(this.root), this.tooltip = new lt(this.root), this.portal.className = "tcw-root tcw-portal", this.portal.dataset.tcwTheme = this.root.dataset.tcwTheme, r.toolbar !== !1 && (this.toolbar = new se(this.root, {
 			symbols: this.symbols,
-			timeframes: r.timeframes ? c.filter((e) => r.timeframes.includes(e.value)) : c,
-			chartTypes: r.chartTypes ? l.filter((e) => r.chartTypes.includes(e.value)) : l,
-			indicators: d,
-			popularIndicatorIds: f
+			timeframes: this.timeframes.map((e) => ({
+				value: e,
+				label: F(e)
+			})),
+			timeframeFavorites: this.pinnedTimeframes(),
+			chartTypes: r.chartTypes ? u.filter((e) => r.chartTypes.includes(e.value)) : u,
+			indicators: f,
+			popularIndicatorIds: ee
 		}, {
 			onSymbolClick: () => this.handleSymbolClick(),
 			onTimeframe: (e) => this.handleTimeframe(e),
+			onToggleTimeframeFavorite: (e) => this.handleToggleTimeframeFavorite(e),
 			onChartType: (e) => this.handleChartType(e),
 			onAddIndicator: (e) => this.handleAddIndicator(e),
-			onRemoveIndicator: (e) => this.handleRemoveIndicator(e),
 			onScreenshot: () => this.chart.screenshot(),
 			onSettings: () => this.openSettings(),
 			onToggleTheme: () => this.handleToggleTheme(),
@@ -3248,16 +4060,17 @@ var $ = [
 			onToggleAlerts: r.alerts === !1 ? void 0 : () => this.toggleAlerts(),
 			onToggleObjects: r.objectTree === !1 ? void 0 : () => this.toggleObjects(),
 			onBracket: r.trading === !1 ? void 0 : (e) => this.startBracket(e),
-			onToggleLadder: r.trading !== !1 && r.depthLadder ? () => this.depthLadder?.toggle() : void 0
+			onToggleLadder: r.trading !== !1 && r.depthLadder ? () => this.depthLadder?.toggle() : void 0,
+			onToggleFullscreen: r.fullscreen !== !1 && typeof document < "u" && document.fullscreenEnabled ? () => this.toggleFullscreen() : void 0
 		}, this.t));
-		let o = document.createElement("div");
-		if (o.className = "tcw-body", r.drawingTools !== !1 && (r.drawingFavorites && this.favoritesStore.seedDefaults(r.drawingFavorites), this.sidebar = new se(o, {
-			drawingToolGroups: u,
+		let m = document.createElement("div");
+		if (m.className = "tcw-body", r.drawingTools !== !1 && (r.drawingFavorites && this.favoritesStore.seedDefaults(r.drawingFavorites), this.sidebar = new le(m, {
+			drawingToolGroups: d,
 			favorites: this.favoritesStore.list()
 		}, {
 			onDrawingTool: (e) => this.handleDrawingTool(e),
 			onCancelDrawing: () => this.handleCancelDrawing(),
-			onToggleMagnet: () => this.handleToggleMagnet(),
+			onToggleMagnet: o.drawingMagnet === !1 ? void 0 : () => this.handleToggleMagnet(),
 			onToggleFavorite: (e) => this.handleToggleFavorite(e),
 			onUndo: () => this.chart.undo(),
 			onRedo: () => this.chart.redo(),
@@ -3267,34 +4080,17 @@ var $ = [
 					activeTool: null
 				}, this.updateUI();
 			},
-			onToggleStyle: () => this.drawingStyle?.toggle()
-		})), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", o.appendChild(this.chartContainer), this.loading = new Ge(this.chartContainer, this.t("status.loading")), r.watchlist && (this.watchlist = new V(o, this.symbols, { onSelect: (e) => {
+			onToggleStyle: () => this.drawingStyle?.toggle(),
+			onToggleStayInDrawing: () => this.handleToggleStayInDrawing()
+		})), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", m.appendChild(this.chartContainer), this.loading = new Bt(this.chartContainer, this.t("status.loading")), r.watchlist && (this.watchlist = new Oe(m, this.symbols, { onSelect: (e) => {
 			this.setSymbol(e);
-		} }, this.t("watchlist.title")), this.watchlist.setActive(this.state.symbol), this.watchlist.setLocale(this.settingsState.numberLocale || void 0)), this.root.appendChild(o), this.chart = new e(this.chartContainer, {
+		} }, this.t("watchlist.title")), this.watchlist.setActive(this.state.symbol), this.watchlist.setLocale(this.settingsState.numberLocale || void 0)), this.root.appendChild(m), this.chart = new e(this.chartContainer, {
 			chartType: this.state.chartType,
 			theme: a,
 			autoScale: !0,
 			crosshair: { mode: "magnet" },
 			...r.chartOptions,
-			features: {
-				drawings: !0,
-				drawingMagnet: !0,
-				drawingUndoRedo: !0,
-				indicators: !0,
-				trading: r.trading !== !1,
-				tradingContextMenu: !1,
-				volume: !0,
-				legend: !0,
-				crosshair: !0,
-				crosshairTooltip: !1,
-				keyboard: !0,
-				screenshot: !0,
-				alerts: !0,
-				barCountdown: !0,
-				logScale: !0,
-				watermark: !0,
-				...r.chartOptions?.features
-			}
+			features: o
 		}), this.chart.on("dataUpdate", (e) => this.handleDataUpdate(e.payload)), r.dragDropImport !== !1 && (this.dragDrop = new t(this.chartContainer, {
 			onData: (e, t, n) => {
 				this.setData(e), this.toast(`Loaded ${t.data.length} bars from ${n.name}` + (t.skipped > 0 ? ` (${t.skipped} skipped)` : ""));
@@ -3302,28 +4098,92 @@ var $ = [
 			onError: (e, t) => {
 				this.toast(`${t.name}: ${e.message}`, "error");
 			}
-		}), this.dragDrop.attach()), r.statusBar !== !1 && (this.statusBar = new C(this.root)), r.settings !== !1 && (this.settings = new S({
+		}), this.dragDrop.attach()), r.statusBar !== !1) {
+			let e = r.rangeBar !== !1;
+			this.statusBar = new fe(this.root, e ? {
+				presets: s,
+				presetLabels: { All: this.t("range.all") },
+				groupLabel: this.t("range.presets"),
+				goToLabel: this.t("range.goTo"),
+				onPreset: (e) => this.chart.setVisibleRangePreset(e),
+				onGoTo: () => this.toggleGoToDate()
+			} : void 0), e && (this.goToDate = new st(this.root, {
+				title: this.t("range.goTo"),
+				date: this.t("range.date"),
+				time: this.t("range.time"),
+				submit: this.t("range.goToSubmit"),
+				cancel: this.t("range.cancel")
+			}, ({ date: e, time: t }) => this.goToWallTime(e, t)));
+		}
+		if (r.settings !== !1 && (this.settings = new de({
 			onChange: (e) => this.applySettings(e),
 			onReset: () => this.resetSettings(),
 			onClose: () => {}
-		}, this.t)), this.symbolSearch = new T({
+		}, this.t, {
+			barCountdown: o.barCountdown,
+			logScale: o.logScale
+		}, this.overlayHost)), this.symbolSearch = new me({
 			onPick: (e) => {
 				this.setSymbol(e);
 			},
 			onClose: () => {}
-		}), this.hotkeySheet = new N({ onClose: () => {} }, this.t), this.chart.on("barClick", (e) => {
+		}, this.overlayHost), this.hotkeySheet = new be({ onClose: () => {} }, this.t, this.overlayHost), this.chart.on("drawingToolChange", (e) => {
+			let t = e.payload.tool;
+			t !== this.state.activeTool && (this.state = {
+				...this.state,
+				activeTool: t
+			}, this.updateUI());
+		}), this.chart.on("indicatorAdd", () => this.syncIndicatorsFromChart()), this.chart.on("indicatorRemove", () => this.syncIndicatorsFromChart()), r.indicatorLegend !== !1) {
+			this.chart.setPaneTitlesVisible(!1), this.indicatorLegend = new mt(this.chartContainer, {
+				onToggleVisible: (e, t) => {
+					this.chart.setIndicatorVisible(e, t), this.scheduleLegend(), this.objectTree?.isOpen() && this.refreshObjects();
+				},
+				onSettings: (e) => this.openIndicatorSettings(e),
+				onRemove: (e) => this.handleRemoveIndicator(e)
+			}, {
+				show: this.t("legend.show"),
+				hide: this.t("legend.hide"),
+				settings: this.t("legend.settings"),
+				remove: this.t("legend.remove"),
+				collapse: this.t("legend.collapse"),
+				expand: this.t("legend.expand")
+			}), this.chart.on("crosshairMove", (e) => {
+				let t = e.payload;
+				this.legendHoverIndex = typeof t.barIndex == "number" ? t.barIndex : null, this.scheduleLegend();
+			}), this.chart.on("crosshairLeave", () => {
+				this.legendHoverIndex = null, this.scheduleLegend();
+			});
+			for (let e of [
+				"indicatorUpdate",
+				"dataUpdate",
+				"resize",
+				"paneResize",
+				"themeChange"
+			]) this.chart.on(e, () => this.scheduleLegend());
+		}
+		if (this.chart.on("barClick", (e) => {
 			if (!this.replayBar?.isMounted()) return;
 			let t = e.payload.barIndex;
-			typeof t == "number" && (this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(t), this.replayBar.setState("paused"));
-		}), this.dataWindow = new je(this.root, { formatPrice: (e) => this.formatAlertPrice(e) }), this.chart.on("crosshairMove", (e) => {
+			if (typeof t == "number") {
+				if (this.replayBar.getMode() === "select") {
+					this.startReplayAt(t);
+					return;
+				}
+				this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(t), this.replayBar.setState("paused");
+			}
+		}), this.chart.on("crosshairMove", (e) => {
+			if (this.replayBar?.getMode() !== "select" || !this.replayBar.isMounted()) return;
+			let t = e.payload.point;
+			this.positionReplayShade(t?.x ?? null);
+		}), this.dataWindow = new Tt(this.root, { formatPrice: (e) => this.formatAlertPrice(e) }), this.chart.on("crosshairMove", (e) => {
 			let t = e.payload;
 			this.lastHoverIndex = typeof t.barIndex == "number" ? t.barIndex : null, this.dataWindow?.isOpen() && this.dataWindow.render(this.buildDataWindowModel());
-		}), r.drawingTools !== !1 && (this.drawingStyle = new we(this.root, {
+		}), r.drawingTools !== !1 && (this.drawingStyle = new Ye(this.root, {
 			onStyleChange: (e) => {
 				this.chart.setDrawingStyle(e), this.chart.setSelectedDrawingStyle(e);
 			},
 			getStyle: () => this.chart.getDrawingStyle()
-		}, new be())), r.trading !== !1 && (this.bracketBar = new De(this.root, {
+		}, new Ge())), r.trading !== !1 && (this.bracketBar = new xt(this.root, {
 			onConfirm: () => this.chart.confirmBracket(),
 			onCancel: () => {
 				this.chart.cancelBracket(), this.bracketBar?.hide();
@@ -3331,7 +4191,7 @@ var $ = [
 		}), this.chart.on("bracketPlace", (e) => {
 			let t = e.payload;
 			this.bracketBar?.hide(), this.toast(`${t.side === "buy" ? "Long" : "Short"} bracket placed · ${t.riskReward.toFixed(2)}R`);
-		}), r.depthLadder && (this.depthLadder = new Ae(this.root, {
+		}), r.depthLadder && (this.depthLadder = new wt(this.root, {
 			onTrade: (e, t) => {
 				this.chart.placeOrderIntent({
 					side: e,
@@ -3343,7 +4203,7 @@ var $ = [
 		})), this.chart.on("dataUpdate", (e) => {
 			let t = e.payload;
 			t && t.bracket === "cancelled" && this.bracketBar?.hide();
-		})), r.alerts !== !1 && (this.alertsPanel = new ue(this.root, {
+		})), r.alerts !== !1 && (this.alertsPanel = new Fe(this.root, {
 			onAdd: (e, t, n, r, i) => {
 				this.chart.addAlert(e, t, n, r, i);
 			},
@@ -3351,18 +4211,20 @@ var $ = [
 			onClear: () => this.chart.clearAlerts(),
 			getChannelValue: (e) => this.getAlertChannelValue(e),
 			formatPrice: (e) => this.formatAlertPrice(e)
-		}), this.chart.on("alertAdd", () => this.refreshAlerts()), this.chart.on("alertRemove", () => this.refreshAlerts()), this.chart.on("alertUpdate", () => this.refreshAlerts()), r.alertNotifications && (this.alertNotifier = new Oe(r.alertNotifications)), this.chart.on("alertTriggered", (e) => {
+		}), this.chart.on("alertAdd", () => this.refreshAlerts()), this.chart.on("alertRemove", () => this.refreshAlerts()), this.chart.on("alertUpdate", () => this.refreshAlerts()), r.alertNotifications && (this.alertNotifier = new St(r.alertNotifications)), this.chart.on("alertTriggered", (e) => {
 			let t = e.payload, n = `Price ${this.formatAlertPrice(t.price)}${t.message ? ` — ${t.message}` : ""}`;
 			this.toast(`🔔 Alert: ${n}`, "info"), this.alertNotifier?.notify(n), this.refreshAlerts();
 		})), r.objectTree !== !1) {
-			this.indicatorSettings = new ge(this.root, {
-				onApply: (e, t) => this.chart.updateIndicator(e, t),
+			this.indicatorSettings = new Ve(this.root, {
+				onApply: (e, t) => {
+					this.chart.updateIndicator(e, t), this.syncIndicatorsFromChart();
+				},
 				onClose: () => {}
-			}), this.objectTree = new de(this.root, {
+			}), this.objectTree = new Ie(this.root, {
 				onRemoveIndicator: (e) => this.handleRemoveIndicator(e),
 				onConfigureIndicator: (e) => this.openIndicatorSettings(e),
 				onToggleIndicatorVisible: (e, t) => {
-					this.chart.setIndicatorVisible(e, t), this.refreshObjects();
+					this.chart.setIndicatorVisible(e, t), this.refreshObjects(), this.scheduleLegend();
 				},
 				onRemoveDrawing: (e) => {
 					this.chart.removeDrawing(e), this.refreshObjects();
@@ -3373,7 +4235,7 @@ var $ = [
 				onToggleDrawingLocked: (e, t) => {
 					this.chart.setDrawingLocked(e, t), this.refreshObjects();
 				},
-				onAddCompare: () => this.handleAddCompare(),
+				onAddCompare: o.compareSymbols === !1 ? void 0 : () => this.handleAddCompare(),
 				onRemoveCompare: (e) => this.handleRemoveCompare(e)
 			});
 			let e = () => {
@@ -3381,23 +4243,28 @@ var $ = [
 			};
 			this.chart.on("drawingCreate", e), this.chart.on("drawingRemove", e), this.chart.on("indicatorAdd", e), this.chart.on("indicatorRemove", e);
 		}
-		if (this.commandPalette = new w({
+		if (this.commandPalette = new pe({
 			onIndicator: (e) => this.handleAddIndicator(e),
 			onChartType: (e) => this.handleChartType(e),
 			onDrawingTool: (e) => this.handleDrawingTool(e),
 			onTimeframe: (e) => this.handleTimeframe(e),
 			onAction: (e) => this.handleAction(e),
 			onClose: () => {}
-		}), this.boundGlobalKeydown = (e) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "k") e.preventDefault(), this.toggleCommandPalette();
-			else if ((e.ctrlKey || e.metaKey) && (e.key === "p" || e.key === "P")) e.preventDefault(), this.symbolSearch?.open(this.symbols, this.state.symbol);
-			else if (e.key === "?" && !e.ctrlKey && !e.metaKey && !e.altKey) {
-				let t = document.activeElement;
-				if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
-				e.preventDefault(), this.hotkeySheet?.open();
+		}, this.overlayHost), this.boundGlobalKeydown = (e) => {
+			if (!(this.replayBar?.isMounted() && this.handleReplayKey(e))) {
+				if ((e.ctrlKey || e.metaKey) && e.key === "k") e.preventDefault(), this.toggleCommandPalette();
+				else if ((e.ctrlKey || e.metaKey) && (e.key === "p" || e.key === "P")) e.preventDefault(), this.symbolSearch?.open(this.symbols, this.state.symbol);
+				else if (e.altKey && !e.ctrlKey && !e.metaKey && (e.code === "KeyI" || e.code === "KeyG")) {
+					if (Gt() || Q !== null && Q !== this) return;
+					e.code === "KeyI" ? (e.preventDefault(), this.applySettings({ invertScale: !this.settingsState.invertScale })) : this.goToDate && (e.preventDefault(), this.toggleGoToDate());
+				} else if (e.key === "?" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+					let t = document.activeElement;
+					if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+					e.preventDefault(), this.hotkeySheet?.open();
+				}
 			}
-		}, document.addEventListener("keydown", this.boundGlobalKeydown), r.adapter && (this.adapter = r.adapter, this.connectStream()), this.watchlist && (this.watchlistInterval = setInterval(() => this.tickWatchlist(), 1e3)), this.updateUI(), r.onReady?.(this.chart), r.shareUrl && typeof location < "u") {
-			let e = Be(location.hash);
+		}, document.addEventListener("keydown", this.boundGlobalKeydown), document.addEventListener("fullscreenchange", this.onFullscreenChange), this.root.addEventListener("pointerdown", this.onRootPointerDown, !0), r.adapter && (this.adapter = r.adapter, this.connectStream()), this.watchlist && (this.watchlistInterval = setInterval(() => this.tickWatchlist(), 1e3)), this.updateUI(), r.onReady?.(this.chart), r.shareUrl && typeof location < "u") {
+			let e = Pt(location.hash);
 			e && this.importState(e);
 		}
 	}
@@ -3427,19 +4294,21 @@ var $ = [
 		});
 	}
 	async setTimeframe(e) {
-		if (this.state = {
-			...this.state,
-			timeframe: e
-		}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter) {
-			await this.connectStream();
-			return;
-		}
-		if (this.options.resampleTimeframes !== !1) {
-			if (!this.baseSeries) {
-				let e = this.chart.getData();
-				e.length > 0 && (this.baseSeries = e, this.baseTimeframeMs = s(e));
+		if (this.chart.isTimeframeAllowed(e)) {
+			if (this.state = {
+				...this.state,
+				timeframe: e
+			}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter) {
+				await this.connectStream();
+				return;
+			}
+			if (this.options.resampleTimeframes !== !1) {
+				if (!this.baseSeries) {
+					let e = this.chart.getData();
+					e.length > 0 && (this.baseSeries = e, this.baseTimeframeMs = l(e));
+				}
+				await this.switchLocalTimeframe();
 			}
-			await this.switchLocalTimeframe();
 		}
 	}
 	setTheme(e) {
@@ -3447,13 +4316,13 @@ var $ = [
 		this.state = {
 			...this.state,
 			isDark: t
-		}, this.root.dataset.tcwTheme = t ? "dark" : "light", this.chart.setTheme(n), this.updateUI();
+		}, this.root.dataset.tcwTheme = t ? "dark" : "light", this.portal.dataset.tcwTheme = this.root.dataset.tcwTheme, this.chart.setTheme(n), this.updateUI();
 	}
 	getChart() {
 		return this.chart;
 	}
 	destroy() {
-		this.destroyed || (this.destroyed = !0, this.boundGlobalKeydown && document.removeEventListener("keydown", this.boundGlobalKeydown), this.flushActiveLayout(), this.commandPalette?.destroy(), this.symbolSearch?.destroy(), this.hotkeySheet?.destroy(), this.replayPollInterval && clearInterval(this.replayPollInterval), this.replayBar?.destroy(), this.dragDrop?.detach(), this.alertsPanel?.destroy(), this.objectTree?.destroy(), this.indicatorSettings?.destroy(), this.drawingStyle?.destroy(), this.bracketBar?.destroy(), this.alertNotifier?.destroy(), this.depthLadder?.destroy(), this.dataWindow?.destroy(), this.watchlistInterval && clearInterval(this.watchlistInterval), this.watchlist?.destroy(), this.toolbar?.destroy(), this.sidebar?.destroy(), this.settings?.destroy(), this.statusBar?.destroy(), this.loading.destroy(), this.chart.destroy(), this.root.remove(), _());
+		this.destroyed || (this.destroyed = !0, this.boundGlobalKeydown && document.removeEventListener("keydown", this.boundGlobalKeydown), document.removeEventListener("fullscreenchange", this.onFullscreenChange), this.root.removeEventListener("pointerdown", this.onRootPointerDown, !0), this.tooltip.destroy(), this.legendFrame && cancelAnimationFrame(this.legendFrame), this.indicatorLegend?.destroy(), Q === this && (Q = null), this.portal.remove(), document.fullscreenElement === this.root && document.exitFullscreen().catch(() => {}), this.flushActiveLayout(), this.commandPalette?.destroy(), this.symbolSearch?.destroy(), this.hotkeySheet?.destroy(), this.replayPollInterval && clearInterval(this.replayPollInterval), this.replayShade?.remove(), this.replayBar?.destroy(), this.dragDrop?.detach(), this.alertsPanel?.destroy(), this.objectTree?.destroy(), this.indicatorSettings?.destroy(), this.drawingStyle?.destroy(), this.bracketBar?.destroy(), this.alertNotifier?.destroy(), this.depthLadder?.destroy(), this.dataWindow?.destroy(), this.watchlistInterval && clearInterval(this.watchlistInterval), this.watchlist?.destroy(), this.toolbar?.destroy(), this.sidebar?.destroy(), this.settings?.destroy(), this.statusBar?.destroy(), this.goToDate?.destroy(), this.loading.destroy(), this.chart.destroy(), this.root.remove(), re());
 	}
 	handleSymbolClick() {
 		this.symbolSearch?.open(this.symbols, this.state.symbol);
@@ -3461,14 +4330,49 @@ var $ = [
 	handleTimeframe(e) {
 		this.setTimeframe(e);
 	}
+	toggleFullscreen() {
+		if (document.fullscreenElement === this.root) {
+			document.exitFullscreen().catch(() => {});
+			return;
+		}
+		this.root.requestFullscreen().catch((e) => {
+			this.toast(e instanceof Error ? e.message : "Fullscreen is not available", "error");
+		});
+	}
+	displayTzOffset() {
+		let e = this.settingsState.timezone;
+		return e === "local" || !Number.isFinite(Number(e)) ? null : Number(e);
+	}
+	toggleGoToDate() {
+		if (!this.goToDate) return;
+		if (this.goToDate.isOpen()) {
+			this.goToDate.close();
+			return;
+		}
+		let e = this.chart.getData();
+		e.length !== 0 && this.goToDate.open(ot(e[e.length - 1].time * $(e), this.displayTzOffset()), this.root.querySelector("[data-role=\"goto\"]"));
+	}
+	goToWallTime(e, t) {
+		let n = at(e, t, this.displayTzOffset()), r = this.chart.getData();
+		if (n === null || r.length === 0) return;
+		let i = n / $(r);
+		this.chart.goToTime(i), i < r[0].time && this.toast(this.t("range.beforeData"));
+	}
+	pinnedTimeframes() {
+		let e = this.timeframeFavorites.list();
+		return this.timeframes.filter((t) => e.includes(t));
+	}
+	handleToggleTimeframeFavorite(e) {
+		this.timeframeFavorites.toggle(e), this.toolbar?.setTimeframeFavorites(this.pinnedTimeframes()), this.updateUI();
+	}
 	setData(e) {
-		this.localSeq++, this.baseSeries = e, this.baseTimeframeMs = s(e), this.applyTimeframeData(), this.adapter || this.loading.end();
+		this.localSeq++, this.baseSeries = e, this.baseTimeframeMs = l(e), this.applyTimeframeData(), this.adapter || this.loading.end();
 	}
 	async switchLocalTimeframe() {
 		if (!this.baseSeries) return;
-		let e = ++this.localSeq, t = this.lastLocalSwitchMs >= Ke || this.baseSeries.length >= qe;
+		let e = ++this.localSeq, t = this.lastLocalSwitchMs >= Vt || this.baseSeries.length >= Ht;
 		try {
-			if (t && (this.loading.begin(this.chart.getData().length > 0, !0), await Ye(), e !== this.localSeq || this.destroyed)) return;
+			if (t && (this.loading.begin(this.chart.getData().length > 0, !0), await Wt(), e !== this.localSeq || this.destroyed)) return;
 			this.applyTimeframeData();
 		} finally {
 			e === this.localSeq && this.loading.end();
@@ -3476,10 +4380,10 @@ var $ = [
 	}
 	applyTimeframeData() {
 		if (!this.baseSeries) return;
-		let e = performance.now(), t = a(this.state.timeframe);
+		let e = performance.now(), t = o(this.state.timeframe);
 		if (this.baseTimeframeMs > 0 && t > this.baseTimeframeMs) {
 			let e = this.options.weekStartsOn ?? 1;
-			this.chart.setData(o(this.baseSeries, this.state.timeframe, { weekStartsOn: e }));
+			this.chart.setData(c(this.baseSeries, this.state.timeframe, { weekStartsOn: e }));
 		} else this.chart.setData(this.baseSeries);
 		this.lastLocalSwitchMs = performance.now() - e;
 	}
@@ -3525,7 +4429,7 @@ var $ = [
 			id: e.id,
 			params: e.params
 		}));
-		return Re({
+		return Mt({
 			v: 1,
 			symbol: this.state.symbol,
 			timeframe: this.state.timeframe,
@@ -3536,26 +4440,19 @@ var $ = [
 		});
 	}
 	async importState(e) {
-		let t = ze(e);
+		let t = Nt(e);
 		if (!t) return !1;
 		t.symbol && t.symbol !== this.state.symbol && await this.setSymbol(t.symbol), t.timeframe && t.timeframe !== this.state.timeframe && await this.setTimeframe(t.timeframe), t.chartType && this.handleChartType(t.chartType), this.chart.setScaleMode(t.scaleMode);
-		for (let [, e] of this.state.activeIndicators) this.chart.removeIndicator(e);
-		let n = /* @__PURE__ */ new Map();
-		for (let e of t.indicators) {
-			let t = this.chart.addIndicator(e.id, e.params);
-			t && n.set(e.id, t);
-		}
-		return this.state = {
-			...this.state,
-			activeIndicators: n
-		}, this.chart.setDrawings(t.drawings), this.updateUI(), !0;
+		for (let e of [...this.state.activeIndicators.keys()]) this.chart.removeIndicator(e);
+		for (let e of t.indicators) this.chart.addIndicator(e.id, e.params);
+		return this.chart.setDrawings(t.drawings), this.updateUI(), !0;
 	}
 	async copyChartImage() {
 		let e = await this.chart.copyScreenshot();
 		this.toast(e ? "Chart image copied" : "Copy failed — image clipboard unavailable", e ? "info" : "error");
 	}
 	async copyShareLink() {
-		let e = Ve(typeof location < "u" ? location.href : "", this.exportState());
+		let e = Ft(typeof location < "u" ? location.href : "", this.exportState());
 		try {
 			await navigator.clipboard.writeText(e), this.toast("Share link copied");
 		} catch {
@@ -3623,7 +4520,7 @@ var $ = [
 			visible: e.visible
 		})), t = this.chart.getDrawings().map((e) => ({
 			id: e.id,
-			label: pe(e.type),
+			label: Re(e.type),
 			visible: e.visible,
 			locked: e.locked
 		})), n = this.compares.map((e) => ({
@@ -3645,7 +4542,7 @@ var $ = [
 	}
 	async addCompareSymbol(e) {
 		if (!this.adapter || this.compares.some((t) => t.symbol === e)) return;
-		let t = $[this.compares.length % $.length], n = `cmp_${e}`;
+		let t = X[this.compares.length % X.length], n = `cmp_${e}`;
 		try {
 			let r = await this.adapter.fetchHistory(e, this.state.timeframe, this.options.historyLimit ?? 500);
 			this.compares.length === 0 && this.chart.setCompareMode("percent"), this.chart.addCompareSymbol(n, e, r, t), this.compares = [...this.compares, {
@@ -3719,37 +4616,10 @@ var $ = [
 		}, this.chart.setChartType(e), this.updateUI();
 	}
 	handleAddIndicator(e) {
-		if (this.state.activeIndicators.has(e)) {
-			let t = this.state.activeIndicators.get(e);
-			this.chart.removeIndicator(t);
-			let n = new Map(this.state.activeIndicators);
-			n.delete(e), this.state = {
-				...this.state,
-				activeIndicators: n
-			};
-		} else {
-			let t = this.chart.addIndicator(e);
-			if (t) {
-				let n = new Map(this.state.activeIndicators);
-				n.set(e, t), this.state = {
-					...this.state,
-					activeIndicators: n
-				};
-			}
-		}
-		this.updateUI();
+		this.chart.addIndicator(e);
 	}
 	handleRemoveIndicator(e) {
 		this.chart.removeIndicator(e);
-		let t = new Map(this.state.activeIndicators);
-		for (let [n, r] of t.entries()) if (r === e) {
-			t.delete(n);
-			break;
-		}
-		this.state = {
-			...this.state,
-			activeIndicators: t
-		}, this.updateUI();
 	}
 	toggleCommandPalette() {
 		if (this.commandPalette?.isOpen()) {
@@ -3760,29 +4630,29 @@ var $ = [
 	}
 	buildCommandItems() {
 		let e = [];
-		for (let t of d) e.push({
+		for (let t of f) e.push({
 			id: t.id,
 			label: t.name,
 			category: "indicator",
-			active: this.state.activeIndicators.has(t.id)
+			active: [...this.state.activeIndicators.values()].some((e) => e.id === t.id)
 		});
-		for (let t of l) e.push({
+		for (let t of u) e.push({
 			id: t.value,
 			label: t.label,
 			category: "chartType",
 			active: this.state.chartType === t.value
 		});
-		for (let t of u) for (let n of t.tools) e.push({
+		for (let t of d) for (let n of t.tools) e.push({
 			id: n.value,
 			label: n.label,
 			category: "drawing",
 			active: this.state.activeTool === n.value
 		});
-		for (let t of c) e.push({
-			id: t.value,
-			label: t.label,
+		for (let t of this.timeframes) e.push({
+			id: t,
+			label: F(t),
 			category: "timeframe",
-			active: this.state.timeframe === t.value
+			active: this.state.timeframe === t
 		});
 		return e.push({
 			id: "screenshot",
@@ -3864,6 +4734,13 @@ var $ = [
 			activeTool: null
 		}, this.chart.setDrawingTool(null), this.updateUI();
 	}
+	handleToggleStayInDrawing() {
+		let e = !this.state.stayInDrawing;
+		this.state = {
+			...this.state,
+			stayInDrawing: e
+		}, this.chart.setStayInDrawingMode(e), this.updateUI();
+	}
 	handleToggleMagnet() {
 		let e = !this.state.magnetEnabled;
 		this.state = {
@@ -3876,7 +4753,7 @@ var $ = [
 		this.state = {
 			...this.state,
 			isDark: e
-		}, this.root.dataset.tcwTheme = e ? "dark" : "light", this.chart.setTheme(e ? n : r), this.chart.setWatermark(this.state.symbol.replace("USDT", " / USDT"), {
+		}, this.root.dataset.tcwTheme = e ? "dark" : "light", this.portal.dataset.tcwTheme = this.root.dataset.tcwTheme, this.chart.setTheme(e ? n : r), this.chart.setWatermark(this.state.symbol.replace("USDT", " / USDT"), {
 			fontSize: 48,
 			color: e ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)"
 		}), this.updateUI();
@@ -3902,7 +4779,7 @@ var $ = [
 		let t = this.layoutKeyPrefix + e;
 		this.activeLayoutKey = t;
 		try {
-			this.chart.loadStateFromStorage(t) && this.rebuildActiveIndicatorsMapFromChart();
+			this.chart.loadStateFromStorage(t) && this.syncIndicatorsFromChart();
 		} catch {}
 		this.chart.setAutoSave(t, this.layoutDebounceMs);
 	}
@@ -3914,9 +4791,12 @@ var $ = [
 			this.chart.disableAutoSave(), this.activeLayoutKey = null;
 		}
 	}
-	rebuildActiveIndicatorsMapFromChart() {
+	syncIndicatorsFromChart() {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of this.chart.getActiveIndicators()) e.set(t.id, t.instanceId);
+		for (let t of this.chart.getActiveIndicators()) e.set(t.instanceId, {
+			id: t.id,
+			label: qt(t.id, t.params, t.descriptor.defaultConfig)
+		});
 		this.state = {
 			...this.state,
 			activeIndicators: e
@@ -3926,61 +4806,109 @@ var $ = [
 		this.replayBar?.isMounted() ? this.exitReplay() : this.enterReplay();
 	}
 	enterReplay() {
-		let e = this.chart.getData();
-		e.length < 2 || (this.replayOriginalData = e.slice(), this.replayBar = new F({
+		if (this.replayTotal() < 2) return;
+		let e = this.t;
+		this.replayBar = new Ce({
 			onPlay: () => {
-				this.chart.getReplayState() === "paused" ? this.chart.replayResume() : this.chart.replayStart({
-					speed: this.replaySpeed,
-					interval: 200
-				}), this.replayBar?.setState("playing");
+				if (this.replayBar?.getMode() === "select") {
+					this.startReplayAt(Math.max(1, this.replayTotal() - 100), !0);
+					return;
+				}
+				this.chart.getReplayState() === "paused" && this.chart.replayResume(), this.replayBar?.setState("playing");
 			},
 			onPause: () => {
 				this.chart.replayPause(), this.replayBar?.setState("paused");
 			},
-			onStop: () => {
-				this.chart.replayStop(), this.replayBar?.setState("paused");
-			},
-			onStepBack: () => {
-				let e = this.chart.getReplayProgress();
-				this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(Math.max(0, e.current - 1)), this.replayBar?.setState("paused");
-			},
-			onStepForward: () => {
-				let e = this.chart.getReplayProgress();
-				this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(Math.min(e.total - 1, e.current + 1)), this.replayBar?.setState("paused");
-			},
+			onStepBack: () => this.stepReplay(-1),
+			onStepForward: () => this.stepReplay(1),
 			onSeek: (e) => {
 				this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(e), this.replayBar?.setState("paused");
 			},
 			onSpeedChange: (e) => {
 				this.replaySpeed = e, this.chart.setReplaySpeed(e);
 			},
+			onRandomStart: () => {
+				let e = this.replayTotal(), t = Math.max(1, Math.floor(e * .1)), n = Math.max(t, Math.floor(e * .9));
+				this.startReplayAt(t + Math.floor(Math.random() * (n - t + 1)));
+			},
 			onClose: () => this.exitReplay()
+		}, {
+			selectHint: e("replay.selectHint"),
+			random: e("replay.random"),
+			realtime: e("replay.realtime"),
+			barsPerSecond: e("replay.barsPerSecond"),
+			play: e("replay.play"),
+			pause: e("replay.pause"),
+			stepBack: e("replay.stepBack"),
+			stepForward: e("replay.stepForward")
 		}), this.replayBar.mount(this.chartContainer, {
-			total: e.length,
-			speed: this.replaySpeed
-		}), this.chart.replayStart({
+			total: this.replayTotal(),
 			speed: this.replaySpeed,
-			interval: 200,
-			startIndex: 1
-		}), this.chart.replayPause(), this.replayBar.setState("paused"), this.replayPollInterval = setInterval(() => {
-			if (!this.replayBar?.isMounted()) return;
-			let e = this.chart.getReplayProgress();
-			this.replayBar.setProgress(e.current, e.total);
-			let t = this.chart.getReplayState();
-			t === "stopped" ? this.replayBar.setState("paused") : this.replayBar.setState(t);
-		}, 150));
+			mode: "select"
+		}), this.replayShade = document.createElement("div"), this.replayShade.className = "tcw-replay-shade", this.replayShade.hidden = !0, this.chartContainer.appendChild(this.replayShade), this.chartContainer.addEventListener("mouseleave", this.hideReplayShade);
+	}
+	hideReplayShade = () => this.positionReplayShade(null);
+	replayFrom(e, t = !1) {
+		this.replayBar?.isMounted() || this.enterReplay(), this.startReplayAt(e, t);
+	}
+	startReplayAt(e, t = !1) {
+		let n = this.replayBar;
+		if (!n) return;
+		let r = this.replayTotal(), i = Math.max(0, Math.min(Number.isFinite(e) ? Math.floor(e) : 0, r - 1));
+		this.replayShade?.remove(), this.replayShade = null, this.chartContainer.removeEventListener("mouseleave", this.hideReplayShade), n.setMode("replay"), this.chart.replayStart({
+			speed: this.replaySpeed,
+			interval: 1e3,
+			startIndex: i,
+			paused: !0
+		}), t && this.chart.replayResume(), n.setState(t ? "playing" : "paused"), this.syncReplayBar(), this.replayPollInterval && clearInterval(this.replayPollInterval), this.replayPollInterval = setInterval(() => this.syncReplayBar(), 150);
+	}
+	replayTotal() {
+		return this.chart.isReplayActive() ? this.chart.getReplayProgress().total : this.chart.getData().length;
+	}
+	syncReplayBar() {
+		let e = this.replayBar;
+		if (!e?.isMounted() || e.getMode() !== "replay") return;
+		if (!this.chart.isReplayActive()) {
+			this.teardownReplayUi();
+			return;
+		}
+		let t = this.chart.getReplayProgress(), n = this.chart.getReplayState();
+		e.setProgress(t.current, t.total), e.setState(n === "stopped" ? "paused" : n), e.setEnded(n !== "playing" && t.total > 0 && t.current >= t.total - 1);
+	}
+	stepReplay(e) {
+		if (this.replayBar?.getMode() !== "replay") return;
+		let t = this.chart.getReplayProgress();
+		this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(Math.max(0, Math.min(t.total - 1, t.current + e))), this.replayBar.setState("paused"), this.syncReplayBar();
+	}
+	handleReplayKey(e) {
+		if (e.defaultPrevented) return !1;
+		let t = document.activeElement;
+		return t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable) ? !1 : e.shiftKey && (e.key === "ArrowRight" || e.key === "ArrowLeft") && this.replayBar?.getMode() === "replay" ? (e.preventDefault(), e.stopPropagation(), this.stepReplay(e.key === "ArrowRight" ? 1 : -1), !0) : e.key === "Escape" && this.replayBar?.getMode() === "select" ? (this.exitReplay(), !0) : !1;
+	}
+	positionReplayShade(e) {
+		let t = this.replayShade;
+		if (!t) return;
+		let n = this.chart.getPlotRect();
+		if (e === null || e < n.x || e > n.x + n.width) {
+			t.hidden = !0;
+			return;
+		}
+		t.hidden = !1, t.style.left = `${e}px`, t.style.top = `${n.y}px`, t.style.width = `${n.x + n.width - e}px`, t.style.height = `${n.height}px`;
 	}
 	exitReplay() {
-		this.replayPollInterval &&= (clearInterval(this.replayPollInterval), null), this.chart.replayStop(), this.replayBar?.unmount(), this.replayBar = null, this.replayOriginalData &&= (this.chart.setData(this.replayOriginalData), null);
+		this.teardownReplayUi(), this.chart.replayStop();
+	}
+	teardownReplayUi() {
+		this.replayPollInterval &&= (clearInterval(this.replayPollInterval), null), this.replayShade?.remove(), this.replayShade = null, this.chartContainer.removeEventListener("mouseleave", this.hideReplayShade), this.replayBar?.unmount(), this.replayBar = null;
 	}
 	applySettings(e) {
 		this.settingsState = {
 			...this.settingsState,
 			...e
-		}, e.gridVisible !== void 0 && this.chart.setGridVisible(e.gridVisible), e.volumeVisible !== void 0 && this.chart.setVolumeVisible(e.volumeVisible), e.volumeProfileVisible !== void 0 && this.chart.setVolumeProfileVisible(e.volumeProfileVisible), e.marketProfileVisible !== void 0 && this.chart.setMarketProfileVisible(e.marketProfileVisible), e.marketProfileSplit !== void 0 && this.chart.setMarketProfileConfig({ splitBySession: e.marketProfileSplit }), e.marketProfileLetters !== void 0 && this.chart.setMarketProfileConfig({ letters: e.marketProfileLetters }), e.marketProfileBuckets !== void 0 && this.chart.setMarketProfileConfig({ buckets: e.marketProfileBuckets }), e.marketProfileOpacity !== void 0 && this.chart.setMarketProfileConfig({ opacity: e.marketProfileOpacity }), e.depthHeatmapVisible !== void 0 && this.chart.setDepthHeatmapVisible(e.depthHeatmapVisible), e.depthHeatmapOpacity !== void 0 && this.chart.setDepthHeatmapConfig({ opacity: e.depthHeatmapOpacity }), e.sessionShadingVisible !== void 0 && this.chart.setSessionShadingVisible(e.sessionShadingVisible), e.pivotMarkersVisible !== void 0 && this.chart.setPivotMarkersVisible(e.pivotMarkersVisible), e.pivotStrength !== void 0 && this.chart.setPivotMarkersConfig({
+		}, this.scheduleLegend(), e.gridVisible !== void 0 && this.chart.setGridVisible(e.gridVisible), e.volumeVisible !== void 0 && this.chart.setVolumeVisible(e.volumeVisible), e.volumeProfileVisible !== void 0 && this.chart.setVolumeProfileVisible(e.volumeProfileVisible), e.marketProfileVisible !== void 0 && this.chart.setMarketProfileVisible(e.marketProfileVisible), e.marketProfileSplit !== void 0 && this.chart.setMarketProfileConfig({ splitBySession: e.marketProfileSplit }), e.marketProfileLetters !== void 0 && this.chart.setMarketProfileConfig({ letters: e.marketProfileLetters }), e.marketProfileBuckets !== void 0 && this.chart.setMarketProfileConfig({ buckets: e.marketProfileBuckets }), e.marketProfileOpacity !== void 0 && this.chart.setMarketProfileConfig({ opacity: e.marketProfileOpacity }), e.depthHeatmapVisible !== void 0 && this.chart.setDepthHeatmapVisible(e.depthHeatmapVisible), e.depthHeatmapOpacity !== void 0 && this.chart.setDepthHeatmapConfig({ opacity: e.depthHeatmapOpacity }), e.sessionShadingVisible !== void 0 && this.chart.setSessionShadingVisible(e.sessionShadingVisible), e.pivotMarkersVisible !== void 0 && this.chart.setPivotMarkersVisible(e.pivotMarkersVisible), e.pivotStrength !== void 0 && this.chart.setPivotMarkersConfig({
 			left: e.pivotStrength,
 			right: e.pivotStrength
-		}), e.pivotStructureLabels !== void 0 && this.chart.setPivotMarkersConfig({ structureLabels: e.pivotStructureLabels }), e.periodLevelsVisible !== void 0 && this.chart.setPeriodLevelsVisible(e.periodLevelsVisible), e.periodLevelsPeriod !== void 0 && this.chart.setPeriodLevelsPeriod(e.periodLevelsPeriod), e.crosshairMode !== void 0 && this.chart.setCrosshairMode(e.crosshairMode), e.autoScale !== void 0 && this.chart.setAutoScale(e.autoScale), e.scaleMode === void 0 ? e.logScale !== void 0 && (this.chart.setLogScale(e.logScale), this.settingsState = {
+		}), e.pivotStructureLabels !== void 0 && this.chart.setPivotMarkersConfig({ structureLabels: e.pivotStructureLabels }), e.periodLevelsVisible !== void 0 && this.chart.setPeriodLevelsVisible(e.periodLevelsVisible), e.periodLevelsPeriod !== void 0 && this.chart.setPeriodLevelsPeriod(e.periodLevelsPeriod), e.crosshairMode !== void 0 && this.chart.setCrosshairMode(e.crosshairMode), e.autoScale !== void 0 && this.chart.setAutoScale(e.autoScale), e.invertScale !== void 0 && this.chart.setInvertScale(e.invertScale), e.scaleMode === void 0 ? e.logScale !== void 0 && (this.chart.setLogScale(e.logScale), this.settingsState = {
 			...this.settingsState,
 			scaleMode: e.logScale ? "logarithmic" : "regular"
 		}) : (this.chart.setScaleMode(e.scaleMode), this.settingsState = {
@@ -4029,8 +4957,37 @@ var $ = [
 		}
 		this.updateUI();
 	}
+	scheduleLegend() {
+		!this.indicatorLegend || this.legendFrame || (this.legendFrame = requestAnimationFrame(() => {
+			this.legendFrame = 0, this.renderLegend();
+		}));
+	}
+	renderLegend() {
+		if (!this.indicatorLegend || this.destroyed) return;
+		let e = this.chart.getData().length - 1, t = this.chart.isTimeAligned() ? this.legendHoverIndex : null, n = t === null ? e : Math.min(Math.max(t, 0), e), r = new Map(this.chart.getIndicatorPanes().map((e) => [e.instanceId, e.rect])), i = this.settingsState.numberLocale || "en-US", a = this.chart.getActiveIndicators().map((t) => {
+			let a = r.get(t.instanceId) ?? null, o = this.chart.getIndicatorOutput(t.instanceId)?.series, s = n >= 0 ? o?.[n] : null, c = W(t.id, s), l = (n === e ? c.length : W(t.id, e >= 0 ? o?.[e] : null).length) === 1 ? vt(t.id, this.chart.getIndicatorStyle(t.instanceId)?.colors ?? [], s) : null;
+			return {
+				instanceId: t.instanceId,
+				label: qt(t.id, t.params, t.descriptor.defaultConfig),
+				visible: t.visible,
+				values: c.map((e) => ({
+					text: a ? bt(e, i) : this.chart.formatPrice(e),
+					color: l
+				})),
+				pane: a ? {
+					x: a.x + Z,
+					y: a.y + 1,
+					width: a.width - 2 * Z
+				} : null
+			};
+		}), o = this.chart.getPlotRect();
+		this.indicatorLegend.update(a, {
+			left: o.x + Z,
+			top: this.chart.getLegendBottom() + 1
+		});
+	}
 	updateUI() {
-		this.toolbar?.update(this.state), this.sidebar?.update(this.state), this.statusBar?.update({
+		this.scheduleLegend(), this.toolbar?.update(this.state), this.sidebar?.update(this.state), this.statusBar?.update({
 			connectionState: this.state.connectionState,
 			message: this.state.connectionMessage,
 			symbol: this.state.symbol,
@@ -4051,7 +5008,11 @@ var $ = [
 		return !0;
 	}
 };
+function qt(e, t, n) {
+	let r = Object.keys(n || t).map((e) => t[e]).filter((e) => typeof e == "number" && Number.isFinite(e)).slice(0, 3).map((e) => String(Number(e.toFixed(4))));
+	return [e.toUpperCase(), ...r].join(" ");
+}
 //#endregion
-export { Xe as ChartWidget };
+export { y as CHART_TYPE_ICONS, Kt as ChartWidget, v as DRAWING_TOOL_ICONS, _ as UI_ICONS, T as createChartTypeIcon, C as createIcon, w as createToolIcon, x as iconSvg };
 
 //# sourceMappingURL=index.js.map