acttrader-charts 1.0.21 → 1.1.0

package/dist/index.js

@@ -187,9 +187,20 @@ function deepMergeTheme(base, override) {
     bottomBar: { ...base.bottomBar, ...override.bottomBar },
     indicatorOverlay: { ...base.indicatorOverlay, ...override.indicatorOverlay },
     tradeLevels: { ...base.tradeLevels, ...override.tradeLevels },
-    tradePanel: { ...base.tradePanel, ...override.tradePanel }
+    tradePanel: { ...base.tradePanel, ...override.tradePanel },
+    drawing: mergeDrawingTheme(base.drawing, override.drawing)
   };
 }
+function mergeDrawingTheme(base, override) {
+  if (!override) return base;
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const o = override[key];
+    if (!o) continue;
+    result[key] = { ...base[key], ...o };
+  }
+  return result;
+}
 function resolveCssVarsInTheme(theme, container) {
   const tmp = document.createElement("div");
   tmp.style.display = "none";
@@ -288,11 +299,157 @@ function resolveCssVarsInTheme(theme, container) {
       rowHoverBg: resolve(theme.tradePanel.rowHoverBg),
       rowText: resolve(theme.tradePanel.rowText),
       rowSubText: resolve(theme.tradePanel.rowSubText)
-    }
+    },
+    drawing: resolveDrawingThemeVars(theme.drawing, resolve)
   };
   container.removeChild(tmp);
   return result;
 }
+function resolveDrawingThemeVars(drawing, resolve) {
+  const out = {};
+  for (const key of Object.keys(drawing)) {
+    const entry = drawing[key];
+    const resolved = { ...entry };
+    if (resolved.strokeColor) resolved.strokeColor = resolve(resolved.strokeColor);
+    if (resolved.fillColor) resolved.fillColor = resolve(resolved.fillColor);
+    if ("textColor" in resolved && resolved.textColor) {
+      resolved.textColor = resolve(resolved.textColor);
+    }
+    if ("levels" in resolved && resolved.levels) {
+      const levels = {};
+      for (const lk of Object.keys(resolved.levels)) {
+        const lv = resolved.levels[lk];
+        levels[lk] = { ...lv, color: resolve(lv.color) };
+      }
+      resolved.levels = levels;
+    }
+    out[key] = resolved;
+  }
+  return out;
+}
+var DEFAULT_DRAWING_THEME = {
+  // ── Lines ────────────────────────────────────────────────────────────────
+  horizontalLine: { strokeColor: "#e8b84b", lineWidth: 1, lineStyle: "dashed" },
+  verticalLine: { strokeColor: "#e8b84b", lineWidth: 1, lineStyle: "dashed" },
+  trendLine: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  crossLine: { strokeColor: "#78909c", lineWidth: 1, lineStyle: "dashed" },
+  trendAngle: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  // ── Channels ────────────────────────────────────────────────────────────
+  flatChannel: { strokeColor: "#ab47bc", lineWidth: 1, lineStyle: "solid", fillColor: "#ab47bc", fillOpacity: 0.08 },
+  parallelChannel: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid", fillColor: "#26c6da", fillOpacity: 0.08 },
+  disjointChannel: { strokeColor: "#ef9a9a", lineWidth: 1, lineStyle: "solid" },
+  // ── Pitchfork family ────────────────────────────────────────────────────
+  pitchfork: { strokeColor: "#ffa726", lineWidth: 1, lineStyle: "solid" },
+  schiffPitchfork: { strokeColor: "#ff7043", lineWidth: 1, lineStyle: "solid" },
+  modifiedSchiff: { strokeColor: "#ef5350", lineWidth: 1, lineStyle: "solid" },
+  insidePitchfork: { strokeColor: "#ab47bc", lineWidth: 1, lineStyle: "solid" },
+  // ── Fib family (multi-level) ────────────────────────────────────────────
+  fibRetracement: {
+    lineWidth: 1,
+    lineStyle: "dashed",
+    levels: {
+      "0": { visible: true, color: "#ef5350" },
+      "0.236": { visible: true, color: "#e8b84b" },
+      "0.382": { visible: true, color: "#26a69a" },
+      "0.5": { visible: true, color: "#2196f3" },
+      "0.618": { visible: true, color: "#26a69a" },
+      "0.786": { visible: true, color: "#e8b84b" },
+      "1": { visible: true, color: "#ef5350" }
+    }
+  },
+  fibExtension: {
+    lineWidth: 1,
+    lineStyle: "dashed",
+    levels: {
+      "0": { visible: true, color: "#888888" },
+      "0.618": { visible: true, color: "#26a69a" },
+      "1": { visible: true, color: "#888888" },
+      "1.272": { visible: true, color: "#2196f3" },
+      "1.618": { visible: true, color: "#e8b84b" },
+      "2": { visible: true, color: "#ef5350" },
+      "2.618": { visible: true, color: "#ef5350" }
+    }
+  },
+  fibProjection: {
+    lineWidth: 1,
+    lineStyle: "dashed",
+    levels: {
+      "0": { visible: true, color: "#ef5350" },
+      "0.618": { visible: true, color: "#26a69a" },
+      "1": { visible: true, color: "#2196f3" },
+      "1.272": { visible: true, color: "#26a69a" },
+      "1.618": { visible: true, color: "#e8b84b" },
+      "2": { visible: true, color: "#ef5350" },
+      "2.618": { visible: true, color: "#ef5350" }
+    }
+  },
+  fibChannel: { strokeColor: "#888888", lineWidth: 1, lineStyle: "dashed" },
+  fibFan: { strokeColor: "#888888", lineWidth: 1, lineStyle: "dashed" },
+  fibCircles: { strokeColor: "#e8b84b", lineWidth: 1, lineStyle: "dashed" },
+  fibSpiral: { strokeColor: "#e8b84b", lineWidth: 1, lineStyle: "solid" },
+  fibTimezone: { strokeColor: "#e8b84b", lineWidth: 1, lineStyle: "dashed" },
+  // ── Geometric shapes ────────────────────────────────────────────────────
+  rectangle: { strokeColor: "#9b59b6", lineWidth: 1, lineStyle: "solid", fillColor: "#9b59b6", fillOpacity: 0.09 },
+  rotatedRectangle: { strokeColor: "#9c27b0", lineWidth: 1, lineStyle: "solid", fillColor: "#9c27b0", fillOpacity: 0.09 },
+  ellipse: { strokeColor: "#2196f3", lineWidth: 1, lineStyle: "solid", fillColor: "#2196f3", fillOpacity: 0.08 },
+  circle: { strokeColor: "#4caf50", lineWidth: 1, lineStyle: "solid", fillColor: "#4caf50", fillOpacity: 0.08 },
+  triangle: { strokeColor: "#ff9800", lineWidth: 1, lineStyle: "solid", fillColor: "#ff9800", fillOpacity: 0.08 },
+  arc: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  sineLine: { strokeColor: "#ce93d8", lineWidth: 1, lineStyle: "solid" },
+  path: { strokeColor: "#ec407a", lineWidth: 1, lineStyle: "solid" },
+  polyline: { strokeColor: "#ff7043", lineWidth: 1, lineStyle: "solid" },
+  // ── Brush / Highlighter ─────────────────────────────────────────────────
+  brush: { strokeColor: "#ff5722", lineWidth: 2, lineStyle: "solid" },
+  highlighter: { strokeColor: "#ffeb3b", lineWidth: 8, lineStyle: "solid", fillOpacity: 0.4 },
+  // ── Text-bearing ────────────────────────────────────────────────────────
+  text: { textColor: "#f5f5f5", fontSize: 13, strokeColor: "#2196f3" },
+  callout: { textColor: "#f5f5f5", fontSize: 13, strokeColor: "#546e7a", fillColor: "#546e7a", fillOpacity: 0.18 },
+  priceLabel: { textColor: "#ffffff", fontSize: 11, strokeColor: "#26a69a", fillColor: "#26a69a", fillOpacity: 1 },
+  priceNote: { textColor: "#f5f5f5", fontSize: 12, strokeColor: "#ffa726" },
+  anchoredNote: { textColor: "#f5f5f5", fontSize: 12, strokeColor: "#42a5f5" },
+  // ── Arrows / Markers ────────────────────────────────────────────────────
+  arrowUp: { strokeColor: "#26a69a", lineWidth: 1.5, fillColor: "#26a69a", fillOpacity: 1 },
+  arrowDown: { strokeColor: "#ef5350", lineWidth: 1.5, fillColor: "#ef5350", fillOpacity: 1 },
+  arrowMarker: { strokeColor: "#ef5350", lineWidth: 1.5, fillColor: "#ef5350", fillOpacity: 1 },
+  flag: { strokeColor: "#ef5350", lineWidth: 1, fillColor: "#ef5350", fillOpacity: 0.85 },
+  // ── Volume profile ──────────────────────────────────────────────────────
+  volumeProfile: { strokeColor: "#26c6da", lineWidth: 1, fillColor: "#26c6da", fillOpacity: 0.35 },
+  anchoredVP: { strokeColor: "#42a5f5", lineWidth: 1, fillColor: "#42a5f5", fillOpacity: 0.35 },
+  fixedRangeVP: { strokeColor: "#7e57c2", lineWidth: 1, fillColor: "#7e57c2", fillOpacity: 0.35 },
+  // ── Harmonic patterns ───────────────────────────────────────────────────
+  abcdPattern: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  gartleyPattern: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  batPattern: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  butterflyPattern: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  crabPattern: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  sharkPattern: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  cypherPattern: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  headShoulders: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  trianglePattern: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  threeDrives: { strokeColor: "#26c6da", lineWidth: 1, lineStyle: "solid" },
+  // ── Elliott waves ───────────────────────────────────────────────────────
+  elliottImpulse: { strokeColor: "#42a5f5", lineWidth: 1, lineStyle: "solid" },
+  elliottCorrective: { strokeColor: "#42a5f5", lineWidth: 1, lineStyle: "solid" },
+  elliottTriangle: { strokeColor: "#42a5f5", lineWidth: 1, lineStyle: "solid" },
+  elliottWxy: { strokeColor: "#42a5f5", lineWidth: 1, lineStyle: "solid" },
+  elliottCombination: { strokeColor: "#42a5f5", lineWidth: 1, lineStyle: "solid" },
+  // ── Gann ────────────────────────────────────────────────────────────────
+  gannFan: { strokeColor: "#ffa726", lineWidth: 1, lineStyle: "solid" },
+  gannSquare: { strokeColor: "#ab47bc", lineWidth: 1, lineStyle: "solid" },
+  gannBox: { strokeColor: "#7e57c2", lineWidth: 1, lineStyle: "solid" },
+  // ── Measurement ─────────────────────────────────────────────────────────
+  priceRange: { strokeColor: "#66bb6a", lineWidth: 1, fillColor: "#66bb6a", fillOpacity: 0.07 },
+  dateRange: { strokeColor: "#66bb6a", lineWidth: 1, fillColor: "#66bb6a", fillOpacity: 0.07 },
+  datePriceRange: { strokeColor: "#66bb6a", lineWidth: 1, fillColor: "#66bb6a", fillOpacity: 0.07 },
+  ruler: { strokeColor: "#90a4ae", lineWidth: 1, lineStyle: "dashed" },
+  // ── Advanced ────────────────────────────────────────────────────────────
+  regressionTrend: { strokeColor: "#42a5f5", lineWidth: 1, lineStyle: "solid" },
+  projection: { strokeColor: "#9575cd", lineWidth: 1, lineStyle: "dashed" },
+  cyclicLines: { strokeColor: "#80cbc4", lineWidth: 1, lineStyle: "dashed" },
+  timeCycles: { strokeColor: "#80cbc4", lineWidth: 1, lineStyle: "dashed", fillColor: "#80cbc4", fillOpacity: 0.06 },
+  priceProjection: { strokeColor: "#ef9a9a", lineWidth: 1, lineStyle: "dashed", fillColor: "#ef9a9a", fillOpacity: 0.09 },
+  ghostFeed: { strokeColor: "#9e9e9e", lineWidth: 1, lineStyle: "dotted" }
+};
 var DARK_THEME = {
   background: "#141d22",
   grid: "#243344",
@@ -366,7 +523,8 @@ var DARK_THEME = {
     rowHoverBg: "rgba(255,255,255,0.04)",
     rowText: "#e8eef2",
     rowSubText: "#9ca3af"
-  }
+  },
+  drawing: DEFAULT_DRAWING_THEME
 };
 var LIGHT_THEME = {
   background: "#ffffff",
@@ -440,7 +598,8 @@ var LIGHT_THEME = {
     rowHoverBg: "rgba(0,0,0,0.03)",
     rowText: "#333333",
     rowSubText: "#666666"
-  }
+  },
+  drawing: DEFAULT_DRAWING_THEME
 };
 
 // src/core/uiConfig.ts
@@ -1752,7 +1911,7 @@ function cascadeBracketAwayFromEntry(entry, preferredBoxY, boxH, direction, same
   }
   return boxY;
 }
-function getLevelDisplayText(level, price, precision) {
+function getLevelDisplayText(level, price, precision, omitLots = false) {
   if (level.data?._isDraft) {
     const p = level;
     const sideLabel = p.side.charAt(0).toUpperCase() + p.side.slice(1);
@@ -1761,13 +1920,13 @@ function getLevelDisplayText(level, price, precision) {
   }
   if (level.type === "pending") {
     const p = level;
-    const lotsStr = p.lots !== void 0 ? ` ${p.lots}` : "";
+    const lotsStr = !omitLots && p.lots !== void 0 ? ` ${p.lots}` : "";
     return level.text ?? `${p.side.toUpperCase()}${lotsStr} @${price.toFixed(precision)}`;
   }
   if (level.type === "position" && level.entryPriceEditable) {
     const pos = level;
     const sideStr = pos.side ? pos.side.toUpperCase() : "";
-    const lotsStr = pos.lots !== void 0 ? ` ${pos.lots}` : "";
+    const lotsStr = !omitLots && pos.lots !== void 0 ? ` ${pos.lots}` : "";
     return level.text ?? `${sideStr}${lotsStr} @${price.toFixed(precision)}`;
   }
   if (level.type === "position") return level.text ?? "";
@@ -1872,7 +2031,7 @@ function isDraggable(level) {
     return !!level.entryPriceEditable;
   return false;
 }
-function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false, draftOrderLabel = null, draftBracketPnl = {}, expandedClusters = /* @__PURE__ */ new Set(), clusterThresholdPx = 0, showQuantityField = false, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1) {
+function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH, precision, hoveredLabel = null, draggingLabel = null, dragNewPrice = null, selectedLabel = null, pendingLabels = /* @__PURE__ */ new Set(), positionStyle = "line", hideConfirmCancel = false, draftOrderLabel = null, draftBracketPnl = {}, expandedClusters = /* @__PURE__ */ new Set(), clusterThresholdPx = 0, showQuantityField = false, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1, alwaysShowBrackets = false) {
   if (levels.length === 0)
     return {
       hitAreas: [],
@@ -1912,9 +2071,7 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
     }
     const pnlText = hasPnl(level) ? level.pnlText : null;
     const hasPending = pendingLabels.has(level.label);
-    const displayText = getLevelDisplayText(level, price, precision);
     const pnlW = pnlText ? ctx.measureText(pnlText).width + PNL_GAP : 0;
-    const labelW = ctx.measureText(displayText).width;
     const effectivePending = hasPending && !hideConfirmCancel;
     const confirmW = effectivePending ? (confirmR * 2 + confirmGap) * 2 : 0;
     const closeW = effectivePending || hideConfirmCancel ? 0 : editR * 2 + editGap + closeR * 2 + BOX_PAD_X / 2;
@@ -1924,6 +2081,8 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
     const supportsQtyField = level.type === "pending" || isEntryOrderPosition;
     const levelLots = level.lots;
     const qtyPillText = showQuantityField && (isDraftLevel || isEditingLevel) && supportsQtyField && levelLots !== void 0 ? String(levelLots) : null;
+    const displayText = getLevelDisplayText(level, price, precision, qtyPillText !== null);
+    const labelW = ctx.measureText(displayText).width;
     const pillW = qtyPillText ? PILL_PAD_X + ctx.measureText(qtyPillText).width + PILL_PAD_X + PILL_GAP : 0;
     const bW = BOX_PAD_X + pillW + pnlW + labelW + BOX_PAD_X + confirmW + closeW;
     measured.push({ level, price, y, boxW: bW, boxH });
@@ -2083,7 +2242,8 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
       dragNewSLPrice,
       dragNewTPPrice,
       buttonScale,
-      bracketBoxYMap
+      bracketBoxYMap,
+      alwaysShowBrackets
     );
     const ec = labelToExpandedCluster.get(level.label);
     if (ec && layout.boxY !== layout.y - boxH / 2) {
@@ -2320,10 +2480,12 @@ function drawDotHoverBox(ctx, level, y, dotX, dotR, theme, precision) {
   });
   ctx.restore();
 }
-function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered, selected, scale, priceRange, priceH, draggingLabel, dragNewPrice, bracketLineXMap, hasPendingChanges, positionStyle, hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas, hideConfirmCancel = false, draftBracketPnl, showQuantityField = false, draftQtyPillAreas, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1, bracketBoxYMap) {
+function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered, selected, scale, priceRange, priceH, draggingLabel, dragNewPrice, bracketLineXMap, hasPendingChanges, positionStyle, hitAreas, editAreas, hoverAreas, dragAreas, confirmAreas, addBracketAreas, hideConfirmCancel = false, draftBracketPnl, showQuantityField = false, draftQtyPillAreas, dragNewSLPrice = null, dragNewTPPrice = null, buttonScale = 1, bracketBoxYMap, alwaysShowBrackets = false) {
   const { y, boxY, boxW, boxH } = layout;
   const color = levelColor(level, colors, theme);
   const active = hovered || selected;
+  const passiveBracketShow = alwaysShowBrackets && !active;
+  const effectiveHideConfirmCancel = hideConfirmCancel || passiveBracketShow;
   const s = Math.min(Math.max(buttonScale, 1), 3);
   const closeR = CLOSE_R * s;
   const editR = EDIT_R * s;
@@ -2367,7 +2529,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   const gripX = draggable ? groupX : 0;
   const boxX = draggable ? groupX + GRIP_W + 2 : groupX;
   const bracketHost = level;
-  if (active || isMarketDraft) {
+  if (active || isMarketDraft || passiveBracketShow) {
     const slDragKey = `${level.label}:stopLoss`;
     const tpDragKey = `${level.label}:takeProfit`;
     const mainDragActive = draggingLabel === level.label;
@@ -2409,7 +2571,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         dragNewPrice,
         hitAreas,
         dragAreas,
-        hideConfirmCancel,
+        effectiveHideConfirmCancel,
         bracketHost._slOrderLabel,
         draftBracketPnl?.sl,
         buttonScale,
@@ -2433,7 +2595,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         dragNewPrice,
         hitAreas,
         dragAreas,
-        hideConfirmCancel,
+        effectiveHideConfirmCancel,
         void 0,
         draftBracketPnl?.sl,
         buttonScale
@@ -2457,7 +2619,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         dragNewPrice,
         hitAreas,
         dragAreas,
-        hideConfirmCancel,
+        effectiveHideConfirmCancel,
         bracketHost._tpOrderLabel,
         draftBracketPnl?.tp,
         buttonScale,
@@ -2481,7 +2643,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
         dragNewPrice,
         hitAreas,
         dragAreas,
-        hideConfirmCancel,
+        effectiveHideConfirmCancel,
         void 0,
         draftBracketPnl?.tp,
         buttonScale
@@ -2545,7 +2707,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   const isDraftLevel = level.data?._isDraft === true;
   const supportsQtyField = level.type === "pending" || isEntryOrderPos;
   const levelLots = level.lots;
-  if (showQuantityField && (isDraftLevel || selected || hasPendingChanges) && supportsQtyField && levelLots !== void 0) {
+  const showQtyPill = showQuantityField && (isDraftLevel || selected || hasPendingChanges) && supportsQtyField && levelLots !== void 0;
+  if (showQtyPill) {
     const qtyText = String(levelLots);
     ctx.font = FONT_MAIN;
     const pillContentW = ctx.measureText(qtyText).width;
@@ -2576,7 +2739,7 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
     ctx.fillText(pnlText, textX, midY);
     textX += ctx.measureText(pnlText).width + PNL_GAP;
   }
-  const displayText = getLevelDisplayText(level, layout.price, precision);
+  const displayText = getLevelDisplayText(level, layout.price, precision, showQtyPill);
   ctx.font = FONT_MAIN;
   ctx.fillStyle = monoColor(theme);
   ctx.textAlign = "left";
@@ -3265,6 +3428,20 @@ function renderCandleCountdown(ctx, lastBarTime, intervalMs, lastBarIndex, viewp
   ctx.textBaseline = "alphabetic";
   ctx.restore();
 }
+function renderPriceAxisCountdown(ctx, lastBarTime, intervalMs, theme, boxX, priceTagY, tagH, boxW) {
+  const remaining = Math.max(0, lastBarTime + intervalMs - Date.now());
+  const totalSec = Math.ceil(remaining / 1e3);
+  const label = formatRemaining(totalSec);
+  const boxY = priceTagY + tagH;
+  ctx.save();
+  ctx.fillStyle = theme.axisText;
+  ctx.fillRect(boxX, boxY, boxW, tagH);
+  ctx.fillStyle = theme.background;
+  ctx.font = "10px 'Inter', system-ui, sans-serif";
+  ctx.textAlign = "left";
+  ctx.fillText(label, boxX + 4, boxY + tagH - 4);
+  ctx.restore();
+}
 
 // src/axis/PriceAxis.ts
 function renderPriceAxis(ctx, priceRange, scale, theme, chartWidth, chartHeight, axisWidth, gridLines, pricePrecision = 2, cfg = DEFAULT_PRICE_AXIS_CONFIG) {
@@ -5577,6 +5754,50 @@ var LeftBar = class {
   }
 };
 
+// src/drawings/styleUtils.ts
+function resolveStyle(type, instanceStyle, theme) {
+  const themeEntry = theme?.drawing?.[type] ?? {};
+  const merged = { ...themeEntry, ...instanceStyle ?? {} };
+  const themeLevels = themeEntry.levels;
+  const instLevels = instanceStyle?.levels;
+  if (themeLevels || instLevels) {
+    const out = { ...themeLevels ?? {} };
+    if (instLevels) {
+      for (const k of Object.keys(instLevels)) {
+        out[k] = { ...out[k] ?? { visible: true, color: "#888888" }, ...instLevels[k] };
+      }
+    }
+    merged.levels = out;
+  }
+  return {
+    strokeColor: merged.strokeColor ?? "#888888",
+    lineWidth: merged.lineWidth ?? 1,
+    lineStyle: merged.lineStyle ?? "solid",
+    fillColor: merged.fillColor ?? merged.strokeColor ?? "#888888",
+    fillOpacity: merged.fillOpacity ?? 0.1,
+    ...merged.textColor !== void 0 && { textColor: merged.textColor },
+    ...merged.fontSize !== void 0 && { fontSize: merged.fontSize },
+    ...merged.levels !== void 0 && { levels: merged.levels }
+  };
+}
+function applyLineStyle(ctx, style, width) {
+  const w = Math.max(1, width);
+  if (style === "dashed") ctx.setLineDash([6 * w, 3 * w]);
+  else if (style === "dotted") ctx.setLineDash([2 * w, 3 * w]);
+  else ctx.setLineDash([]);
+}
+function hexWithAlpha(hex, alpha) {
+  if (!hex.startsWith("#")) return hex;
+  const a = Math.max(0, Math.min(1, alpha));
+  const aHex = Math.round(a * 255).toString(16).padStart(2, "0");
+  let body = hex.slice(1);
+  if (body.length === 3) body = body.split("").map((c) => c + c).join("");
+  else if (body.length === 4) body = body.slice(0, 3).split("").map((c) => c + c).join("");
+  else if (body.length === 8) body = body.slice(0, 6);
+  if (body.length !== 6) return hex;
+  return `#${body}${aHex}`;
+}
+
 // src/drawings/HorizontalLine.ts
 var HIT_TOLERANCE = 6;
 var HorizontalLine = class {
@@ -5586,13 +5807,14 @@ var HorizontalLine = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, _viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, _viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     const price = this.points[0].price;
     const y = scale.yToPixel(price, priceRange, chartH);
+    const s = resolveStyle("horizontalLine", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#e8b84b";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    if (!isSelected) ctx.setLineDash([6, 3]);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(0, y);
     ctx.lineTo(chartW, y);
@@ -5601,7 +5823,7 @@ var HorizontalLine = class {
     const label = price.toFixed(pricePrecision);
     ctx.font = "10px 'Inter', system-ui, sans-serif";
     const tw = ctx.measureText(label).width;
-    ctx.fillStyle = "#e8b84b";
+    ctx.fillStyle = s.strokeColor;
     ctx.fillText(label, chartW - tw - 4, y - 3);
     ctx.restore();
   }
@@ -5623,12 +5845,13 @@ var VerticalLine = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, viewport, _priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, _priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     const x = scale.xToPixel(this.points[0].barIndex, viewport, chartW);
+    const s = resolveStyle("verticalLine", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#e8b84b";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    if (!isSelected) ctx.setLineDash([6, 3]);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x, 0);
     ctx.lineTo(x, chartH);
@@ -5661,24 +5884,27 @@ var TrendLine = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("trendLine", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#26c6da";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
     ctx.stroke();
+    ctx.setLineDash([]);
     for (const [x, y] of [[x1, y1], [x2, y2]]) {
       ctx.beginPath();
       ctx.arc(x, y, isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = "#26c6da";
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
     }
     ctx.restore();
@@ -5723,7 +5949,7 @@ var TrendAngle = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -5732,10 +5958,12 @@ var TrendAngle = class {
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
     const angleDeg = Math.atan2(-(y2 - y1), x2 - x1) * 180 / Math.PI;
     const angleRad = Math.atan2(-(y2 - y1), x2 - x1);
+    const s = resolveStyle("trendAngle", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#26c6da";
-    ctx.fillStyle = "#26c6da";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.fillStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
@@ -5798,14 +6026,15 @@ var CrossLine = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     const p = this.points[0];
     const x = scale.xToPixel(p.barIndex, viewport, chartW);
     const y = scale.yToPixel(p.price, priceRange, chartH);
+    const s = resolveStyle("crossLine", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#78909c";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    if (!isSelected) ctx.setLineDash([6, 3]);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(0, y);
     ctx.lineTo(chartW, y);
@@ -5847,7 +6076,7 @@ var ParallelChannel = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -5863,16 +6092,18 @@ var ParallelChannel = class {
     }
     const ox1 = x1, oy1 = y1 + offsetY;
     const ox2 = x2, oy2 = y2 + offsetY;
+    const s = resolveStyle("parallelChannel", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#26c6da";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
     ctx.lineTo(ox2, oy2);
     ctx.lineTo(ox1, oy1);
     ctx.closePath();
-    ctx.fillStyle = "rgba(38, 198, 218, 0.08)";
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fill();
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -5884,6 +6115,7 @@ var ParallelChannel = class {
       ctx.lineTo(ox2, oy2);
       ctx.stroke();
     }
+    ctx.setLineDash([]);
     if (isSelected) {
       const anchorPts = [[x1, y1], [x2, y2]];
       if (p3) {
@@ -5891,7 +6123,7 @@ var ParallelChannel = class {
         const p3y = scale.yToPixel(p3.price, priceRange, chartH);
         anchorPts.push([p3x, p3y]);
       }
-      ctx.fillStyle = "#26c6da";
+      ctx.fillStyle = s.strokeColor;
       for (const [ax, ay] of anchorPts) {
         ctx.beginPath();
         ctx.arc(ax, ay, 4, 0, Math.PI * 2);
@@ -5949,7 +6181,7 @@ var FlatChannel = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -5957,12 +6189,14 @@ var FlatChannel = class {
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const priceOffset = p3 ? p3.price - p1.price : 0;
     const y2 = scale.yToPixel(p1.price + priceOffset, priceRange, chartH);
+    const s = resolveStyle("flatChannel", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ab47bc";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.rect(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), Math.abs(y2 - y1));
-    ctx.fillStyle = "rgba(171, 71, 188, 0.08)";
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fill();
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -5974,8 +6208,9 @@ var FlatChannel = class {
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
+    ctx.setLineDash([]);
     if (isSelected) {
-      ctx.fillStyle = "#ab47bc";
+      ctx.fillStyle = s.strokeColor;
       const anchorPts = [[x1, y1], [x2, y1]];
       if (p3) {
         const p3x = scale.xToPixel(p3.barIndex, viewport, chartW);
@@ -6036,7 +6271,7 @@ var DisjointChannel = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const toXY = (p) => [
       scale.xToPixel(p.barIndex, viewport, chartW),
@@ -6045,9 +6280,11 @@ var DisjointChannel = class {
     const [p1, p2, p3, p4] = this.points;
     const [x1, y1] = toXY(p1);
     const [x2, y2] = toXY(p2);
+    const s = resolveStyle("disjointChannel", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ef9a9a";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     if (p3 && p4) {
       const [x3, y3] = toXY(p3);
       const [x4, y4] = toXY(p4);
@@ -6057,7 +6294,7 @@ var DisjointChannel = class {
       ctx.lineTo(x4, y4);
       ctx.lineTo(x3, y3);
       ctx.closePath();
-      ctx.fillStyle = "rgba(239, 154, 154, 0.1)";
+      ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
       ctx.fill();
       ctx.beginPath();
       ctx.moveTo(x1, y1);
@@ -6067,8 +6304,9 @@ var DisjointChannel = class {
       ctx.moveTo(x3, y3);
       ctx.lineTo(x4, y4);
       ctx.stroke();
+      ctx.setLineDash([]);
       if (isSelected) {
-        ctx.fillStyle = "#ef9a9a";
+        ctx.fillStyle = s.strokeColor;
         for (const [ax, ay] of [[x1, y1], [x2, y2], [x3, y3], [x4, y4]]) {
           ctx.beginPath();
           ctx.arc(ax, ay, 4, 0, Math.PI * 2);
@@ -6085,8 +6323,9 @@ var DisjointChannel = class {
       ctx.moveTo(x3, y3);
       ctx.lineTo(x3, y3);
       ctx.stroke();
+      ctx.setLineDash([]);
       if (isSelected) {
-        ctx.fillStyle = "#ef9a9a";
+        ctx.fillStyle = s.strokeColor;
         for (const [ax, ay] of [[x1, y1], [x2, y2], [x3, y3]]) {
           ctx.beginPath();
           ctx.arc(ax, ay, 4, 0, Math.PI * 2);
@@ -6098,8 +6337,9 @@ var DisjointChannel = class {
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
+      ctx.setLineDash([]);
       if (isSelected) {
-        ctx.fillStyle = "#ef9a9a";
+        ctx.fillStyle = s.strokeColor;
         for (const [ax, ay] of [[x1, y1], [x2, y2]]) {
           ctx.beginPath();
           ctx.arc(ax, ay, 4, 0, Math.PI * 2);
@@ -6143,7 +6383,7 @@ var DisjointChannel = class {
 
 // src/drawings/FibRetracement.ts
 var FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
-var FIB_COLORS = ["#ef5350", "#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350"];
+var FIB_FALLBACK_COLORS = ["#ef5350", "#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350"];
 var HIT_TOLERANCE9 = 6;
 var FibRetracement = class {
   constructor(first) {
@@ -6152,7 +6392,7 @@ var FibRetracement = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const highPrice = Math.max(p1.price, p2.price);
@@ -6164,17 +6404,23 @@ var FibRetracement = class {
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
     const xMin = Math.min(x1, x2);
     const xMax = Math.max(x1, x2);
+    const s = resolveStyle("fibRetracement", this.style, theme);
+    const baseLineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    const anchorColor = s.strokeColor ?? FIB_FALLBACK_COLORS[1];
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
+    ctx.lineWidth = baseLineWidth;
     for (let i = 0; i < FIB_LEVELS.length; i++) {
       const level = FIB_LEVELS[i];
+      const key = String(level);
+      const lvl = s.levels?.[key];
+      if (lvl?.visible === false) continue;
       const price = highPrice - range * level;
       const y = scale.yToPixel(price, priceRange, chartH);
-      const color = FIB_COLORS[i];
-      const alpha = isSelected ? "cc" : "99";
-      ctx.strokeStyle = color + alpha;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
-      ctx.setLineDash(level === 0 || level === 1 ? [] : [4, 3]);
+      const baseColor = lvl?.color ?? s.strokeColor ?? FIB_FALLBACK_COLORS[i];
+      const color = hexWithAlpha(baseColor, isSelected ? 0.8 : 0.6);
+      ctx.strokeStyle = color;
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
       ctx.beginPath();
       ctx.moveTo(xMin, y);
       ctx.lineTo(xMax, y);
@@ -6182,13 +6428,13 @@ var FibRetracement = class {
       ctx.setLineDash([]);
       const pct = `${(level * 100).toFixed(1)}%`;
       const lbl = `${pct}  ${price.toFixed(pricePrecision)}`;
-      ctx.fillStyle = color + alpha;
+      ctx.fillStyle = color;
       ctx.fillText(lbl, xMin + 4, y - 3);
     }
     for (const [ax, ay] of [[x1, y1], [x2, y2]]) {
       ctx.beginPath();
       ctx.arc(ax, ay, isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = anchorColor;
       ctx.fill();
     }
     ctx.restore();
@@ -6223,7 +6469,7 @@ var FibRetracement = class {
 // src/drawings/FibExtension.ts
 var HIT_TOLERANCE10 = 6;
 var FIB_EXT_LEVELS = [0, 0.382, 0.618, 1, 1.382, 1.618, 2, 2.618];
-var FIB_EXT_COLORS = ["#ef5350", "#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350", "#ef5350"];
+var FIB_EXT_FALLBACK_COLORS = ["#ef5350", "#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350", "#ef5350"];
 var FibExtension = class {
   constructor(first) {
     this.type = "fibExtension";
@@ -6232,15 +6478,18 @@ var FibExtension = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("fibExtension", this.style, theme);
+    const anchorColor = s.strokeColor ?? "#e8b84b";
+    const connectorColor = hexWithAlpha(s.strokeColor ?? "#888888", 0.67);
     if (!p3) {
       ctx.save();
-      ctx.strokeStyle = "#888888aa";
+      ctx.strokeStyle = connectorColor;
       ctx.lineWidth = 1;
       ctx.setLineDash([4, 3]);
       ctx.beginPath();
@@ -6248,7 +6497,7 @@ var FibExtension = class {
       ctx.lineTo(x2, y2);
       ctx.stroke();
       ctx.setLineDash([]);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = anchorColor;
       ctx.beginPath();
       ctx.arc(x1, y1, 3, 0, Math.PI * 2);
       ctx.fill();
@@ -6260,10 +6509,11 @@ var FibExtension = class {
     const xMin = Math.min(x1, x2, x3);
     const xMax = Math.max(x1, x2, x3);
     const priceMove = p2.price - p1.price;
+    const baseLineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.strokeStyle = "#888888aa";
+    ctx.lineWidth = baseLineWidth;
+    ctx.strokeStyle = connectorColor;
     ctx.setLineDash([4, 3]);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -6276,12 +6526,15 @@ var FibExtension = class {
     ctx.setLineDash([]);
     for (let i = 0; i < FIB_EXT_LEVELS.length; i++) {
       const level = FIB_EXT_LEVELS[i];
+      const key = String(level);
+      const lvl = s.levels?.[key];
+      if (lvl?.visible === false) continue;
       const levelPrice = p3.price + level * priceMove;
       const y = scale.yToPixel(levelPrice, priceRange, chartH);
-      const color = FIB_EXT_COLORS[i];
-      const alpha = isSelected ? "cc" : "99";
-      ctx.strokeStyle = color + alpha;
-      ctx.setLineDash(level === 0 || level === 1 ? [] : [4, 3]);
+      const baseColor = lvl?.color ?? s.strokeColor ?? FIB_EXT_FALLBACK_COLORS[i];
+      const color = hexWithAlpha(baseColor, isSelected ? 0.8 : 0.6);
+      ctx.strokeStyle = color;
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
       ctx.beginPath();
       ctx.moveTo(xMin, y);
       ctx.lineTo(xMax, y);
@@ -6289,13 +6542,13 @@ var FibExtension = class {
       ctx.setLineDash([]);
       const pct = `${(level * 100).toFixed(1)}%`;
       const lbl = `${pct}  ${levelPrice.toFixed(pricePrecision)}`;
-      ctx.fillStyle = color + alpha;
+      ctx.fillStyle = color;
       ctx.fillText(lbl, xMin + 4, y - 3);
     }
     for (const [ax, ay] of [[x1, y1], [x2, y2], [x3, y3]]) {
       ctx.beginPath();
       ctx.arc(ax, ay, isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = anchorColor;
       ctx.fill();
     }
     ctx.restore();
@@ -6329,7 +6582,6 @@ var FibExtension = class {
 // src/drawings/FibChannel.ts
 var HIT_TOLERANCE11 = 6;
 var FIB_LEVELS2 = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
-var FIB_COLORS2 = ["#ef5350", "#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350"];
 function pointToSegmentDist6(px, py, x1, y1, x2, y2) {
   const dx = x2 - x1, dy = y2 - y1;
   const lenSq = dx * dx + dy * dy;
@@ -6345,15 +6597,17 @@ var FibChannel = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision = 2, theme) {
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("fibChannel", this.style, theme);
+    const connectorColor = hexWithAlpha(s.strokeColor, 0.67);
     if (!p3) {
       ctx.save();
-      ctx.strokeStyle = "#888888aa";
+      ctx.strokeStyle = connectorColor;
       ctx.lineWidth = 1;
       ctx.setLineDash([4, 3]);
       ctx.beginPath();
@@ -6361,7 +6615,7 @@ var FibChannel = class {
       ctx.lineTo(x2, y2);
       ctx.stroke();
       ctx.setLineDash([]);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = s.strokeColor;
       ctx.beginPath();
       ctx.arc(x1, y1, 3, 0, Math.PI * 2);
       ctx.fill();
@@ -6377,9 +6631,10 @@ var FibChannel = class {
     const nx = -dy / len;
     const ny = dx / len;
     const perpDist = (x3 - x1) * nx + (y3 - y1) * ny;
+    const baseLineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.lineWidth = baseLineWidth;
     for (let i = 0; i < FIB_LEVELS2.length; i++) {
       const level = FIB_LEVELS2[i];
       const offset = level * perpDist;
@@ -6387,30 +6642,29 @@ var FibChannel = class {
       const ly1 = y1 + offset * ny;
       const lx2 = x2 + offset * nx;
       const ly2 = y2 + offset * ny;
-      const color = FIB_COLORS2[i];
-      const alpha = isSelected ? "cc" : "99";
-      ctx.strokeStyle = color + alpha;
-      ctx.setLineDash(level === 0 || level === 1 ? [] : [4, 3]);
+      const color = hexWithAlpha(s.strokeColor, isSelected ? 0.8 : 0.6);
+      ctx.strokeStyle = color;
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
       ctx.beginPath();
       ctx.moveTo(lx1, ly1);
       ctx.lineTo(lx2, ly2);
       ctx.stroke();
       ctx.setLineDash([]);
       const pct = `${(level * 100).toFixed(1)}%`;
-      ctx.fillStyle = color + alpha;
+      ctx.fillStyle = color;
       ctx.fillText(pct, lx2 + 4, ly2 + 3);
     }
     ctx.beginPath();
     ctx.arc(x3, y3, isSelected ? 4 : 3, 0, Math.PI * 2);
-    ctx.fillStyle = "#e8b84b";
+    ctx.fillStyle = s.strokeColor;
     ctx.fill();
     for (const [ax, ay] of [[x1, y1], [x2, y2]]) {
       ctx.beginPath();
       ctx.arc(ax, ay, isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
     }
-    ctx.strokeStyle = "#888888aa";
+    ctx.strokeStyle = connectorColor;
     ctx.setLineDash([3, 3]);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -6470,19 +6724,20 @@ var FibTimezone = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const interval = p2.barIndex - p1.barIndex;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
+    const s = resolveStyle("fibTimezone", this.style, theme);
+    const baseLineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    const lineColor = hexWithAlpha(s.strokeColor, isSelected ? 0.8 : 0.53);
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    const color = "#e8b84b";
-    const alpha = isSelected ? "cc" : "88";
-    ctx.strokeStyle = color + alpha;
-    ctx.setLineDash([3, 3]);
+    ctx.lineWidth = baseLineWidth;
+    ctx.strokeStyle = lineColor;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
     ctx.beginPath();
     ctx.moveTo(x1, 0);
     ctx.lineTo(x1, chartH);
@@ -6496,14 +6751,14 @@ var FibTimezone = class {
       const barIndex = p1.barIndex + fib * interval;
       const xFib = scale.xToPixel(barIndex, viewport, chartW);
       if (xFib < -50 || xFib > chartW + 50) continue;
-      ctx.strokeStyle = color + alpha;
-      ctx.setLineDash([5, 3]);
+      ctx.strokeStyle = lineColor;
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
       ctx.beginPath();
       ctx.moveTo(xFib, 0);
       ctx.lineTo(xFib, chartH);
       ctx.stroke();
       ctx.setLineDash([]);
-      ctx.fillStyle = color + alpha;
+      ctx.fillStyle = lineColor;
       ctx.fillText(String(fib), xFib + 3, 12);
     }
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
@@ -6511,7 +6766,7 @@ var FibTimezone = class {
     for (const [ax, ay] of [[x1, y1], [x2, y2]]) {
       ctx.beginPath();
       ctx.arc(ax, ay, isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
     }
     ctx.restore();
@@ -6547,7 +6802,6 @@ var FibTimezone = class {
 // src/drawings/FibCircles.ts
 var HIT_TOLERANCE13 = 6;
 var FIB_RATIOS = [0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618, 2.618];
-var FIB_COLORS3 = ["#ef5350", "#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350", "#ef5350"];
 var FibCircles = class {
   constructor(first) {
     this.type = "fibCircles";
@@ -6555,7 +6809,7 @@ var FibCircles = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const cx = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -6563,30 +6817,33 @@ var FibCircles = class {
     const rx = scale.xToPixel(p2.barIndex, viewport, chartW);
     const ry = scale.yToPixel(p2.price, priceRange, chartH);
     const baseRadius = Math.hypot(rx - cx, ry - cy);
+    const s = resolveStyle("fibCircles", this.style, theme);
+    const baseLineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.lineWidth = baseLineWidth;
     for (let i = 0; i < FIB_RATIOS.length; i++) {
       const ratio = FIB_RATIOS[i];
       const radius = ratio * baseRadius;
-      const color = FIB_COLORS3[i % FIB_COLORS3.length];
-      const alpha = isSelected ? "cc" : "88";
-      ctx.strokeStyle = color + alpha;
+      const color = hexWithAlpha(s.strokeColor, isSelected ? 0.8 : 0.53);
+      ctx.strokeStyle = color;
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
       ctx.beginPath();
       ctx.arc(cx, cy, radius, 0, Math.PI * 2);
       ctx.stroke();
-      ctx.fillStyle = color + alpha;
+      ctx.setLineDash([]);
+      ctx.fillStyle = color;
       ctx.fillText(`${(ratio * 100).toFixed(1)}%`, cx + 3, cy - radius + 12);
     }
     ctx.beginPath();
     ctx.arc(cx, cy, isSelected ? 4 : 3, 0, Math.PI * 2);
-    ctx.fillStyle = "#e8b84b";
+    ctx.fillStyle = s.strokeColor;
     ctx.fill();
     ctx.beginPath();
     ctx.arc(rx, ry, isSelected ? 4 : 3, 0, Math.PI * 2);
-    ctx.fillStyle = "#e8b84b";
+    ctx.fillStyle = s.strokeColor;
     ctx.fill();
-    ctx.strokeStyle = "#88888866";
+    ctx.strokeStyle = hexWithAlpha(s.strokeColor, 0.4);
     ctx.setLineDash([3, 3]);
     ctx.beginPath();
     ctx.moveTo(cx, cy);
@@ -6660,7 +6917,7 @@ var FibSpiral = class {
     }
     return arcs;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const cx = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -6669,10 +6926,13 @@ var FibSpiral = class {
     const py2 = scale.yToPixel(p2.price, priceRange, chartH);
     const dx = px2 - cx;
     const dy = py2 - cy;
+    const s = resolveStyle("fibSpiral", this.style, theme);
+    const baseLineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.strokeStyle = isSelected ? "#e8b84bcc" : "#e8b84b88";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = hexWithAlpha(s.strokeColor, isSelected ? 0.8 : 0.53);
+    ctx.lineWidth = baseLineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
     const arcs = this.computeArcs(cx, cy, dx, dy);
     ctx.beginPath();
     for (let i = 0; i < arcs.length; i++) {
@@ -6685,15 +6945,16 @@ var FibSpiral = class {
       ctx.arc(arc.ox, arc.oy, arc.r, arc.startAngle, arc.endAngle, false);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     ctx.beginPath();
     ctx.arc(cx, cy, isSelected ? 4 : 3, 0, Math.PI * 2);
-    ctx.fillStyle = "#e8b84b";
+    ctx.fillStyle = s.strokeColor;
     ctx.fill();
     ctx.beginPath();
     ctx.arc(px2, py2, isSelected ? 4 : 3, 0, Math.PI * 2);
-    ctx.fillStyle = "#e8b84b";
+    ctx.fillStyle = s.strokeColor;
     ctx.fill();
-    ctx.strokeStyle = "#88888866";
+    ctx.strokeStyle = hexWithAlpha(s.strokeColor, 0.4);
     ctx.setLineDash([3, 3]);
     ctx.beginPath();
     ctx.moveTo(cx, cy);
@@ -6744,7 +7005,6 @@ var FibSpiral = class {
 // src/drawings/FibFan.ts
 var HIT_TOLERANCE15 = 6;
 var FIB_FAN_RATIOS = [0.236, 0.382, 0.5, 0.618, 0.786];
-var FIB_FAN_COLORS = ["#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b"];
 function pointToSegmentDist7(px, py, x1, y1, x2, y2) {
   const dx = x2 - x1, dy = y2 - y1;
   const lenSq = dx * dx + dy * dy;
@@ -6770,17 +7030,19 @@ var FibFan = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("fibFan", this.style, theme);
+    const baseLineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.strokeStyle = "#888888aa";
+    ctx.lineWidth = baseLineWidth;
+    ctx.strokeStyle = hexWithAlpha(s.strokeColor, 0.67);
     ctx.setLineDash([4, 3]);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -6790,24 +7052,25 @@ var FibFan = class {
     const priceRange2 = p2.price - p1.price;
     for (let i = 0; i < FIB_FAN_RATIOS.length; i++) {
       const ratio = FIB_FAN_RATIOS[i];
-      const color = FIB_FAN_COLORS[i];
-      const alpha = isSelected ? "cc" : "99";
+      const color = hexWithAlpha(s.strokeColor, isSelected ? 0.8 : 0.6);
       const targetPrice = p1.price + ratio * priceRange2;
       const tx = x2;
       const ty = scale.yToPixel(targetPrice, priceRange, chartH);
       const [ex, ey] = extendRay(x1, y1, tx, ty, chartW, chartH);
-      ctx.strokeStyle = color + alpha;
+      ctx.strokeStyle = color;
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
       ctx.beginPath();
       ctx.moveTo(x1, y1);
       ctx.lineTo(ex, ey);
       ctx.stroke();
-      ctx.fillStyle = color + alpha;
+      ctx.setLineDash([]);
+      ctx.fillStyle = color;
       ctx.fillText(`${(ratio * 100).toFixed(1)}%`, Math.min(ex - 32, chartW - 40), ey - 3);
     }
     for (const [ax, ay] of [[x1, y1], [x2, y2]]) {
       ctx.beginPath();
       ctx.arc(ax, ay, isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
     }
     ctx.restore();
@@ -6846,7 +7109,7 @@ var FibFan = class {
 // src/drawings/FibProjection.ts
 var HIT_TOLERANCE16 = 6;
 var FIB_PROJ_LEVELS = [0, 0.618, 1, 1.272, 1.618, 2, 2.618];
-var FIB_PROJ_COLORS = ["#ef5350", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350", "#ef5350"];
+var FIB_PROJ_FALLBACK_COLORS = ["#ef5350", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350", "#ef5350"];
 var FibProjection = class {
   constructor(first) {
     this.type = "fibProjection";
@@ -6855,15 +7118,18 @@ var FibProjection = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("fibProjection", this.style, theme);
+    const anchorColor = s.strokeColor ?? "#e8b84b";
+    const connectorColor = hexWithAlpha(s.strokeColor ?? "#888888", 0.67);
     if (!p3) {
       ctx.save();
-      ctx.strokeStyle = "#888888aa";
+      ctx.strokeStyle = connectorColor;
       ctx.lineWidth = 1;
       ctx.setLineDash([4, 3]);
       ctx.beginPath();
@@ -6871,7 +7137,7 @@ var FibProjection = class {
       ctx.lineTo(x2, y2);
       ctx.stroke();
       ctx.setLineDash([]);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = anchorColor;
       ctx.beginPath();
       ctx.arc(x1, y1, 3, 0, Math.PI * 2);
       ctx.fill();
@@ -6883,10 +7149,11 @@ var FibProjection = class {
     const xMin = Math.min(x1, x3);
     const xMax = Math.max(x1, x3);
     const baseMove = p2.price - p1.price;
+    const baseLineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.strokeStyle = "#888888aa";
+    ctx.lineWidth = baseLineWidth;
+    ctx.strokeStyle = connectorColor;
     ctx.setLineDash([4, 3]);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -6899,12 +7166,15 @@ var FibProjection = class {
     ctx.setLineDash([]);
     for (let i = 0; i < FIB_PROJ_LEVELS.length; i++) {
       const level = FIB_PROJ_LEVELS[i];
+      const key = String(level);
+      const lvl = s.levels?.[key];
+      if (lvl?.visible === false) continue;
       const levelPrice = p3.price + level * baseMove;
       const y = scale.yToPixel(levelPrice, priceRange, chartH);
-      const color = FIB_PROJ_COLORS[i];
-      const alpha = isSelected ? "cc" : "99";
-      ctx.strokeStyle = color + alpha;
-      ctx.setLineDash(level === 0 || level === 1 ? [] : [4, 3]);
+      const baseColor = lvl?.color ?? s.strokeColor ?? FIB_PROJ_FALLBACK_COLORS[i];
+      const color = hexWithAlpha(baseColor, isSelected ? 0.8 : 0.6);
+      ctx.strokeStyle = color;
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
       ctx.beginPath();
       ctx.moveTo(xMin, y);
       ctx.lineTo(xMax, y);
@@ -6912,13 +7182,13 @@ var FibProjection = class {
       ctx.setLineDash([]);
       const pct = `${(level * 100).toFixed(1)}%`;
       const lbl = `${pct}  ${levelPrice.toFixed(pricePrecision)}`;
-      ctx.fillStyle = color + alpha;
+      ctx.fillStyle = color;
       ctx.fillText(lbl, xMin + 4, y - 3);
     }
     for (const [ax, ay] of [[x1, y1], [x2, y2], [x3, y3]]) {
       ctx.beginPath();
       ctx.arc(ax, ay, isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = "#e8b84b";
+      ctx.fillStyle = anchorColor;
       ctx.fill();
     }
     ctx.restore();
@@ -6976,7 +7246,7 @@ var GannFan = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -6986,18 +7256,20 @@ var GannFan = class {
     const baseWidth = Math.abs(x2 - x1) || 1;
     const baseHeight = y2 - y1;
     const dirX = x2 > x1 ? 1 : -1;
+    const s = resolveStyle("gannFan", this.style, theme);
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     GANN_RATIOS.forEach(([priceUnits, timeUnits, label], idx) => {
       const scaleFactor = priceUnits / timeUnits;
       const fanDY = baseHeight * scaleFactor;
       const tMax = (chartW - x1) / (baseWidth * dirX);
       const xEnd = x1 + baseWidth * dirX * tMax;
       const yEnd = y1 + fanDY * tMax;
-      const opacities = ["55", "66", "77", "99", "cc", "99", "77", "66", "55"];
-      const alpha = opacities[idx] ?? "88";
-      const color = "#ffa726" + alpha;
+      const alphas = [0.33, 0.4, 0.47, 0.6, 0.8, 0.6, 0.47, 0.4, 0.33];
+      const a = alphas[idx] ?? 0.53;
+      const color = hexWithAlpha(s.strokeColor, a);
       ctx.strokeStyle = color;
       ctx.beginPath();
       ctx.moveTo(x1, y1);
@@ -7007,7 +7279,8 @@ var GannFan = class {
       const labelX = Math.min(xEnd, chartW - 30);
       ctx.fillText(label, labelX, yEnd - 3);
     });
-    ctx.fillStyle = "#ffa726";
+    ctx.setLineDash([]);
+    ctx.fillStyle = s.strokeColor;
     ctx.beginPath();
     ctx.arc(x1, y1, isSelected ? 4 : 3, 0, Math.PI * 2);
     ctx.fill();
@@ -7061,7 +7334,7 @@ var GannSquare = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -7074,10 +7347,12 @@ var GannSquare = class {
     const bottom = Math.max(y1, y2);
     const w = right - left;
     const h = bottom - top;
+    const s = resolveStyle("gannSquare", this.style, theme);
     ctx.save();
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.strokeStyle = "#ab47bc";
-    ctx.fillStyle = "#ab47bc0a";
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    ctx.strokeStyle = s.strokeColor;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fillRect(left, top, w, h);
     ctx.strokeRect(left, top, w, h);
     ctx.beginPath();
@@ -7092,6 +7367,7 @@ var GannSquare = class {
     ctx.moveTo(left + 2 * w / 3, top);
     ctx.lineTo(left + 2 * w / 3, bottom);
     ctx.stroke();
+    ctx.setLineDash([]);
     ctx.restore();
   }
   hitTest(x, y, scale, viewport, priceRange, chartW, chartH) {
@@ -7131,7 +7407,7 @@ var GannBox = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -7146,10 +7422,12 @@ var GannBox = class {
     const h = bottom - top;
     const midX = left + w / 2;
     const midY = top + h / 2;
+    const s = resolveStyle("gannBox", this.style, theme);
     ctx.save();
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.strokeStyle = "#7e57c2";
-    ctx.fillStyle = "#7e57c20a";
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    ctx.strokeStyle = s.strokeColor;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fillRect(left, top, w, h);
     ctx.strokeRect(left, top, w, h);
     ctx.beginPath();
@@ -7168,6 +7446,7 @@ var GannBox = class {
     ctx.moveTo(midX, top);
     ctx.lineTo(midX, bottom);
     ctx.stroke();
+    ctx.setLineDash([]);
     ctx.restore();
   }
   hitTest(x, y, scale, viewport, priceRange, chartW, chartH) {
@@ -7207,7 +7486,7 @@ var Rectangle = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -7218,17 +7497,20 @@ var Rectangle = class {
     const ry = Math.min(y1, y2);
     const rw = Math.abs(x2 - x1);
     const rh = Math.abs(y2 - y1);
+    const s = resolveStyle("rectangle", this.style, theme);
     ctx.save();
-    ctx.fillStyle = "#9b59b618";
-    ctx.strokeStyle = "#9b59b6";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.fillRect(rx, ry, rw, rh);
     ctx.strokeRect(rx, ry, rw, rh);
+    ctx.setLineDash([]);
     if (isSelected) {
       for (const [cx, cy] of [[x1, y1], [x2, y1], [x1, y2], [x2, y2]]) {
         ctx.beginPath();
         ctx.arc(cx, cy, 3.5, 0, Math.PI * 2);
-        ctx.fillStyle = "#9b59b6";
+        ctx.fillStyle = s.strokeColor;
         ctx.fill();
       }
     }
@@ -7310,9 +7592,10 @@ var RotatedRectangle = class {
     const dx = ax + perpX * width, dy = ay + perpY * width;
     return [[ax, ay], [bx, by], [cx, cy], [dx, dy]];
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 3) return;
     const corners = this.getCorners(scale, viewport, priceRange, chartW, chartH);
+    const s = resolveStyle("rotatedRectangle", this.style, theme);
     ctx.save();
     ctx.beginPath();
     ctx.moveTo(corners[0][0], corners[0][1]);
@@ -7320,12 +7603,14 @@ var RotatedRectangle = class {
       ctx.lineTo(corners[i][0], corners[i][1]);
     }
     ctx.closePath();
-    ctx.fillStyle = "#9c27b018";
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fill();
-    ctx.strokeStyle = "#9c27b0";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.stroke();
-    ctx.fillStyle = "#9c27b0";
+    ctx.setLineDash([]);
+    ctx.fillStyle = s.strokeColor;
     for (const [x, y] of corners) {
       ctx.beginPath();
       ctx.arc(x, y, isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -7359,7 +7644,7 @@ var Ellipse = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -7371,19 +7656,22 @@ var Ellipse = class {
     const rx = Math.abs(x2 - x1) / 2;
     const ry = Math.abs(y2 - y1) / 2;
     if (rx < 1 || ry < 1) return;
+    const s = resolveStyle("ellipse", this.style, theme);
     ctx.save();
-    ctx.fillStyle = "#2196f318";
-    ctx.strokeStyle = "#2196f3";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
     ctx.fill();
     ctx.stroke();
+    ctx.setLineDash([]);
     if (isSelected) {
       for (const [hx, hy] of [[x1, y1], [x2, y2]]) {
         ctx.beginPath();
         ctx.arc(hx, hy, 3.5, 0, Math.PI * 2);
-        ctx.fillStyle = "#2196f3";
+        ctx.fillStyle = s.strokeColor;
         ctx.fill();
       }
     }
@@ -7443,13 +7731,15 @@ var Triangle = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
+    const s = resolveStyle("triangle", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ff9800";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < px.length; i++) {
@@ -7457,15 +7747,16 @@ var Triangle = class {
     }
     if (this.complete) {
       ctx.closePath();
-      ctx.fillStyle = "#ff980018";
+      ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
       ctx.fill();
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (isSelected) {
       for (let i = 0; i < px.length; i++) {
         ctx.beginPath();
         ctx.arc(px[i], py[i], 4, 0, Math.PI * 2);
-        ctx.fillStyle = "#ff9800";
+        ctx.fillStyle = s.strokeColor;
         ctx.fill();
       }
     }
@@ -7504,7 +7795,7 @@ var Circle = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const cx = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -7513,22 +7804,25 @@ var Circle = class {
     const ey = scale.yToPixel(p2.price, priceRange, chartH);
     const r = Math.hypot(ex - cx, ey - cy);
     if (r < 1) return;
+    const s = resolveStyle("circle", this.style, theme);
     ctx.save();
-    ctx.fillStyle = "#4caf5018";
-    ctx.strokeStyle = "#4caf50";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.arc(cx, cy, r, 0, Math.PI * 2);
     ctx.fill();
     ctx.stroke();
+    ctx.setLineDash([]);
     if (isSelected) {
       ctx.beginPath();
       ctx.arc(cx, cy, 3, 0, Math.PI * 2);
-      ctx.fillStyle = "#4caf50";
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
       ctx.beginPath();
       ctx.arc(ex, ey, 3.5, 0, Math.PI * 2);
-      ctx.fillStyle = "#4caf50";
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
     }
     ctx.restore();
@@ -7577,7 +7871,7 @@ var Arc = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 3) return;
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -7586,9 +7880,11 @@ var Arc = class {
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
     const x3 = scale.xToPixel(p3.barIndex, viewport, chartW);
     const y3 = scale.yToPixel(p3.price, priceRange, chartH);
+    const s = resolveStyle("arc", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#26c6da";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     const ax = x1, ay = y1;
     const bx = x2, by = y2;
     const cx = x3, cy = y3;
@@ -7621,8 +7917,9 @@ var Arc = class {
       ctx.arc(ux, uy, r, aStart, aEnd, anticlockwise);
       ctx.stroke();
     }
+    ctx.setLineDash([]);
     const anchors = [[x1, y1], [x2, y2], [x3, y3]];
-    ctx.fillStyle = "#26c6da";
+    ctx.fillStyle = s.strokeColor;
     for (const [x, y] of anchors) {
       ctx.beginPath();
       ctx.arc(x, y, isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -7703,24 +8000,26 @@ var Polyline = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const pixelPts = this.points.map((p) => ({
       x: scale.xToPixel(p.barIndex, viewport, chartW),
       y: scale.yToPixel(p.price, priceRange, chartH)
     }));
+    const s = resolveStyle("polyline", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ff7043";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     const solidCount = this.complete ? pixelPts.length : pixelPts.length - 1;
     if (solidCount >= 2) {
-      ctx.setLineDash([]);
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
       ctx.beginPath();
       ctx.moveTo(pixelPts[0].x, pixelPts[0].y);
       for (let i = 1; i < solidCount; i++) {
         ctx.lineTo(pixelPts[i].x, pixelPts[i].y);
       }
       ctx.stroke();
+      ctx.setLineDash([]);
     }
     if (!this.complete && pixelPts.length >= 2) {
       const last = pixelPts.length - 1;
@@ -7731,7 +8030,7 @@ var Polyline = class {
       ctx.stroke();
       ctx.setLineDash([]);
     }
-    ctx.fillStyle = "#ff7043";
+    ctx.fillStyle = s.strokeColor;
     const dotCount = this.complete ? pixelPts.length : pixelPts.length - 1;
     for (let i = 0; i < dotCount; i++) {
       ctx.beginPath();
@@ -7783,18 +8082,19 @@ var Path = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const pixelPts = this.points.map((p) => ({
       x: scale.xToPixel(p.barIndex, viewport, chartW),
       y: scale.yToPixel(p.price, priceRange, chartH)
     }));
     const solidCount = this.complete ? pixelPts.length : pixelPts.length - 1;
+    const s = resolveStyle("path", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ec407a";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     if (solidCount >= 2) {
-      ctx.setLineDash([]);
+      applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
       ctx.beginPath();
       ctx.moveTo(pixelPts[0].x, pixelPts[0].y);
       if (solidCount === 2) {
@@ -7808,6 +8108,7 @@ var Path = class {
         ctx.lineTo(pixelPts[solidCount - 1].x, pixelPts[solidCount - 1].y);
       }
       ctx.stroke();
+      ctx.setLineDash([]);
     }
     if (!this.complete && pixelPts.length >= 2) {
       const last = pixelPts.length - 1;
@@ -7818,7 +8119,7 @@ var Path = class {
       ctx.stroke();
       ctx.setLineDash([]);
     }
-    ctx.fillStyle = "#ec407a";
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < solidCount; i++) {
       ctx.beginPath();
       ctx.arc(pixelPts[i].x, pixelPts[i].y, isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -7870,7 +8171,7 @@ var PriceRange = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -7882,11 +8183,13 @@ var PriceRange = class {
     const topY = Math.min(y1, y2);
     const botY = Math.max(y1, y2);
     const tickHalf = 10;
-    const color = "#26a69a";
+    const s = resolveStyle("priceRange", this.style, theme);
+    const color = s.strokeColor;
     ctx.save();
     ctx.strokeStyle = color;
     ctx.fillStyle = color;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.font = "10px 'Inter', system-ui, sans-serif";
     ctx.beginPath();
     ctx.moveTo(midX, topY);
@@ -7902,6 +8205,7 @@ var PriceRange = class {
     ctx.moveTo(x2 - tickHalf, y2);
     ctx.lineTo(x2 + tickHalf, y2);
     ctx.stroke();
+    ctx.setLineDash([]);
     const priceDiff = Math.abs(p1.price - p2.price).toFixed(pricePrecision);
     const pctChange = ((p2.price - p1.price) / p1.price * 100).toFixed(2) + "%";
     const line1 = priceDiff;
@@ -7911,7 +8215,7 @@ var PriceRange = class {
     const boxH = 30;
     const boxX = midX + 8;
     const boxY = midY - boxH / 2;
-    ctx.fillStyle = "rgba(0,0,0,0.55)";
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fillRect(boxX, boxY, boxW, boxH);
     ctx.strokeStyle = color;
     ctx.strokeRect(boxX, boxY, boxW, boxH);
@@ -7965,7 +8269,7 @@ var DateRange = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -7976,11 +8280,13 @@ var DateRange = class {
     const leftX = Math.min(x1, x2);
     const rightX = Math.max(x1, x2);
     const tickHalf = 10;
-    const color = "#42a5f5";
+    const s = resolveStyle("dateRange", this.style, theme);
+    const color = s.strokeColor;
     ctx.save();
     ctx.strokeStyle = color;
     ctx.fillStyle = color;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.font = "10px 'Inter', system-ui, sans-serif";
     ctx.beginPath();
     ctx.moveTo(leftX, midY);
@@ -7996,6 +8302,7 @@ var DateRange = class {
     ctx.moveTo(x2, y2 - tickHalf);
     ctx.lineTo(x2, y2 + tickHalf);
     ctx.stroke();
+    ctx.setLineDash([]);
     const barCount = Math.abs(p2.barIndex - p1.barIndex);
     const label = `${barCount} bars`;
     const midX = (x1 + x2) / 2;
@@ -8049,7 +8356,7 @@ var DatePriceRange = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -8062,14 +8369,15 @@ var DatePriceRange = class {
     const bottom = Math.max(y1, y2);
     const w = right - left;
     const h = bottom - top;
-    const color = "#66bb6a";
+    const s = resolveStyle("datePriceRange", this.style, theme);
+    const color = s.strokeColor;
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.fillStyle = "#66bb6a12";
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fillRect(left, top, w, h);
     ctx.strokeStyle = color;
-    ctx.setLineDash([5, 3]);
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.strokeRect(left, top, w, h);
     ctx.setLineDash([]);
     ctx.strokeStyle = color;
@@ -8133,27 +8441,28 @@ var Ruler = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
-    const color = "#ffb300";
+    const s = resolveStyle("ruler", this.style, theme);
+    const color = s.strokeColor;
     const angle = Math.atan2(y2 - y1, x2 - x1);
     const perpAngle = angle + Math.PI / 2;
     const tickLen = 8;
     ctx.save();
     ctx.strokeStyle = color;
     ctx.fillStyle = color;
-    ctx.lineWidth = 2;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.font = "10px 'Inter', system-ui, sans-serif";
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
     ctx.stroke();
-    ctx.lineWidth = isSelected ? 1.5 : 1;
     ctx.beginPath();
     ctx.moveTo(x1 - tickLen * Math.cos(perpAngle), y1 - tickLen * Math.sin(perpAngle));
     ctx.lineTo(x1 + tickLen * Math.cos(perpAngle), y1 + tickLen * Math.sin(perpAngle));
@@ -8162,6 +8471,7 @@ var Ruler = class {
     ctx.moveTo(x2 - tickLen * Math.cos(perpAngle), y2 - tickLen * Math.sin(perpAngle));
     ctx.lineTo(x2 + tickLen * Math.cos(perpAngle), y2 + tickLen * Math.sin(perpAngle));
     ctx.stroke();
+    ctx.setLineDash([]);
     const midX = (x1 + x2) / 2;
     const midY = (y1 + y2) / 2;
     const barDiff = Math.abs(p2.barIndex - p1.barIndex);
@@ -8227,16 +8537,18 @@ var Pitchfork = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("pitchfork", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ffa726";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     if (p3) {
       const x3 = scale.xToPixel(p3.barIndex, viewport, chartW);
       const y3 = scale.yToPixel(p3.price, priceRange, chartH);
@@ -8263,8 +8575,9 @@ var Pitchfork = class {
       ctx.moveTo(x3, y3);
       ctx.lineTo(tine2EndX, tine2EndY);
       ctx.stroke();
+      ctx.setLineDash([]);
       if (isSelected) {
-        ctx.fillStyle = "#ffa726";
+        ctx.fillStyle = s.strokeColor;
         for (const [ax, ay] of [[x1, y1], [x2, y2], [x3, y3]]) {
           ctx.beginPath();
           ctx.arc(ax, ay, 4, 0, Math.PI * 2);
@@ -8276,6 +8589,7 @@ var Pitchfork = class {
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
+      ctx.setLineDash([]);
     }
     ctx.restore();
   }
@@ -8337,16 +8651,18 @@ var SchiffPitchfork = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("schiffPitchfork", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ff7043";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     if (p3) {
       const x3 = scale.xToPixel(p3.barIndex, viewport, chartW);
       const y3 = scale.yToPixel(p3.price, priceRange, chartH);
@@ -8375,8 +8691,9 @@ var SchiffPitchfork = class {
       ctx.moveTo(x3, y3);
       ctx.lineTo(tine2EndX, tine2EndY);
       ctx.stroke();
+      ctx.setLineDash([]);
       if (isSelected) {
-        ctx.fillStyle = "#ff7043";
+        ctx.fillStyle = s.strokeColor;
         for (const [ax, ay] of [[x1, y1], [x2, y2], [x3, y3]]) {
           ctx.beginPath();
           ctx.arc(ax, ay, 4, 0, Math.PI * 2);
@@ -8388,6 +8705,7 @@ var SchiffPitchfork = class {
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
+      ctx.setLineDash([]);
     }
     ctx.restore();
   }
@@ -8451,16 +8769,18 @@ var ModifiedSchiff = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("modifiedSchiff", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ef5350";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     if (p3) {
       const x3 = scale.xToPixel(p3.barIndex, viewport, chartW);
       const y3 = scale.yToPixel(p3.price, priceRange, chartH);
@@ -8489,8 +8809,9 @@ var ModifiedSchiff = class {
       ctx.moveTo(x3, y3);
       ctx.lineTo(tine2EndX, tine2EndY);
       ctx.stroke();
+      ctx.setLineDash([]);
       if (isSelected) {
-        ctx.fillStyle = "#ef5350";
+        ctx.fillStyle = s.strokeColor;
         for (const [ax, ay] of [[x1, y1], [x2, y2], [x3, y3]]) {
           ctx.beginPath();
           ctx.arc(ax, ay, 4, 0, Math.PI * 2);
@@ -8502,6 +8823,7 @@ var ModifiedSchiff = class {
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
+      ctx.setLineDash([]);
     }
     ctx.restore();
   }
@@ -8565,16 +8887,18 @@ var InsidePitchfork = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2, p3] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("insidePitchfork", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ab47bc";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     if (p3) {
       const x3 = scale.xToPixel(p3.barIndex, viewport, chartW);
       const y3 = scale.yToPixel(p3.price, priceRange, chartH);
@@ -8620,7 +8944,7 @@ var InsidePitchfork = class {
       ctx.setLineDash([]);
       ctx.globalAlpha = 1;
       if (isSelected) {
-        ctx.fillStyle = "#ab47bc";
+        ctx.fillStyle = s.strokeColor;
         for (const [ax, ay] of [[x1, y1], [x2, y2], [x3, y3]]) {
           ctx.beginPath();
           ctx.arc(ax, ay, 4, 0, Math.PI * 2);
@@ -8632,6 +8956,7 @@ var InsidePitchfork = class {
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
+      ctx.setLineDash([]);
     }
     ctx.restore();
   }
@@ -8681,7 +9006,6 @@ var InsidePitchfork = class {
 
 // src/drawings/FixedRangeVP.ts
 var HIT_TOLERANCE36 = 6;
-var COLOR = "#64b5f6";
 var BAR_WEIGHTS = [0.35, 0.55, 0.75, 1, 1, 0.75, 0.55, 0.35];
 var FixedRangeVP = class {
   constructor(first) {
@@ -8690,7 +9014,7 @@ var FixedRangeVP = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -8701,27 +9025,31 @@ var FixedRangeVP = class {
     const ry = Math.min(y1, y2);
     const rw = Math.abs(x2 - x1);
     const rh = Math.abs(y2 - y1);
+    const s = resolveStyle("fixedRangeVP", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.strokeRect(rx, ry, rw, rh);
+    ctx.setLineDash([]);
     const numBars = BAR_WEIGHTS.length;
     const barH = rh / numBars;
     const maxBarW = rw * 0.6;
+    const barFill = hexWithAlpha(s.fillColor, s.fillOpacity);
     for (let i = 0; i < numBars; i++) {
       const barW = maxBarW * BAR_WEIGHTS[i];
       const barY = ry + i * barH;
-      ctx.fillStyle = COLOR + "60";
+      ctx.fillStyle = barFill;
       ctx.fillRect(rx, barY, barW, barH - 1);
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR;
+    ctx.fillStyle = s.strokeColor;
     ctx.fillText("Volume Profile", rx + 4, ry + 13);
     if (isSelected) {
       for (const [cx, cy] of [[x1, y1], [x2, y2]]) {
         ctx.beginPath();
         ctx.arc(cx, cy, 3.5, 0, Math.PI * 2);
-        ctx.fillStyle = COLOR;
+        ctx.fillStyle = s.strokeColor;
         ctx.fill();
       }
     }
@@ -8757,7 +9085,6 @@ var FixedRangeVP = class {
 
 // src/drawings/AnchoredVP.ts
 var HIT_TOLERANCE37 = 6;
-var COLOR2 = "#4db6ac";
 var BAR_WEIGHTS2 = [0.35, 0.55, 0.75, 1, 1, 0.75, 0.55, 0.35];
 var AnchoredVP = class {
   constructor(first) {
@@ -8766,7 +9093,7 @@ var AnchoredVP = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -8777,31 +9104,35 @@ var AnchoredVP = class {
     const ry = Math.min(y1, y2);
     const rw = Math.abs(x2 - x1);
     const rh = Math.abs(y2 - y1);
+    const s = resolveStyle("anchoredVP", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR2;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.strokeRect(rx, ry, rw, rh);
+    ctx.setLineDash([]);
     const numBars = BAR_WEIGHTS2.length;
     const barH = rh / numBars;
     const maxBarW = rw * 0.6;
+    const barFill = hexWithAlpha(s.fillColor, s.fillOpacity);
     for (let i = 0; i < numBars; i++) {
       const barW = maxBarW * BAR_WEIGHTS2[i];
       const barY = ry + i * barH;
-      ctx.fillStyle = COLOR2 + "60";
+      ctx.fillStyle = barFill;
       ctx.fillRect(rx, barY, barW, barH - 1);
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR2;
+    ctx.fillStyle = s.strokeColor;
     ctx.fillText("Anchored VP", rx + 4, ry + 13);
     ctx.beginPath();
     ctx.arc(x1, y1, isSelected ? 4 : 3, 0, Math.PI * 2);
-    ctx.fillStyle = COLOR2;
+    ctx.fillStyle = s.strokeColor;
     ctx.fill();
     if (isSelected) {
       for (const [cx, cy] of [[x1, y1], [x2, y2]]) {
         ctx.beginPath();
         ctx.arc(cx, cy, 3.5, 0, Math.PI * 2);
-        ctx.fillStyle = COLOR2;
+        ctx.fillStyle = s.strokeColor;
         ctx.fill();
       }
     }
@@ -8837,7 +9168,6 @@ var AnchoredVP = class {
 
 // src/drawings/VolumeProfile.ts
 var HIT_TOLERANCE38 = 6;
-var COLOR3 = "#26a69a";
 var BAR_WEIGHTS3 = [0.25, 0.45, 0.65, 0.85, 1, 1, 0.85, 0.65, 0.45, 0.25];
 var VolumeProfile = class {
   constructor(first) {
@@ -8846,7 +9176,7 @@ var VolumeProfile = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -8857,27 +9187,31 @@ var VolumeProfile = class {
     const ry = Math.min(y1, y2);
     const rw = Math.abs(x2 - x1);
     const rh = Math.abs(y2 - y1);
+    const s = resolveStyle("volumeProfile", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR3;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.strokeRect(rx, ry, rw, rh);
+    ctx.setLineDash([]);
     const numBars = BAR_WEIGHTS3.length;
     const barH = rh / numBars;
     const maxBarW = rw * 0.6;
+    const barFill = hexWithAlpha(s.fillColor, s.fillOpacity);
     for (let i = 0; i < numBars; i++) {
       const barW = maxBarW * BAR_WEIGHTS3[i];
       const barY = ry + i * barH;
-      ctx.fillStyle = COLOR3 + "55";
+      ctx.fillStyle = barFill;
       ctx.fillRect(rx, barY, barW, barH - 1);
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR3;
+    ctx.fillStyle = s.strokeColor;
     ctx.fillText("Volume Profile", rx + 4, ry + 13);
     if (isSelected) {
       for (const [cx, cy] of [[x1, y1], [x2, y2]]) {
         ctx.beginPath();
         ctx.arc(cx, cy, 3.5, 0, Math.PI * 2);
-        ctx.fillStyle = COLOR3;
+        ctx.fillStyle = s.strokeColor;
         ctx.fill();
       }
     }
@@ -8927,27 +9261,29 @@ var RegressionTrend = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
-    const color = "#26c6da";
+    const s = resolveStyle("regressionTrend", this.style, theme);
+    const channelColor = hexWithAlpha(s.strokeColor, 0.4);
     const lineLen = Math.hypot(x2 - x1, y2 - y1) || 1;
     const perpX = -(y2 - y1) / lineLen;
     const perpY = (x2 - x1) / lineLen;
     const offset = 20;
     ctx.save();
-    ctx.strokeStyle = color;
-    ctx.fillStyle = color;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.setLineDash([]);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.fillStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
     ctx.stroke();
+    ctx.strokeStyle = channelColor;
     ctx.setLineDash([4, 3]);
     ctx.beginPath();
     ctx.moveTo(x1 + perpX * offset, y1 + perpY * offset);
@@ -9002,11 +9338,14 @@ var Text = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     const x = scale.xToPixel(this.points[0].barIndex, viewport, chartW);
     const y = scale.yToPixel(this.points[0].price, priceRange, chartH);
+    const s = resolveStyle("text", this.style, theme);
+    const fontSize = s.fontSize ?? 13;
+    const textColor = s.textColor ?? "#f5f5f5";
     ctx.save();
-    ctx.font = "13px system-ui, sans-serif";
+    ctx.font = `${fontSize}px system-ui, sans-serif`;
     ctx.textBaseline = "top";
     const label = this.text || PLACEHOLDER;
     const isPlaceholder = !this.text;
@@ -9016,10 +9355,10 @@ var Text = class {
       ctx.lineWidth = 1;
       ctx.strokeRect(x - 2, y - 2, textW + PAD * 2, 16 + 4);
     }
-    ctx.fillStyle = isPlaceholder ? "#888" : "#f5f5f5";
+    ctx.fillStyle = isPlaceholder ? "#888" : textColor;
     ctx.fillText(label, x + PAD, y);
     if (isSelected) {
-      ctx.strokeStyle = "#f5f5f5";
+      ctx.strokeStyle = textColor;
       ctx.lineWidth = 1;
       ctx.beginPath();
       ctx.moveTo(x, y + 16);
@@ -9076,16 +9415,20 @@ var Callout = class {
     const label = this.text || "Note";
     return Math.max(60, ctx.measureText(label).width + PAD_H * 2);
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const tipX = scale.xToPixel(p1.barIndex, viewport, chartW);
     const tipY = scale.yToPixel(p1.price, priceRange, chartH);
     const boxX = scale.xToPixel(p2.barIndex, viewport, chartW);
     const boxY = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("callout", this.style, theme);
+    const fontSize = s.fontSize ?? 11;
+    const textColor = s.textColor ?? "#f5f5f5";
     ctx.save();
-    ctx.font = "11px system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.font = `${fontSize}px system-ui, sans-serif`;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     const boxW = this.getBoxW(ctx);
     const bx = boxX - boxW / 2;
     const by = boxY - BOX_H / 2;
@@ -9093,23 +9436,24 @@ var Callout = class {
     const clampedY = Math.max(by, Math.min(by + BOX_H, tipY));
     const edgeX = tipX < bx ? bx : tipX > bx + boxW ? bx + boxW : clampedX;
     const edgeY = tipY < by ? by : tipY > by + BOX_H ? by + BOX_H : clampedY;
-    ctx.strokeStyle = "#546e7a";
+    ctx.strokeStyle = s.strokeColor;
     ctx.beginPath();
     ctx.moveTo(edgeX, edgeY);
     ctx.lineTo(tipX, tipY);
     ctx.stroke();
-    ctx.fillStyle = "#546e7a";
+    ctx.setLineDash([]);
+    ctx.fillStyle = s.strokeColor;
     ctx.beginPath();
     ctx.arc(tipX, tipY, 3, 0, Math.PI * 2);
     ctx.fill();
     roundedRect2(ctx, bx, by, boxW, BOX_H, RADIUS);
-    ctx.fillStyle = "#37474f";
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fill();
-    ctx.strokeStyle = "#546e7a";
+    ctx.strokeStyle = s.strokeColor;
     ctx.stroke();
     const label = this.text || "Note";
     const isPlaceholder = !this.text;
-    ctx.fillStyle = isPlaceholder ? "#888" : "#f5f5f5";
+    ctx.fillStyle = isPlaceholder ? "#888" : textColor;
     ctx.textBaseline = "middle";
     ctx.textAlign = "center";
     ctx.fillText(label, boxX, boxY);
@@ -9163,12 +9507,15 @@ var PriceLabel = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     const x = scale.xToPixel(this.points[0].barIndex, viewport, chartW);
     const y = scale.yToPixel(this.points[0].price, priceRange, chartH);
     const price = this.points[0].price;
+    const s = resolveStyle("priceLabel", this.style, theme);
+    const fontSize = s.fontSize ?? 11;
+    const textColor = s.textColor ?? "#ffffff";
     ctx.save();
-    ctx.fillStyle = "#26a69a";
+    ctx.fillStyle = s.fillColor;
     ctx.beginPath();
     ctx.moveTo(x, y);
     ctx.lineTo(x + ARROW_W, y - BADGE_H2 / 2);
@@ -9177,19 +9524,19 @@ var PriceLabel = class {
     ctx.fill();
     const bx = x + ARROW_W;
     const by = y - BADGE_H2 / 2;
-    ctx.fillStyle = "#26a69a";
+    ctx.fillStyle = s.fillColor;
     ctx.beginPath();
     ctx.roundRect(bx, by, BADGE_W, BADGE_H2, BADGE_H2 / 2);
     ctx.fill();
     if (isSelected) {
-      ctx.strokeStyle = "#80cbc4";
-      ctx.lineWidth = 1.5;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = s.lineWidth + 0.5;
       ctx.beginPath();
       ctx.roundRect(bx - 2, by - 2, BADGE_W + 4, BADGE_H2 + 4, BADGE_H2 / 2 + 2);
       ctx.stroke();
     }
-    ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = "#ffffff";
+    ctx.font = `${fontSize}px 'Inter', system-ui, sans-serif`;
+    ctx.fillStyle = textColor;
     ctx.textBaseline = "middle";
     ctx.textAlign = "center";
     ctx.fillText(price.toFixed(pricePrecision), bx + BADGE_W / 2, y);
@@ -9223,21 +9570,24 @@ var ArrowMarker = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("arrowMarker", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ef5350";
-    ctx.fillStyle = "#ef5350";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
     ctx.stroke();
+    ctx.setLineDash([]);
     const angle = Math.atan2(y2 - y1, x2 - x1);
     const size = 10;
     ctx.beginPath();
@@ -9247,6 +9597,7 @@ var ArrowMarker = class {
     ctx.closePath();
     ctx.fill();
     if (isSelected) {
+      ctx.fillStyle = s.strokeColor;
       for (const [cx, cy] of [[x1, y1], [x2, y2]]) {
         ctx.beginPath();
         ctx.arc(cx, cy, 4, 0, Math.PI * 2);
@@ -9287,19 +9638,22 @@ var Flag = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, _isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     const x = scale.xToPixel(this.points[0].barIndex, viewport, chartW);
     const y = scale.yToPixel(this.points[0].price, priceRange, chartH);
+    const s = resolveStyle("flag", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ef5350";
-    ctx.fillStyle = "#ef5350";
-    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x, y + 20);
     ctx.lineTo(x, y - 10);
     ctx.stroke();
+    ctx.setLineDash([]);
     const flagX = x;
     const flagY = y - 10;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fillRect(flagX, flagY, 16, 10);
     ctx.font = "8px system-ui, sans-serif";
     ctx.fillStyle = "#ffffff";
@@ -9330,28 +9684,33 @@ var PriceNote = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, _isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     const x = scale.xToPixel(this.points[0].barIndex, viewport, chartW);
     const y = scale.yToPixel(this.points[0].price, priceRange, chartH);
     const price = this.points[0].price;
     const label = price.toFixed(pricePrecision);
+    const s = resolveStyle("priceNote", this.style, theme);
+    const fontSize = s.fontSize ?? 11;
+    const textColor = s.textColor ?? "#ffffff";
     ctx.save();
-    ctx.strokeStyle = "#ffa726";
-    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x - TICK_HALF, y);
     ctx.lineTo(x + TICK_HALF, y);
     ctx.stroke();
-    ctx.font = "11px 'Inter', system-ui, sans-serif";
+    ctx.setLineDash([]);
+    ctx.font = `${fontSize}px 'Inter', system-ui, sans-serif`;
     const tw = ctx.measureText(label).width;
     const badgeW = tw + BADGE_PADDING_X * 2;
     const bx = x + TICK_HALF + 2;
     const by = y - BADGE_H3 / 2;
-    ctx.fillStyle = "#ffa726";
+    ctx.fillStyle = s.fillColor;
     ctx.beginPath();
     ctx.roundRect(bx, by, badgeW, BADGE_H3, 3);
     ctx.fill();
-    ctx.fillStyle = "#ffffff";
+    ctx.fillStyle = textColor;
     ctx.textBaseline = "middle";
     ctx.textAlign = "center";
     ctx.fillText(label, bx + badgeW / 2, y);
@@ -9390,42 +9749,45 @@ var AnchoredNote = class {
     const label = this.text || "Note";
     return Math.max(50, ctx.measureText(label).width + PAD_H2 * 2);
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
+    const s = resolveStyle("anchoredNote", this.style, theme);
+    const fontSize = s.fontSize ?? 11;
+    const textColor = s.textColor ?? "#f5f5f5";
     ctx.save();
-    ctx.font = "11px system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.font = `${fontSize}px system-ui, sans-serif`;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     const badgeW = this.getBadgeW(ctx);
     const bx = x2 - badgeW / 2;
     const by = y2 - BADGE_H4 / 2;
-    ctx.strokeStyle = "#42a5f5";
+    ctx.strokeStyle = s.strokeColor;
     ctx.setLineDash([4, 3]);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
     ctx.stroke();
     ctx.setLineDash([]);
-    ctx.fillStyle = "#42a5f5";
+    ctx.fillStyle = s.strokeColor;
     ctx.beginPath();
     ctx.arc(x1, y1, 3, 0, Math.PI * 2);
     ctx.fill();
-    ctx.fillStyle = "#37474f";
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.beginPath();
     ctx.roundRect(bx, by, badgeW, BADGE_H4, 4);
     ctx.fill();
-    ctx.strokeStyle = "#42a5f5";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.beginPath();
     ctx.roundRect(bx, by, badgeW, BADGE_H4, 4);
     ctx.stroke();
     const label = this.text || "Note";
     const isPlaceholder = !this.text;
-    ctx.fillStyle = isPlaceholder ? "#888" : "#f5f5f5";
+    ctx.fillStyle = isPlaceholder ? "#888" : textColor;
     ctx.textBaseline = "middle";
     ctx.textAlign = "center";
     ctx.fillText(label, x2, y2);
@@ -9473,17 +9835,20 @@ var ArrowUp = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, _isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     const x = scale.xToPixel(this.points[0].barIndex, viewport, chartW);
     const y = scale.yToPixel(this.points[0].price, priceRange, chartH);
+    const s = resolveStyle("arrowUp", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#26a69a";
-    ctx.fillStyle = "#26a69a";
-    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x, y + 10);
     ctx.lineTo(x, y - 2);
     ctx.stroke();
+    ctx.setLineDash([]);
     const tipX = x;
     const tipY = y - 10;
     const halfBase = 6;
@@ -9513,17 +9878,20 @@ var ArrowDown = class {
     this.points = [point];
     this.complete = true;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, _isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     const x = scale.xToPixel(this.points[0].barIndex, viewport, chartW);
     const y = scale.yToPixel(this.points[0].price, priceRange, chartH);
+    const s = resolveStyle("arrowDown", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ef5350";
-    ctx.fillStyle = "#ef5350";
-    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x, y - 10);
     ctx.lineTo(x, y + 2);
     ctx.stroke();
+    ctx.setLineDash([]);
     const tipX = x;
     const tipY = y + 10;
     const halfBase = 6;
@@ -9554,7 +9922,6 @@ function pointToSegmentDist22(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR4 = "#ff7043";
 var HeadShoulders = class {
   constructor(first) {
     this.type = "headShoulders";
@@ -9563,15 +9930,17 @@ var HeadShoulders = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["LS", "H", "RS", "L1", "L2"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("headShoulders", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR4;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     const zigzagOrder = [0, 3, 1, 4, 2];
     const availableZigzag = zigzagOrder.filter((i) => i < n);
     if (availableZigzag.length >= 2) {
@@ -9582,6 +9951,7 @@ var HeadShoulders = class {
       }
       ctx.stroke();
     }
+    ctx.setLineDash([]);
     if (this.complete && n === 5) {
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
@@ -9590,14 +9960,14 @@ var HeadShoulders = class {
       ctx.lineTo(px[4], py[4]);
       ctx.lineTo(px[2], py[2]);
       ctx.closePath();
-      ctx.fillStyle = COLOR4 + "10";
+      ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
       ctx.fill();
     }
     if (n >= 5) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR4;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[3], py[3]);
       ctx.lineTo(px[4], py[4]);
@@ -9605,7 +9975,7 @@ var HeadShoulders = class {
       ctx.restore();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR4;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -9651,7 +10021,6 @@ function pointToSegmentDist23(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR5 = "#ffa726";
 var TrianglePattern = class {
   constructor(first) {
     this.type = "trianglePattern";
@@ -9660,26 +10029,29 @@ var TrianglePattern = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["1", "2", "3", "4", "5"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("trianglePattern", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR5;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (n >= 3) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR5;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
       ctx.lineTo(px[2], py[2]);
@@ -9690,8 +10062,8 @@ var TrianglePattern = class {
     if (n >= 4) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR5;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[1], py[1]);
       ctx.lineTo(px[3], py[3]);
@@ -9699,7 +10071,7 @@ var TrianglePattern = class {
       ctx.restore();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR5;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -9743,7 +10115,6 @@ function pointToSegmentDist24(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR6 = "#66bb6a";
 var ThreeDrives = class {
   constructor(first) {
     this.type = "threeDrives";
@@ -9752,21 +10123,24 @@ var ThreeDrives = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["O", "A", "B", "C", "D", "E", "F"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("threeDrives", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR6;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (this.complete && n === 7) {
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
@@ -9774,11 +10148,11 @@ var ThreeDrives = class {
         ctx.lineTo(px[i], py[i]);
       }
       ctx.closePath();
-      ctx.fillStyle = COLOR6 + "18";
+      ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
       ctx.fill();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR6;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -9819,7 +10193,6 @@ function pointToSegmentDist25(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR7 = "#42a5f5";
 var AbcdPattern = class {
   constructor(first) {
     this.type = "abcdPattern";
@@ -9828,26 +10201,29 @@ var AbcdPattern = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["A", "B", "C", "D"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("abcdPattern", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR7;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (n >= 4) {
       ctx.save();
       ctx.setLineDash([3, 4]);
-      ctx.strokeStyle = COLOR7;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
       ctx.lineTo(px[3], py[3]);
@@ -9855,7 +10231,7 @@ var AbcdPattern = class {
       ctx.restore();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR7;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -9897,7 +10273,6 @@ function pointToSegmentDist26(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR8 = "#ab47bc";
 var CypherPattern = class {
   constructor(first) {
     this.type = "cypherPattern";
@@ -9906,21 +10281,24 @@ var CypherPattern = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["X", "A", "B", "C", "D"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("cypherPattern", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR8;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (this.complete && n === 5) {
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
@@ -9928,11 +10306,11 @@ var CypherPattern = class {
         ctx.lineTo(px[i], py[i]);
       }
       ctx.closePath();
-      ctx.fillStyle = COLOR8 + "12";
+      ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
       ctx.fill();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR8;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -9973,7 +10351,6 @@ function pointToSegmentDist27(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR9 = "#ec407a";
 var ButterflyPattern = class {
   constructor(first) {
     this.type = "butterflyPattern";
@@ -9982,26 +10359,29 @@ var ButterflyPattern = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["X", "A", "B", "C", "D"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("butterflyPattern", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR9;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (n >= 5) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR9;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
       ctx.lineTo(px[4], py[4]);
@@ -10009,7 +10389,7 @@ var ButterflyPattern = class {
       ctx.restore();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR9;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -10051,7 +10431,6 @@ function pointToSegmentDist28(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR10 = "#26a69a";
 var BatPattern = class {
   constructor(first) {
     this.type = "batPattern";
@@ -10060,26 +10439,29 @@ var BatPattern = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["X", "A", "B", "C", "D"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("batPattern", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR10;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (n >= 5) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR10;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
       ctx.lineTo(px[4], py[4]);
@@ -10087,7 +10469,7 @@ var BatPattern = class {
       ctx.restore();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR10;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -10129,7 +10511,6 @@ function pointToSegmentDist29(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR11 = "#7986cb";
 var GartleyPattern = class {
   constructor(first) {
     this.type = "gartleyPattern";
@@ -10138,26 +10519,29 @@ var GartleyPattern = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["X", "A", "B", "C", "D"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("gartleyPattern", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR11;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (n >= 5) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR11;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
       ctx.lineTo(px[4], py[4]);
@@ -10165,7 +10549,7 @@ var GartleyPattern = class {
       ctx.restore();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR11;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -10207,7 +10591,6 @@ function pointToSegmentDist30(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR12 = "#ef5350";
 var CrabPattern = class {
   constructor(first) {
     this.type = "crabPattern";
@@ -10216,26 +10599,29 @@ var CrabPattern = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["X", "A", "B", "C", "D"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("crabPattern", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR12;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (n >= 5) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR12;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
       ctx.lineTo(px[4], py[4]);
@@ -10243,7 +10629,7 @@ var CrabPattern = class {
       ctx.restore();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR12;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -10285,7 +10671,6 @@ function pointToSegmentDist31(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR13 = "#78909c";
 var SharkPattern = class {
   constructor(first) {
     this.type = "sharkPattern";
@@ -10294,26 +10679,29 @@ var SharkPattern = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const labels = ["X", "A", "B", "C", "D"];
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("sharkPattern", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR13;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) {
       ctx.lineTo(px[i], py[i]);
     }
     ctx.stroke();
+    ctx.setLineDash([]);
     if (n >= 5) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR13;
-      ctx.lineWidth = isSelected ? 1.5 : 1;
+      ctx.strokeStyle = s.strokeColor;
+      ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
       ctx.lineTo(px[4], py[4]);
@@ -10321,7 +10709,7 @@ var SharkPattern = class {
       ctx.restore();
     }
     ctx.font = "11px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR13;
+    ctx.fillStyle = s.strokeColor;
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -10363,7 +10751,6 @@ function pointToSegmentDist32(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR14 = "#29b6f6";
 var LABELS = ["0", "1", "2", "3", "4", "5"];
 var ElliottImpulse = class {
   constructor(first) {
@@ -10373,28 +10760,31 @@ var ElliottImpulse = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("elliottImpulse", this.style, theme);
     ctx.save();
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     for (let i = 0; i < n - 1; i++) {
       const isImpulse = i % 2 === 0;
-      ctx.strokeStyle = isImpulse ? COLOR14 : COLOR14 + "aa";
+      ctx.strokeStyle = isImpulse ? s.strokeColor : hexWithAlpha(s.strokeColor, 0.67);
       ctx.beginPath();
       ctx.moveTo(px[i], py[i]);
       ctx.lineTo(px[i + 1], py[i + 1]);
       ctx.stroke();
     }
+    ctx.setLineDash([]);
     ctx.font = "11px 'Inter', system-ui, sans-serif";
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = COLOR14;
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
-      ctx.fillStyle = COLOR14;
+      ctx.fillStyle = s.strokeColor;
       ctx.fillText(LABELS[i] ?? String(i), px[i] + 5, py[i] - 5);
     }
     ctx.restore();
@@ -10428,7 +10818,6 @@ function pointToSegmentDist33(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR15 = "#ff8a65";
 var LABELS2 = ["0", "A", "B", "C"];
 var ElliottCorrective = class {
   constructor(first) {
@@ -10438,24 +10827,27 @@ var ElliottCorrective = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
+    const s = resolveStyle("elliottCorrective", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR15;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < px.length; i++) ctx.lineTo(px[i], py[i]);
     ctx.stroke();
+    ctx.setLineDash([]);
     ctx.font = "11px 'Inter', system-ui, sans-serif";
     for (let i = 0; i < px.length; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = COLOR15;
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
-      ctx.fillStyle = COLOR15;
+      ctx.fillStyle = s.strokeColor;
       ctx.fillText(LABELS2[i] ?? String(i), px[i] + 5, py[i] - 5);
     }
     ctx.restore();
@@ -10489,7 +10881,6 @@ function pointToSegmentDist34(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR16 = "#aed581";
 var LABELS3 = ["A", "B", "C", "D", "E", "end"];
 var ElliottTriangle = class {
   constructor(first) {
@@ -10499,23 +10890,26 @@ var ElliottTriangle = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
     const n = px.length;
+    const s = resolveStyle("elliottTriangle", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR16;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < n; i++) ctx.lineTo(px[i], py[i]);
     ctx.stroke();
+    ctx.setLineDash([]);
     if (n >= 3) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR16 + "aa";
-      ctx.lineWidth = 1;
+      ctx.strokeStyle = hexWithAlpha(s.strokeColor, 0.67);
+      ctx.lineWidth = s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[0], py[0]);
       if (n > 2) ctx.lineTo(px[2], py[2]);
@@ -10526,8 +10920,8 @@ var ElliottTriangle = class {
     if (n >= 4) {
       ctx.save();
       ctx.setLineDash([5, 4]);
-      ctx.strokeStyle = COLOR16 + "aa";
-      ctx.lineWidth = 1;
+      ctx.strokeStyle = hexWithAlpha(s.strokeColor, 0.67);
+      ctx.lineWidth = s.lineWidth;
       ctx.beginPath();
       ctx.moveTo(px[1], py[1]);
       ctx.lineTo(px[3], py[3]);
@@ -10538,9 +10932,9 @@ var ElliottTriangle = class {
     for (let i = 0; i < n; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = COLOR16;
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
-      ctx.fillStyle = COLOR16;
+      ctx.fillStyle = s.strokeColor;
       ctx.fillText(LABELS3[i] ?? String(i), px[i] + 5, py[i] - 5);
     }
     ctx.restore();
@@ -10574,7 +10968,6 @@ function pointToSegmentDist35(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR17 = "#f48fb1";
 var LABELS4 = ["W", "X", "Y", "X2", "Z", "X3", "end"];
 var ElliottCombination = class {
   constructor(first) {
@@ -10584,24 +10977,27 @@ var ElliottCombination = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
+    const s = resolveStyle("elliottCombination", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR17;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < px.length; i++) ctx.lineTo(px[i], py[i]);
     ctx.stroke();
+    ctx.setLineDash([]);
     ctx.font = "11px 'Inter', system-ui, sans-serif";
     for (let i = 0; i < px.length; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = COLOR17;
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
-      ctx.fillStyle = COLOR17;
+      ctx.fillStyle = s.strokeColor;
       ctx.fillText(LABELS4[i] ?? String(i), px[i] + 5, py[i] - 5);
     }
     ctx.restore();
@@ -10635,7 +11031,6 @@ function pointToSegmentDist36(px, py, x1, y1, x2, y2) {
   const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
-var COLOR18 = "#80cbc4";
 var LABELS5 = ["W", "X", "Y", "end"];
 var ElliottWxy = class {
   constructor(first) {
@@ -10645,24 +11040,27 @@ var ElliottWxy = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const px = this.points.map((p) => scale.xToPixel(p.barIndex, viewport, chartW));
     const py = this.points.map((p) => scale.yToPixel(p.price, priceRange, chartH));
+    const s = resolveStyle("elliottWxy", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = COLOR18;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(px[0], py[0]);
     for (let i = 1; i < px.length; i++) ctx.lineTo(px[i], py[i]);
     ctx.stroke();
+    ctx.setLineDash([]);
     ctx.font = "11px 'Inter', system-ui, sans-serif";
     for (let i = 0; i < px.length; i++) {
       ctx.beginPath();
       ctx.arc(px[i], py[i], isSelected ? 4 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = COLOR18;
+      ctx.fillStyle = s.strokeColor;
       ctx.fill();
-      ctx.fillStyle = COLOR18;
+      ctx.fillStyle = s.strokeColor;
       ctx.fillText(LABELS5[i] ?? String(i), px[i] + 5, py[i] - 5);
     }
     ctx.restore();
@@ -10704,16 +11102,17 @@ var Brush = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const pixelPts = this.points.map((p) => ({
       x: scale.xToPixel(p.barIndex, viewport, chartW),
       y: scale.yToPixel(p.price, priceRange, chartH)
     }));
     const solidCount = this.complete ? pixelPts.length : pixelPts.length - 1;
+    const s = resolveStyle("brush", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ff5722";
-    ctx.lineWidth = isSelected ? 2.5 : 2;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     if (solidCount >= 2) {
@@ -10781,16 +11180,17 @@ var Highlighter = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const pixelPts = this.points.map((p) => ({
       x: scale.xToPixel(p.barIndex, viewport, chartW),
       y: scale.yToPixel(p.price, priceRange, chartH)
     }));
     const solidCount = this.complete ? pixelPts.length : pixelPts.length - 1;
+    const s = resolveStyle("highlighter", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ffeb3b66";
-    ctx.lineWidth = 12;
+    ctx.strokeStyle = hexWithAlpha(s.strokeColor, s.fillOpacity);
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     if (solidCount >= 2) {
@@ -10850,7 +11250,7 @@ var SineLine = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -10860,9 +11260,11 @@ var SineLine = class {
     const period = x2 - x1;
     const amplitude = Math.abs(y2 - y1) / 2;
     const midY = (y1 + y2) / 2;
+    const s = resolveStyle("sineLine", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = "#ce93d8";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     if (Math.abs(period) < 1) {
       ctx.moveTo(x1, y1);
@@ -10879,7 +11281,8 @@ var SineLine = class {
       ctx.lineTo(x2, midY + amplitude * Math.sin(2 * Math.PI));
     }
     ctx.stroke();
-    ctx.fillStyle = "#ce93d8";
+    ctx.setLineDash([]);
+    ctx.fillStyle = s.strokeColor;
     for (const [x, y] of [[x1, y1], [x2, y2]]) {
       ctx.beginPath();
       ctx.arc(x, y, isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -10945,17 +11348,17 @@ var CyclicLines = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const cycleLen = Math.abs(p2.barIndex - p1.barIndex);
     if (cycleLen === 0) return;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
-    const color = "#7986cb";
+    const s = resolveStyle("cyclicLines", this.style, theme);
     ctx.save();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.setLineDash([4, 3]);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     for (let i = 0; i <= 8; i++) {
       const barIdx = p1.barIndex + cycleLen * i;
       const x = scale.xToPixel(barIdx, viewport, chartW);
@@ -10967,7 +11370,7 @@ var CyclicLines = class {
     }
     ctx.setLineDash([]);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
-    ctx.fillStyle = color;
+    ctx.fillStyle = s.strokeColor;
     ctx.beginPath();
     ctx.arc(x1, chartH / 2, isSelected ? 4 : 3, 0, Math.PI * 2);
     ctx.fill();
@@ -11014,16 +11417,17 @@ var TimeCycles = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const cycleLen = Math.abs(p2.barIndex - p1.barIndex);
     if (cycleLen === 0) return;
-    const color = "#80cbc4";
+    const s = resolveStyle("timeCycles", this.style, theme);
     const maxLines = 6;
+    const bandFill = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     const lineXs = [];
     for (let i = 0; i <= maxLines; i++) {
       const barIdx = p1.barIndex + cycleLen * i;
@@ -11033,23 +11437,24 @@ var TimeCycles = class {
     }
     for (let i = 0; i + 1 < lineXs.length; i++) {
       if (i % 2 === 0) {
-        ctx.fillStyle = "#80cbc410";
+        ctx.fillStyle = bandFill;
         ctx.fillRect(lineXs[i], 0, lineXs[i + 1] - lineXs[i], chartH);
       }
     }
-    ctx.strokeStyle = color;
-    ctx.setLineDash([]);
+    ctx.strokeStyle = s.strokeColor;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     for (let i = 0; i < lineXs.length; i++) {
       ctx.beginPath();
       ctx.moveTo(lineXs[i], 0);
       ctx.lineTo(lineXs[i], chartH);
       ctx.stroke();
-      ctx.fillStyle = color;
+      ctx.fillStyle = s.strokeColor;
       ctx.fillText(String(i + 1), lineXs[i] + 3, 14);
     }
+    ctx.setLineDash([]);
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
-    ctx.fillStyle = color;
+    ctx.fillStyle = s.strokeColor;
     ctx.beginPath();
     ctx.arc(x1, chartH / 2, isSelected ? 4 : 3, 0, Math.PI * 2);
     ctx.fill();
@@ -11108,14 +11513,14 @@ var Projection = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const x2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const y2 = scale.yToPixel(p2.price, priceRange, chartH);
-    const color = "#78909c";
+    const s = resolveStyle("projection", this.style, theme);
     const dxLine = x2 - x1;
     let xEnd;
     let yEnd;
@@ -11128,15 +11533,15 @@ var Projection = class {
       yEnd = y2 + slope * (chartW - x2);
     }
     ctx.save();
-    ctx.strokeStyle = color;
-    ctx.fillStyle = color;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
+    ctx.strokeStyle = s.strokeColor;
+    ctx.fillStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
     ctx.setLineDash([]);
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
     ctx.stroke();
-    ctx.setLineDash([6, 3]);
+    applyLineStyle(ctx, s.lineStyle === "solid" ? "dashed" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(x2, y2);
     ctx.lineTo(xEnd, yEnd);
@@ -11202,7 +11607,7 @@ var PriceProjection = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, pricePrecision = 2, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -11217,13 +11622,14 @@ var PriceProjection = class {
     const h = botY - topY;
     const midX = left + w / 2;
     const midPrice = (p1.price + p2.price) / 2;
-    const color = "#ef9a9a";
+    const s = resolveStyle("priceProjection", this.style, theme);
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.fillStyle = "#ef9a9a18";
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fillRect(left, topY, w, h);
-    ctx.strokeStyle = color;
+    ctx.strokeStyle = s.strokeColor;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.beginPath();
     ctx.moveTo(left, y1);
     ctx.lineTo(right, y1);
@@ -11237,11 +11643,12 @@ var PriceProjection = class {
     ctx.moveTo(left, y2);
     ctx.lineTo(right, y2);
     ctx.stroke();
-    ctx.fillStyle = color;
+    ctx.setLineDash([]);
+    ctx.fillStyle = s.strokeColor;
     ctx.fillText(p1.price.toFixed(pricePrecision), right + 4, y1 + 4);
     ctx.fillText(midPrice.toFixed(pricePrecision), right + 4, yMid + 4);
     ctx.fillText(p2.price.toFixed(pricePrecision), right + 4, y2 + 4);
-    ctx.fillStyle = color;
+    ctx.fillStyle = s.strokeColor;
     ctx.beginPath();
     ctx.moveTo(midX, topY);
     ctx.lineTo(midX, botY);
@@ -11280,7 +11687,6 @@ var PriceProjection = class {
 
 // src/drawings/GhostFeed.ts
 var HIT_TOLERANCE68 = 6;
-var COLOR19 = "#90a4ae";
 var GhostFeed = class {
   constructor(first) {
     this.type = "ghostFeed";
@@ -11288,7 +11694,7 @@ var GhostFeed = class {
     this.points = [first, { ...first }];
     this.complete = false;
   }
-  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
@@ -11299,19 +11705,20 @@ var GhostFeed = class {
     const ry = Math.min(y1, y2);
     const rw = Math.abs(x2 - x1);
     const rh = Math.abs(y2 - y1);
+    const s = resolveStyle("ghostFeed", this.style, theme);
     ctx.save();
-    ctx.fillStyle = COLOR19 + "08";
+    ctx.fillStyle = hexWithAlpha(s.fillColor, s.fillOpacity);
     ctx.fillRect(rx, ry, rw, rh);
-    ctx.strokeStyle = COLOR19;
-    ctx.lineWidth = isSelected ? 1.5 : 1;
-    ctx.setLineDash([6, 4]);
+    ctx.strokeStyle = s.strokeColor;
+    ctx.lineWidth = isSelected ? s.lineWidth + 0.5 : s.lineWidth;
+    applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, ctx.lineWidth);
     ctx.strokeRect(rx, ry, rw, rh);
     ctx.setLineDash([]);
     ctx.save();
     ctx.beginPath();
     ctx.rect(rx, ry, rw, rh);
     ctx.clip();
-    ctx.strokeStyle = COLOR19 + "30";
+    ctx.strokeStyle = hexWithAlpha(s.strokeColor, 0.19);
     ctx.lineWidth = 1;
     ctx.setLineDash([4, 4]);
     const step = 20;
@@ -11329,7 +11736,7 @@ var GhostFeed = class {
     ctx.setLineDash([]);
     ctx.restore();
     ctx.font = "12px 'Inter', system-ui, sans-serif";
-    ctx.fillStyle = COLOR19;
+    ctx.fillStyle = s.strokeColor;
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
     ctx.fillText("Ghost Feed", rx + rw / 2, ry + rh / 2);
@@ -11339,7 +11746,7 @@ var GhostFeed = class {
       for (const [cx, cy] of [[x1, y1], [x2, y2]]) {
         ctx.beginPath();
         ctx.arc(cx, cy, 3.5, 0, Math.PI * 2);
-        ctx.fillStyle = COLOR19;
+        ctx.fillStyle = s.strokeColor;
         ctx.fill();
       }
     }
@@ -11397,6 +11804,8 @@ var DrawingManager = class {
      * original point's timestamp.
      */
     this.onPointsMutated = null;
+    /** Called whenever the selected drawing changes (including to/from null). */
+    this.onSelectionChange = null;
     /** Set to true by ChartEngine while the text input is focused — prevents Delete/Backspace from deleting the drawing. */
     this.editingText = false;
     // Drag state (move whole drawing)
@@ -11407,6 +11816,12 @@ var DrawingManager = class {
     this.resizeDrawing = null;
     this.resizePointIndex = -1;
   }
+  /** Centralizes selection mutation + change notification. */
+  setSelected(drawing) {
+    if (this.selectedDrawing === drawing) return;
+    this.selectedDrawing = drawing;
+    this.onSelectionChange?.(drawing);
+  }
   /** Called by ChartEngine to be notified when a drawing is finished. */
   setOnComplete(cb) {
     this.onCompleteCallback = cb;
@@ -11439,7 +11854,7 @@ var DrawingManager = class {
       this.drawings.push(this.activeDrawing);
       if (this.activeDrawing.complete) {
         const completed = this.activeDrawing;
-        this.selectedDrawing = completed;
+        this.setSelected(completed);
         this.activeDrawing = null;
         this.activeTool = null;
         this.onCompleteCallback?.();
@@ -11469,7 +11884,7 @@ var DrawingManager = class {
       }
       this.activeDrawing.complete = true;
       const completed = this.activeDrawing;
-      this.selectedDrawing = completed;
+      this.setSelected(completed);
       this.activeDrawing = null;
       this.state = "idle";
       this.activeTool = null;
@@ -11524,7 +11939,7 @@ var DrawingManager = class {
       return;
     }
     this.activeDrawing.complete = true;
-    this.selectedDrawing = this.activeDrawing;
+    this.setSelected(this.activeDrawing);
     this.activeDrawing = null;
     this.state = "idle";
     this.activeTool = null;
@@ -11598,11 +12013,35 @@ var DrawingManager = class {
     return null;
   }
   selectDrawing(drawing) {
-    this.selectedDrawing = drawing;
+    this.setSelected(drawing);
   }
   getSelectedDrawing() {
     return this.selectedDrawing;
   }
+  /** Returns a drawing by id, or null if not found. */
+  getDrawingById(id) {
+    return this.drawings.find((d) => d.id === id) ?? null;
+  }
+  /**
+   * Shallow-merge a style patch into the drawing's `style` field. Triggers
+   * `onDrawingsChange` so the chart re-renders. Returns the updated drawing,
+   * or null if no drawing matches `id`.
+   */
+  updateDrawingStyle(id, patch) {
+    const drawing = this.getDrawingById(id);
+    if (!drawing) return null;
+    drawing.style = { ...drawing.style ?? {}, ...patch };
+    const patchLevels = patch.levels;
+    const existingLevels = drawing.style.levels;
+    if (patchLevels && existingLevels) {
+      drawing.style.levels = {
+        ...existingLevels,
+        ...patchLevels
+      };
+    }
+    this.notifyChange();
+    return drawing;
+  }
   // ── Keyboard shortcuts ────────────────────────────────────────────────────
   onKeyDown(key) {
     if (key === "Escape") {
@@ -11612,7 +12051,7 @@ var DrawingManager = class {
         this.state = "idle";
       }
       this.activeTool = null;
-      this.selectedDrawing = null;
+      this.setSelected(null);
       return true;
     }
     if ((key === "Delete" || key === "Backspace") && this.selectedDrawing && !this.editingText) {
@@ -11629,7 +12068,7 @@ var DrawingManager = class {
     if (!this.selectedDrawing) return;
     this.snapshot();
     this.drawings = this.drawings.filter((d) => d !== this.selectedDrawing);
-    this.selectedDrawing = null;
+    this.setSelected(null);
     this.notifyChange();
   }
   undo() {
@@ -11637,7 +12076,7 @@ var DrawingManager = class {
     if (prev !== void 0) {
       this.redoStack.push(this.cloneDrawings(this.drawings));
       this.drawings = prev;
-      this.selectedDrawing = null;
+      this.setSelected(null);
       this.notifyChange();
     }
   }
@@ -11646,7 +12085,7 @@ var DrawingManager = class {
     if (next !== void 0) {
       this.history.push(this.cloneDrawings(this.drawings));
       this.drawings = next;
-      this.selectedDrawing = null;
+      this.setSelected(null);
       this.notifyChange();
     }
   }
@@ -11654,7 +12093,7 @@ var DrawingManager = class {
     if (this.drawings.length === 0) return;
     this.snapshot();
     for (const d of this.drawings) d.visible = false;
-    this.selectedDrawing = null;
+    this.setSelected(null);
     this.notifyChange();
   }
   showAll() {
@@ -11667,7 +12106,7 @@ var DrawingManager = class {
     if (this.drawings.length === 0) return;
     this.snapshot();
     for (const d of this.drawings) d.locked = true;
-    this.selectedDrawing = null;
+    this.setSelected(null);
     this.notifyChange();
   }
   unlockAll() {
@@ -11677,7 +12116,7 @@ var DrawingManager = class {
     this.notifyChange();
   }
   // ── Rendering ─────────────────────────────────────────────────────────────
-  render(ctx, scale, viewport, priceRange, chartW, chartH, pricePrecision = 2) {
+  render(ctx, scale, viewport, priceRange, chartW, chartH, pricePrecision = 2, theme) {
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     if (this.drawings.length === 0) return;
     const dpr = window.devicePixelRatio || 1;
@@ -11685,7 +12124,7 @@ var DrawingManager = class {
     ctx.scale(dpr, dpr);
     for (const drawing of this.drawings) {
       if (drawing.visible === false) continue;
-      drawing.render(ctx, scale, viewport, priceRange, chartW, chartH, drawing === this.selectedDrawing, pricePrecision);
+      drawing.render(ctx, scale, viewport, priceRange, chartW, chartH, drawing === this.selectedDrawing, pricePrecision, theme);
     }
     ctx.restore();
   }
@@ -11701,7 +12140,8 @@ var DrawingManager = class {
       complete: d.complete,
       ...d.visible !== void 0 && { visible: d.visible },
       ...d.locked !== void 0 && { locked: d.locked },
-      ...d.text !== void 0 && { text: d.text }
+      ...d.text !== void 0 && { text: d.text },
+      ...d.style !== void 0 && { style: { ...d.style } }
     }));
   }
   /** Restores drawings from a serialized snapshot, replacing current drawings. */
@@ -11714,9 +12154,10 @@ var DrawingManager = class {
       if (sd.visible !== void 0) drawing.visible = sd.visible;
       if (sd.locked !== void 0) drawing.locked = sd.locked;
       if (sd.text !== void 0) drawing.text = sd.text;
+      if (sd.style !== void 0) drawing.style = { ...sd.style };
       return drawing;
     });
-    this.selectedDrawing = null;
+    this.setSelected(null);
     this.activeDrawing = null;
     this.history = [this.drawings.map((d) => ({ ...d, points: d.points.map((p) => ({ ...p })) }))];
     this.redoStack = [];
@@ -11726,7 +12167,7 @@ var DrawingManager = class {
     if (this.drawings.length === 0) return;
     this.snapshot();
     this.drawings = [];
-    this.selectedDrawing = null;
+    this.setSelected(null);
     this.activeDrawing = null;
     this.notifyChange();
   }
@@ -12856,30 +13297,48 @@ var ChartSettingsDialog = class {
     }
     this.content.appendChild(this.makeSectionHeader("Colors"));
     this.content.appendChild(this.buildColorRows());
+    this.content.appendChild(this.makeSectionHeader("Chart elements"));
+    this.content.appendChild(
+      this.makeHorizontalSettingRow(
+        "Price-axis countdown",
+        "Show the candle close countdown on the right price axis.",
+        this.makeBooleanToggle(this.current.showPriceAxisCountdown, (v) => {
+          this.current.showPriceAxisCountdown = v;
+          this.emit();
+        })
+      )
+    );
   }
-  makeThemeToggle() {
-    let isLight = this.current.theme === "light";
+  /**
+   * Reusable on/off toggle switch (track + animated thumb). Optional left/right
+   * side-labels animate their weight and color as the switch flips.
+   */
+  makeBooleanToggle(initial, onChange, sideLabels) {
+    let value = initial;
     const wrap = document.createElement("div");
     Object.assign(wrap.style, {
       display: "flex",
       alignItems: "center",
       gap: "8px"
     });
-    const darkLbl = document.createElement("span");
-    darkLbl.textContent = "Dark";
-    const lightLbl = document.createElement("span");
-    lightLbl.textContent = "Light";
+    const offLbl = sideLabels ? document.createElement("span") : null;
+    const onLbl = sideLabels ? document.createElement("span") : null;
+    if (offLbl && onLbl && sideLabels) {
+      offLbl.textContent = sideLabels.off;
+      onLbl.textContent = sideLabels.on;
+    }
     const updateLabels = () => {
-      Object.assign(darkLbl.style, {
-        color: isLight ? this.theme.axisText : this.theme.tooltip.text,
-        fontWeight: isLight ? "400" : "500",
+      if (!offLbl || !onLbl) return;
+      Object.assign(offLbl.style, {
+        color: value ? this.theme.axisText : this.theme.tooltip.text,
+        fontWeight: value ? "400" : "500",
         fontSize: "11px",
         cursor: "pointer",
         userSelect: "none"
       });
-      Object.assign(lightLbl.style, {
-        color: isLight ? this.theme.tooltip.text : this.theme.axisText,
-        fontWeight: isLight ? "500" : "400",
+      Object.assign(onLbl.style, {
+        color: value ? this.theme.tooltip.text : this.theme.axisText,
+        fontWeight: value ? "500" : "400",
         fontSize: "11px",
         cursor: "pointer",
         userSelect: "none"
@@ -12902,7 +13361,7 @@ var ChartSettingsDialog = class {
     Object.assign(thumb.style, {
       position: "absolute",
       top: "2px",
-      left: isLight ? "18px" : "2px",
+      left: value ? "18px" : "2px",
       width: "14px",
       height: "14px",
       borderRadius: "50%",
@@ -12912,24 +13371,39 @@ var ChartSettingsDialog = class {
     });
     track.appendChild(thumb);
     const doToggle = () => {
-      isLight = !isLight;
-      thumb.style.left = isLight ? "18px" : "2px";
-      this.current.theme = isLight ? "light" : "dark";
+      value = !value;
+      thumb.style.left = value ? "18px" : "2px";
       updateLabels();
-      this.emit();
-      this.renderContent();
+      onChange(value);
     };
     track.addEventListener("click", doToggle);
-    darkLbl.addEventListener("click", () => {
-      if (isLight) doToggle();
-    });
-    lightLbl.addEventListener("click", () => {
-      if (!isLight) doToggle();
-    });
+    if (offLbl && onLbl) {
+      offLbl.addEventListener("click", () => {
+        if (value) doToggle();
+      });
+      onLbl.addEventListener("click", () => {
+        if (!value) doToggle();
+      });
+    }
     updateLabels();
-    wrap.append(darkLbl, track, lightLbl);
+    if (offLbl && onLbl) {
+      wrap.append(offLbl, track, onLbl);
+    } else {
+      wrap.append(track);
+    }
     return wrap;
   }
+  makeThemeToggle() {
+    return this.makeBooleanToggle(
+      this.current.theme === "light",
+      (isLight) => {
+        this.current.theme = isLight ? "light" : "dark";
+        this.emit();
+        this.renderContent();
+      },
+      { off: "Dark", on: "Light" }
+    );
+  }
   /**
    * Renders all canvas colors as a label → swatch(es) grid.
    * All swatch columns are pixel-aligned regardless of label length.
@@ -13101,6 +13575,16 @@ var ChartSettingsDialog = class {
         )
       )
     );
+    this.content.appendChild(
+      this.makeHorizontalSettingRow(
+        "Always show SL/TP",
+        "Keep stop-loss and take-profit lines visible without hovering.",
+        this.makeBooleanToggle(this.current.showTradeLevelsAlways, (v) => {
+          this.current.showTradeLevelsAlways = v;
+          this.emit();
+        })
+      )
+    );
   }
   // ── Private – helpers ─────────────────────────────────────────────────────
   makeSectionHeader(label, first = false) {
@@ -13155,6 +13639,54 @@ var ChartSettingsDialog = class {
     row.append(textGroup, control);
     return row;
   }
+  /**
+   * Like makeVerticalSettingRow, but the control is placed on the right side
+   * on the same line as the label, vertically centered.
+   */
+  makeHorizontalSettingRow(label, desc, control) {
+    const row = document.createElement("div");
+    Object.assign(row.style, {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "12px",
+      padding: "14px 0",
+      borderBottom: `1px solid ${this.theme.axisBorder}`
+    });
+    const textGroup = document.createElement("div");
+    Object.assign(textGroup.style, {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0px",
+      flex: "1",
+      minWidth: "0"
+    });
+    const labelEl = document.createElement("span");
+    labelEl.textContent = label;
+    Object.assign(labelEl.style, {
+      color: this.theme.tooltip.text,
+      fontSize: "12px",
+      fontWeight: "500"
+    });
+    const descEl = document.createElement("span");
+    descEl.textContent = desc;
+    Object.assign(descEl.style, {
+      color: this.theme.axisText,
+      fontSize: "10px"
+    });
+    textGroup.append(labelEl, descEl);
+    const controlWrap = document.createElement("div");
+    Object.assign(controlWrap.style, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0"
+    });
+    controlWrap.appendChild(control);
+    row.append(textGroup, controlWrap);
+    return row;
+  }
   /** Segmented control (pill-style button group). */
   makeSegmented(options, current, onChange) {
     const wrap = document.createElement("div");
@@ -13471,6 +14003,518 @@ var TradePopover = class {
   }
 };
 
+// src/ui/DrawingStylePopover.ts
+var POPOVER_CONTROLS = {
+  // Lines & channels
+  horizontalLine: ["stroke", "width", "style"],
+  verticalLine: ["stroke", "width", "style"],
+  crossLine: ["stroke", "width", "style"],
+  trendLine: ["stroke", "width", "style"],
+  trendAngle: ["stroke", "width", "style"],
+  parallelChannel: ["stroke", "width", "style", "fill"],
+  flatChannel: ["stroke", "width", "style", "fill"],
+  disjointChannel: ["stroke", "width", "style"],
+  // Geometric shapes
+  rectangle: ["stroke", "width", "style", "fill"],
+  rotatedRectangle: ["stroke", "width", "style", "fill"],
+  ellipse: ["stroke", "width", "style", "fill"],
+  circle: ["stroke", "width", "style", "fill"],
+  triangle: ["stroke", "width", "style", "fill"],
+  arc: ["stroke", "width", "style"],
+  path: ["stroke", "width", "style"],
+  polyline: ["stroke", "width", "style"],
+  sineLine: ["stroke", "width", "style"],
+  brush: ["stroke", "width"],
+  highlighter: ["stroke", "width"],
+  // Fib (per-level)
+  fibRetracement: ["width", "style", "fibLevels"],
+  fibExtension: ["width", "style", "fibLevels"],
+  fibProjection: ["width", "style", "fibLevels"],
+  fibChannel: ["stroke", "width", "style"],
+  fibFan: ["stroke", "width", "style"],
+  fibCircles: ["stroke", "width", "style"],
+  fibSpiral: ["stroke", "width", "style"],
+  fibTimezone: ["stroke", "width", "style"],
+  // Gann
+  gannFan: ["stroke", "width", "style"],
+  gannSquare: ["stroke", "width", "style"],
+  gannBox: ["stroke", "width", "style", "fill"],
+  // Pitchfork
+  pitchfork: ["stroke", "width", "style"],
+  schiffPitchfork: ["stroke", "width", "style"],
+  modifiedSchiff: ["stroke", "width", "style"],
+  insidePitchfork: ["stroke", "width", "style"],
+  // Text-bearing
+  text: ["text"],
+  callout: ["text", "stroke", "fill"],
+  priceLabel: ["text", "fill"],
+  priceNote: ["text", "stroke"],
+  anchoredNote: ["text", "stroke", "fill"],
+  // Arrows / markers
+  arrowUp: ["stroke", "fill"],
+  arrowDown: ["stroke", "fill"],
+  arrowMarker: ["stroke", "fill"],
+  flag: ["stroke", "fill"],
+  // Volume profile
+  volumeProfile: ["stroke", "fill"],
+  anchoredVP: ["stroke", "fill"],
+  fixedRangeVP: ["stroke", "fill"],
+  // Measurement
+  priceRange: ["stroke", "fill"],
+  dateRange: ["stroke", "width", "style"],
+  datePriceRange: ["stroke", "fill"],
+  ruler: ["stroke", "width", "style"],
+  // Advanced
+  regressionTrend: ["stroke", "width", "style"],
+  projection: ["stroke", "width", "style"],
+  cyclicLines: ["stroke", "width", "style"],
+  timeCycles: ["stroke", "width", "style", "fill"],
+  priceProjection: ["stroke", "fill"],
+  ghostFeed: ["stroke", "fill"]
+};
+var LINE_WIDTHS = [1, 2, 3, 4];
+var FONT_SIZES = [10, 11, 12, 13, 14, 16, 18, 20, 24];
+var SWATCH_PX = 24;
+var DrawingStylePopover = class {
+  constructor(container, theme, onChange) {
+    this.currentDrawing = null;
+    this.fibLevelsExpanded = false;
+    this.fibPanel = null;
+    this.container = container;
+    this.theme = theme;
+    this.onChange = onChange;
+    this.el = document.createElement("div");
+    Object.assign(this.el.style, {
+      position: "absolute",
+      display: "none",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: "10px",
+      background: theme.tooltip.background,
+      border: `1px solid ${theme.axisBorder}`,
+      borderRadius: "8px",
+      padding: "8px 10px",
+      zIndex: "50",
+      boxShadow: "0 6px 18px rgba(0,0,0,0.35)",
+      fontFamily: "'Inter', system-ui, sans-serif",
+      fontSize: "11px",
+      color: theme.tooltip.text,
+      pointerEvents: "auto",
+      userSelect: "none",
+      whiteSpace: "nowrap"
+    });
+    container.appendChild(this.el);
+  }
+  setTheme(theme) {
+    this.theme = theme;
+    this.el.style.background = theme.tooltip.background;
+    this.el.style.border = `1px solid ${theme.axisBorder}`;
+    this.el.style.color = theme.tooltip.text;
+    if (this.currentDrawing) this.rebuild();
+  }
+  /** Show the popover for a drawing, positioned at (x, y) in container-relative coords. */
+  show(drawing, x, y) {
+    const wasSameId = this.currentDrawing?.id === drawing.id;
+    this.currentDrawing = drawing;
+    if (!wasSameId) {
+      this.fibLevelsExpanded = false;
+      this.rebuild();
+    }
+    this.el.style.display = "flex";
+    this.setAnchor(x, y);
+  }
+  /** Reposition the popover without rebuilding controls. */
+  setAnchor(x, y) {
+    requestAnimationFrame(() => {
+      const rect = this.el.getBoundingClientRect();
+      const cRect = this.container.getBoundingClientRect();
+      const w = rect.width || 240;
+      const h = rect.height || 56;
+      let left = x - w / 2;
+      let top = y - h - 12;
+      if (top < 4) top = y + 16;
+      left = Math.max(4, Math.min(cRect.width - w - 4, left));
+      top = Math.max(4, Math.min(cRect.height - h - 4, top));
+      this.el.style.left = `${left}px`;
+      this.el.style.top = `${top}px`;
+    });
+  }
+  hide() {
+    this.el.style.display = "none";
+    this.currentDrawing = null;
+    this.fibLevelsExpanded = false;
+    this.fibPanel?.remove();
+    this.fibPanel = null;
+  }
+  destroy() {
+    this.fibPanel?.remove();
+    this.el.remove();
+    this.currentDrawing = null;
+  }
+  // ── Build ────────────────────────────────────────────────────────────────
+  rebuild() {
+    this.el.innerHTML = "";
+    if (!this.currentDrawing) return;
+    const controls = POPOVER_CONTROLS[this.currentDrawing.type] ?? ["stroke", "width", "style"];
+    const style = this.currentDrawing.style ?? {};
+    const themeEntry = this.theme.drawing[this.currentDrawing.type] ?? {};
+    const groups = [];
+    for (const key of controls) {
+      switch (key) {
+        case "stroke":
+          groups.push(this.group(
+            "Color",
+            this.makeColorSwatch(
+              style.strokeColor ?? themeEntry.strokeColor ?? "#888888",
+              (hex) => this.emit({ strokeColor: hex })
+            )
+          ));
+          break;
+        case "width":
+          groups.push(this.group(
+            "Width",
+            this.buildWidth(
+              style.lineWidth ?? themeEntry.lineWidth ?? 1,
+              (w) => this.emit({ lineWidth: w })
+            )
+          ));
+          break;
+        case "style":
+          groups.push(this.group(
+            "Style",
+            this.buildLineStyle(
+              style.lineStyle ?? themeEntry.lineStyle ?? "solid",
+              (s) => this.emit({ lineStyle: s })
+            )
+          ));
+          break;
+        case "fill": {
+          const fillRow = document.createElement("div");
+          Object.assign(fillRow.style, { display: "flex", alignItems: "center", gap: "6px" });
+          fillRow.appendChild(this.makeColorSwatch(
+            style.fillColor ?? themeEntry.fillColor ?? "#888888",
+            (hex) => this.emit({ fillColor: hex })
+          ));
+          fillRow.appendChild(this.buildOpacity(
+            style.fillOpacity ?? themeEntry.fillOpacity ?? 0.1,
+            (o) => this.emit({ fillOpacity: o })
+          ));
+          groups.push(this.group("Fill", fillRow));
+          break;
+        }
+        case "text": {
+          const textRow = document.createElement("div");
+          Object.assign(textRow.style, { display: "flex", alignItems: "center", gap: "6px" });
+          textRow.appendChild(this.makeColorSwatch(
+            style.textColor ?? themeEntry.textColor ?? "#f5f5f5",
+            (hex) => this.emit({ textColor: hex })
+          ));
+          textRow.appendChild(this.buildFontSize(
+            style.fontSize ?? themeEntry.fontSize ?? 13,
+            (size) => this.emit({ fontSize: size })
+          ));
+          groups.push(this.group("Text", textRow));
+          break;
+        }
+        case "fibLevels":
+          groups.push(this.group(
+            "Levels",
+            this.buildFibLevelsButton({ ...themeEntry.levels ?? {}, ...style.levels ?? {} })
+          ));
+          break;
+      }
+    }
+    groups.forEach((g, i) => {
+      if (i > 0) this.el.appendChild(this.makeSeparator());
+      this.el.appendChild(g);
+    });
+  }
+  // ── Layout helpers ───────────────────────────────────────────────────────
+  group(label, control) {
+    const wrap = document.createElement("div");
+    Object.assign(wrap.style, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: "4px"
+    });
+    const lbl = document.createElement("span");
+    lbl.textContent = label;
+    Object.assign(lbl.style, {
+      fontSize: "10px",
+      color: this.theme.axisText,
+      textTransform: "uppercase",
+      letterSpacing: "0.5px",
+      lineHeight: "1"
+    });
+    wrap.appendChild(lbl);
+    wrap.appendChild(control);
+    return wrap;
+  }
+  makeSeparator() {
+    const sep = document.createElement("div");
+    Object.assign(sep.style, {
+      width: "1px",
+      height: "32px",
+      background: this.theme.axisBorder,
+      opacity: "0.6"
+    });
+    return sep;
+  }
+  // ── Controls ────────────────────────────────────────────────────────────
+  /**
+   * 24×24 color swatch backed by a hidden `<input type="color">`. Mirrors
+   * `ChartSettingsDialog.makeColorSwatch` so all color pickers in the app
+   * share the same look.
+   */
+  makeColorSwatch(initialHex, onChange) {
+    const borderColor = `${this.theme.axisText}80`;
+    const safeHex = initialHex.length === 7 && initialHex.startsWith("#") ? initialHex : "#888888";
+    const wrap = document.createElement("div");
+    Object.assign(wrap.style, {
+      position: "relative",
+      width: `${SWATCH_PX}px`,
+      height: `${SWATCH_PX}px`,
+      borderRadius: "6px",
+      overflow: "hidden",
+      cursor: "pointer",
+      border: `1.5px solid ${borderColor}`,
+      flexShrink: "0",
+      boxSizing: "border-box"
+    });
+    const swatch = document.createElement("div");
+    Object.assign(swatch.style, {
+      position: "absolute",
+      inset: "0",
+      background: initialHex
+    });
+    const input = document.createElement("input");
+    input.type = "color";
+    input.value = safeHex;
+    Object.assign(input.style, {
+      position: "absolute",
+      inset: "0",
+      opacity: "0",
+      width: "100%",
+      height: "100%",
+      cursor: "pointer",
+      padding: "0",
+      border: "none"
+    });
+    let debounceTimer = null;
+    input.addEventListener("input", () => {
+      swatch.style.background = input.value;
+      if (debounceTimer !== null) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        debounceTimer = null;
+        onChange(input.value);
+      }, 200);
+    });
+    wrap.append(swatch, input);
+    return wrap;
+  }
+  buildWidth(currentWidth, onPick) {
+    const wrap = document.createElement("div");
+    Object.assign(wrap.style, { display: "flex", gap: "2px", alignItems: "center" });
+    for (const w of LINE_WIDTHS) {
+      const btn = this.makeIconButton(`${w}px`);
+      const bar = document.createElement("div");
+      Object.assign(bar.style, {
+        width: "14px",
+        height: `${w}px`,
+        background: this.theme.tooltip.text,
+        borderRadius: "1px"
+      });
+      btn.appendChild(bar);
+      if (Math.round(currentWidth) === w) this.markActive(btn);
+      btn.addEventListener("click", () => onPick(w));
+      wrap.appendChild(btn);
+    }
+    return wrap;
+  }
+  buildLineStyle(current, onPick) {
+    const wrap = document.createElement("div");
+    Object.assign(wrap.style, { display: "flex", gap: "2px", alignItems: "center" });
+    const styles = [
+      { key: "solid", svg: this.lineSvg("solid"), title: "Solid" },
+      { key: "dashed", svg: this.lineSvg("dashed"), title: "Dashed" },
+      { key: "dotted", svg: this.lineSvg("dotted"), title: "Dotted" }
+    ];
+    for (const { key, svg, title } of styles) {
+      const btn = this.makeIconButton(title);
+      btn.innerHTML = svg;
+      if (key === current) this.markActive(btn);
+      btn.addEventListener("click", () => onPick(key));
+      wrap.appendChild(btn);
+    }
+    return wrap;
+  }
+  lineSvg(style) {
+    const dash = style === "dashed" ? "4,2" : style === "dotted" ? "1.5,2" : "";
+    return `<svg width="18" height="10" viewBox="0 0 18 10"><line x1="1" y1="5" x2="17" y2="5" stroke="${this.theme.tooltip.text}" stroke-width="1.5" stroke-linecap="round" ${dash ? `stroke-dasharray="${dash}"` : ""} /></svg>`;
+  }
+  buildOpacity(current, onChange) {
+    const wrap = document.createElement("div");
+    Object.assign(wrap.style, { display: "flex", alignItems: "center", gap: "4px" });
+    const slider = document.createElement("input");
+    slider.type = "range";
+    slider.min = "0";
+    slider.max = "100";
+    slider.value = String(Math.round(current * 100));
+    Object.assign(slider.style, { width: "64px", accentColor: this.theme.ui.accent });
+    slider.title = "Fill opacity";
+    const value = document.createElement("span");
+    value.textContent = `${slider.value}%`;
+    Object.assign(value.style, { fontSize: "10px", color: this.theme.axisText, minWidth: "26px", textAlign: "right" });
+    slider.addEventListener("input", () => {
+      value.textContent = `${slider.value}%`;
+      onChange(Number(slider.value) / 100);
+    });
+    wrap.append(slider, value);
+    return wrap;
+  }
+  buildFontSize(current, onPick) {
+    const select = document.createElement("select");
+    Object.assign(select.style, {
+      background: this.theme.tooltip.background,
+      color: this.theme.tooltip.text,
+      border: `1px solid ${this.theme.axisBorder}`,
+      borderRadius: "4px",
+      padding: "3px 4px",
+      fontSize: "11px",
+      cursor: "pointer",
+      height: `${SWATCH_PX}px`,
+      boxSizing: "border-box"
+    });
+    for (const s of FONT_SIZES) {
+      const opt = document.createElement("option");
+      opt.value = String(s);
+      opt.textContent = `${s}px`;
+      if (s === current) opt.selected = true;
+      select.appendChild(opt);
+    }
+    select.addEventListener("change", () => onPick(Number(select.value)));
+    return select;
+  }
+  buildFibLevelsButton(levels) {
+    const wrap = document.createElement("div");
+    wrap.style.position = "relative";
+    const btn = this.makeIconButton("Configure levels");
+    btn.style.padding = "0 8px";
+    btn.style.height = `${SWATCH_PX}px`;
+    btn.style.minWidth = "64px";
+    btn.textContent = "Configure \u25BE";
+    wrap.appendChild(btn);
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.fibLevelsExpanded = !this.fibLevelsExpanded;
+      if (this.fibLevelsExpanded) this.openFibPanel(btn, levels);
+      else this.closeFibPanel();
+    });
+    document.addEventListener("mousedown", (e) => {
+      if (this.fibPanel && !this.fibPanel.contains(e.target) && !wrap.contains(e.target)) {
+        this.closeFibPanel();
+        this.fibLevelsExpanded = false;
+      }
+    });
+    return wrap;
+  }
+  openFibPanel(anchor, levels) {
+    this.closeFibPanel();
+    const panel = document.createElement("div");
+    Object.assign(panel.style, {
+      position: "absolute",
+      display: "grid",
+      gridTemplateColumns: "auto 1fr auto",
+      columnGap: "10px",
+      rowGap: "6px",
+      background: this.theme.tooltip.background,
+      border: `1px solid ${this.theme.axisBorder}`,
+      borderRadius: "6px",
+      padding: "10px 12px",
+      zIndex: "60",
+      boxShadow: "0 6px 18px rgba(0,0,0,0.35)",
+      fontFamily: "'Inter', system-ui, sans-serif",
+      fontSize: "11px",
+      color: this.theme.tooltip.text,
+      alignItems: "center"
+    });
+    const keys = Object.keys(levels).sort((a, b) => Number(a) - Number(b));
+    for (const k of keys) {
+      const level = levels[k];
+      const cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.checked = level.visible !== false;
+      cb.style.accentColor = this.theme.ui.accent;
+      cb.style.cursor = "pointer";
+      const label = document.createElement("span");
+      label.textContent = k;
+      Object.assign(label.style, { fontSize: "11px", color: this.theme.tooltip.text });
+      const swatch = this.makeColorSwatch(level.color, (hex) => {
+        this.emit({ levels: { [k]: { visible: cb.checked, color: hex } } });
+      });
+      cb.addEventListener("change", () => {
+        this.emit({ levels: { [k]: { visible: cb.checked, color: level.color } } });
+      });
+      panel.append(cb, label, swatch);
+    }
+    const anchorRect = anchor.getBoundingClientRect();
+    const cRect = this.container.getBoundingClientRect();
+    this.container.appendChild(panel);
+    const panelRect = panel.getBoundingClientRect();
+    let left = anchorRect.left - cRect.left;
+    let top = anchorRect.bottom - cRect.top + 6;
+    left = Math.max(4, Math.min(cRect.width - panelRect.width - 4, left));
+    if (top + panelRect.height > cRect.height - 4) {
+      top = Math.max(4, anchorRect.top - cRect.top - panelRect.height - 6);
+    }
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
+    this.fibPanel = panel;
+  }
+  closeFibPanel() {
+    this.fibPanel?.remove();
+    this.fibPanel = null;
+  }
+  makeIconButton(title) {
+    const btn = document.createElement("div");
+    Object.assign(btn.style, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: `${SWATCH_PX}px`,
+      height: `${SWATCH_PX}px`,
+      padding: "0 4px",
+      borderRadius: "4px",
+      cursor: "pointer",
+      border: `1px solid transparent`,
+      color: this.theme.tooltip.text,
+      background: "transparent",
+      fontSize: "11px",
+      boxSizing: "border-box"
+    });
+    btn.title = title;
+    btn.addEventListener("mouseenter", () => {
+      if (btn.dataset.active !== "1") btn.style.background = this.theme.indicatorOverlay.dropdownHoverBg;
+    });
+    btn.addEventListener("mouseleave", () => {
+      if (btn.dataset.active !== "1") btn.style.background = "transparent";
+    });
+    return btn;
+  }
+  markActive(btn) {
+    btn.dataset.active = "1";
+    btn.style.background = this.theme.ui.accentBg;
+    btn.style.borderColor = this.theme.ui.accent;
+  }
+  // ── Apply patch ──────────────────────────────────────────────────────────
+  emit(patch) {
+    if (!this.currentDrawing) return;
+    this.onChange(this.currentDrawing.id, patch);
+    this.rebuild();
+  }
+};
+
 // src/ui/DraftQtyFlyout.ts
 var DraftQtyFlyout = class {
   constructor(theme, onCommit, onVisibilityChange) {
@@ -15113,6 +16157,7 @@ var _ChartEngine = class _ChartEngine {
     this.chartSettingsDialog = null;
     this.tradeButton = null;
     this.tradePopover = null;
+    this.drawingStylePopover = null;
     this.draftOrderLabel = null;
     this._minLots = 1;
     this._showQuantityField = false;
@@ -15312,6 +16357,10 @@ var _ChartEngine = class _ChartEngine {
     this.targetCandleWidth = DEFAULT_CANDLE_SLOT_WIDTH;
     this.maxSubPanes = 3;
     this.showCandleCountdown = true;
+    this.showTradeLevelsAlways = false;
+    this.showPriceAxisCountdown = false;
+    this.SHOW_SLTP_ALWAYS_LS_KEY = "finchart.showTradeLevelsAlways";
+    this.PRICE_AXIS_COUNTDOWN_LS_KEY = "finchart.showPriceAxisCountdown";
     this.loadingOverlayEl = null;
     this.noDataOverlayEl = null;
     // Watermark
@@ -16342,6 +17391,7 @@ var _ChartEngine = class _ChartEngine {
       labels,
       tickActivityMs = 3e4,
       hideSymbolAndTick = false,
+      hideOHLCV = false,
       showBottomBar = false
     } = config;
     this.dataLoader = dataLoader ?? null;
@@ -16402,6 +17452,15 @@ var _ChartEngine = class _ChartEngine {
     this.tfcActive = this.tfcEnabled;
     this.showCandleCountdown = config.showCandleCountdown ?? true;
     this.candleCountdownTimeframes = config.candleCountdownTimeframes;
+    this.showTradeLevelsAlways = config.showTradeLevelsAlways ?? false;
+    this.showPriceAxisCountdown = config.showPriceAxisCountdown ?? false;
+    try {
+      const persistedSlTp = localStorage.getItem(this.SHOW_SLTP_ALWAYS_LS_KEY);
+      if (persistedSlTp !== null) this.showTradeLevelsAlways = persistedSlTp === "true";
+      const persistedCountdown = localStorage.getItem(this.PRICE_AXIS_COUNTDOWN_LS_KEY);
+      if (persistedCountdown !== null) this.showPriceAxisCountdown = persistedCountdown === "true";
+    } catch {
+    }
     this._onOrderSubmit = onOrderSubmit;
     if (config.minLots !== void 0) {
       console.warn("[acttrader-charts] ChartConfig.minLots is deprecated. DraftOrderQtyInput has been removed. The value is stored and used as the submitted lot size.");
@@ -16653,7 +17712,7 @@ var _ChartEngine = class _ChartEngine {
       this.noDataOverlayEl.appendChild(noDataLabel);
       this.canvasWrap.appendChild(this.noDataOverlayEl);
     }
-    if (showUI && !hideSymbolAndTick) {
+    if (showUI && !(hideSymbolAndTick && hideOHLCV)) {
       this.siEl = document.createElement("div");
       Object.assign(this.siEl.style, {
         position: "absolute",
@@ -16665,66 +17724,73 @@ var _ChartEngine = class _ChartEngine {
         gap: "8px",
         pointerEvents: "none"
       });
-      this.siSymbolSpan = document.createElement("span");
-      Object.assign(this.siSymbolSpan.style, {
-        color: this.theme.axisText,
-        fontSize: "17px",
-        fontFamily: "'Inter', system-ui, sans-serif",
-        fontWeight: "700",
-        display: symbol ? "inline" : "none"
-      });
-      this.siSymbolSpan.textContent = symbol ?? "";
-      if (onSymbolClick) {
+      if (!hideSymbolAndTick) {
+        this.siSymbolSpan = document.createElement("span");
         Object.assign(this.siSymbolSpan.style, {
-          cursor: "pointer",
-          textDecoration: "underline",
-          pointerEvents: "auto"
+          color: this.theme.axisText,
+          fontSize: "17px",
+          fontFamily: "'Inter', system-ui, sans-serif",
+          fontWeight: "700",
+          display: symbol ? "inline" : "none"
         });
-        this.siSymbolSpan.addEventListener("click", () => {
-          onSymbolClick(this.siSymbolSpan?.textContent ?? "");
+        this.siSymbolSpan.textContent = symbol ?? "";
+        if (onSymbolClick) {
+          Object.assign(this.siSymbolSpan.style, {
+            cursor: "pointer",
+            textDecoration: "underline",
+            pointerEvents: "auto"
+          });
+          this.siSymbolSpan.addEventListener("click", () => {
+            onSymbolClick(this.siSymbolSpan?.textContent ?? "");
+          });
+        } else if (onIsinSelect) {
+          if (isins) this.isins = isins;
+          this.isinPickerModal = new IsinPickerModal(this.theme, onIsinSelect, () => this.emitUiState());
+          this.getFloatingRoot().appendChild(this.isinPickerModal.el);
+          Object.assign(this.siSymbolSpan.style, {
+            cursor: "pointer",
+            textDecoration: "underline",
+            pointerEvents: "auto"
+          });
+          this.siSymbolSpan.addEventListener("click", () => {
+            this.isinPickerModal.show(this.isins, this.siSymbolSpan.textContent ?? "");
+          });
+        }
+        this.siStreamDot = document.createElement("span");
+        Object.assign(this.siStreamDot.style, {
+          width: "7px",
+          height: "7px",
+          borderRadius: "50%",
+          background: this.theme.ui.stream.disconnected,
+          display: "inline-block",
+          flexShrink: "0"
         });
-      } else if (onIsinSelect) {
-        if (isins) this.isins = isins;
-        this.isinPickerModal = new IsinPickerModal(this.theme, onIsinSelect, () => this.emitUiState());
-        this.getFloatingRoot().appendChild(this.isinPickerModal.el);
-        Object.assign(this.siSymbolSpan.style, {
-          cursor: "pointer",
-          textDecoration: "underline",
-          pointerEvents: "auto"
+      }
+      if (!hideOHLCV) {
+        this.siOHLCSpan = document.createElement("span");
+        Object.assign(this.siOHLCSpan.style, {
+          fontSize: "14px",
+          fontFamily: "'Inter', system-ui, sans-serif",
+          whiteSpace: "nowrap"
         });
-        this.siSymbolSpan.addEventListener("click", () => {
-          this.isinPickerModal.show(this.isins, this.siSymbolSpan.textContent ?? "");
+        this.siOHLC2Span = document.createElement("span");
+        Object.assign(this.siOHLC2Span.style, {
+          fontSize: "14px",
+          fontFamily: "'Inter', system-ui, sans-serif",
+          whiteSpace: "nowrap"
         });
       }
-      this.siOHLCSpan = document.createElement("span");
-      Object.assign(this.siOHLCSpan.style, {
-        fontSize: "14px",
-        fontFamily: "'Inter', system-ui, sans-serif",
-        whiteSpace: "nowrap"
-      });
-      this.siOHLC2Span = document.createElement("span");
-      Object.assign(this.siOHLC2Span.style, {
-        fontSize: "14px",
-        fontFamily: "'Inter', system-ui, sans-serif",
-        whiteSpace: "nowrap"
-      });
-      this.siStreamDot = document.createElement("span");
-      Object.assign(this.siStreamDot.style, {
-        width: "7px",
-        height: "7px",
-        borderRadius: "50%",
-        background: this.theme.ui.stream.disconnected,
-        display: "inline-block",
-        flexShrink: "0"
-      });
       const siRow1 = document.createElement("div");
       Object.assign(siRow1.style, {
         display: "flex",
         alignItems: "center",
         gap: "8px"
       });
-      siRow1.append(this.siStreamDot, this.siSymbolSpan, this.siOHLCSpan);
-      this.siEl.append(siRow1, this.siOHLC2Span);
+      if (this.siStreamDot) siRow1.append(this.siStreamDot);
+      if (this.siSymbolSpan) siRow1.append(this.siSymbolSpan);
+      if (this.siOHLCSpan) siRow1.append(this.siOHLCSpan);
+      this.siEl.append(siRow1);
+      if (this.siOHLC2Span) this.siEl.append(this.siOHLC2Span);
       this.canvasWrap.appendChild(this.siEl);
     }
     if (showUI) {
@@ -16873,6 +17939,20 @@ var _ChartEngine = class _ChartEngine {
       }
     };
     this.drawingManager.onStartTextEdit = (drawing) => this.showTextInput(drawing);
+    this.drawingStylePopover = new DrawingStylePopover(
+      this.canvasWrap,
+      this.theme,
+      (id, patch) => this.updateDrawingStyle(id, patch)
+    );
+    this.drawingManager.onSelectionChange = (drawing) => {
+      if (drawing && drawing.complete && drawing.locked !== true) {
+        const anchor = this.computeDrawingAnchorPx(drawing);
+        if (anchor) this.drawingStylePopover?.show(drawing, anchor.x, anchor.y);
+        else this.drawingStylePopover?.hide();
+      } else {
+        this.drawingStylePopover?.hide();
+      }
+    };
     this.panHandler = new PanHandler(
       this.drawCanvas,
       () => this._targetViewport,
@@ -17488,6 +18568,7 @@ var _ChartEngine = class _ChartEngine {
     this.leftBar?.setTheme(this.theme);
     this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
     this.tradePopover?.setTheme(this.theme);
+    this.drawingStylePopover?.setTheme(this.theme);
     this._draftQtyFlyout?.setTheme(this.theme);
     this.indicatorSettingsDialog?.setTheme(this.theme);
     this.chartSettingsDialog?.setTheme(this.theme);
@@ -17519,6 +18600,7 @@ var _ChartEngine = class _ChartEngine {
     this.leftBar?.setTheme(this.theme);
     this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
     this.tradePopover?.setTheme(this.theme);
+    this.drawingStylePopover?.setTheme(this.theme);
     this._draftQtyFlyout?.setTheme(this.theme);
     this.indicatorSettingsDialog?.setTheme(this.theme);
     this.chartSettingsDialog?.setTheme(this.theme);
@@ -18104,6 +19186,24 @@ var _ChartEngine = class _ChartEngine {
   getDrawings() {
     return this.drawingManager.getDrawings();
   }
+  /** Returns the drawing matching `id`, or null. */
+  getDrawingById(id) {
+    return this.drawingManager.getDrawingById(id);
+  }
+  /** Returns the currently selected drawing, or null. */
+  getSelectedDrawing() {
+    return this.drawingManager.getSelectedDrawing();
+  }
+  /**
+   * Shallow-merge a per-instance style override onto the drawing with `id`.
+   * Fib `levels` are deep-merged (per-key) so partial overrides keep siblings.
+   * Returns `this` for chaining.
+   */
+  updateDrawingStyle(id, patch) {
+    this.drawingManager.updateDrawingStyle(id, patch);
+    this.scheduleRender();
+    return this;
+  }
   connectStream(adapter) {
     this.streamAdapter = adapter;
     adapter.onTick((tick) => this.onTick(tick));
@@ -18624,6 +19724,7 @@ var _ChartEngine = class _ChartEngine {
     this.chartSettingsDialog?.destroy();
     this.isinPickerModal?.destroy();
     this.tradePopover?.destroy();
+    this.drawingStylePopover?.destroy();
     this._draftQtyFlyout?.destroy();
     this.leftBar?.destroy();
     this.drawCanvas.removeEventListener("mousemove", this.onMouseMove);
@@ -18779,7 +19880,7 @@ var _ChartEngine = class _ChartEngine {
     const allowed = this.candleCountdownTimeframes === "all" ? true : (this.candleCountdownTimeframes ?? INTRADAY).includes(
       this.timeframe
     );
-    const should = this.showCandleCountdown && allowed && this.dataStore.length > 0;
+    const should = (this.showCandleCountdown || this.showPriceAxisCountdown) && allowed && this.dataStore.length > 0;
     if (should && !this.countdownActive) {
       this.countdownActive = true;
       this.startCountdownLoop();
@@ -18794,7 +19895,9 @@ var _ChartEngine = class _ChartEngine {
         {
           tradeDisplayFilter: this.tradeDisplayFilter,
           positionRenderStyle: this.positionRenderStyle,
-          theme: this.themeName
+          theme: this.themeName,
+          showTradeLevelsAlways: this.showTradeLevelsAlways,
+          showPriceAxisCountdown: this.showPriceAxisCountdown
         },
         this.labels.dialogs,
         !!this._onOrderSubmit && this.tfcActive,
@@ -18808,6 +19911,8 @@ var _ChartEngine = class _ChartEngine {
         tradeDisplayFilter: this.tradeDisplayFilter,
         positionRenderStyle: this.positionRenderStyle,
         theme: this.themeName,
+        showTradeLevelsAlways: this.showTradeLevelsAlways,
+        showPriceAxisCountdown: this.showPriceAxisCountdown,
         canvasColors: { ...this.settingsCanvasColors }
       },
       (settings) => {
@@ -18818,6 +19923,28 @@ var _ChartEngine = class _ChartEngine {
         if (settings.canvasColors) {
           this.settingsCanvasColors = settings.canvasColors;
         }
+        if (this.showTradeLevelsAlways !== settings.showTradeLevelsAlways) {
+          this.showTradeLevelsAlways = settings.showTradeLevelsAlways;
+          try {
+            localStorage.setItem(
+              this.SHOW_SLTP_ALWAYS_LS_KEY,
+              String(settings.showTradeLevelsAlways)
+            );
+          } catch {
+          }
+        }
+        if (this.showPriceAxisCountdown !== settings.showPriceAxisCountdown) {
+          this.showPriceAxisCountdown = settings.showPriceAxisCountdown;
+          try {
+            localStorage.setItem(
+              this.PRICE_AXIS_COUNTDOWN_LS_KEY,
+              String(settings.showPriceAxisCountdown)
+            );
+          } catch {
+          }
+          this.updateCountdownState();
+          this.scheduleRender();
+        }
         this.setTheme(settings.theme);
         this.renderTradeLayer();
         this.emitStateChange();
@@ -18999,7 +20126,8 @@ var _ChartEngine = class _ChartEngine {
       this._showQuantityField,
       this.tradeDragNewSLPrice,
       this.tradeDragNewTPPrice,
-      this.tradeLevelButtonScale
+      this.tradeLevelButtonScale,
+      this.showTradeLevelsAlways
     );
     ctx.restore();
     const offVpResult = renderOffViewportIndicators(
@@ -19737,28 +20865,62 @@ var _ChartEngine = class _ChartEngine {
         ctx.stroke();
         ctx.setLineDash([]);
         const label = prefix + price.toFixed(precision);
+        ctx.font = "10px 'Inter', system-ui, sans-serif";
         const tw = ctx.measureText(label).width;
+        const boxW = tw + 12;
         ctx.fillStyle = color;
-        ctx.fillRect(chartW, y - tagH / 2, tw + 12, tagH);
+        ctx.fillRect(chartW, y - tagH / 2, boxW, tagH);
         ctx.fillStyle = "#ffffff";
-        ctx.font = "10px 'Inter', system-ui, sans-serif";
         ctx.textAlign = "left";
         ctx.fillText(label, chartW + 4, y + 4);
         ctx.restore();
+        return { y, boxW };
       };
+      let primaryPriceY = null;
+      let primaryPriceBoxW = 0;
       if (this.liveBidAsk) {
         const { bid, ask } = this.liveBidAsk;
         if (this.showBidAskLines) {
-          drawPriceLine(bid, theme.candle.down, "");
-          drawPriceLine(ask, theme.candle.up, "");
+          const bidTag = drawPriceLine(bid, theme.candle.down, "");
+          const askTag = drawPriceLine(ask, theme.candle.up, "");
+          const primary = this.tickClosePriceSource === "ask" ? askTag : bidTag;
+          primaryPriceY = primary.y;
+          primaryPriceBoxW = primary.boxW;
         } else {
           const price = this.tickClosePriceSource === "ask" ? ask : bid;
           const color = this.tickClosePriceSource === "ask" ? theme.candle.up : theme.candle.down;
-          drawPriceLine(price, color, "");
+          const tag = drawPriceLine(price, color, "");
+          primaryPriceY = tag.y;
+          primaryPriceBoxW = tag.boxW;
         }
       } else {
         const isUp = lastBar.close >= lastBar.open;
-        drawPriceLine(lastBar.close, isUp ? theme.candle.up : theme.candle.down, "");
+        const tag = drawPriceLine(
+          lastBar.close,
+          isUp ? theme.candle.up : theme.candle.down,
+          ""
+        );
+        primaryPriceY = tag.y;
+        primaryPriceBoxW = tag.boxW;
+      }
+      if (this.showPriceAxisCountdown && primaryPriceY !== null) {
+        const INTRADAY_TF = ["1m", "5m", "15m", "30m", "1h", "2h", "4h", "8h"];
+        const allowed = this.candleCountdownTimeframes === "all" ? true : (this.candleCountdownTimeframes ?? INTRADAY_TF).includes(
+          this.timeframe
+        );
+        if (allowed) {
+          const intervalMs = this.timeframeToMs(this.timeframe);
+          renderPriceAxisCountdown(
+            ctx,
+            lastBar.time,
+            intervalMs,
+            theme,
+            chartW,
+            primaryPriceY - tagH / 2,
+            tagH,
+            primaryPriceBoxW
+          );
+        }
       }
     }
     let subPaneY = priceH;
@@ -19828,7 +20990,7 @@ var _ChartEngine = class _ChartEngine {
       const countdownAllowed = this.candleCountdownTimeframes === "all" ? true : (this.candleCountdownTimeframes ?? INTRADAY_TF).includes(
         this.timeframe
       );
-      const showCountdown = this.showCandleCountdown && countdownAllowed && bars.length > 0 && viewport.endIndex >= this.dataStore.length - 1;
+      const showCountdown = this.showCandleCountdown && !this.showPriceAxisCountdown && countdownAllowed && bars.length > 0 && viewport.endIndex >= this.dataStore.length - 1;
       const countdownBarIndex = showCountdown ? this.dataStore.length - 1 : void 0;
       if (this._debug) {
         console.log(
@@ -19924,8 +21086,16 @@ var _ChartEngine = class _ChartEngine {
       priceRange,
       chartW,
       priceH,
-      this.dataStore.getPricePrecision()
+      this.dataStore.getPricePrecision(),
+      this.theme
     );
+    if (this.drawingStylePopover) {
+      const sel = this.drawingManager.getSelectedDrawing();
+      if (sel && sel.complete && sel.locked !== true) {
+        const anchor = this.computeDrawingAnchorPx(sel);
+        if (anchor) this.drawingStylePopover.setAnchor(anchor.x, anchor.y);
+      }
+    }
     if (this.scrollToEndBtn) {
       const atEnd = this.dataStore.length === 0 || this._targetViewport.endIndex >= this.dataStore.length - 0.5;
       if (atEnd !== !this.scrollToEndVisible) {
@@ -20006,6 +21176,30 @@ var _ChartEngine = class _ChartEngine {
     const priceH = rect.height - this.timeAxisHeight - subPanesH;
     return { chartW, priceH };
   }
+  /**
+   * Returns canvasWrap-relative pixel coords of the topmost rendered point of
+   * a drawing — used to anchor the floating style popover above it. Returns
+   * null when the drawing has no on-screen points (e.g. fully clipped out).
+   */
+  computeDrawingAnchorPx(drawing) {
+    if (drawing.points.length === 0) return null;
+    const { chartW, priceH } = this.getChartLayout();
+    const viewport = this._targetViewport;
+    const priceRange = this._displayedPriceRange ?? this.getScaledPriceRange(viewport);
+    let bestX = 0, bestY = Infinity;
+    for (const p of drawing.points) {
+      const x = this.scaleManager.xToPixel(p.barIndex, viewport, chartW);
+      const y = this.scaleManager.yToPixel(p.price, priceRange, priceH);
+      if (y < bestY) {
+        bestY = y;
+        bestX = x;
+      }
+    }
+    if (!Number.isFinite(bestY)) return null;
+    bestX = Math.max(0, Math.min(chartW, bestX));
+    bestY = Math.max(0, Math.min(priceH, bestY));
+    return { x: bestX, y: bestY };
+  }
   /** Repositions each sub-pane IndicatorOverlay element to sit at the top of its pane */
   updateSubPaneOverlayPositions() {
     if (this.subPaneOverlays.size === 0) return;