@tradecanvas/chart 1.2.0 → 1.3.0

package/dist/widget/index.js

@@ -1,4 +1,4 @@
-import { r as e, t } from "../DragDropImporter-BcTzFeRP.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 = {}) {
@@ -685,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,
@@ -715,7 +715,7 @@ var c = [
 	crosshairMode: "magnet",
 	numberLocale: "en-US",
 	timezone: "local"
-}, te = "/* === TradeCanvas Widget — Premium Styles === */\r\n\r\n/*\r\n * The HTML `hidden` attribute only sets `display: none` via the UA stylesheet,\r\n * which any author `display` rule (e.g. `.tcw-alerts-panel { display: flex }`)\r\n * silently overrides — leaving panels stuck open when JS sets `el.hidden = true`.\r\n * Force `hidden` to win for every namespaced widget element. Scoped to `tcw-`\r\n * so it never touches the host page.\r\n */\r\n[class^=\"tcw-\"][hidden],\r\n[class*=\" tcw-\"][hidden] {\r\n  display: none !important;\r\n}\r\n\r\n.tcw-root {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  height: 100%;\r\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;\r\n  font-feature-settings: 'cv11', 'ss01', 'ss03';\r\n  font-size: 13px;\r\n  line-height: 1.4;\r\n  color: #d1d4dc;\r\n  background: #0d0f17;\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: #0d0f17;\r\n  --tcw-bg-surface: #131722;\r\n  --tcw-bg-elevated: #1a1e2d;\r\n  --tcw-bg-overlay: #20253480;\r\n  --tcw-border: #2a2e39;\r\n  --tcw-border-strong: #363a45;\r\n  --tcw-text: #e9ebf0;\r\n  --tcw-text-dim: #b2b5be;\r\n  --tcw-text-muted: #6b6f7a;\r\n\r\n  --tcw-accent: #4f88ff;\r\n  --tcw-accent-hover: #6b9aff;\r\n  --tcw-accent-soft: rgba(79, 136, 255, 0.14);\r\n  --tcw-accent-glow: rgba(79, 136, 255, 0.22);\r\n  --tcw-accent-line: rgba(79, 136, 255, 0.55);\r\n\r\n  --tcw-red: #f23645;\r\n  --tcw-red-soft: rgba(242, 54, 69, 0.12);\r\n  --tcw-green: #26a17b;\r\n  --tcw-green-soft: rgba(38, 161, 123, 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(79, 136, 255, 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: #131722;\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: #e7e9ef;\r\n  --tcw-border-strong: #d4d7e0;\r\n  --tcw-text: #131722;\r\n  --tcw-text-dim: #50545e;\r\n  --tcw-text-muted: #8b8f99;\r\n\r\n  --tcw-accent: #2962ff;\r\n  --tcw-accent-hover: #1e4fd6;\r\n  --tcw-accent-soft: rgba(41, 98, 255, 0.10);\r\n  --tcw-accent-glow: rgba(41, 98, 255, 0.16);\r\n  --tcw-accent-line: rgba(41, 98, 255, 0.45);\r\n\r\n  --tcw-hover-bg: rgba(0, 0, 0, 0.04);\r\n  --tcw-active-bg: rgba(41, 98, 255, 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 (TradingView-style skeleton bars) === */\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: 16px;\r\n  padding: 20px 28px 16px;\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-overlay--error .tcw-loading-bars {\r\n  display: none;\r\n}\r\n\r\n.tcw-loading-overlay--error .tcw-loading-label {\r\n  color: var(--tcw-red);\r\n  font-size: 13px;\r\n}\r\n\r\n.tcw-loading-bars {\r\n  display: flex;\r\n  align-items: flex-end;\r\n  gap: 3px;\r\n  height: 64px;\r\n}\r\n\r\n.tcw-loading-bar {\r\n  width: 5px;\r\n  border-radius: 2px 2px 0 0;\r\n  background: var(--tcw-border-strong);\r\n  animation: tcw-skeleton-pulse 1.1s ease-in-out infinite;\r\n}\r\n\r\n@keyframes tcw-skeleton-pulse {\r\n  0%, 100% { opacity: 0.35; transform: scaleY(0.55); }\r\n  50% { opacity: 0.85; transform: scaleY(1); }\r\n}\r\n\r\n.tcw-loading-label {\r\n  font-size: 12px;\r\n  color: var(--tcw-text-muted);\r\n  letter-spacing: 0.02em;\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: #fff;\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(38, 161, 123, 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(242, 54, 69, 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: #fff;\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: #fff;\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: #fff;\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: #fff;\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";
+}, 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");
@@ -1640,6 +1640,18 @@ var A = {
 	{
 		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 Δ)"
@@ -1986,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++) {
@@ -2449,14 +2461,14 @@ var be = class {
 		} catch {}
 	}
 }, xe = [
-	"#2962ff",
-	"#089981",
-	"#f23645",
-	"#ff9800",
-	"#ab47bc",
-	"#26c6da",
+	"#4c8dff",
+	"#1fa874",
+	"#e8505b",
+	"#f2a93b",
+	"#a57cff",
+	"#1398a8",
 	"#ffffff",
-	"#787b86"
+	"#7d8696"
 ], Se = [
 	1,
 	2,
@@ -3025,7 +3037,64 @@ function Q(e, t) {
 function Ue(e) {
 	return (t) => e[t] ?? Z[t] ?? t;
 }
-var We = 20, Ge = class {
+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;
@@ -3035,12 +3104,12 @@ var We = 20, Ge = class {
 		let n = document.createElement("div");
 		n.className = "tcw-loading-card";
 		let r = document.createElement("div");
-		r.className = "tcw-loading-bars";
-		for (let e = 0; e < We; e++) {
-			let t = document.createElement("span");
-			t.className = "tcw-loading-bar", t.style.height = `${20 + Math.round(Math.sin(e * .9) * 18 + 18)}px`, t.style.animationDelay = `${e * 45}ms`, r.appendChild(t);
-		}
-		n.appendChild(r), 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);
+		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()) {
@@ -3086,12 +3155,12 @@ function Ye() {
 	});
 }
 var $ = [
-	"#f7931a",
-	"#627eea",
-	"#26a17b",
-	"#e84142",
-	"#8247e5",
-	"#f3ba2f"
+	"#4c8dff",
+	"#a57cff",
+	"#1398a8",
+	"#e25592",
+	"#8a93a3",
+	"#62c895"
 ], Xe = class {
 	chart;
 	state;
@@ -3213,7 +3282,7 @@ var $ = [
 				drawingUndoRedo: !0,
 				indicators: !0,
 				trading: r.trading !== !1,
-				tradingContextMenu: r.trading !== !1,
+				tradingContextMenu: !1,
 				volume: !0,
 				legend: !0,
 				crosshair: !0,