@tradecanvas/chart 1.1.0 → 1.3.0

package/dist/widget/index.js

@@ -1,4 +1,4 @@
-import { r as e, t } from "../DragDropImporter-CLtRQjKD.js";
+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";
 //#region src/io/resampleOHLCV.ts
 function o(e, t, n = {}) {
@@ -124,18 +124,37 @@ var c = [
 			{
 				label: "Extended Line",
 				value: "extendedLine"
+			},
+			{
+				label: "Info Line",
+				value: "infoLine"
+			},
+			{
+				label: "Trend Angle",
+				value: "trendAngle"
 			}
 		]
 	},
 	{
 		label: "Horizontal/Vertical",
-		tools: [{
-			label: "Horizontal Line",
-			value: "horizontalLine"
-		}, {
-			label: "Vertical Line",
-			value: "verticalLine"
-		}]
+		tools: [
+			{
+				label: "Horizontal Line",
+				value: "horizontalLine"
+			},
+			{
+				label: "Horizontal Ray",
+				value: "horizontalRay"
+			},
+			{
+				label: "Vertical Line",
+				value: "verticalLine"
+			},
+			{
+				label: "Cross Line",
+				value: "crossLine"
+			}
+		]
 	},
 	{
 		label: "Channels",
@@ -149,13 +168,28 @@ var c = [
 	},
 	{
 		label: "Fibonacci",
-		tools: [{
-			label: "Fib Retracement",
-			value: "fibRetracement"
-		}, {
-			label: "Fib Extension",
-			value: "fibExtension"
-		}]
+		tools: [
+			{
+				label: "Fib Retracement",
+				value: "fibRetracement"
+			},
+			{
+				label: "Fib Extension",
+				value: "fibExtension"
+			},
+			{
+				label: "Fib Channel",
+				value: "fibChannel"
+			},
+			{
+				label: "Fib Time Zones",
+				value: "fibTimeZones"
+			},
+			{
+				label: "Fib Speed Resistance Fan",
+				value: "fibSpeedResistanceFan"
+			}
+		]
 	},
 	{
 		label: "Shapes",
@@ -164,6 +198,10 @@ var c = [
 				label: "Rectangle",
 				value: "rectangle"
 			},
+			{
+				label: "Circle",
+				value: "circle"
+			},
 			{
 				label: "Ellipse",
 				value: "ellipse"
@@ -175,12 +213,20 @@ var c = [
 		]
 	},
 	{
-		label: "Gann & Advanced",
+		label: "Gann & Pitchforks",
 		tools: [
 			{
 				label: "Pitchfork",
 				value: "pitchfork"
 			},
+			{
+				label: "Schiff Pitchfork",
+				value: "schiffPitchfork"
+			},
+			{
+				label: "Modified Schiff Pitchfork",
+				value: "modifiedSchiffPitchfork"
+			},
 			{
 				label: "Gann Fan",
 				value: "gannFan"
@@ -189,6 +235,27 @@ var c = [
 				label: "Gann Box",
 				value: "gannBox"
 			},
+			{
+				label: "Cyclic Lines",
+				value: "cyclicLines"
+			}
+		]
+	},
+	{
+		label: "Patterns",
+		tools: [
+			{
+				label: "XABCD Pattern",
+				value: "xabcdPattern"
+			},
+			{
+				label: "ABCD Pattern",
+				value: "abcdPattern"
+			},
+			{
+				label: "Head and Shoulders",
+				value: "headAndShoulders"
+			},
 			{
 				label: "Elliott Wave",
 				value: "elliottWave"
@@ -206,6 +273,10 @@ var c = [
 				label: "Date Range",
 				value: "dateRange"
 			},
+			{
+				label: "Date and Price Range",
+				value: "dateAndPriceRange"
+			},
 			{
 				label: "Measure",
 				value: "measure"
@@ -214,13 +285,37 @@ var c = [
 	},
 	{
 		label: "Annotation",
-		tools: [{
-			label: "Text",
-			value: "text"
-		}, {
-			label: "Arrow",
-			value: "arrow"
-		}]
+		tools: [
+			{
+				label: "Text",
+				value: "text"
+			},
+			{
+				label: "Price Label",
+				value: "priceLabel"
+			},
+			{
+				label: "Arrow",
+				value: "arrow"
+			}
+		]
+	},
+	{
+		label: "Forecasting",
+		tools: [
+			{
+				label: "Long/Short Position",
+				value: "riskReward"
+			},
+			{
+				label: "Anchored VWAP",
+				value: "anchoredVWAP"
+			},
+			{
+				label: "Fixed Range Volume Profile",
+				value: "volumeProfileRange"
+			}
+		]
 	}
 ], d = [
 	{
@@ -233,6 +328,21 @@ var c = [
 		name: "EMA",
 		type: "overlay"
 	},
+	{
+		id: "tema",
+		name: "Triple EMA",
+		type: "overlay"
+	},
+	{
+		id: "vwma",
+		name: "VWMA",
+		type: "overlay"
+	},
+	{
+		id: "wma",
+		name: "Weighted MA",
+		type: "overlay"
+	},
 	{
 		id: "hma",
 		name: "Hull MA",
@@ -248,6 +358,11 @@ var c = [
 		name: "Bollinger Bands",
 		type: "overlay"
 	},
+	{
+		id: "envelope",
+		name: "Envelope",
+		type: "overlay"
+	},
 	{
 		id: "vwap",
 		name: "VWAP",
@@ -570,12 +685,12 @@ var c = [
 	"SOLUSDT",
 	"BNBUSDT"
 ], p = {
-	candleUpColor: "#26A69A",
-	candleDownColor: "#EF5350",
-	candleUpWick: "#26A69A",
-	candleDownWick: "#EF5350",
-	backgroundColor: "#131722",
-	gridColor: "#1E222D",
+	candleUpColor: n.candleUp,
+	candleDownColor: n.candleDown,
+	candleUpWick: n.candleUpWick,
+	candleDownWick: n.candleDownWick,
+	backgroundColor: n.background,
+	gridColor: n.grid,
 	gridVisible: !0,
 	volumeVisible: !0,
 	volumeProfileVisible: !1,
@@ -600,7 +715,7 @@ var c = [
 	crosshairMode: "magnet",
 	numberLocale: "en-US",
 	timezone: "local"
-}, te = "/* === 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.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: #d1d4dc;\n  background: #0d0f17;\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: #0d0f17;\n  --tcw-bg-surface: #131722;\n  --tcw-bg-elevated: #1a1e2d;\n  --tcw-bg-overlay: #20253480;\n  --tcw-border: #2a2e39;\n  --tcw-border-strong: #363a45;\n  --tcw-text: #e9ebf0;\n  --tcw-text-dim: #b2b5be;\n  --tcw-text-muted: #6b6f7a;\n\n  --tcw-accent: #4f88ff;\n  --tcw-accent-hover: #6b9aff;\n  --tcw-accent-soft: rgba(79, 136, 255, 0.14);\n  --tcw-accent-glow: rgba(79, 136, 255, 0.22);\n  --tcw-accent-line: rgba(79, 136, 255, 0.55);\n\n  --tcw-red: #f23645;\n  --tcw-red-soft: rgba(242, 54, 69, 0.12);\n  --tcw-green: #26a17b;\n  --tcw-green-soft: rgba(38, 161, 123, 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(79, 136, 255, 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: #131722;\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: #e7e9ef;\n  --tcw-border-strong: #d4d7e0;\n  --tcw-text: #131722;\n  --tcw-text-dim: #50545e;\n  --tcw-text-muted: #8b8f99;\n\n  --tcw-accent: #2962ff;\n  --tcw-accent-hover: #1e4fd6;\n  --tcw-accent-soft: rgba(41, 98, 255, 0.10);\n  --tcw-accent-glow: rgba(41, 98, 255, 0.16);\n  --tcw-accent-line: rgba(41, 98, 255, 0.45);\n\n  --tcw-hover-bg: rgba(0, 0, 0, 0.04);\n  --tcw-active-bg: rgba(41, 98, 255, 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.tcw-indicator-chips {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 4px;\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n\n.tcw-indicator-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 6px 3px 9px;\n  font-size: 11px;\n  font-weight: 500;\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  border-radius: 9999px;\n  white-space: nowrap;\n  line-height: 1.4;\n  letter-spacing: -0.005em;\n  border: 1px solid transparent;\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-indicator-chip:hover {\n  border-color: var(--tcw-accent-line);\n}\n\n.tcw-chip-remove {\n  cursor: pointer;\n  opacity: 0.55;\n  padding: 0 2px;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n  border: none;\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n}\n\n.tcw-chip-remove:hover {\n  opacity: 1;\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.tcw-dropdown-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: 600;\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/* === 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@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-item {\n  padding: 7px 10px;\n  font-size: 12.5px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  display: block;\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: #fff;\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  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-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(38, 161, 123, 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(242, 54, 69, 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.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: #fff;\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-indicator-chips {\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: #fff;\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: #fff;\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: #fff;\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", m = 0, h = "tcw-styles";
+}, 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;
 	let e = document.createElement("style");
@@ -618,6 +733,7 @@ var v = {
 	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\"/>",
@@ -691,14 +807,15 @@ var b = class {
 }, ne = class {
 	config;
 	callbacks;
+	t;
 	el;
 	chartTypeDropdown = null;
 	indicatorDropdown = null;
 	tfButtons = [];
 	chipsContainer = null;
 	themeBtn = null;
-	constructor(e, t, n) {
-		this.config = t, this.callbacks = n, this.el = document.createElement("div"), this.el.className = "tcw-toolbar", this.build(), e.appendChild(this.el);
+	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");
@@ -718,35 +835,39 @@ var b = class {
 		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) {
-			let e = this.iconBtn("play", "Bar replay", t.onToggleReplay);
+			let e = this.iconBtn("play", this.t("toolbar.replay"), t.onToggleReplay);
 			e.dataset.role = "replay", n.appendChild(e);
 		}
 		if (t.onBracket) {
-			let e = t.onBracket, r = this.iconBtn("trendingUp", "Long bracket", () => e("buy"));
+			let e = t.onBracket, r = this.iconBtn("trendingUp", this.t("toolbar.longBracket"), () => e("buy"));
 			r.dataset.role = "long", r.classList.add("tcw-btn-long"), n.appendChild(r);
-			let i = this.iconBtn("trendingDown", "Short bracket", () => e("sell"));
+			let i = this.iconBtn("trendingDown", this.t("toolbar.shortBracket"), () => e("sell"));
 			i.dataset.role = "short", i.classList.add("tcw-btn-short"), n.appendChild(i);
 		}
 		if (t.onToggleLadder) {
-			let e = this.iconBtn("ladder", "Depth ladder", t.onToggleLadder);
+			let e = this.iconBtn("ladder", this.t("toolbar.depthLadder"), t.onToggleLadder);
 			e.dataset.role = "ladder", n.appendChild(e);
 		}
 		if (t.onToggleObjects) {
-			let e = this.iconBtn("layers", "Objects", t.onToggleObjects);
+			let e = this.iconBtn("layers", this.t("toolbar.objects"), t.onToggleObjects);
 			e.dataset.role = "objects", n.appendChild(e);
 		}
 		if (t.onToggleAlerts) {
-			let e = this.iconBtn("bell", "Price alerts", t.onToggleAlerts);
+			let e = this.iconBtn("bell", this.t("toolbar.priceAlerts"), t.onToggleAlerts);
 			e.dataset.role = "alerts", n.appendChild(e);
 		}
-		let l = this.iconBtn("camera", "Screenshot", t.onScreenshot);
+		let l = this.iconBtn("camera", this.t("toolbar.screenshot"), t.onScreenshot);
 		n.appendChild(l);
-		let u = this.iconBtn("settings", "Chart Settings", t.onSettings);
-		n.appendChild(u), this.themeBtn = this.iconBtn("moon", "Toggle theme", t.onToggleTheme), this.themeBtn.dataset.role = "theme", n.appendChild(this.themeBtn);
+		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);
+	}
+	chartTypeLabel(e) {
+		let t = `chartType.${e.value}`, n = this.t(t);
+		return n === t ? e.label : n;
 	}
 	buildChartTypeMenu() {
 		if (!this.chartTypeDropdown) return;
-		let e = this.config.chartTypes.map((e) => `<button class="tcw-dropdown-item" data-ct="${e.value}">${e.label}</button>`).join("");
+		let e = this.config.chartTypes.map((e) => `<button class="tcw-dropdown-item" data-ct="${e.value}">${this.chartTypeLabel(e)}</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;
@@ -756,11 +877,11 @@ var b = class {
 	}
 	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 = "<div class=\"tcw-dropdown-label\">Popular</div>";
-		for (let e of n) i += `<button class="tcw-dropdown-item" data-ind="${e.id}"><span>${e.name}</span><span class="tcw-tag">${e.type}</span></button>`;
-		i += "<div class=\"tcw-dropdown-divider\"></div>", i += "<div class=\"tcw-dropdown-label\">All</div>";
-		for (let e of r) i += `<button class="tcw-dropdown-item" data-ind="${e.id}"><span>${e.name}</span><span class="tcw-tag">${e.type}</span></button>`;
-		this.indicatorDropdown.setContent(i), 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 = `<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) => {
 			e.addEventListener("click", (e) => {
 				let t = e.currentTarget.dataset.ind;
 				this.callbacks.onAddIndicator(t);
@@ -773,12 +894,12 @@ var b = class {
 		for (let t of this.tfButtons) t.classList.toggle("tcw-active", t.dataset.tf === e.timeframe);
 		let n = this.el.querySelector("[data-role=\"charttype\"]");
 		if (n) {
-			let t = this.config.chartTypes.find((t) => t.value === e.chartType)?.label ?? "Candles";
-			n.innerHTML = `${y("barChart", 14)} ${t} ${y("chevronDown", 12)}`;
+			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)}`;
 		}
 		let r = this.el.querySelector("[data-role=\"indicators\"]");
 		if (r) {
-			let t = e.activeIndicators.size, n = `${y("trendingUp", 14)} Indicators`;
+			let t = e.activeIndicators.size, n = `${y("trendingUp", 14)} ${this.t("toolbar.indicators")}`;
 			t > 0 && (n += ` <span class="tcw-badge-count">${t}</span>`), r.innerHTML = n;
 		}
 		if (this.chipsContainer) {
@@ -826,33 +947,52 @@ var b = class {
 	"hash",
 	"square",
 	"gitBranch",
+	"zigzag",
 	"ruler",
-	"type"
+	"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",
-	elliottWave: "trendingUp",
+	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"
+	volumeProfileRange: "barChart",
+	riskReward: "square"
 };
 function ae(e) {
 	return ie[e] ?? "penLine";
@@ -864,7 +1004,7 @@ function oe(e, t) {
 	}
 	return t;
 }
-var x = class {
+var se = class {
 	config;
 	callbacks;
 	el;
@@ -959,20 +1099,21 @@ var x = class {
 	destroy() {
 		this.hideFlyout(), this.el.remove();
 	}
-}, S = [
+}, x = [
 	"style",
 	"display",
 	"scale"
-], C = class {
+], S = class {
 	callbacks;
+	t;
 	backdrop = null;
 	modal = null;
 	currentTab = "style";
 	currentSettings = null;
 	bodyEl = null;
 	tabButtons = [];
-	constructor(e) {
-		this.callbacks = e;
+	constructor(e, t) {
+		this.callbacks = e, this.t = t;
 	}
 	open(e) {
 		this.currentSettings = { ...e }, this.currentTab = "style", this.buildModal();
@@ -987,16 +1128,16 @@ var x = class {
 		let e = document.createElement("div");
 		e.className = "tcw-modal-header";
 		let t = document.createElement("h3");
-		t.textContent = "Chart Settings", e.appendChild(t);
+		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", () => {
 			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 S) {
+		for (let e of x) {
 			let t = document.createElement("button");
-			t.className = "tcw-modal-tab", t.textContent = e, t.dataset.tab = e, e === this.currentTab && t.classList.add("tcw-active"), t.addEventListener("click", () => {
+			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();
 			}), r.appendChild(t), this.tabButtons.push(t);
 		}
@@ -1004,9 +1145,9 @@ var x = class {
 		let i = document.createElement("div");
 		i.className = "tcw-modal-footer";
 		let a = document.createElement("button");
-		a.className = "tcw-reset-link", a.textContent = "Reset to defaults", a.addEventListener("click", () => this.callbacks.onReset()), i.appendChild(a);
+		a.className = "tcw-reset-link", a.textContent = this.t("settings.resetToDefaults"), a.addEventListener("click", () => this.callbacks.onReset()), i.appendChild(a);
 		let o = document.createElement("button");
-		o.className = "tcw-done-btn", o.textContent = "Done", o.addEventListener("click", () => {
+		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);
 		let s = (e) => {
@@ -1029,9 +1170,9 @@ var x = class {
 	}
 	renderStyleTab() {
 		if (!this.bodyEl || !this.currentSettings) return;
-		let e = this.currentSettings, t = this.section("Candle Colors");
+		let e = this.currentSettings, t = this.section(this.t("settings.section.candleColors"));
 		t.appendChild(this.colorRow("Up Body", e.candleUpColor, (e) => this.patch({ candleUpColor: e }))), t.appendChild(this.colorRow("Down Body", e.candleDownColor, (e) => this.patch({ candleDownColor: e }))), t.appendChild(this.colorRow("Up Wick", e.candleUpWick, (e) => this.patch({ candleUpWick: e }))), t.appendChild(this.colorRow("Down Wick", e.candleDownWick, (e) => this.patch({ candleDownWick: e }))), this.bodyEl.appendChild(t);
-		let n = this.section("Background");
+		let n = this.section(this.t("settings.section.background"));
 		n.appendChild(this.colorRow("Background", e.backgroundColor, (e) => this.patch({ backgroundColor: e }))), n.appendChild(this.colorRow("Grid", e.gridColor, (e) => this.patch({ gridColor: e }))), this.bodyEl.appendChild(n);
 	}
 	renderDisplayTab() {
@@ -1205,7 +1346,7 @@ var x = class {
 	destroy() {
 		this.close();
 	}
-}, w = class {
+}, C = class {
 	el;
 	dotEl;
 	messageEl;
@@ -1221,7 +1362,7 @@ var x = class {
 	destroy() {
 		this.el.remove();
 	}
-}, T = class {
+}, w = class {
 	backdrop = null;
 	modal = null;
 	input = null;
@@ -1346,7 +1487,7 @@ var x = class {
 	destroy() {
 		this.close();
 	}
-}, E = class {
+}, T = class {
 	backdrop = null;
 	modal = null;
 	input = null;
@@ -1370,7 +1511,7 @@ var x = class {
 		let r = document.createElement("div");
 		r.className = "tcw-cmd-header";
 		let i = document.createElement("span");
-		i.className = "tcw-cmd-icon", i.innerHTML = A(), 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 = 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);
 		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");
@@ -1389,7 +1530,7 @@ var x = class {
 		let e = (this.input?.value ?? "").toUpperCase().trim();
 		e ? this.filtered = this.symbols.map((t) => ({
 			symbol: t,
-			score: D(t.toUpperCase(), e)
+			score: E(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
@@ -1407,7 +1548,7 @@ var x = 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 = O(n, e), r.appendChild(i), n === this.current) {
+			if (i.className = "tcw-cmd-item-label", i.innerHTML = D(n, e), r.appendChild(i), n === this.current) {
 				let e = document.createElement("span");
 				e.className = "tcw-cmd-check", e.textContent = "✓", r.appendChild(e);
 			}
@@ -1444,7 +1585,7 @@ var x = class {
 		}
 	}
 };
-function D(e, t) {
+function E(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));
@@ -1452,13 +1593,13 @@ function D(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 O(e, t) {
-	if (!t) return k(e);
+function D(e, t) {
+	if (!t) return O(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">${k(e[a])}</mark>`, i++) : r += k(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">${O(e[a])}</mark>`, i++) : r += O(e[a]);
 	return r;
 }
-function k(e) {
+function O(e) {
 	return e.replace(/[&<>"']/g, (e) => ({
 		"&": "&amp;",
 		"<": "&lt;",
@@ -1467,12 +1608,18 @@ function k(e) {
 		"'": "&#39;"
 	})[e]);
 }
-function A() {
+function k() {
 	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 j = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent) ? "⌘" : "Ctrl", M = [
+var A = {
+	"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 = [
 	{
 		title: "Search & navigation",
 		entries: [
@@ -1493,6 +1640,18 @@ var j = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfor
 	{
 		title: "Chart manipulation",
 		entries: [
+			{
+				keys: ["Drag"],
+				label: "Pan — past the last bar into empty future space"
+			},
+			{
+				keys: [j, "Drag"],
+				label: "Select drawings in a box"
+			},
+			{
+				keys: [j, "Click"],
+				label: "Add / remove a drawing from the selection"
+			},
 			{
 				keys: ["Shift", "Drag"],
 				label: "Measure tool (bars × price Δ)"
@@ -1590,9 +1749,10 @@ var j = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfor
 	backdrop = null;
 	modal = null;
 	callbacks;
+	t;
 	boundKeydown;
-	constructor(e) {
-		this.callbacks = e, this.boundKeydown = (e) => {
+	constructor(e, t) {
+		this.callbacks = e, this.t = t, this.boundKeydown = (e) => {
 			e.key === "Escape" && (e.preventDefault(), this.close());
 		};
 	}
@@ -1600,9 +1760,9 @@ var j = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfor
 		if (this.backdrop) return;
 		this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.addEventListener("click", () => this.close()), this.modal = document.createElement("div"), this.modal.className = "tcw-modal tcw-hotkey-sheet", this.modal.style.width = "640px";
 		let e = document.createElement("div");
-		e.className = "tcw-modal-header", e.innerHTML = "<h3>Keyboard shortcuts</h3>";
+		e.className = "tcw-modal-header", e.innerHTML = `<h3>${this.t("hotkeys.title")}</h3>`;
 		let t = document.createElement("button");
-		t.className = "tcw-modal-close", t.setAttribute("aria-label", "Close"), t.innerHTML = "×", t.addEventListener("click", () => this.close()), e.appendChild(t), this.modal.appendChild(e);
+		t.className = "tcw-modal-close", t.setAttribute("aria-label", this.t("hotkeys.close")), t.innerHTML = "×", t.addEventListener("click", () => this.close()), e.appendChild(t), this.modal.appendChild(e);
 		let n = document.createElement("div");
 		n.className = "tcw-modal-body";
 		let r = document.createElement("div");
@@ -1611,7 +1771,9 @@ var j = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfor
 			let t = document.createElement("section");
 			t.className = "tcw-hotkey-section";
 			let n = document.createElement("div");
-			n.className = "tcw-settings-section-title", n.textContent = e.title, t.appendChild(n);
+			n.className = "tcw-settings-section-title";
+			let i = A[e.title];
+			n.textContent = i ? this.t(i) : e.title, t.appendChild(n);
 			for (let n of e.entries) {
 				let e = document.createElement("div");
 				e.className = "tcw-hotkey-row";
@@ -1635,7 +1797,7 @@ var j = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfor
 		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 = "Got it", 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), document.body.appendChild(this.backdrop), document.body.appendChild(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();
@@ -1736,13 +1898,18 @@ var V = class {
 	entries = /* @__PURE__ */ new Map();
 	active = null;
 	callbacks;
-	constructor(e, t, n) {
+	locale;
+	constructor(e, t, n, r = "Watchlist") {
 		this.callbacks = n, this.el = document.createElement("div"), this.el.className = "tcw-watchlist";
-		let r = document.createElement("div");
-		r.className = "tcw-watchlist-header", r.textContent = "Watchlist", this.el.appendChild(r), this.listEl = document.createElement("div"), this.listEl.className = "tcw-watchlist-list", this.el.appendChild(this.listEl);
+		let i = document.createElement("div");
+		i.className = "tcw-watchlist-header", i.textContent = r, this.el.appendChild(i), this.listEl = document.createElement("div"), this.listEl.className = "tcw-watchlist-list", this.el.appendChild(this.listEl);
 		for (let e of t) this.entries.set(e, { symbol: e }), this.appendRow(e);
 		e.appendChild(this.el);
 	}
+	setLocale(e) {
+		this.locale = e;
+		for (let e of this.entries.keys()) this.renderRow(e);
+	}
 	setSymbols(e) {
 		let t = new Set(e);
 		for (let e of this.rowMap.keys()) t.has(e) || this.removeRow(e);
@@ -1792,9 +1959,12 @@ 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)), 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 ? "+" : "";
-				t.changeEl.textContent = `${i}${r.toFixed(2)}%`, t.changeEl.className = `tcw-watchlist-change ${e >= 0 ? "tcw-up" : "tcw-down"}`;
+			if (n.lastPrice !== void 0 && (t.priceEl.textContent = U(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]);
 		}
@@ -1810,10 +1980,16 @@ function H(e) {
 	]) if (e.length > t.length && e.endsWith(t)) return e.slice(0, -t.length) + "/" + t;
 	return e;
 }
-function U(e) {
+function U(e, t) {
 	if (e === 0) return "0";
-	let t = Math.abs(e);
-	return t >= 1e3 ? e.toFixed(2) : t >= 1 ? e.toFixed(4) : e.toPrecision(4);
+	let n = Math.abs(e);
+	return n >= 1e3 ? e.toLocaleString(t, {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	}) : n >= 1 ? e.toLocaleString(t, {
+		minimumFractionDigits: 4,
+		maximumFractionDigits: 4
+	}) : Number(e.toPrecision(4)).toLocaleString(t, { maximumFractionDigits: 10 });
 }
 function W(e, t, n) {
 	let r = e.getContext("2d");
@@ -1822,7 +1998,7 @@ function W(e, t, n) {
 	e.width !== e.clientWidth * i && (e.width = (e.clientWidth || 64) * i, e.height = (e.clientHeight || 22) * i);
 	let a = e.width, o = e.height, s = Infinity, c = -Infinity;
 	for (let e of t) e < s && (s = e), e > c && (c = e);
-	let l = Math.max(c - s, 1e-9), u = t[t.length - 1] >= n ? "#26a17b" : "#f23645";
+	let l = Math.max(c - s, 1e-9), u = t[t.length - 1] >= n ? "#1fa874" : "#e8505b";
 	r.clearRect(0, 0, a, o), r.lineWidth = 1.4 * i, r.strokeStyle = u, r.beginPath();
 	let d = a / (t.length - 1);
 	for (let e = 0; e < t.length; e++) {
@@ -1855,14 +2031,14 @@ var G = [
 		label: "Less than"
 	}
 ], K = new Map(G.map((e) => [e.value, e.label]));
-function q(e) {
+function ce(e) {
 	return Math.round(e * 1e6) / 1e6;
 }
-function se(e) {
+function le(e) {
 	let t = Math.abs(e);
 	return t >= 1e3 || t >= 1 ? e.toFixed(2) : e.toPrecision(4);
 }
-var ce = class {
+var ue = class {
 	el;
 	listEl;
 	priceInput;
@@ -1923,7 +2099,7 @@ var ce = class {
 	}
 	prefillPrice() {
 		let e = this.callbacks.getChannelValue(this.sourceSelect.value || "price");
-		this.priceInput.value = e === null ? "" : String(q(e));
+		this.priceInput.value = e === null ? "" : String(ce(e));
 	}
 	close() {
 		this.open = !1, this.el.hidden = !0;
@@ -1952,7 +2128,7 @@ var ce = 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 ? se(e.price) : this.callbacks.formatPrice(e.price);
+			let i = K.get(e.condition) ?? e.condition, a = e.channel && e.channel !== "price", o = a ? le(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);
@@ -1965,7 +2141,7 @@ var ce = class {
 			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);
 		}
 	}
-}, le = class {
+}, de = class {
 	el;
 	indicatorsEl;
 	drawingsEl;
@@ -2062,11 +2238,26 @@ var ce = class {
 		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;
 	}
-}, ue = {
+}, fe = {
 	trendLine: "Trend Line",
 	ray: "Ray",
 	extendedLine: "Extended Line",
 	horizontalLine: "Horizontal Line",
+	horizontalRay: "Horizontal Ray",
+	crossLine: "Cross Line",
+	infoLine: "Info Line",
+	trendAngle: "Trend Angle",
+	circle: "Circle",
+	fibChannel: "Fib Channel",
+	fibSpeedResistanceFan: "Fib Speed Resistance Fan",
+	schiffPitchfork: "Schiff Pitchfork",
+	modifiedSchiffPitchfork: "Modified Schiff Pitchfork",
+	xabcdPattern: "XABCD Pattern",
+	abcdPattern: "ABCD Pattern",
+	headAndShoulders: "Head and Shoulders",
+	dateAndPriceRange: "Date and Price Range",
+	cyclicLines: "Cyclic Lines",
+	priceLabel: "Price Label",
 	verticalLine: "Vertical Line",
 	rectangle: "Rectangle",
 	ellipse: "Ellipse",
@@ -2084,20 +2275,22 @@ var ce = class {
 	priceRange: "Price Range",
 	dateRange: "Date Range",
 	measure: "Measure",
+	text: "Text",
 	textAnnotation: "Text",
 	anchoredVWAP: "Anchored VWAP",
-	volumeProfileRange: "Volume Profile"
+	volumeProfileRange: "Volume Profile",
+	riskReward: "Long/Short Position"
 };
-function de(e) {
-	return ue[e] ?? e;
+function pe(e) {
+	return fe[e] ?? e;
 }
 //#endregion
 //#region src/widget/WidgetIndicatorSettings.ts
-var fe = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-function pe(e) {
+var me = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function he(e) {
 	return e.replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^./, (e) => e.toUpperCase());
 }
-var me = class {
+var ge = class {
 	backdrop;
 	modal;
 	bodyEl;
@@ -2162,9 +2355,9 @@ var me = class {
 		let t = document.createElement("div");
 		t.className = "tcw-settings-row";
 		let n = document.createElement("span");
-		n.className = "tcw-settings-label", n.textContent = pe(e), t.appendChild(n);
+		n.className = "tcw-settings-label", n.textContent = he(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" && fe.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" && me.test(r) ? t.appendChild(this.colorControl(e, r)) : t.appendChild(this.textControl(e, String(r ?? ""))), t;
 	}
 	toggleControl(e, t) {
 		let n = document.createElement("button");
@@ -2182,27 +2375,27 @@ var me = class {
 	}
 	colorControl(e, t) {
 		let n = document.createElement("input");
-		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;
+		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;
 	}
 	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 he(e) {
+function _e(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 ge() {
+function ve() {
 	try {
 		return typeof localStorage < "u" ? localStorage : null;
 	} catch {
 		return null;
 	}
 }
-var _e = [
+var ye = [
 	"color",
 	"lineWidth",
 	"lineStyle",
@@ -2210,15 +2403,15 @@ var _e = [
 	"fillOpacity",
 	"fontSize"
 ];
-function J(e) {
+function q(e) {
 	if (!e || typeof e != "object") return {};
 	let t = {}, n = e;
-	for (let e of _e) n[e] !== void 0 && (t[e] = n[e]);
+	for (let e of ye) n[e] !== void 0 && (t[e] = n[e]);
 	return t;
 }
-var ve = class {
+var be = class {
 	templates = [];
-	constructor(e = "tcw:draw-templates", t = ge()) {
+	constructor(e = "tcw:draw-templates", t = ve()) {
 		this.storageKey = e, this.storage = t, this.load();
 	}
 	list() {
@@ -2237,7 +2430,7 @@ var ve = class {
 	save(e, t) {
 		let n = e.trim();
 		if (!n) return;
-		let r = J(t);
+		let r = q(t);
 		this.templates = this.templates.filter((e) => e.name !== n), this.templates.push({
 			name: n,
 			style: r
@@ -2258,7 +2451,7 @@ var ve = class {
 			if (!Array.isArray(t)) return;
 			this.templates = t.filter((e) => e && typeof e.name == "string").map((e) => ({
 				name: e.name,
-				style: J(e.style)
+				style: q(e.style)
 			}));
 		} catch {}
 	}
@@ -2267,25 +2460,25 @@ var ve = class {
 			this.storage.setItem(this.storageKey, JSON.stringify(this.templates));
 		} catch {}
 	}
-}, ye = [
-	"#2962ff",
-	"#089981",
-	"#f23645",
-	"#ff9800",
-	"#ab47bc",
-	"#26c6da",
+}, xe = [
+	"#4c8dff",
+	"#1fa874",
+	"#e8505b",
+	"#f2a93b",
+	"#a57cff",
+	"#1398a8",
 	"#ffffff",
-	"#787b86"
-], be = [
+	"#7d8696"
+], Se = [
 	1,
 	2,
 	3,
 	4
-], xe = [
+], Ce = [
 	"solid",
 	"dashed",
 	"dotted"
-], Se = class {
+], we = class {
 	el;
 	templatesEl;
 	nameInput;
@@ -2325,7 +2518,7 @@ var ve = class {
 	colorRow() {
 		let e = document.createElement("div");
 		e.className = "tcw-style-row tcw-style-colors";
-		for (let t of ye) {
+		for (let t of xe) {
 			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);
 		}
@@ -2335,7 +2528,7 @@ var ve = class {
 	widthRow() {
 		let e = document.createElement("div");
 		e.className = "tcw-style-row tcw-style-widths";
-		for (let t of be) {
+		for (let t of Se) {
 			let n = document.createElement("button");
 			n.type = "button", n.className = "tcw-style-width", n.dataset.width = String(t);
 			let r = document.createElement("span");
@@ -2346,7 +2539,7 @@ var ve = class {
 	lineStyleRow() {
 		let e = document.createElement("div");
 		e.className = "tcw-style-row tcw-style-dashes";
-		for (let t of xe) {
+		for (let t of Ce) {
 			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);
 		}
@@ -2397,16 +2590,16 @@ var ve = class {
 };
 //#endregion
 //#region src/widget/DrawingFavoritesStore.ts
-function Ce() {
+function Te() {
 	try {
 		return typeof localStorage < "u" ? localStorage : null;
 	} catch {
 		return null;
 	}
 }
-var we = class {
+var Ee = class {
 	favorites = [];
-	constructor(e = "tcw:draw-favorites", t = Ce()) {
+	constructor(e = "tcw:draw-favorites", t = Te()) {
 		this.storageKey = e, this.storage = t, this.load();
 	}
 	list() {
@@ -2440,7 +2633,7 @@ var we = class {
 			this.storage.setItem(this.storageKey, JSON.stringify(this.favorites));
 		} catch {}
 	}
-}, Te = class {
+}, De = class {
 	el;
 	labelEl;
 	callbacks;
@@ -2466,7 +2659,7 @@ var we = class {
 	destroy() {
 		this.el.remove();
 	}
-}, Ee = class {
+}, Oe = class {
 	options;
 	audioCtx = null;
 	audioEl = null;
@@ -2529,7 +2722,7 @@ var we = class {
 };
 //#endregion
 //#region src/widget/ladderRows.ts
-function De(e, t = 12) {
+function ke(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 = {
@@ -2550,7 +2743,7 @@ function De(e, t = 12) {
 }
 //#endregion
 //#region src/widget/WidgetDepthLadder.ts
-var Oe = class {
+var Ae = class {
 	el;
 	bodyEl;
 	callbacks;
@@ -2584,7 +2777,7 @@ var Oe = class {
 			this.renderEmpty();
 			return;
 		}
-		this.render(De(e, this.levels));
+		this.render(ke(e, this.levels));
 	}
 	destroy() {
 		this.el.remove();
@@ -2604,20 +2797,20 @@ var Oe = 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 = Y(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 = 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;
 			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 = Y(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 = 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);
 		}
 	}
 };
-function Y(e) {
+function J(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 ke = class {
+var je = class {
 	el;
 	bodyEl;
 	callbacks;
@@ -2656,11 +2849,11 @@ var ke = 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", X(n.volume)));
+		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)));
 		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, Ae(e.value)));
+			for (let e of t.values) this.bodyEl.appendChild(this.row(e.key, Me(e.value)));
 		}
 	}
 	row(e, t, n = "") {
@@ -2672,43 +2865,43 @@ var ke = class {
 		return a.className = `tcw-datawin-value${n ? ` tcw-${n}` : ""}`, a.textContent = t, r.appendChild(i), r.appendChild(a), r;
 	}
 };
-function Ae(e) {
+function Me(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 X(e) {
+function Ne(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 Z = globalThis.Buffer;
-function je(e) {
-	if (Z) return Z.from(e, "utf8").toString("base64");
+var Y = globalThis.Buffer;
+function Pe(e) {
+	if (Y) return Y.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 Me(e) {
-	if (Z) return Z.from(e, "base64").toString("utf8");
+function Fe(e) {
+	if (Y) return Y.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 Ne(e) {
+function Ie(e) {
 	return e.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
-function Pe(e) {
+function Le(e) {
 	let t = e.replace(/-/g, "+").replace(/_/g, "/");
 	return t + (t.length % 4 == 0 ? "" : "=".repeat(4 - t.length % 4));
 }
-function Fe(e) {
-	return Ne(je(JSON.stringify(e)));
+function Re(e) {
+	return Ie(Pe(JSON.stringify(e)));
 }
-function Ie(e) {
+function ze(e) {
 	if (!e) return null;
 	try {
-		let t = Me(Pe(e)), n = JSON.parse(t);
+		let t = Fe(Le(e)), n = JSON.parse(t);
 		return !n || n.v !== 1 || typeof n.symbol != "string" ? null : {
 			v: 1,
 			symbol: n.symbol,
@@ -2722,29 +2915,253 @@ function Ie(e) {
 		return null;
 	}
 }
-var Q = "tcw";
-function Le(e) {
+var X = "tcw";
+function Be(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) === Q) return decodeURIComponent(e.slice(t + 1));
+		if (t > 0 && e.slice(0, t) === X) return decodeURIComponent(e.slice(t + 1));
 	}
 	return null;
 }
-function Re(e, t) {
+function Ve(e, t) {
 	let [n] = e.split("#");
-	return `${n}#${Q}=${t}`;
+	return `${n}#${X}=${t}`;
 }
 //#endregion
-//#region src/widget/ChartWidget.ts
+//#region src/widget/i18n.ts
+var Z = {
+	"toolbar.indicators": "Indicators",
+	"toolbar.indicators.popular": "Popular",
+	"toolbar.indicators.all": "All",
+	"indicatorType.overlay": "overlay",
+	"indicatorType.panel": "panel",
+	"toolbar.replay": "Bar replay",
+	"toolbar.longBracket": "Long bracket",
+	"toolbar.shortBracket": "Short bracket",
+	"toolbar.depthLadder": "Depth ladder",
+	"toolbar.objects": "Objects",
+	"toolbar.priceAlerts": "Price alerts",
+	"toolbar.screenshot": "Screenshot",
+	"toolbar.settings": "Chart Settings",
+	"toolbar.toggleTheme": "Toggle theme",
+	"chartType.candlestick": "Candlestick",
+	"chartType.line": "Line",
+	"chartType.area": "Area",
+	"chartType.bar": "Bar",
+	"chartType.heikinAshi": "Heikin-Ashi",
+	"chartType.hollowCandle": "Hollow Candle",
+	"chartType.baseline": "Baseline",
+	"chartType.volumeCandles": "Volume Candles",
+	"chartType.equivolume": "Equivolume",
+	"chartType.hlcArea": "HLC Area",
+	"chartType.stepLine": "Step Line",
+	"chartType.lineWithMarkers": "Line + Markers",
+	"watchlist.title": "Watchlist",
+	"status.connecting": "Connecting...",
+	"status.live": "Live",
+	"status.connectionFailed": "Connection failed",
+	"status.loading": "Loading chart...",
+	"settings.title": "Chart Settings",
+	"settings.tab.style": "style",
+	"settings.tab.display": "display",
+	"settings.tab.scale": "scale",
+	"settings.resetToDefaults": "Reset to defaults",
+	"settings.done": "Done",
+	"settings.section.candleColors": "Candle Colors",
+	"settings.section.background": "Background",
+	"hotkeys.title": "Keyboard shortcuts",
+	"hotkeys.close": "Close",
+	"hotkeys.gotIt": "Got it",
+	"hotkeys.group.searchNavigation": "Search & navigation",
+	"hotkeys.group.chartManipulation": "Chart manipulation",
+	"hotkeys.group.touch": "Touch (mobile / tablet)",
+	"hotkeys.group.keyboard": "Keyboard",
+	"hotkeys.group.drawing": "Drawing"
+}, He = {
+	en: Z,
+	vi: {
+		"toolbar.indicators": "Chỉ báo",
+		"toolbar.indicators.popular": "Phổ biến",
+		"toolbar.indicators.all": "Tất cả",
+		"indicatorType.overlay": "phủ lên",
+		"indicatorType.panel": "bảng riêng",
+		"toolbar.replay": "Phát lại",
+		"toolbar.longBracket": "Lệnh Long",
+		"toolbar.shortBracket": "Lệnh Short",
+		"toolbar.depthLadder": "Sổ lệnh",
+		"toolbar.objects": "Đối tượng",
+		"toolbar.priceAlerts": "Cảnh báo giá",
+		"toolbar.screenshot": "Chụp màn hình",
+		"toolbar.settings": "Cài đặt biểu đồ",
+		"toolbar.toggleTheme": "Đổi giao diện",
+		"chartType.candlestick": "Nến",
+		"chartType.line": "Đường",
+		"chartType.area": "Vùng",
+		"chartType.bar": "Thanh",
+		"chartType.heikinAshi": "Heikin-Ashi",
+		"chartType.hollowCandle": "Nến rỗng",
+		"chartType.baseline": "Đường cơ sở",
+		"chartType.volumeCandles": "Nến khối lượng",
+		"chartType.equivolume": "Equivolume",
+		"chartType.hlcArea": "Vùng HLC",
+		"chartType.stepLine": "Đường bậc thang",
+		"chartType.lineWithMarkers": "Đường + điểm đánh dấu",
+		"watchlist.title": "Danh mục theo dõi",
+		"status.connecting": "Đang kết nối...",
+		"status.live": "Trực tiếp",
+		"status.connectionFailed": "Kết nối thất bại",
+		"status.loading": "Đang tải biểu đồ...",
+		"settings.title": "Cài đặt biểu đồ",
+		"settings.tab.style": "Giao diện",
+		"settings.tab.display": "Hiển thị",
+		"settings.tab.scale": "Thang giá",
+		"settings.resetToDefaults": "Khôi phục mặc định",
+		"settings.done": "Xong",
+		"settings.section.candleColors": "Màu nến",
+		"settings.section.background": "Nền",
+		"hotkeys.title": "Phím tắt",
+		"hotkeys.close": "Đóng",
+		"hotkeys.gotIt": "Đã hiểu",
+		"hotkeys.group.searchNavigation": "Tìm kiếm & điều hướng",
+		"hotkeys.group.chartManipulation": "Thao tác biểu đồ",
+		"hotkeys.group.touch": "Cảm ứng (di động / máy tính bảng)",
+		"hotkeys.group.keyboard": "Bàn phím",
+		"hotkeys.group.drawing": "Vẽ"
+	}
+};
+function Q(e, t) {
+	let n = { ...Z }, r = e ? He[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;
+}
+var We = [
+	[
+		34,
+		16,
+		28,
+		26,
+		!1
+	],
+	[
+		30,
+		14,
+		24,
+		26,
+		!0
+	],
+	[
+		26,
+		18,
+		20,
+		30,
+		!0
+	],
+	[
+		30,
+		10,
+		24,
+		22,
+		!1
+	],
+	[
+		20,
+		16,
+		14,
+		28,
+		!0
+	],
+	[
+		14,
+		18,
+		8,
+		30,
+		!0
+	],
+	[
+		18,
+		10,
+		12,
+		20,
+		!1
+	],
+	[
+		8,
+		18,
+		2,
+		30,
+		!0
+	]
+], Ge = class {
+	el;
+	label;
+	showTimer = null;
+	phase = "loading";
+	constructor(e, t) {
+		this.loadingText = t, this.el = document.createElement("div"), this.el.className = "tcw-loading-overlay", this.el.setAttribute("role", "status"), this.el.setAttribute("aria-live", "polite");
+		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) => {
+			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);
+		}), 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);
+	}
+	begin(e, t = !1) {
+		if (this.phase = "loading", this.clearTimer(), this.label.textContent = this.loadingText, this.el.classList.remove("tcw-loading-overlay--error"), this.el.classList.toggle("tcw-loading-overlay--veil", e), !e || t || this.isShown()) {
+			this.el.classList.remove("tcw-loading-overlay--hidden");
+			return;
+		}
+		this.showTimer = setTimeout(() => {
+			this.showTimer = null, this.el.classList.remove("tcw-loading-overlay--hidden");
+		}, 200);
+	}
+	end() {
+		this.phase = "idle", this.clearTimer(), this.el.classList.add("tcw-loading-overlay--hidden");
+	}
+	fail(e) {
+		this.phase !== "idle" && (this.phase = "failed", this.clearTimer(), this.label.textContent = e, this.el.classList.add("tcw-loading-overlay--error"), this.el.classList.remove("tcw-loading-overlay--hidden"));
+	}
+	isActive() {
+		return this.phase !== "idle";
+	}
+	hasFailed() {
+		return this.phase === "failed";
+	}
+	isShown() {
+		return !this.el.classList.contains("tcw-loading-overlay--hidden");
+	}
+	destroy() {
+		this.clearTimer(), this.el.remove();
+	}
+	clearTimer() {
+		this.showTimer !== null && (clearTimeout(this.showTimer), this.showTimer = null);
+	}
+}, Ke = 48, qe = 5e4, Je = 100;
+function Ye() {
+	return new Promise((e) => {
+		if (typeof requestAnimationFrame != "function" || document.hidden) {
+			setTimeout(e, 0);
+			return;
+		}
+		let t = setTimeout(e, Je);
+		requestAnimationFrame(() => setTimeout(() => {
+			clearTimeout(t), e();
+		}, 0));
+	});
+}
 var $ = [
-	"#f7931a",
-	"#627eea",
-	"#26a17b",
-	"#e84142",
-	"#8247e5",
-	"#f3ba2f"
-], ze = class {
+	"#4c8dff",
+	"#a57cff",
+	"#1398a8",
+	"#e25592",
+	"#8a93a3",
+	"#62c895"
+], Xe = class {
 	chart;
 	state;
 	toolbar = null;
@@ -2765,10 +3182,11 @@ var $ = [
 	depthLadder = null;
 	dataWindow = null;
 	lastHoverIndex = null;
-	favoritesStore = new we();
+	favoritesStore = new Ee();
 	watchlist = null;
 	watchlistSparkBuffer = /* @__PURE__ */ new Map();
 	sessionRefPrice = null;
+	hostWatchlistRefPrice = /* @__PURE__ */ new Map();
 	watchlistInterval = null;
 	replayOriginalData = null;
 	replayPollInterval = null;
@@ -2778,17 +3196,25 @@ var $ = [
 	activeLayoutKey = null;
 	root;
 	chartContainer;
+	loading;
+	connectSeq = 0;
+	localSeq = 0;
+	lastLocalSwitchMs = 0;
 	destroyed = !1;
 	options;
 	symbols;
 	settingsState;
+	t;
 	adapter = null;
 	boundGlobalKeydown = null;
 	baseSeries = null;
 	baseTimeframeMs = 0;
 	compares = [];
 	constructor(n, r = {}) {
-		if (this.options = r, this.symbols = r.symbols ?? ee, this.settingsState = { ...p }, r.persistLayouts) {
+		if (this.options = r, this.symbols = r.symbols ?? ee, this.settingsState = {
+			...p,
+			...r.chartOptions?.numberLocale ? { numberLocale: r.chartOptions.numberLocale } : {}
+		}, this.t = Ue(Q(r.locale, r.messages)), r.persistLayouts) {
 			let e = r.persistLayouts === !0 ? {} : r.persistLayouts;
 			this.layoutKeyPrefix = e.keyPrefix ?? "tcw:layout:", this.layoutDebounceMs = e.debounceMs ?? 1500;
 		}
@@ -2801,8 +3227,8 @@ var $ = [
 			activeIndicators: /* @__PURE__ */ new Map(),
 			activeTool: null,
 			magnetEnabled: !0,
-			connectionState: "connecting",
-			connectionMessage: "Connecting..."
+			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, {
 			symbols: this.symbols,
 			timeframes: r.timeframes ? c.filter((e) => r.timeframes.includes(e.value)) : c,
@@ -2823,9 +3249,9 @@ var $ = [
 			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
-		}));
+		}, 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 x(o, {
+		if (o.className = "tcw-body", r.drawingTools !== !1 && (r.drawingFavorites && this.favoritesStore.seedDefaults(r.drawingFavorites), this.sidebar = new se(o, {
 			drawingToolGroups: u,
 			favorites: this.favoritesStore.list()
 		}, {
@@ -2842,60 +3268,62 @@ var $ = [
 				}, this.updateUI();
 			},
 			onToggleStyle: () => this.drawingStyle?.toggle()
-		})), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", o.appendChild(this.chartContainer), r.watchlist && (this.watchlist = new V(o, this.symbols, { onSelect: (e) => {
+		})), 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) => {
 			this.setSymbol(e);
-		} }), this.watchlist.setActive(this.state.symbol)), 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(o), 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: 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
-		}), r.dragDropImport !== !1 && (this.dragDrop = new t(this.chartContainer, {
+				watermark: !0,
+				...r.chartOptions?.features
+			}
+		}), 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)` : ""));
 			},
 			onError: (e, t) => {
 				this.toast(`${t.name}: ${e.message}`, "error");
 			}
-		}), this.dragDrop.attach()), r.statusBar !== !1 && (this.statusBar = new w(this.root)), r.settings !== !1 && (this.settings = new C({
+		}), this.dragDrop.attach()), r.statusBar !== !1 && (this.statusBar = new C(this.root)), r.settings !== !1 && (this.settings = new S({
 			onChange: (e) => this.applySettings(e),
 			onReset: () => this.resetSettings(),
 			onClose: () => {}
-		})), this.symbolSearch = new E({
+		}, this.t)), this.symbolSearch = new T({
 			onPick: (e) => {
 				this.setSymbol(e);
 			},
 			onClose: () => {}
-		}), this.hotkeySheet = new N({ onClose: () => {} }), this.chart.on("barClick", (e) => {
+		}), this.hotkeySheet = new N({ onClose: () => {} }, this.t), 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 ke(this.root, { formatPrice: (e) => this.formatAlertPrice(e) }), this.chart.on("crosshairMove", (e) => {
+		}), this.dataWindow = new je(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 Se(this.root, {
+		}), r.drawingTools !== !1 && (this.drawingStyle = new we(this.root, {
 			onStyleChange: (e) => {
 				this.chart.setDrawingStyle(e), this.chart.setSelectedDrawingStyle(e);
 			},
 			getStyle: () => this.chart.getDrawingStyle()
-		}, new ve())), r.trading !== !1 && (this.bracketBar = new Te(this.root, {
+		}, new be())), r.trading !== !1 && (this.bracketBar = new De(this.root, {
 			onConfirm: () => this.chart.confirmBracket(),
 			onCancel: () => {
 				this.chart.cancelBracket(), this.bracketBar?.hide();
@@ -2903,7 +3331,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 Oe(this.root, {
+		}), r.depthLadder && (this.depthLadder = new Ae(this.root, {
 			onTrade: (e, t) => {
 				this.chart.placeOrderIntent({
 					side: e,
@@ -2915,7 +3343,7 @@ var $ = [
 		})), this.chart.on("dataUpdate", (e) => {
 			let t = e.payload;
 			t && t.bracket === "cancelled" && this.bracketBar?.hide();
-		})), r.alerts !== !1 && (this.alertsPanel = new ce(this.root, {
+		})), r.alerts !== !1 && (this.alertsPanel = new ue(this.root, {
 			onAdd: (e, t, n, r, i) => {
 				this.chart.addAlert(e, t, n, r, i);
 			},
@@ -2923,14 +3351,14 @@ 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 Ee(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 Oe(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 me(this.root, {
+			this.indicatorSettings = new ge(this.root, {
 				onApply: (e, t) => this.chart.updateIndicator(e, t),
 				onClose: () => {}
-			}), this.objectTree = new le(this.root, {
+			}), this.objectTree = new de(this.root, {
 				onRemoveIndicator: (e) => this.handleRemoveIndicator(e),
 				onConfigureIndicator: (e) => this.openIndicatorSettings(e),
 				onToggleIndicatorVisible: (e, t) => {
@@ -2953,7 +3381,7 @@ 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 T({
+		if (this.commandPalette = new w({
 			onIndicator: (e) => this.handleAddIndicator(e),
 			onChartType: (e) => this.handleChartType(e),
 			onDrawingTool: (e) => this.handleDrawingTool(e),
@@ -2969,7 +3397,7 @@ var $ = [
 				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 = Le(location.hash);
+			let e = Be(location.hash);
 			e && this.importState(e);
 		}
 	}
@@ -2983,19 +3411,19 @@ var $ = [
 		}, this.sessionRefPrice = null, this.options.onSymbolChange?.(e), this.updateUI(), this.watchlist?.setActive(e), this.adapter && await this.connectStream();
 	}
 	setWatchlistEntry(e, t) {
-		this.watchlist?.setEntry(e, t);
+		t.refPrice !== void 0 && this.hostWatchlistRefPrice.set(e, t.refPrice), this.watchlist?.setEntry(e, t);
 	}
 	tickWatchlist() {
 		if (!this.watchlist) return;
 		let e = this.chart.getData();
 		if (e.length === 0) return;
-		let t = e[e.length - 1];
-		this.sessionRefPrice === null && (this.sessionRefPrice = e[0].open);
-		let n = this.watchlistSparkBuffer.get(this.state.symbol) ?? [];
-		n.push(t.close), n.length > 40 && n.shift(), this.watchlistSparkBuffer.set(this.state.symbol, n), this.watchlist.setEntry(this.state.symbol, {
+		let t = e[e.length - 1], n = this.hostWatchlistRefPrice.get(this.state.symbol);
+		n === void 0 && this.sessionRefPrice === null && (this.sessionRefPrice = e[0].open);
+		let r = this.watchlistSparkBuffer.get(this.state.symbol) ?? [];
+		r.push(t.close), r.length > 40 && r.shift(), this.watchlistSparkBuffer.set(this.state.symbol, r), this.watchlist.setEntry(this.state.symbol, {
 			lastPrice: t.close,
-			refPrice: this.sessionRefPrice,
-			sparkline: n.slice()
+			refPrice: n ?? this.sessionRefPrice ?? e[0].open,
+			sparkline: r.slice()
 		});
 	}
 	async setTimeframe(e) {
@@ -3006,7 +3434,13 @@ var $ = [
 			await this.connectStream();
 			return;
 		}
-		this.options.resampleTimeframes !== !1 && this.applyTimeframeData();
+		if (this.options.resampleTimeframes !== !1) {
+			if (!this.baseSeries) {
+				let e = this.chart.getData();
+				e.length > 0 && (this.baseSeries = e, this.baseTimeframeMs = s(e));
+			}
+			await this.switchLocalTimeframe();
+		}
 	}
 	setTheme(e) {
 		let t = this.resolveIsDark(e), n = this.resolveTheme(e);
@@ -3019,37 +3453,65 @@ var $ = [
 		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.chart.destroy(), this.root.remove(), _());
+		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(), _());
 	}
 	handleSymbolClick() {
 		this.symbolSearch?.open(this.symbols, this.state.symbol);
 	}
 	handleTimeframe(e) {
-		if (this.state = {
-			...this.state,
-			timeframe: e
-		}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter) {
-			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));
-			}
-			this.applyTimeframeData();
-		}
+		this.setTimeframe(e);
 	}
 	setData(e) {
-		this.baseSeries = e, this.baseTimeframeMs = s(e), this.applyTimeframeData();
+		this.localSeq++, this.baseSeries = e, this.baseTimeframeMs = s(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;
+		try {
+			if (t && (this.loading.begin(this.chart.getData().length > 0, !0), await Ye(), e !== this.localSeq || this.destroyed)) return;
+			this.applyTimeframeData();
+		} finally {
+			e === this.localSeq && this.loading.end();
+		}
 	}
 	applyTimeframeData() {
 		if (!this.baseSeries) return;
-		let e = a(this.state.timeframe);
-		if (this.baseTimeframeMs > 0 && e > this.baseTimeframeMs) {
+		let e = performance.now(), t = a(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 }));
 		} else this.chart.setData(this.baseSeries);
+		this.lastLocalSwitchMs = performance.now() - e;
+	}
+	handleDataUpdate(e) {
+		if (!e || typeof e != "object") return;
+		let t = e;
+		if (typeof t.length == "number") {
+			t.length > 0 && this.loading.isActive() && (this.loading.end(), this.state.connectionState === "error" && this.setConnectionState("connected", this.t("status.live")));
+			return;
+		}
+		if (t.error !== void 0) {
+			this.loading.isActive() && (this.loading.fail(this.t("status.connectionFailed")), this.setConnectionState("error", t.error || this.t("status.connectionFailed")));
+			return;
+		}
+		switch (t.connection?.state) {
+			case "connected":
+				this.loading.hasFailed() && this.loading.end(), !this.loading.isActive() && this.state.connectionState !== "connected" && this.setConnectionState("connected", this.t("status.live"));
+				break;
+			case "reconnecting":
+				this.loading.isActive() || this.setConnectionState("connecting", this.t("status.connecting"));
+				break;
+			case "error":
+				this.loading.isActive() || this.setConnectionState("error", this.t("status.connectionFailed"));
+				break;
+		}
+	}
+	setConnectionState(e, t) {
+		this.state = {
+			...this.state,
+			connectionState: e,
+			connectionMessage: t
+		}, this.updateUI();
 	}
 	toggleAlerts() {
 		this.alertsPanel && (this.alertsPanel.toggle(), this.alertsPanel.isOpen() && this.refreshAlerts());
@@ -3063,7 +3525,7 @@ var $ = [
 			id: e.id,
 			params: e.params
 		}));
-		return Fe({
+		return Re({
 			v: 1,
 			symbol: this.state.symbol,
 			timeframe: this.state.timeframe,
@@ -3074,7 +3536,7 @@ var $ = [
 		});
 	}
 	async importState(e) {
-		let t = Ie(e);
+		let t = ze(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);
@@ -3093,7 +3555,7 @@ var $ = [
 		this.toast(e ? "Chart image copied" : "Copy failed — image clipboard unavailable", e ? "info" : "error");
 	}
 	async copyShareLink() {
-		let e = Re(typeof location < "u" ? location.href : "", this.exportState());
+		let e = Ve(typeof location < "u" ? location.href : "", this.exportState());
 		try {
 			await navigator.clipboard.writeText(e), this.toast("Share link copied");
 		} catch {
@@ -3161,7 +3623,7 @@ var $ = [
 			visible: e.visible
 		})), t = this.chart.getDrawings().map((e) => ({
 			id: e.id,
-			label: de(e.type),
+			label: pe(e.type),
 			visible: e.visible,
 			locked: e.locked
 		})), n = this.compares.map((e) => ({
@@ -3524,7 +3986,7 @@ var $ = [
 		}) : (this.chart.setScaleMode(e.scaleMode), this.settingsState = {
 			...this.settingsState,
 			logScale: e.scaleMode === "logarithmic"
-		}), e.numberLocale !== void 0 && this.chart.setNumberLocale(e.numberLocale), e.timezone !== void 0 && this.chart.setTimezoneOffset(e.timezone === "local" ? null : Number(e.timezone));
+		}), e.numberLocale !== void 0 && (this.chart.setNumberLocale(e.numberLocale), this.watchlist?.setLocale(e.numberLocale || void 0)), e.timezone !== void 0 && this.chart.setTimezoneOffset(e.timezone === "local" ? null : Number(e.timezone));
 		let t = { ...this.chart.getTheme() }, n = !1;
 		e.candleUpColor !== void 0 && (t.candleUp = e.candleUpColor, n = !0), e.candleDownColor !== void 0 && (t.candleDown = e.candleDownColor, n = !0), e.candleUpWick !== void 0 && (t.candleUpWick = e.candleUpWick, n = !0), e.candleDownWick !== void 0 && (t.candleDownWick = e.candleDownWick, n = !0), e.backgroundColor !== void 0 && (t.background = e.backgroundColor, n = !0), e.gridColor !== void 0 && (t.grid = e.gridColor, n = !0), n && this.chart.setTheme(t);
 	}
@@ -3532,35 +3994,40 @@ var $ = [
 		this.settingsState = { ...p }, this.applySettings(this.settingsState);
 	}
 	async connectStream() {
-		if (this.adapter) {
-			this.state = {
+		if (!this.adapter) return;
+		let e = ++this.connectSeq;
+		this.state = {
+			...this.state,
+			connectionState: "connecting",
+			connectionMessage: this.t("status.connecting")
+		}, this.updateUI(), this.loading.begin(this.chart.getData().length > 0);
+		try {
+			if (this.chart.disconnectStream(), await this.chart.connect({
+				adapter: this.adapter,
+				symbol: this.state.symbol,
+				timeframe: this.state.timeframe,
+				historyLimit: this.options.historyLimit ?? 500
+			}), e !== this.connectSeq || this.destroyed) return;
+			this.chart.setWatermark(this.state.symbol.replace("USDT", " / USDT"), {
+				fontSize: 48,
+				color: this.state.isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)"
+			}), this.applySymbolLayout(this.state.symbol), this.loading.hasFailed() ? this.state = {
 				...this.state,
-				connectionState: "connecting",
-				connectionMessage: "Connecting..."
-			}, this.updateUI();
-			try {
-				this.chart.disconnectStream(), await this.chart.connect({
-					adapter: this.adapter,
-					symbol: this.state.symbol,
-					timeframe: this.state.timeframe,
-					historyLimit: this.options.historyLimit ?? 500
-				}), this.chart.setWatermark(this.state.symbol.replace("USDT", " / USDT"), {
-					fontSize: 48,
-					color: this.state.isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)"
-				}), this.applySymbolLayout(this.state.symbol), this.state = {
-					...this.state,
-					connectionState: "connected",
-					connectionMessage: "Live"
-				}, this.refetchCompares();
-			} catch (e) {
-				this.state = {
-					...this.state,
-					connectionState: "error",
-					connectionMessage: e instanceof Error ? e.message : "Connection failed"
-				};
-			}
-			this.updateUI();
+				connectionState: "error"
+			} : (this.loading.end(), this.state = {
+				...this.state,
+				connectionState: "connected",
+				connectionMessage: this.t("status.live")
+			}), this.refetchCompares();
+		} catch (t) {
+			if (e !== this.connectSeq || this.destroyed) return;
+			this.loading.fail(this.t("status.connectionFailed")), this.state = {
+				...this.state,
+				connectionState: "error",
+				connectionMessage: t instanceof Error ? t.message : this.t("status.connectionFailed")
+			};
 		}
+		this.updateUI();
 	}
 	updateUI() {
 		this.toolbar?.update(this.state), this.sidebar?.update(this.state), this.statusBar?.update({
@@ -3585,6 +4052,6 @@ var $ = [
 	}
 };
 //#endregion
-export { ze as ChartWidget };
+export { Xe as ChartWidget };
 
 //# sourceMappingURL=index.js.map