.tt-cad-svg-wrap {
  --tt-cad-active-contour: var(--tt-cad-light-contour);
  --tt-cad-active-hiddenline: var(--tt-cad-light-hiddenline);
  --tt-cad-active-dimension: var(--tt-cad-light-dimension);
  --tt-cad-active-force: var(--tt-cad-light-force);
  --tt-cad-active-moment: var(--tt-cad-light-moment);
  --tt-cad-active-centerline: var(--tt-cad-light-centerline);
  --tt-cad-active-hatch: var(--tt-cad-light-hatch);
  --tt-cad-active-text: var(--tt-cad-light-text);
  --tt-cad-active-axis: var(--tt-cad-light-axis);
  --tt-cad-active-construction: var(--tt-cad-light-construction);
  --tt-cad-active-background: var(--tt-cad-light-background);
  --tt-cad-active-plot-frame: var(--tt-cad-light-plot-frame);
  --tt-cad-active-grid: var(--tt-cad-light-grid);
  --tt-cad-active-grid-minor: var(--tt-cad-light-grid-minor);
  --tt-cad-active-grid-major: var(--tt-cad-light-grid-major);
  --tt-cad-active-curve-1: var(--tt-cad-light-curve-1);
  --tt-cad-active-curve-2: var(--tt-cad-light-curve-2);
  --tt-cad-active-curve-3: var(--tt-cad-light-curve-3);
  --tt-cad-active-curve-4: var(--tt-cad-light-curve-4);
  --tt-cad-active-data: var(--tt-cad-light-data);
  --tt-cad-active-point: var(--tt-cad-light-point);
  --tt-cad-active-marker: var(--tt-cad-light-marker);
  --tt-cad-active-tangent: var(--tt-cad-light-tangent);
  --tt-cad-active-secant: var(--tt-cad-light-secant);
  --tt-cad-active-asymptote: var(--tt-cad-light-asymptote);
  --tt-cad-active-region: var(--tt-cad-light-region);
  --tt-cad-active-diagram-fill: var(--tt-cad-light-diagram-fill);
  --tt-cad-active-annotation: var(--tt-cad-light-annotation);
  --tt-cad-active-tick-label: var(--tt-cad-light-tick-label);
  --tt-cad-active-axis-label: var(--tt-cad-light-axis-label);
  --tt-cad-active-legend: var(--tt-cad-light-legend);
  --tt-cad-active-title: var(--tt-cad-light-title);
  --tt-cad-active-subtitle: var(--tt-cad-light-subtitle);
  --tt-cad-active-zero-line: var(--tt-cad-light-zero-line);
  margin: 1.5rem 0;
  font-family: inherit;
}

.tt-cad-svg-wrap[data-tt-cad-mode="dark"] {
  --tt-cad-active-contour: var(--tt-cad-dark-contour);
  --tt-cad-active-hiddenline: var(--tt-cad-dark-hiddenline);
  --tt-cad-active-dimension: var(--tt-cad-dark-dimension);
  --tt-cad-active-force: var(--tt-cad-dark-force);
  --tt-cad-active-moment: var(--tt-cad-dark-moment);
  --tt-cad-active-centerline: var(--tt-cad-dark-centerline);
  --tt-cad-active-hatch: var(--tt-cad-dark-hatch);
  --tt-cad-active-text: var(--tt-cad-dark-text);
  --tt-cad-active-axis: var(--tt-cad-dark-axis);
  --tt-cad-active-construction: var(--tt-cad-dark-construction);
  --tt-cad-active-background: var(--tt-cad-dark-background);
  --tt-cad-active-plot-frame: var(--tt-cad-dark-plot-frame);
  --tt-cad-active-grid: var(--tt-cad-dark-grid);
  --tt-cad-active-grid-minor: var(--tt-cad-dark-grid-minor);
  --tt-cad-active-grid-major: var(--tt-cad-dark-grid-major);
  --tt-cad-active-curve-1: var(--tt-cad-dark-curve-1);
  --tt-cad-active-curve-2: var(--tt-cad-dark-curve-2);
  --tt-cad-active-curve-3: var(--tt-cad-dark-curve-3);
  --tt-cad-active-curve-4: var(--tt-cad-dark-curve-4);
  --tt-cad-active-data: var(--tt-cad-dark-data);
  --tt-cad-active-point: var(--tt-cad-dark-point);
  --tt-cad-active-marker: var(--tt-cad-dark-marker);
  --tt-cad-active-tangent: var(--tt-cad-dark-tangent);
  --tt-cad-active-secant: var(--tt-cad-dark-secant);
  --tt-cad-active-asymptote: var(--tt-cad-dark-asymptote);
  --tt-cad-active-region: var(--tt-cad-dark-region);
  --tt-cad-active-diagram-fill: var(--tt-cad-dark-diagram-fill);
  --tt-cad-active-annotation: var(--tt-cad-dark-annotation);
  --tt-cad-active-tick-label: var(--tt-cad-dark-tick-label);
  --tt-cad-active-axis-label: var(--tt-cad-dark-axis-label);
  --tt-cad-active-legend: var(--tt-cad-dark-legend);
  --tt-cad-active-title: var(--tt-cad-dark-title);
  --tt-cad-active-subtitle: var(--tt-cad-dark-subtitle);
  --tt-cad-active-zero-line: var(--tt-cad-dark-zero-line);
}


/* v0.2.6 Real Layer Palette: TT Matek preset has a fixed, predictable
   layer palette independent from older saved admin colors. Custom preset
   continues to use admin colors. */
.tt-cad-svg-wrap[data-tt-cad-preset="tt_matek"],
.tt-cad-svg-wrap[data-tt-cad-preset="auto_palette"],
.tt-cad-svg-wrap[data-tt-cad-preset="curve_test"] {
  --tt-cad-active-background: #ffffff;
  --tt-cad-active-plot-frame: #333333;
  --tt-cad-active-axis: #222222;
  --tt-cad-active-grid: #c9d1d8;
  --tt-cad-active-grid-minor: #edf0f3;
  --tt-cad-active-grid-major: #b6c0c9;
  --tt-cad-active-zero-line: #111111;
  --tt-cad-active-curve-1: #222222;
  --tt-cad-active-curve-2: #006bb6;
  --tt-cad-active-curve-3: #1f8a4c;
  --tt-cad-active-curve-4: #9b2fae;
  --tt-cad-active-data: #111111;
  --tt-cad-active-point: #cf1f1f;
  --tt-cad-active-marker: #cf1f1f;
  --tt-cad-active-tangent: #1f8a4c;
  --tt-cad-active-secant: #b45309;
  --tt-cad-active-asymptote: #8a2be2;
  --tt-cad-active-region: #cfe8ff;
  --tt-cad-active-diagram-fill: #f5f7f9;
  --tt-cad-active-annotation: #222222;
  --tt-cad-active-text: #111111;
  --tt-cad-active-tick-label: #111111;
  --tt-cad-active-axis-label: #111111;
  --tt-cad-active-legend: #111111;
  --tt-cad-active-title: #111111;
  --tt-cad-active-subtitle: #333333;
  --tt-cad-frame-width: 1.0;
  --tt-cad-axis-width: 1.1;
  --tt-cad-zero-width: 1.18;
  --tt-cad-grid-width: 0.55;
  --tt-cad-major-grid-width: 0.66;
  --tt-cad-curve-width: 1.75;
  --tt-cad-helper-width: 1.25;
  --tt-cad-grid-opacity: 0.72;
  --tt-cad-tick-opacity: 0.70;
}

.tt-cad-svg-wrap[data-tt-cad-preset="tt_matek"][data-tt-cad-mode="dark"],
.tt-cad-svg-wrap[data-tt-cad-preset="auto_palette"][data-tt-cad-mode="dark"],
.tt-cad-svg-wrap[data-tt-cad-preset="curve_test"][data-tt-cad-mode="dark"] {
  --tt-cad-active-background: #071019;
  --tt-cad-active-plot-frame: #6f8798;
  --tt-cad-active-axis: #e6eef6;
  --tt-cad-active-grid: #2b4153;
  --tt-cad-active-grid-minor: #203342;
  --tt-cad-active-grid-major: #3d566a;
  --tt-cad-active-zero-line: #ffffff;
  --tt-cad-active-curve-1: #ff3f3f;
  --tt-cad-active-curve-2: #48b6ff;
  --tt-cad-active-curve-3: #55d987;
  --tt-cad-active-curve-4: #d481ff;
  --tt-cad-active-data: #ff2d2d;
  --tt-cad-active-point: #ff6b6b;
  --tt-cad-active-marker: #ff6b6b;
  --tt-cad-active-tangent: #55d987;
  --tt-cad-active-secant: #f59e0b;
  --tt-cad-active-asymptote: #d481ff;
  --tt-cad-active-region: #1d3b55;
  --tt-cad-active-diagram-fill: #121b26;
  --tt-cad-active-annotation: #f2f5f8;
  --tt-cad-active-text: #f2f5f8;
  --tt-cad-active-tick-label: #dfe7ef;
  --tt-cad-active-axis-label: #f2f5f8;
  --tt-cad-active-legend: #f2f5f8;
  --tt-cad-active-title: #ffffff;
  --tt-cad-active-subtitle: #cfd8e3;
  --tt-cad-frame-width: 1.0;
  --tt-cad-axis-width: 1.1;
  --tt-cad-zero-width: 1.18;
  --tt-cad-grid-width: 0.55;
  --tt-cad-major-grid-width: 0.66;
  --tt-cad-curve-width: 1.75;
  --tt-cad-helper-width: 1.25;
  --tt-cad-grid-opacity: 0.86;
  --tt-cad-tick-opacity: 0.78;
}

.tt-cad-svg-canvas {
  background: var(--tt-cad-active-background);
  width: 100%;
  margin-inline: auto;
  overflow: auto;
  line-height: 0;
}

.tt-cad-svg-has-border .tt-cad-svg-canvas {
  border: 1px solid color-mix(in srgb, var(--tt-cad-active-contour), transparent 78%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.tt-cad-svg-canvas svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: transparent !important;
}

.tt-cad-font-inherit .tt-cad-svg-canvas,
.tt-cad-font-inherit .tt-cad-svg-canvas svg,
.tt-cad-font-inherit .tt-cad-svg-canvas text,
.tt-cad-font-inherit .tt-cad-svg-canvas tspan,
.tt-cad-font-system .tt-cad-svg-canvas,
.tt-cad-font-system .tt-cad-svg-canvas svg,
.tt-cad-font-system .tt-cad-svg-canvas text,
.tt-cad-font-system .tt-cad-svg-canvas tspan {
  font-family: var(--tt-cad-font-family) !important;
}

/* v0.1.9 safety: do not style arbitrary SVG classes such as .point, .marker,
   .frame, .fill, etc. CAD exporters use these unpredictably. Only elements
   explicitly marked by frontend.js with data-tt-layer are styled. */
.tt-cad-svg-wrap [data-tt-layer="contour"] { stroke: var(--tt-cad-active-contour) !important; fill: none !important; stroke-width: 1.55 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="hiddenline"] { stroke: var(--tt-cad-active-hiddenline) !important; fill: none !important; stroke-width: 1.05 !important; stroke-dasharray: 6 5 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="dimension"] { stroke: var(--tt-cad-active-dimension) !important; fill: none !important; stroke-width: 1.2 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="force"] { stroke: var(--tt-cad-active-force) !important; fill: none !important; stroke-width: 2.2 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="moment"] { stroke: var(--tt-cad-active-moment) !important; fill: none !important; stroke-width: 2.2 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="centerline"] { stroke: var(--tt-cad-active-centerline) !important; fill: none !important; stroke-width: 1.05 !important; stroke-dasharray: 10 4 2 4 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="hatch"] { stroke: var(--tt-cad-active-hatch) !important; fill: none !important; stroke-width: 0.85 !important; opacity: .9; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="text"] { fill: var(--tt-cad-active-text) !important; stroke: none !important; }
.tt-cad-svg-wrap [data-tt-layer="tick-label"] { fill: var(--tt-cad-active-tick-label) !important; stroke: none !important; }
.tt-cad-svg-wrap [data-tt-layer="axis-label"] { fill: var(--tt-cad-active-axis-label) !important; stroke: none !important; font-weight: 600; }
.tt-cad-svg-wrap [data-tt-layer="annotation"] { fill: var(--tt-cad-active-annotation) !important; stroke: none !important; }
.tt-cad-svg-wrap [data-tt-layer="legend"] { fill: var(--tt-cad-active-legend) !important; stroke: none !important; }
.tt-cad-svg-wrap [data-tt-layer="title"] { fill: var(--tt-cad-active-title) !important; stroke: none !important; font-weight: 700; }
.tt-cad-svg-wrap [data-tt-layer="subtitle"] { fill: var(--tt-cad-active-subtitle) !important; stroke: none !important; }
.tt-cad-svg-wrap [data-tt-layer="axis"] { stroke: var(--tt-cad-active-axis) !important; fill: none !important; stroke-width: var(--tt-cad-axis-width, 1.2) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="zero-line"] { stroke: var(--tt-cad-active-zero-line) !important; fill: none !important; stroke-width: var(--tt-cad-zero-width, 1.35) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="construction"] { stroke: var(--tt-cad-active-construction) !important; fill: none !important; stroke-width: .95 !important; stroke-dasharray: 5 5 !important; opacity: .75; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="grid"] { stroke: var(--tt-cad-active-grid) !important; fill: none !important; stroke-width: var(--tt-cad-grid-width, .58) !important; opacity: var(--tt-cad-grid-opacity, .56); vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="minor-grid"] { stroke: var(--tt-cad-active-grid-minor) !important; fill: none !important; stroke-width: var(--tt-cad-grid-width, .58) !important; opacity: var(--tt-cad-grid-opacity, .56); vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="major-grid"] { stroke: var(--tt-cad-active-grid-major) !important; fill: none !important; stroke-width: var(--tt-cad-major-grid-width, .78) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="curve-1"] { stroke: var(--tt-cad-active-curve-1) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="curve-2"] { stroke: var(--tt-cad-active-curve-2) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="curve-3"] { stroke: var(--tt-cad-active-curve-3) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="curve-4"] { stroke: var(--tt-cad-active-curve-4) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="data"] { stroke: var(--tt-cad-active-data) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="point"],
.tt-cad-svg-wrap [data-tt-layer="marker"] { stroke: var(--tt-cad-active-point) !important; fill: var(--tt-cad-active-point) !important; stroke-width: 1.35 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="tangent"] { stroke: var(--tt-cad-active-tangent) !important; fill: none !important; stroke-width: 1.45 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="secant"] { stroke: var(--tt-cad-active-secant) !important; fill: none !important; stroke-width: 1.45 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="asymptote"] { stroke: var(--tt-cad-active-asymptote) !important; fill: none !important; stroke-width: 1.35 !important; stroke-dasharray: 9 6 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="region"],
.tt-cad-svg-wrap [data-tt-layer="phase-region"] { stroke: none !important; fill: var(--tt-cad-active-region) !important; opacity: .24; }
.tt-cad-svg-wrap [data-tt-layer="diagram-fill"],
.tt-cad-svg-wrap [data-tt-layer="plot-area"] { stroke: none !important; fill: var(--tt-cad-active-diagram-fill) !important; opacity: .18; }
.tt-cad-svg-wrap [data-tt-layer="plot-frame"] { stroke: var(--tt-cad-active-plot-frame) !important; fill: none !important; stroke-width: 1 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="phase-boundary"] { stroke: var(--tt-cad-active-curve-1) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="solidus"] { stroke: var(--tt-cad-active-curve-2) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="solvus"] { stroke: var(--tt-cad-active-curve-3) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer="tie-line"] { stroke: var(--tt-cad-active-zero-line) !important; fill: none !important; stroke-width: 1.45 !important; stroke-dasharray: 7 5 !important; vector-effect: non-scaling-stroke; }

/* v0.2.5 direct verification preset: proves that a semantic curve-1 layer can
   react independently to the site light/dark state. Use only for testing. */
.tt-cad-svg-wrap[data-tt-cad-preset="curve_test"] {
  --tt-cad-active-curve-1: #000000;
}
.tt-cad-svg-wrap[data-tt-cad-preset="curve_test"][data-tt-cad-mode="dark"] {
  --tt-cad-active-curve-1: #ff3333;
}
.tt-cad-svg-wrap[data-tt-cad-preset="curve_test"] [data-tt-layer="curve-1"],
.tt-cad-svg-wrap[data-tt-cad-preset="curve_test"] [data-tt-layer-normalized="curve-1"] {
  stroke: var(--tt-cad-active-curve-1) !important;
  fill: none !important;
}


/* v0.2.9: Normalize/Hybrid fallback marks elements with data-tt-layer-normalized.
   These rules mirror the explicit layer palette so dark/light CSS variables can
   recolor fallback-classified CAD exports without needing perfect CAD layers. */
.tt-cad-svg-wrap [data-tt-layer-normalized="axis"] { stroke: var(--tt-cad-active-axis) !important; fill: none !important; stroke-width: var(--tt-cad-axis-width, 1.2) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer-normalized="zero-line"] { stroke: var(--tt-cad-active-zero-line) !important; fill: none !important; stroke-width: var(--tt-cad-zero-width, 1.35) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer-normalized="grid"] { stroke: var(--tt-cad-active-grid) !important; fill: none !important; stroke-width: var(--tt-cad-grid-width, .58) !important; opacity: var(--tt-cad-grid-opacity, .56); vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer-normalized="tick"] { stroke: var(--tt-cad-active-axis) !important; fill: none !important; stroke-width: .85 !important; opacity: var(--tt-cad-tick-opacity, .70); vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer-normalized="curve-1"] { stroke: var(--tt-cad-active-curve-1) !important; fill: none !important; stroke-width: var(--tt-cad-curve-width, 1.85) !important; opacity: .99; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer-normalized="contour"] { stroke: var(--tt-cad-active-contour) !important; fill: none !important; stroke-width: 1.55 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer-normalized="plot-frame"] { stroke: var(--tt-cad-active-plot-frame) !important; fill: none !important; stroke-width: var(--tt-cad-frame-width, 1.1) !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer-normalized="background"] { fill: transparent !important; opacity: 1 !important; }
.tt-cad-svg-wrap [data-tt-layer-normalized="text"] { fill: var(--tt-cad-active-text) !important; stroke: none !important; }
.tt-cad-svg-wrap [data-tt-layer-normalized="point"],
.tt-cad-svg-wrap [data-tt-layer-normalized="marker"] { stroke: var(--tt-cad-active-point) !important; fill: var(--tt-cad-active-point) !important; stroke-width: 1.35 !important; vector-effect: non-scaling-stroke; }
.tt-cad-svg-wrap [data-tt-layer-normalized="diagram-fill"] { stroke: none !important; fill: var(--tt-cad-active-diagram-fill) !important; opacity: .18; }

.tt-cad-svg-caption {
  margin-top: .5rem;
  font-size: .85rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--tt-cad-active-text), transparent 22%);
}
.tt-cad-svg-error { padding: .75rem 1rem; border: 1px solid #dc2626; background: #fff1f2; color: #991b1b; }


/* v0.3.3 visual polish: keep the CAD/SVG block crisp without the heavy floating shadow. */
.tt-cad-svg-wrap.tt-cad-svg-has-border .tt-cad-svg-canvas {
  border-color: color-mix(in srgb, var(--tt-cad-active-plot-frame), transparent 38%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.tt-cad-svg-wrap.tt-cad-svg-has-border[data-tt-cad-mode="dark"] .tt-cad-svg-canvas {
  border-color: color-mix(in srgb, var(--tt-cad-active-plot-frame), transparent 18%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}