:root {
  color-scheme: dark;
  --ink: #e4e4e4;
  --muted: #b5b5b5;
  --line: #3b3b3b;
  --panel: #4a4a4a;
  --paper: #ffffff;
  --chrome: #535353;
  --chrome-dark: #3f3f3f;
  --chrome-darker: #2f2f2f;
  --canvas-gray: #626260;
  --field: #5a5a5a;
  --field-dark: #454545;
  --accent: #2f8dcc;
  --accent-dark: #56a6de;
  --warn: #e23b3b;
  --violet: #ff4f92;
}

* {
  box-sizing: border-box;
}

* {
  scrollbar-color: #6b6b6b #3b3b3b;
}

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--chrome-dark);
}

.layout-generation-progress {
  min-width: 290px;
  max-width: calc(100vw - 40px);
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--chrome-darker);
  box-shadow: 0 12px 48px #0006;
}
.layout-generation-progress::backdrop { background: #0005; }
.layout-generation-progress p { margin: 0 0 20px; }
.layout-generation-progress button { float: right; min-width: 80px; }

button,
select,
input {
  font: inherit;
}

input:focus,
select:focus,
button:focus-visible {
  outline: 1px solid var(--accent-dark);
  outline-offset: 1px;
}

button,
.tool-button {
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  min-height: 28px;
  padding: 0 9px;
  border-radius: 2px;
  cursor: pointer;
}

button:hover,
.tool-button:hover,
.tool-button.active {
  border-color: #777;
  background: #666;
  color: #fff;
}

.tool-button.active {
  border-color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-dark);
}

.topbar {
  height: 48px;
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 0 10px;
  background: var(--chrome-dark);
  border-bottom: 1px solid #292929;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.brand {
  font-weight: 750;
  letter-spacing: 0;
  color: #f0f0f0;
}

.menu,
.switchers,
.subbar,
.statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switchers select,
.field select,
.field input,
.field textarea {
  border: 1px solid var(--line);
  border-radius: 2px;
  min-height: 28px;
  background: var(--field-dark);
  color: var(--ink);
  padding: 0 8px;
}

.field textarea {
  min-height: 56px;
  padding: 6px 8px;
  resize: vertical;
  font: inherit;
}

.workspace-shell {
  height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 118px 230px minmax(360px, 1fr) 338px;
  min-height: 620px;
}

.workspace-shell.panels-hidden {
  grid-template-columns: 118px 230px minmax(360px, 1fr);
}

.tool-rail {
  background: var(--chrome-darker);
  border-right: 1px solid #242424;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 8px 6px;
}

.drawing-sidebar {
  background: var(--chrome);
  border-right: 1px solid #333;
  overflow: auto;
  padding: 12px;
}

.drawing-sidebar h2 {
  color: #f0f0f0;
}

.drawing-list {
  display: grid;
  gap: 8px;
}

.drawing-item {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--field-dark);
  padding: 8px;
  font-size: 12px;
  color: var(--ink);
}

.drawing-item strong {
  display: block;
  margin-bottom: 4px;
}

.tool-button {
  width: 98px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 2px 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.12;
  white-space: normal;
  word-break: keep-all;
}

.canvas-zone {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: 38px 28px 1fr;
  background: var(--canvas-gray);
}

.subbar {
  background: var(--chrome-dark);
  border-bottom: 1px solid #303030;
  padding: 5px 8px;
  overflow-x: auto;
}

.canvas-wrap {
  min-height: 0;
  overflow: auto;
  background: var(--canvas-gray);
  position: relative;
}

.canvas-wrap.space-pan {
  cursor: grab;
}

.canvas-wrap.space-pan #designCanvas {
  cursor: grab;
}

.canvas-wrap.panning,
.canvas-wrap.panning #designCanvas {
  cursor: grabbing;
}

#designCanvas {
  width: 2200px;
  height: 1500px;
  display: block;
  transform-origin: 0 0;
  cursor: default;
}

.canvas-text-editor {
  position: absolute;
  z-index: 80;
  min-width: 180px;
  min-height: 38px;
  resize: both;
  padding: 6px 9px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: rgba(18, 22, 25, 0.96);
  color: #f7fbff;
  caret-color: #ffffff;
  font-family: Inter, "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.25;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  pointer-events: auto;
}

.canvas-text-editor:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.statusbar {
  background: var(--chrome-dark);
  border-top: 1px solid #303030;
  padding: 0 12px;
  color: #c8c8c8;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}

.info-bar {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 10px;
  background: #505050;
  border-bottom: 1px solid #383838;
  color: #d7d7d7;
  font-size: 12px;
}

.measurement-guide {
  stroke: #007e6c;
  stroke-width: 0.08;
  stroke-dasharray: 0.2 0.16;
  vector-effect: non-scaling-stroke;
}

.measurement-label {
  fill: #007e6c;
  font-size: 0.45px;
  stroke: none;
}

.properties {
  min-width: 0;
  min-height: 0;
  height: calc(100vh - 68px);
  max-height: calc(100vh - 68px);
  align-self: stretch;
  overflow: hidden;
  background: var(--chrome);
  border-left: 1px solid #333;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.properties[hidden] {
  display: none;
}

.property-tabs {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 1px;
  padding: 5px;
  background: var(--chrome-dark);
  border-bottom: 1px solid #333;
}

.property-tab {
  flex: 1 1 auto;
  min-height: 26px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.property-tab.active {
  background: #6a6a6a;
  border-color: var(--accent-dark);
  color: #fff;
}

.property-page {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
}

.panel-section {
  padding: 0 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.panel-section h2 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0;
  color: #f2f2f2;
}

.field {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.neon-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.neon-action-grid button {
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 7px 8px;
  white-space: normal;
  line-height: 1.25;
}

.neon-action-grid button:last-child {
  grid-column: 1 / -1;
}

.module-layout-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.module-layout-actions button {
  min-height: 38px;
  padding: 6px 8px;
  white-space: normal;
  line-height: 1.2;
}

.module-layout-actions .danger-button {
  grid-column: 1 / -1;
}

.module-alternative-layout {
  min-width: 0;
  min-height: 38px;
  align-self: start;
  cursor: pointer;
}

.module-alternative-layout[hidden] { display: none; }

.module-layout-summary {
  margin: 9px 0 0;
  padding: 7px 9px;
  border: 1px solid var(--theme-border, var(--line));
  border-left: 3px solid var(--theme-accent, var(--accent));
  background: var(--theme-field, var(--field-dark));
  color: var(--theme-text-strong, var(--ink));
  font-weight: 650;
}

.module-workflow-intro {
  margin: 0 0 10px;
}

.module-workflow-subsection {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--theme-border, var(--line));
  background: color-mix(in srgb, var(--theme-field, var(--field-dark)) 58%, transparent);
}

.module-workflow-subsection:last-child {
  margin-bottom: 0;
}

.module-workflow-subsection > h2 {
  padding-bottom: 7px;
  border-bottom: 2px solid var(--theme-accent, var(--accent));
}

.module-lighting-lock-hint,
.module-depth-selection-hint,
.module-rgbw-layout-hint {
  display: none;
}

.module-help-disclosure {
  margin: 6px 0 10px;
  border: 1px solid var(--theme-border, var(--line));
  border-radius: 4px;
  background: var(--theme-field, var(--field-dark));
  color: var(--theme-text, var(--ink));
  font-size: 12px;
}

.module-help-disclosure > summary {
  padding: 6px 8px;
  cursor: pointer;
  line-height: 1.4;
}

.module-help-disclosure > summary:hover {
  color: var(--theme-accent, var(--accent));
}

.module-help-disclosure > summary:focus-visible {
  outline: 2px solid var(--theme-accent, var(--accent));
  outline-offset: 2px;
}

.module-help-content {
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border-top: 1px solid var(--theme-border, var(--line));
  line-height: 1.5;
}

.module-help-content > :first-child {
  margin-top: 0;
}

.module-help-content > :last-child {
  margin-bottom: 0;
}

.module-help-disclosure.invalid {
  border-color: #e35b5b;
}

.module-help-disclosure.invalid > summary {
  color: #ff9e9e;
}

.module-custom-lighting > .module-help-disclosure {
  margin-bottom: 0;
}

.module-lighting-summary {
  margin: 2px 0 10px;
  padding: 8px 9px;
  border-left: 3px solid var(--theme-accent, var(--accent));
  background: var(--theme-field, var(--field-dark));
  color: var(--theme-text-strong, var(--ink));
  font-size: 12px;
  line-height: 1.45;
}

.module-lighting-summary.invalid {
  border-left-color: #e35b5b;
  color: #ffb5b5;
}

.module-custom-lighting {
  margin: 0 0 10px;
  padding: 9px;
  border: 1px solid var(--theme-border, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--theme-field, var(--field-dark)) 72%, transparent);
}

.module-custom-lighting-toggle {
  margin-bottom: 8px;
  color: var(--theme-text-strong, var(--ink));
  font-weight: 700;
}

.module-custom-lighting-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.module-custom-lighting-fields .field {
  margin: 0;
}

.module-custom-lighting-validation {
  margin: 8px 0 0;
  color: var(--theme-text, var(--ink));
  font-size: 11px;
  line-height: 1.45;
}

.module-custom-lighting-validation.valid {
  color: #78d89a;
}

.module-custom-lighting-validation.invalid {
  color: #ff9e9e;
}

.module-bom-stat-list {
  margin: 0;
  border: 1px solid var(--theme-border, var(--line));
  background: var(--theme-field, var(--field-dark));
}

.module-bom-stat-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--theme-border, var(--line));
}

.module-bom-stat-list > div:last-child {
  border-bottom: 0;
}

.module-bom-stat-list dt,
.module-bom-stat-list dd {
  margin: 0;
}

.power-supply-selection-summary {
  margin: 3px 0 9px;
  padding: 8px 9px;
  border-left: 3px solid var(--theme-accent, var(--accent));
  background: var(--theme-field, var(--field-dark));
  color: var(--theme-text-strong, var(--ink));
  font-size: 12px;
  line-height: 1.45;
}

.power-supply-recommendation {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--theme-border, var(--line));
  border-left: 3px solid var(--theme-accent, var(--accent));
  border-radius: 6px;
  background: var(--theme-field, var(--field-dark));
  font-size: 12px;
  line-height: 1.5;
}

.power-supply-recommendation strong {
  color: var(--theme-accent, var(--accent));
}

.power-supply-recommendation p {
  margin: 5px 0 8px;
}

.power-supply-recommendation button {
  width: 100%;
  min-height: 32px;
}

.power-supply-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.power-supply-actions button {
  min-height: 38px;
  padding: 6px 8px;
  white-space: normal;
}

.power-allocation-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  color: var(--theme-text, var(--ink));
  font-size: 11px;
}

.power-allocation-table th,
.power-allocation-table td {
  padding: 6px 5px;
  border: 1px solid var(--theme-border, var(--line));
  text-align: left;
}

.power-allocation-table th {
  background: var(--theme-field, var(--field-dark));
  color: var(--theme-text-strong, var(--ink));
}

.power-allocation-row {
  cursor: pointer;
}

.power-allocation-row:hover,
.power-allocation-row:focus-visible {
  background: color-mix(in srgb, var(--theme-accent, var(--accent)) 18%, transparent);
  outline: none;
}

.power-allocation-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--power-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--power-color) 55%, #000000);
}

.controller-rule-note,
.controller-allocation-status,
.controller-topology-note,
.controller-upstream {
  font-size: 12px;
  line-height: 1.6;
  color: var(--theme-muted, var(--ink));
}

.controller-allocation-status {
  padding: 8px;
  border-left: 3px solid var(--theme-accent, var(--accent));
  background: var(--theme-field, var(--field-dark));
  color: var(--theme-text, var(--ink));
}

.controller-allocation-status.needs-attention,
.controller-issues { color: var(--theme-warning, #edb65b); }
.controller-issues { padding-left: 22px; font-size: 12px; line-height: 1.5; }
.controller-power-settings[hidden] { display: none; }
.controller-equipment h3,
.controller-connections h3 { font-size: 12px; margin: 15px 0 7px; }
.controller-equipment-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.controller-equipment-table th,
.controller-equipment-table td { border-bottom: 1px solid var(--theme-border, var(--line)); padding: 7px 4px; text-align: left; }
.controller-equipment-table th:last-child,
.controller-equipment-table td:last-child { text-align: right; width: 34px; }
.controller-equipment-table strong,
.controller-equipment-table span { display: block; overflow-wrap: anywhere; }
.controller-equipment-table span { margin-top: 3px; color: var(--theme-muted, var(--ink)); line-height: 1.4; }
.controller-device-card { margin: 9px 0; border: 1px solid var(--theme-border, var(--line)); border-radius: 4px; overflow: hidden; }
.controller-device-card h4 { padding: 8px; margin: 0; font-size: 11px; line-height: 1.5; background: var(--theme-field, var(--field-dark)); }
.controller-upstream { padding: 0 8px; margin: 5px 0; font-size: 11px; }
.controller-port { border-top: 1px solid var(--theme-border, var(--line)); padding: 8px; font-size: 11px; }
.controller-port summary { cursor: pointer; line-height: 1.7; }
.controller-port-capacity { display: block; color: var(--theme-muted, var(--ink)); }
.controller-port-meter { display: block; height: 6px; width: 100%; margin-top: 4px; accent-color: var(--theme-accent, var(--accent)); }
.controller-supply-link { display: block; width: 100%; margin-top: 5px; padding: 6px; text-align: left; line-height: 1.5; white-space: normal; }

.controller-configuration,
.controller-equipment-details { border-bottom: 1px solid var(--theme-border, var(--line)); padding: 4px 0 9px; }
.controller-configuration > summary,
.controller-equipment-details > summary { cursor: pointer; padding: 5px 0; font-size: 12px; font-weight: 650; }
.controller-configuration[open] > summary { margin-bottom: 8px; }
.controller-open-diagram { width: calc(100% - 18px); padding: 11px; font-size: 13px; font-weight: 700; }
.controller-connection-counts { display: flex; gap: 5px; flex-wrap: wrap; font-size: 11px; }
.controller-connection-counts span { padding: 5px 6px; border-radius: 4px; background: var(--theme-field, var(--field-dark)); }
.controller-connection-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 9px 0; font-size: 11px; line-height: 1.5; }
.controller-connection-legend .signal { color: #58c4ff; }
.controller-connection-legend .power { color: #ffa94f; }
.controller-connection-legend .output,
.controller-branch-output { color: #71cfad; }
.controller-device-heading { padding: 10px; background: var(--theme-field, var(--field-dark)); }
.controller-device-heading h4 { padding: 0; font-size: 13px; }
.controller-device-heading p { margin: 4px 0 0; font-size: 11px; color: var(--theme-muted, var(--ink)); }
.controller-port > summary { font-size: 12px; }
.controller-port-count { float: right; font-size: 11px; }
.controller-port-diagram-link { margin: 7px 0; padding: 5px 7px; color: var(--theme-accent, var(--accent)); font-size: 11px; }
.controller-wiring-branch { margin: 5px 0 8px; padding: 9px; background: var(--theme-field, var(--field-dark)); border: 1px solid var(--theme-border, var(--line)); border-radius: 4px; }
.controller-signal-route { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.controller-signal-node,
.controller-module-node { padding: 4px 5px; border: 1px solid #2979a9; border-radius: 3px; color: #77ccfc; }
.controller-signal-node.output,
.controller-module-node.output { color: #71cfad; border-color: #379275; }
.controller-route-arrow { color: #58c4ff; font-size: 15px; }
.controller-route-arrow.output { color: #71cfad; }
.controller-branch-power { margin: 7px 0 3px; color: #ffa94f; font-size: 11px; line-height: 1.5; }
.controller-branch-products { margin: 3px 0 5px; color: var(--theme-muted, var(--ink)); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.controller-branch-output { font-size: 10px; margin: 4px 0 0; }
.controller-locate-branch { padding: 3px 7px; min-height: 24px; font-size: 10px; }
.controller-network-note,
.controller-wireless-note { padding: 7px; font-size: 11px; line-height: 1.6; }
.controller-network-note { color: #bb9cf5; border-left: 2px solid #9572ce; }
.controller-wireless-note { color: var(--theme-muted, var(--ink)); border-left: 2px dashed var(--theme-muted, var(--ink)); }
.controller-port-specifications { padding: 2px 0; color: var(--theme-muted, var(--ink)); }
.controller-port-specifications summary { font-size: 10px; }
html[data-theme="light"] .controller-connection-legend .signal,
html[data-theme="light"] .controller-route-arrow,
html[data-theme="light"] .controller-signal-node,
html[data-theme="light"] .controller-module-node { color: #12699b; }
html[data-theme="light"] .controller-connection-legend .power,
html[data-theme="light"] .controller-branch-power { color: #aa520c; }
html[data-theme="light"] .controller-connection-legend .output,
html[data-theme="light"] .controller-branch-output,
html[data-theme="light"] .controller-signal-node.output,
html[data-theme="light"] .controller-module-node.output,
html[data-theme="light"] .controller-route-arrow.output { color: #1d7359; }
html[data-theme="light"] .controller-network-note { color: #7040aa; }

.controller-wiring-dialog { width: calc(100vw - 40px); height: calc(100vh - 40px); max-width: 1800px; max-height: 1200px; padding: 0; border: 1px solid #556b7c; border-radius: 9px; color: #1c3348; background: #f4f7fa; overflow: hidden; }
.controller-wiring-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.controller-wiring-dialog::backdrop { background: #06131dc9; }
.controller-wiring-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #102c42; color: #fff; }
.controller-wiring-header h2 { margin: 0; font-size: 19px; }
.controller-wiring-header p { margin: 3px 0 0; font-size: 12px; color: #bed1df; }
.controller-wiring-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #cdd8e2; }
.controller-wiring-dialog button,
.controller-wiring-dialog select { min-height: 32px; padding: 6px 9px; border: 1px solid #b8cad8; border-radius: 4px; background: #fff; color: #23425a; font-size: 12px; }
.controller-wiring-dialog button:hover { background: #eaf3fa; }
.controller-wiring-dialog button.primary { background: #176ba0; border-color: #176ba0; color: #fff; }
.controller-wiring-dialog button:disabled { opacity: .45; cursor: default; }
.controller-wiring-dialog button[hidden] { display: none; }
.controller-wiring-dialog button:focus-visible,
.controller-wiring-dialog select:focus-visible { outline: 2px solid #338dcc; outline-offset: 2px; }
.controller-wiring-page-select { flex: 1 1 210px; max-width: 480px; min-width: 140px; }
.controller-wiring-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
.controller-wiring-navigation { overflow: auto; padding: 12px 9px; border-right: 1px solid #cdd8e2; background: #f9fbfd; }
.controller-wiring-navigation button { display: block; width: 100%; margin-bottom: 6px; padding: 9px; text-align: left; line-height: 1.5; white-space: normal; border-color: transparent; background: transparent; }
.controller-wiring-navigation button.active { background: #dfedf8; border-color: #b2d2e9; color: #12577f; font-weight: 700; }
.controller-wiring-viewport { overflow: auto; min-height: 0; min-width: 0; padding: 20px; background: #dfe6ed; box-sizing: border-box; }
.controller-wiring-sheet { margin: 0 auto; flex: none; background: white; box-shadow: 0 2px 12px #172c4126; }
.controller-wiring-image { display: block; width: 100%; height: auto; max-width: none; }
.controller-wiring-footer { padding: 10px 15px; border-top: 1px solid #cdd8e2; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; font-size: 12px; }
.controller-wiring-progress { color: #166799; }
@media (max-width: 760px) {
  .controller-wiring-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); }
  .controller-wiring-body { grid-template-columns: minmax(0, 1fr); }
  .controller-wiring-navigation { display: none; }
  .controller-wiring-header { padding: 9px 12px; }
  .controller-wiring-header h2 { font-size: 16px; }
  .controller-wiring-toolbar { padding: 8px; }
}

.module-bom-stat-list dt {
  color: var(--theme-text, var(--ink));
}

.module-bom-stat-list dd {
  color: var(--theme-text-strong, #ffffff);
  font-size: 15px;
  font-weight: 750;
  text-align: right;
}

.module-depth-table-wrap {
  margin: 0 0 10px;
  overflow-x: auto;
}

.module-depth-table-title {
  margin: 0 0 5px;
  color: var(--theme-text-strong, var(--ink));
  font-size: 12px;
  font-weight: 700;
}

.module-depth-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--theme-text, var(--ink));
  font-size: 11px;
  text-align: center;
}

.module-depth-table th,
.module-depth-table td {
  padding: 5px 3px;
  border: 1px solid var(--theme-border, var(--line));
}

.module-depth-table th {
  background: var(--theme-field, var(--field-dark));
  color: var(--theme-text-strong, var(--ink));
}

.module-depth-table tbody tr.active {
  background: color-mix(in srgb, var(--theme-accent, var(--accent)) 22%, transparent);
  color: var(--theme-text-strong, var(--ink));
  font-weight: 700;
}

.layer-color-control {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.layer-color-control h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.layer-color-control input[type="color"] {
  width: 72px;
  height: 36px;
}

.dimension-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.dimension-action-grid button {
  width: 100%;
  margin: 0;
}

.dimension-action-grid button:last-child {
  grid-column: 1 / -1;
}

.dimension-extension,
.dimension-end-mark {
  fill: none;
  stroke-width: 0.045;
  vector-effect: none;
}

.native-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.localized-file-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.localized-file-picker button {
  margin: 0;
  white-space: nowrap;
}

.localized-file-picker span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  gap: 6px;
}

.product-row button {
  min-width: 44px;
  padding-inline: 8px;
}

.danger-button {
  border-color: #8e4b4b;
  background: #6a3f3f;
  color: #fff;
}

.module-lighting-settings :disabled {
  opacity: .5;
  cursor: not-allowed;
}

.danger-button:hover:not(:disabled) {
  background: #7d4848;
}

input[type="range"] {
  accent-color: var(--accent);
  width: 100%;
  min-width: 0;
  cursor: pointer;
  pointer-events: auto;
}

.range-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.range-value {
  color: #f2f2f2;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

input[type="color"] {
  padding: 2px;
}

.primary {
  background: #118d6f;
  color: #fff;
  border-color: #15a381;
}

.danger {
  color: var(--warn);
  border-color: rgba(226, 59, 59, 0.35);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.48);
}

.recognition-dialog {
  width: min(520px, calc(100vw - 36px));
  max-height: calc(100vh - 42px);
  overflow: auto;
  padding: 16px;
  color: var(--text);
  background: #474747;
  border: 1px solid #666;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.45);
}

.recognition-dialog h2 {
  margin: 0 0 8px;
  color: #f4f4f4;
  font-size: 16px;
  letter-spacing: 0;
}

.dialog-subtitle {
  margin: 12px 0 8px;
  color: #f4f4f4;
  font-size: 13px;
  letter-spacing: 0;
}

.recognition-range {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.recognition-presets {
  display: flex;
  gap: 8px;
  margin: -2px 0 10px;
}

.recognition-presets button {
  flex: 1;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.workspace-border {
  fill: #ffffff;
  stroke: #222;
  stroke-width: 1;
  stroke-dasharray: none;
}

.shape {
  /* Base artwork must remain clearly readable on the dark canvas. */
  fill: rgba(74, 116, 126, 0.14);
  stroke: #91a3ab;
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
}

.image-object image {
  opacity: 0.9;
}

.image-object-frame {
  fill: none;
  stroke: rgba(255, 86, 161, 0.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.image-object.selected .image-object-frame {
  stroke: var(--violet);
  stroke-dasharray: 4 4;
}

.neon {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.neon-tube,
.neon-tube-halo {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: none;
}

.neon-tube {
  stroke: #09a9e8;
}

.neon-start-lead {
  fill: none;
  stroke: #ff6f61;
  stroke-width: 0.045;
  vector-effect: none;
  cursor: move;
}

.neon-start-tag {
  fill: #75d0dc;
  stroke: #ff8b72;
  stroke-width: 0.035;
  vector-effect: none;
  cursor: move;
}

.neon-start-number {
  fill: #0f1720;
  font-size: 0.68px;
  font-style: italic;
  stroke: none;
  cursor: move;
  user-select: none;
}

.led-module {
  stroke: #5b4a00;
  stroke-width: 0.04;
  vector-effect: non-scaling-stroke;
}

.led-module-body {
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
}

.led-module-light {
  fill: #fffbe6;
  stroke: #8a6b00;
  stroke-width: 0.025;
  vector-effect: non-scaling-stroke;
}

.anpro-stick-length-label {
  fill: var(--theme-text-strong, #fffaf0);
  stroke: var(--theme-canvas, #102d42);
  stroke-width: 2;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}

.anpro-spacing-dimensions {
  color: var(--theme-text-strong, #fffaf0);
  pointer-events: none;
  user-select: none;
}

.anpro-spacing-dimension-line,
.anpro-spacing-dimension-extension {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.anpro-spacing-dimension-extension { opacity: .6; }
.anpro-spacing-dimension-arrow { fill: currentColor; stroke: none; }

.anpro-spacing-dimension-label {
  fill: currentColor;
  stroke: var(--theme-canvas, #102d42);
  stroke-width: 2;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-weight: 600;
}

.led-module.selected .led-module-body {
  stroke: var(--violet);
  stroke-width: 0.08;
}

.led-module.power-assigned .led-module-body {
  stroke: var(--power-color);
  stroke-width: 0.085;
}

.led-module.power-assigned.selected .led-module-body {
  stroke: var(--violet);
  stroke-width: 0.1;
}

.module-power-number {
  fill: #07131c;
  stroke: #ffffff;
  stroke-width: 0.035;
  paint-order: stroke fill;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
}

.power-supply-assignment-layer {
  pointer-events: none;
}

.power-supply-assignment {
  pointer-events: visiblePainted;
  cursor: move;
}

.power-supply-cable {
  fill: none;
  stroke: var(--power-color);
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-dasharray: 8px 5px;
  opacity: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  filter: drop-shadow(0 0 2px var(--power-color));
}

.power-supply-label-bg {
  fill: color-mix(in srgb, var(--theme-workspace, #102534) 88%, transparent);
  stroke: var(--power-color);
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
}

.power-supply-node:hover .power-supply-label-bg {
  filter: brightness(1.16);
}

.power-supply-node.selected .power-supply-label-bg {
  stroke: var(--violet);
  stroke-width: 2.6px;
}

.power-supply-terminal {
  fill: var(--power-color);
  stroke: #ffffff;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.power-supply-label-title,
.power-supply-label-detail,
.power-supply-label-model {
  stroke: none;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  user-select: none;
}

.power-supply-label-title {
  fill: var(--power-color);
  font-weight: 900;
}

.power-supply-label-detail {
  fill: var(--theme-text-strong, #ffffff);
  font-weight: 700;
}

.power-supply-label-model {
  fill: color-mix(in srgb, var(--theme-text-strong, #ffffff) 72%, transparent);
  font-weight: 650;
}

/* Allocation views keep electrical data intact and reduce visual competition. */
.power-view .led-module.power-assigned .led-module-body {
  fill: var(--power-color);
  stroke: var(--power-color);
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
}
.power-view .led-module-light { display: none; }
.power-view .neon, .power-view .neon-label-layer { opacity: .12; }
.power-view .module-part-summary-layer { opacity: .58; }
.power-view .power-view-muted { opacity: .22; }
.power-view .led-module.power-view-muted .led-module-body {
  fill: #82909d;
  stroke: #82909d;
  stroke-width: .7px;
}
.power-view .led-module.power-view-active .led-module-body {
  stroke-width: 2.4px;
}
.power-view .led-module.power-assigned.selected .led-module-body {
  stroke: var(--violet);
  stroke-width: 2.4px;
}
.power-view .led-module.power-view-unassigned .led-module-body {
  fill: #fff0c2;
  stroke: #f29524;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.power-view .module-power-number { stroke-width: .02; }
.power-view .power-supply-cable {
  stroke-width: 1.4px;
  stroke-dasharray: 5px 4px;
  opacity: .7;
  filter: none;
}
.power-view .module-wire-link { opacity: .75; }
.power-branch-start { fill: var(--power-color); stroke: var(--theme-canvas, #102d42); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.power-supply-compact { pointer-events: visiblePainted; cursor: grab; }
.power-supply-compact, .power-supply-node { touch-action: none; user-select: none; }
.moving-power-supply, .moving-power-supply * { cursor: grabbing !important; }
.power-supply-compact.locked, .power-supply-node.locked { cursor: default; }
.power-supply-compact:focus { outline: none; }
.power-position-leader { stroke: var(--power-color); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: .65; }
.power-position-dot { fill: var(--power-color); stroke: var(--theme-canvas, #102d42); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.power-compact-bg { fill: var(--theme-workspace, #102534); stroke: var(--power-color); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.power-compact-text { fill: var(--power-color); font-family: Inter, "Segoe UI", Arial, sans-serif; font-weight: 750; pointer-events: none; }
.power-supply-compact:hover .power-compact-bg,
.power-supply-compact:focus .power-compact-bg,
.power-supply-compact.power-view-active .power-compact-bg { stroke-width: 2.5px; }

.module-part-summary-layer,
.module-part-summary {
  pointer-events: none;
}

.module-part-summary-bg {
  fill: color-mix(in srgb, var(--theme-workspace) 88%, transparent);
  stroke: var(--theme-accent);
  stroke-width: 0.035;
  vector-effect: non-scaling-stroke;
}

.module-part-summary-lead {
  stroke: var(--theme-text-strong);
  stroke-width: 1;
  stroke-opacity: 0.45;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.module-part-summary-text {
  fill: var(--theme-text-strong);
  stroke: none;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-weight: 700;
  user-select: none;
}

.module-part-summary-power {
  fill: var(--theme-accent-hover);
}

.module-part-summary-density {
  fill: var(--theme-text-strong);
}

.canvas-module-notice {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  max-width: min(620px, 90vw);
  padding: 10px 16px;
  border: 1px solid var(--theme-accent-hover);
  border-radius: 6px;
  color: var(--theme-status-text);
  background: var(--theme-status);
  font-size: 14px;
  pointer-events: none;
}

.module-range-count-bg {
  fill: color-mix(in srgb, var(--theme-status) 92%, transparent);
  stroke: var(--theme-accent-hover);
  stroke-width: 0.04;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.module-range-count-text {
  fill: var(--theme-status-text);
  stroke: none;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-weight: 800;
  pointer-events: none;
  user-select: none;
}

.module-wire-layer {
  pointer-events: none;
}

.module-wire-link {
  fill: none;
  stroke: var(--theme-text-strong, #ffffff);
  stroke-width: 0.065;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.module-wire-link.over-length {
  stroke: #ff5a67;
  stroke-dasharray: 0.18 0.12;
}

.module-wire-link.module-daisy-jumper {
  stroke-dasharray: .28 .12;
  pointer-events: stroke;
}

.module-wire-link.power-assigned:not(.over-length) {
  stroke: var(--power-color);
}

.module-wire-link.power-boundary:not(.over-length) {
  stroke: #f7f8fb;
  stroke-dasharray: 0.14 0.11;
  opacity: 0.7;
}

.module-power-break-layer { pointer-events: none; }
.module-power-break-terminal { pointer-events: visibleStroke; }
.module-power-break-terminal.power-break-muted { opacity: .32; }
.module-power-break-halo, .module-power-break-tick { fill: none; }

.cad-layer path,
.cad-layer text {
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.cad-outline path {
  stroke: #c8d4d8;
  stroke-width: 0.11;
  stroke-dasharray: 0.35 0.22;
}

.cad-centerline path {
  stroke: #c8d4d8;
  stroke-width: 0.09;
  stroke-dasharray: 0.2 0.16;
}

.cad-bend path,
.cad-bend text {
  stroke: #ffffff;
  fill: #ffffff;
  stroke-width: 0.05;
}

.cad-dimension path,
.cad-dimension text {
  stroke: #ffffff;
  fill: #ffffff;
  stroke-width: 0.05;
}

.warning-point {
  fill: var(--warn);
  stroke: #fff;
  stroke-width: 0.06;
  vector-effect: none;
}

.print-cut-mark {
  stroke: #101820;
  stroke-width: 0.06;
  vector-effect: non-scaling-stroke;
}

.print-dimension {
  fill: #101820;
  stroke: none;
}

.selected {
  stroke: var(--violet);
  stroke-dasharray: 4 4;
}

.locked-object {
  opacity: 0.32;
  cursor: not-allowed;
}

.selection-overlay {
  pointer-events: none;
}

.selection-outline {
  fill: none;
  stroke: var(--violet);
  stroke-width: 0.08;
  stroke-dasharray: 0.22 0.16;
  vector-effect: non-scaling-stroke;
}

.selection-handle {
  fill: #ffffff;
  stroke: var(--violet);
  stroke-width: 0.08;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}

.selection-handle-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.module-rotation-handle {
  cursor: grab;
  pointer-events: all;
}

.module-rotation-handle-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.module-rotation-handle-ring {
  fill: var(--theme-surface, #102f42);
  stroke: var(--theme-accent, #ffcd55);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.module-rotation-handle-arrow {
  fill: none;
  stroke: var(--theme-accent, #ffcd55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.module-rotation-stem {
  stroke: var(--theme-accent, #ffcd55);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.module-rotation-angle {
  fill: var(--theme-accent, #ffcd55);
  stroke: var(--theme-surface, #102f42);
  stroke-width: 3;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.canvas-wrap.rotating-module #designCanvas,
.selection-overlay.rotating-module,
.selection-overlay.rotating-module .module-rotation-handle {
  cursor: grabbing;
}

.neon-anchor-point {
  fill: #ffffff;
  stroke: #09a9e8;
  stroke-width: 0.06;
  vector-effect: none;
  pointer-events: all;
  cursor: move;
}

.handle-nw,
.handle-se {
  cursor: nwse-resize;
}

.handle-ne,
.handle-sw {
  cursor: nesw-resize;
}

.selection-box {
  fill: rgba(0, 168, 143, 0.12);
  stroke: var(--accent);
  stroke-width: 0.08;
  stroke-dasharray: 0.25 0.16;
  vector-effect: non-scaling-stroke;
}

.pen-preview-point {
  fill: #ffffff;
  stroke: var(--violet);
  stroke-width: 0.06;
  vector-effect: none;
}

.bom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #dedede;
}

.bom-table th,
.bom-table td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 6px 4px;
}

.bom-table th {
  color: #f2f2f2;
  font-weight: 650;
}

.bom-row {
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.bom-row:hover,
.bom-row:focus-visible {
  background: rgba(19, 178, 234, 0.12);
  outline: 1px solid rgba(19, 178, 234, 0.55);
  outline-offset: -1px;
}

.bom-row.selected {
  background: rgba(19, 178, 234, 0.2);
  color: #ffffff;
}

.bom-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.bom-actions > button {
  min-height: 28px;
  padding: 0 10px;
}

.bom-export-excel {
  border-color: #168c4d;
  background: #11683b;
  color: #ffffff;
}

.bom-export-excel:hover,
.bom-export-excel:focus-visible {
  border-color: #26b96b;
  background: #17844c;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 20, 30, 0.42);
  display: grid;
  place-items: center;
  z-index: 30;
}

.modal {
  width: min(520px, calc(100vw - 32px));
  background: var(--chrome);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 18px;
  box-shadow: 0 18px 54px rgba(13, 20, 30, 0.22);
}

.modal h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.5);
}

.product-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: #565656;
  border: 1px solid #303030;
  border-radius: 3px;
  padding: 18px;
  color: var(--ink);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
}

.product-modal h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.product-confirm-modal {
  width: min(460px, calc(100vw - 32px));
}

.export-project-choices {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.export-project-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #777;
  border-radius: 3px;
  background: #464646;
  cursor: pointer;
}

.export-project-choice:has(input:checked) {
  border-color: var(--cyan);
  background: #353f43;
}

.export-project-choice input {
  margin-top: 3px;
}

.export-project-choice strong,
.export-project-choice small {
  display: block;
}

.export-project-choice small {
  margin-top: 4px;
  color: var(--muted);
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-top: 14px;
}

.modal-grid .field {
  margin-bottom: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.modal-error {
  min-height: 18px;
  margin: 10px 0 0;
  color: #ff8a8a;
  font-size: 12px;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: 13px;
  color: #dddddd;
}

.check-row input {
  min-height: auto;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.cad-warning {
  color: var(--warn);
  font-size: 12px;
  margin: 8px 0 0;
}

.neon-simulation {
  position: absolute;
  z-index: 8;
  box-sizing: border-box;
  width: 410px;
  height: 300px;
  min-width: 320px;
  min-height: 250px;
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
  display: flex;
  flex-direction: column;
  background: #101820;
  border: 1px solid #1e536d;
  border-radius: 6px;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.56), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #dfeaf0;
  overflow: hidden;
  pointer-events: none;
}

.neon-simulation-header {
  flex: 0 0 auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  background: linear-gradient(180deg, #15354a, #0e2230);
  border-bottom: 1px solid #2f6078;
  cursor: move;
  user-select: none;
  pointer-events: auto;
}

.neon-simulation-header strong {
  font-size: 13px;
}

.neon-simulation-header span {
  flex: 1;
  color: #9fc5d6;
  font-size: 11px;
  text-align: right;
}

.neon-simulation-export,
.neon-simulation-hide {
  pointer-events: auto;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #1f6f8a;
  background: #123344;
  color: #d7f6ff;
  font-size: 11px;
}

.neon-simulation-hide {
  border-color: #52636c;
  background: #29343a;
  color: #d7e1e6;
}

.neon-simulation-show {
  position: absolute;
  z-index: 8;
  top: 10px;
  right: 10px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid #1f6f8a;
  border-radius: 4px;
  background: #123344;
  color: #d7f6ff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

.neon-simulation-body {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(57, 96, 113, 0.34), transparent 58%),
    linear-gradient(180deg, #111a21, #0a1016);
}

.neon-simulation-body p {
  margin: 0;
  color: #9caeb8;
  font-size: 12px;
  text-align: center;
}

.neon-simulation-svg {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  background: #0a1117;
  border-radius: 4px;
  box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.55);
}

.neon-simulation-resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 4;
  width: 30px;
  height: 30px;
  pointer-events: auto;
  touch-action: none;
  padding: 0;
  border: 0;
  border-right: 2px solid #57b9df;
  border-bottom: 2px solid #57b9df;
  background:
    linear-gradient(
      135deg,
      transparent 42%,
      rgba(87, 185, 223, 0.9) 43%,
      rgba(87, 185, 223, 0.9) 50%,
      transparent 51%,
      transparent 62%,
      rgba(87, 185, 223, 0.9) 63%,
      rgba(87, 185, 223, 0.9) 70%,
      transparent 71%
    );
  cursor: nwse-resize;
  pointer-events: auto;
  opacity: 0.92;
}

.neon-simulation.is-resizing,
.neon-simulation.is-resizing * {
  cursor: nwse-resize !important;
  user-select: none;
}

.neon-simulation-resize-handle:hover,
.neon-simulation-resize-handle:focus-visible {
  opacity: 1;
  outline: 1px solid rgba(87, 185, 223, 0.7);
  outline-offset: -4px;
}

.neon-simulation-svg[data-background-mode="day"] {
  background: #f4f1e9;
}

.neon-simulation-backdrop {
  opacity: 1;
}

.neon-simulation-board {
  stroke-width: 0.25;
  filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, 0.28));
}

.neon-simulation-board-acrylic {
  fill: rgba(232, 252, 255, 0.18);
  stroke: rgba(199, 242, 248, 0.45);
}

.neon-simulation-board-aluminum {
  fill: rgba(213, 218, 218, 0.26);
  stroke: rgba(170, 180, 181, 0.55);
}

.neon-simulation-board-stainless {
  fill: rgba(190, 199, 205, 0.22);
  stroke: rgba(220, 228, 232, 0.52);
}

.neon-simulation-wall-glow,
.neon-simulation-aura,
.neon-simulation-halo,
.neon-simulation-glass,
.neon-simulation-core,
.neon-simulation-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.neon-simulation-aura {
  mix-blend-mode: screen;
}

.neon-simulation-wall-glow {
  mix-blend-mode: screen;
}

.neon-simulation-halo {
  mix-blend-mode: screen;
}

.neon-simulation-glass {
  mix-blend-mode: screen;
}

.neon-simulation-core {
  mix-blend-mode: screen;
}

.neon-simulation-highlight {
  mix-blend-mode: screen;
}

.neon-simulation-spec {
  fill: #e8fbff;
  paint-order: stroke;
  stroke: rgba(4, 18, 25, 0.82);
  stroke-width: 0.28em;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr;
    height: auto;
    padding: 10px;
  }

  .workspace-shell {
    grid-template-columns: 48px 1fr;
  }

  .drawing-sidebar {
    display: none;
  }

  .properties {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: 42vh;
  }

  .property-page {
    overflow: auto;
  }
}

/* Professional CAD workspace skin */
:root {
  --ink: #d8dde1;
  --muted: #92999f;
  --line: #393c40;
  --panel: #282a2d;
  --paper: #151719;
  --chrome: #27292c;
  --chrome-dark: #202225;
  --chrome-darker: #1b1d1f;
  --canvas-gray: #242629;
  --field: #303338;
  --field-dark: #191b1e;
  --accent: #079de3;
  --accent-dark: #38b5f0;
  --warn: #f06a6a;
  --violet: #ff5d9c;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: #17191b;
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
}

button,
.tool-button {
  min-height: 26px;
  border-color: #36393d;
  background: #2d3034;
  color: #cbd0d4;
}

button:hover,
.tool-button:hover {
  border-color: #51565b;
  background: #373b3f;
  color: #ffffff;
}

.topbar {
  height: 68px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 32px 36px;
  gap: 0;
  padding: 0;
  background: #202225;
  border-bottom: 1px solid #121416;
  box-shadow: none;
}

.topbar-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 10px;
  background: #25272a;
  border-bottom: 1px solid #16181a;
}

.brand {
  min-width: 214px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #39c9ee;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.brand-logo {
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 1px;
  background: #fff;
  border-radius: 4px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.cad-menu {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #b7bcc0;
  font-size: 12px;
  white-space: nowrap;
}

.cad-menu span {
  cursor: pointer;
}

.cad-menu span:hover {
  color: #ffffff;
}

.app-menu-trigger {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 2px;
  outline: none;
}

.app-menu-trigger:hover,
.app-menu-trigger:focus-visible,
.app-menu-trigger.open {
  background: #3a3d41;
  color: #ffffff;
}

.application-menu-popup {
  position: fixed;
  z-index: 10000;
  min-width: 232px;
  padding: 5px;
  border: 1px solid #4b5055;
  border-radius: 3px;
  background: #292c2f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48);
}

.application-menu-popup button {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #e1e5e7;
  text-align: left;
}

.application-menu-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

.application-menu-check {
  width: 20px;
  flex: 0 0 20px;
  color: #eaf9ff;
  font-size: 15px;
  font-weight: 700;
}

.application-menu-popup button:hover,
.application-menu-popup button:focus-visible {
  background: #087fb7;
  color: #ffffff;
}

.application-menu-popup kbd {
  color: #aeb6bb;
  font: 11px/1.2 inherit;
  white-space: nowrap;
}

.application-menu-popup button:hover kbd {
  color: #e9f7fc;
}

.application-menu-separator {
  height: 1px;
  margin: 4px 5px;
  background: #464a4e;
}

.switchers {
  margin-left: auto;
  gap: 4px;
}

.switchers select {
  min-height: 24px;
  max-width: 112px;
  padding: 0 20px 0 7px;
  border: 1px solid transparent;
  background: #202225;
  color: #aeb4b8;
  font-size: 11px;
}

.menu {
  gap: 2px;
  min-width: 0;
  padding: 4px 10px 4px 58px;
  background: #1d1f21;
  border-bottom: 1px solid #111315;
  overflow-x: auto;
}

.menu button {
  min-width: 54px;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border-color: transparent;
  background: transparent;
  font-size: 11px;
}

.menu button::before {
  color: #b8c0c5;
  font-size: 14px;
  line-height: 1;
}

.menu button[data-action="new"]::before { content: "+"; }
.menu button[data-action="template"]::before { content: "▱"; }
.menu button[data-action="cad-import"]::before { content: "↑"; }
.menu button[data-action="open"]::before { content: "▭"; }
.menu button[data-action="save"]::before { content: "▣"; }
.menu button[data-action="export"]::before { content: "↓"; }
.menu button[data-action="mail"]::before { content: "✉"; }

.workspace-shell {
  height: calc(100vh - 68px);
  min-height: 0;
  grid-template-columns: 54px minmax(460px, 1fr) 320px;
  background: #1b1d1f;
}

.drawing-sidebar {
  display: none;
}

.tool-rail {
  grid-column: 1;
  position: relative;
  z-index: 30;
  overflow: visible;
  align-items: stretch;
  gap: 2px;
  padding: 5px 5px 8px;
  background: #1d1f21;
  border-right: 1px solid #101214;
}

.tool-button {
  position: relative;
  width: 44px;
  min-height: 42px;
  display: grid;
  grid-template-rows: 24px 10px;
  place-items: center;
  gap: 1px;
  padding: 3px 1px;
  border: 1px solid transparent;
  background: transparent;
  color: #aeb5ba;
  font-weight: 500;
}

.tool-button.active {
  border-color: #087eb7;
  background: #0879af;
  color: #ffffff;
  box-shadow: inset 3px 0 0 #5ed5ff;
}

.tool-icon {
  font-family: "Segoe UI Symbol", "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.tool-name {
  max-width: 40px;
  overflow: hidden;
  color: inherit;
  font-size: 9px;
  line-height: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-zone {
  grid-column: 2;
  grid-template-rows: 35px auto 24px minmax(0, 1fr);
  background: #222427;
  border-right: 1px solid #111315;
}

.subbar {
  gap: 1px;
  padding: 3px 7px;
  background: #242629;
  border-bottom: 1px solid #151719;
}

.subbar > button {
  position: relative;
  width: 32px;
  min-width: 32px;
  min-height: 28px;
  padding: 0;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  color: transparent;
  font-size: 0;
}

.subbar > button::before {
  display: grid;
  place-items: center;
  color: #b2b8bd;
  font: 17px/1 "Segoe UI Symbol", "Segoe UI", sans-serif;
}

.subbar > button:hover::before {
  color: #ffffff;
}

.subbar > button[data-action="lock"]::before,
.subbar > button[data-action="unlock"]::before {
  display: none;
  content: "";
}

.subbar .edit-action-icon {
  width: 18px;
  height: 18px;
  display: block;
  margin: auto;
  fill: none;
  stroke: #b2b8bd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.subbar > button:hover .edit-action-icon,
.subbar > button:focus-visible .edit-action-icon {
  stroke: #ffffff;
}

.subbar > button[data-command="undo"]::before { content: "↶"; }
.subbar > button[data-command="redo"]::before { content: "↷"; }
.subbar > button[data-command="cut"]::before { content: "✂"; }
.subbar > button[data-command="copy"]::before { content: "⧉"; }
.subbar > button[data-command="paste"]::before { content: "▣"; }
.subbar > button[data-command="delete"]::before { content: "⌫"; }
.subbar > button[data-command="lock"]::before { content: "▦"; }
.subbar > button[data-command="unlock"]::before { content: "▧"; }
.subbar > button:is([data-command="合并路径"], [data-command="Merge paths"])::before { content: "⇉"; }
.subbar > button:is([data-command="反向走线"], [data-command="Reverse run"])::before { content: "⇄"; }
.subbar > button:is([data-command="中点拆分"], [data-command="Split run"])::before { content: "⫶"; }
.subbar > button:is([data-command="修复路径"], [data-command="Repair path"])::before { content: "◇"; }
.subbar > button[data-command="selectAll"]::before { content: "☷"; }
.subbar > button[data-command="selectSame"]::before { content: "≋"; }
.subbar > button[data-command="merge-contours"] {
  width: auto;
  min-width: 78px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #dce8ed;
  font-size: 11px;
}
.subbar > button[data-command="merge-contours"]::before { content: "◎"; }

/* Hide the extended edit buttons in both product modes and languages. */
.subbar > button:is(
  [data-command="合并路径"], [data-command="Merge paths"],
  [data-command="反向走线"], [data-command="Reverse run"],
  [data-command="中点拆分"], [data-command="Split run"],
  [data-command="修复路径"], [data-command="Repair path"],
  [data-command="selectAll"], [data-command="selectSame"]
) {
  display: none;
}

.document-tabs {
  min-width: 0;
  display: flex;
  align-items: end;
  gap: 1px;
  padding: 3px 8px 0;
  overflow-x: auto;
  background: #1d1f21;
  border-bottom: 1px solid #0f1113;
}

/* The save control stays outside the scrolling document tabs. The reminder
   expands this grid row, so it never covers drawing or selection controls. */
.document-workspace-header {
  min-width: 0;
  background: var(--theme-toolbar, var(--chrome-darker));
}
.document-bar {
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
}
.document-bar > .document-tabs {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 5px;
  border-bottom: 0;
}
.project-save-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
}
.project-save-status {
  max-width: 160px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 84px;
  min-height: 30px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.project-save-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.project-save-reminder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--accent);
  background: var(--theme-surface-alt, var(--field-dark));
  color: var(--ink);
}
.project-save-reminder[hidden] { display: none; }
.project-save-message {
  flex: 1 1 210px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.project-save-reminder-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
}
#saveProjectNow { min-height: 28px; white-space: nowrap; }
.project-save-dismiss { min-width: 28px; min-height: 28px; padding: 0 6px; font-size: 18px; line-height: 1; }
.project-save-controls button:focus-visible,
.project-save-reminder button:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.project-save-prompt {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--theme-panel, var(--panel));
  box-shadow: 0 16px 48px #0007;
}
.project-save-prompt::backdrop { background: #0007; }
.project-save-prompt h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.4; }
.project-save-prompt p { margin: 0 0 20px; overflow-wrap: anywhere; line-height: 1.6; }
.project-save-prompt-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.project-save-prompt-actions button { min-width: 80px; min-height: 32px; padding: 5px 12px; }
.project-save-prompt-actions button:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
@media (max-width: 900px) {
  .project-save-controls { gap: 6px; }
  .project-save-status { max-width: 100px; }
}
@media (max-width: 600px) {
  .project-save-controls { flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
  .project-save-status { font-size: 10px; }
}

.document-tab {
  min-width: 150px;
  min-height: 27px;
  display: flex;
  align-items: center;
  padding: 0 3px 0 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: #24272a;
  color: #92999e;
  font-size: 11px;
}

.document-tab.active {
  border-bottom-color: var(--accent);
  background: #2a2d31;
  color: #e2e6e9;
}

.document-tab-select {
  min-width: 0;
  min-height: 25px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-start;
  padding: 0 8px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
}

.document-tab-select:hover,
.document-tab-select:focus-visible {
  background: #303439;
}

.document-icon {
  flex: 0 0 auto;
  width: 9px;
  height: 12px;
  border: 1px solid currentColor;
}

.document-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-title-input {
  min-width: 0;
  width: 100%;
  height: 21px;
  padding: 1px 5px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  outline: none;
  background: #171a1d;
  color: #f1f5f7;
  font: inherit;
}

.document-close {
  width: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  opacity: 0;
  border: 0;
  background: transparent;
  color: #737a80;
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}

.document-tab:hover .document-close,
.document-tab:focus-within .document-close {
  opacity: 1;
  pointer-events: auto;
}

.document-close:hover,
.document-close:focus-visible {
  background: #454a4f;
  color: #fff;
}

.document-add {
  width: 28px;
  min-width: 28px;
  min-height: 26px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: #9ba2a7;
  font-size: 18px;
}

.export-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid #168fc1;
  border-radius: 4px;
  background: #24282c;
  color: #e7ecef;
  box-shadow: 0 18px 60px #000a;
}

.export-dialog::backdrop { background: #0009; }
.export-dialog h2 { margin: 0 0 6px; font-size: 18px; }
.export-dialog p { margin: 0 0 16px; color: #aab3b9; }
.export-format-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.export-format-grid button { min-height: 74px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 12px 16px; border-color: #465058; background: #30363b; text-align: left; }
.export-format-grid button:hover { border-color: var(--accent); background: #374149; }
.export-format-grid strong { color: #31b8ed; font-size: 18px; }
.export-format-grid span { color: #b7c0c6; font-size: 12px; }
.export-dialog-cancel { float: right; margin-top: 16px; min-width: 90px; }
.illustrator-dialog { width: min(620px, calc(100vw - 48px)); }
.illustrator-transfer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.illustrator-transfer-grid section { border: 1px solid var(--theme-border, #405461); border-radius: 8px; padding: 16px; }
.illustrator-transfer-grid button { width: 100%; min-height: 44px; font-weight: 700; }
.illustrator-transfer-grid p { margin: 12px 0 0; line-height: 1.65; }
.illustrator-dialog .illustrator-status { min-height: 2.8em; margin: 18px 0 0; line-height: 1.5; color: var(--theme-text, #dce9ef); }
.illustrator-dialog .illustrator-status[data-error="true"] { color: #e69959; }
.illustrator-dialog[aria-busy="true"] { cursor: progress; }
@media (max-width: 600px) { .illustrator-transfer-grid { grid-template-columns: 1fr; } }

.info-bar {
  min-height: 24px;
  padding: 0 9px;
  background: #2a2c2f;
  border-bottom: 1px solid #17191b;
  color: #90979c;
  font-size: 11px;
}

.canvas-wrap {
  background-color: #242629;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 150px 150px, 150px 150px, 30px 30px, 30px 30px;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.22);
}

#designCanvas {
  background: transparent;
}

.workspace-border {
  fill: #151719;
  stroke: #3b3e42;
  stroke-width: 1;
}

.shape {
  fill: rgba(50, 217, 224, 0.055);
  stroke: #a6b0b6;
}

.image-object image {
  opacity: 1;
}

.statusbar {
  gap: 18px;
  padding: 0 10px;
  background: #078fd2;
  border-top: 1px solid #23a7e3;
  color: #e7f7ff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.properties {
  grid-column: 3;
  grid-template-rows: auto minmax(0, 1fr);
  background: #25272a;
  border-left: 1px solid #111315;
}

.property-tabs {
  gap: 2px;
  padding: 4px;
  background: #202225;
  border-bottom: 1px solid #111315;
}

.property-tab {
  min-height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8f969b;
}

.property-tab.active {
  border-color: transparent;
  border-bottom-color: var(--accent);
  background: #282b2f;
  color: #eef2f4;
}

.property-page {
  overflow-y: auto;
  padding: 9px 10px 48px;
}

.panel-section {
  margin: 0 0 7px;
  padding: 0 0 8px;
  border: 1px solid #313438;
  background: #222427;
}

.panel-section h2 {
  position: relative;
  margin: 0 0 8px;
  padding: 7px 26px 7px 9px;
  background: #2b2e32;
  border-bottom: 1px solid #34383c;
  color: #cfd5d9;
  font-size: 12px;
  font-weight: 600;
}

.panel-section h2::after {
  content: "⌄";
  position: absolute;
  right: 9px;
  top: 5px;
  color: #777f85;
  font-size: 14px;
}

.panel-section > :not(h2) {
  margin-left: 9px;
  margin-right: 9px;
}

.document-info-panel {
  min-height: 320px;
}

.document-info-summary {
  color: #d7dde2;
  font-size: 13px;
}

.document-info-scope {
  margin: 2px 0 12px;
  color: #f0f4f7;
  font-weight: 600;
}

.document-info-summary dl {
  margin: 0;
}

.document-info-summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #3a3d40;
}

.document-info-summary dt,
.document-info-summary dd {
  margin: 0;
}

.document-info-summary dd {
  color: #fff;
  text-align: right;
}

.document-info-types {
  margin-top: 18px;
  color: #cbd2d7;
  font-size: 13px;
}

.document-info-types h3 {
  margin: 0 0 8px;
  color: #f0f4f7;
  font-size: 13px;
}

.document-info-types p {
  margin: 5px 0;
}

.design-inspection {
  margin: 18px 9px 8px;
  padding-top: 14px;
  border-top: 1px solid #3a3d40;
}

.design-inspection-heading,
.design-inspection-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.design-inspection-heading h3 {
  margin: 0;
  color: #f0f4f7;
  font-size: 13px;
}

.design-inspection-heading span {
  padding: 2px 6px;
  border-radius: 10px;
  background: #28343b;
  color: #7fd9ff;
  font-size: 10px;
}

.design-inspection-status {
  margin: 9px 0;
  padding: 8px;
  border-radius: 3px;
  background: #26292c;
  color: #cdd3d7;
  font-size: 11px;
}

.design-inspection-status.has-issues { border-left: 3px solid #e8a33e; }
.design-inspection-status.is-clean { border-left: 3px solid #42b983; }
.design-inspection-list { max-height: 260px; overflow: auto; }

.design-inspection-item {
  display: grid;
  width: 100%;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 7px;
  margin-bottom: 5px;
  padding: 7px;
  border: 1px solid #363a3e;
  background: #202326;
  color: #dce1e4;
  text-align: left;
}

.design-inspection-item:hover { border-color: #168fc5; background: #252a2e; }
.design-inspection-item strong,
.design-inspection-item small { display: block; }
.design-inspection-item strong { margin-bottom: 3px; font-size: 11px; }
.design-inspection-item small { color: #9da5aa; font-size: 10px; line-height: 1.35; }
.design-inspection-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #6c8795; }
.design-inspection-item.error .design-inspection-dot { background: #ee6666; }
.design-inspection-item.warning .design-inspection-dot { background: #e8a33e; }
.design-inspection-actions { margin-top: 9px; }
.design-inspection-actions button { flex: 1; min-height: 30px; }
.design-inspection-actions button.primary { background: #078dc5; color: #fff; }

.field {
  gap: 4px;
  margin-bottom: 7px;
  color: #90979c;
  font-size: 11px;
}

.field-row {
  gap: 6px;
}

.switchers select,
.field select,
.field input,
.field textarea {
  min-height: 26px;
  border-color: #34383d;
  background: #181a1d;
  color: #d2d7da;
  font-size: 12px;
}

.product-row {
  grid-template-columns: minmax(0, 1fr) repeat(3, 37px);
  gap: 4px;
}

.product-row button {
  min-width: 37px;
  padding: 0 4px;
  font-size: 11px;
}

.primary {
  border-color: #087fb7;
  background: #087fb7;
}

.primary:hover {
  border-color: #19a9e8;
  background: #1196d2;
}

input[type="range"] {
  height: 15px;
  accent-color: #0da9ed;
}

.range-control {
  gap: 6px;
}

.range-value {
  color: #b9c0c5;
  font-size: 11px;
}

.neon-simulation {
  width: min(520px, calc(100% - 16px));
  height: min(390px, calc(100% - 16px));
  min-height: 250px;
  border-radius: 3px;
  border-color: #1a536d;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.neon-simulation-header {
  min-height: 30px;
  padding: 0 9px;
  background: #0e2b3a;
}

.neon-simulation-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 12px;
}

.recognition-dialog,
.modal-backdrop > div {
  border-radius: 3px;
}

@media (max-width: 1180px) {
  .cad-menu {
    gap: 12px;
  }

  .brand {
    min-width: 178px;
  }

  .workspace-shell {
    grid-template-columns: 50px minmax(420px, 1fr) 286px;
  }

  .properties {
    grid-column: 3;
    max-height: none;
    border-top: 0;
  }

  .tool-button {
    width: 40px;
  }
}

@media (max-width: 900px) {
  .cad-menu span:nth-child(n + 5) {
    display: none;
  }

  .switchers select:not(#versionSelect):not(#themeSelect) {
    display: none;
  }

  .workspace-shell {
    grid-template-columns: 48px minmax(390px, 1fr) 260px;
  }

  .properties {
    grid-column: 3;
    max-height: none;
  }

  .document-tab {
    min-width: 126px;
  }
}

/* High-contrast application themes. Text hues intentionally contrast with each skin. */
:root[data-theme="dark"] {
  --theme-bg: #111315;
  --theme-topbar: #202225;
  --theme-topbar-row: #25272a;
  --theme-toolbar: #1d1f21;
  --theme-rail: #191b1e;
  --theme-surface: #242629;
  --theme-surface-alt: #2d3034;
  --theme-panel: #25272a;
  --theme-field: #181a1d;
  --theme-hover: #373b3f;
  --theme-border: #393d41;
  --theme-border-strong: #596168;
  --theme-text: #dce2e6;
  --theme-text-strong: #ffffff;
  --theme-muted: #aab2b8;
  --theme-accent: #16a7e0;
  --theme-accent-hover: #54ccf7;
  --theme-accent-text: #07151c;
  --theme-canvas: #202326;
  --theme-canvas-major: rgba(255, 255, 255, 0.055);
  --theme-canvas-minor: rgba(255, 255, 255, 0.022);
  --theme-workspace: #101214;
  --theme-shape: #bdc7cd;
  --theme-status: #087fb7;
  --theme-status-text: #ffffff;
  --theme-shadow: rgba(0, 0, 0, 0.48);
}

:root[data-theme="light"] {
  --theme-bg: #dce4ea;
  --theme-topbar: #f7f9fb;
  --theme-topbar-row: #ffffff;
  --theme-toolbar: #e9eef2;
  --theme-rail: #f2f5f7;
  --theme-surface: #f8fafb;
  --theme-surface-alt: #e3eaf0;
  --theme-panel: #ffffff;
  --theme-field: #ffffff;
  --theme-hover: #d6e2ea;
  --theme-border: #b6c3cd;
  --theme-border-strong: #748794;
  --theme-text: #18232d;
  --theme-text-strong: #050b10;
  --theme-muted: #52616d;
  --theme-accent: #006baa;
  --theme-accent-hover: #004e7e;
  --theme-accent-text: #ffffff;
  --theme-canvas: #ffffff;
  --theme-canvas-major: rgba(25, 43, 56, 0.16);
  --theme-canvas-minor: rgba(25, 43, 56, 0.07);
  --theme-workspace: #ffffff;
  --theme-shape: #273640;
  --theme-status: #005d91;
  --theme-status-text: #ffffff;
  --theme-shadow: rgba(22, 39, 52, 0.24);
}

:root[data-theme="ocean"] {
  --theme-bg: #041827;
  --theme-topbar: #082c45;
  --theme-topbar-row: #0d3a59;
  --theme-toolbar: #07243a;
  --theme-rail: #061f32;
  --theme-surface: #0d3048;
  --theme-surface-alt: #17445f;
  --theme-panel: #0b2a40;
  --theme-field: #041b2b;
  --theme-hover: #205774;
  --theme-border: #36657c;
  --theme-border-strong: #78a0b3;
  --theme-text: #fff0d1;
  --theme-text-strong: #fffaf0;
  --theme-muted: #d8c8aa;
  --theme-accent: #ffb703;
  --theme-accent-hover: #ffd166;
  --theme-accent-text: #18202a;
  --theme-canvas: #102d42;
  --theme-canvas-major: rgba(255, 224, 158, 0.13);
  --theme-canvas-minor: rgba(255, 224, 158, 0.05);
  --theme-workspace: #061722;
  --theme-shape: #ffe0a3;
  --theme-status: #d9573f;
  --theme-status-text: #ffffff;
  --theme-shadow: rgba(0, 8, 15, 0.58);
}

:root[data-theme="forest"] {
  --theme-bg: #0a1d15;
  --theme-topbar: #143726;
  --theme-topbar-row: #1b4933;
  --theme-toolbar: #102d20;
  --theme-rail: #0c271b;
  --theme-surface: #173929;
  --theme-surface-alt: #28563f;
  --theme-panel: #123222;
  --theme-field: #091e14;
  --theme-hover: #32684b;
  --theme-border: #3d7055;
  --theme-border-strong: #82aa92;
  --theme-text: #fff1d6;
  --theme-text-strong: #fffaf0;
  --theme-muted: #d8c9ad;
  --theme-accent: #ffad4d;
  --theme-accent-hover: #ffd08a;
  --theme-accent-text: #251408;
  --theme-canvas: #173527;
  --theme-canvas-major: rgba(255, 224, 174, 0.13);
  --theme-canvas-minor: rgba(255, 224, 174, 0.05);
  --theme-workspace: #081b12;
  --theme-shape: #ffe0ad;
  --theme-status: #b94f20;
  --theme-status-text: #ffffff;
  --theme-shadow: rgba(0, 8, 4, 0.58);
}

:root[data-theme="plum"] {
  --theme-bg: #1c1025;
  --theme-topbar: #382047;
  --theme-topbar-row: #4a285c;
  --theme-toolbar: #2b1837;
  --theme-rail: #25132f;
  --theme-surface: #3a2148;
  --theme-surface-alt: #57336a;
  --theme-panel: #321b3f;
  --theme-field: #1c0e25;
  --theme-hover: #69417b;
  --theme-border: #765389;
  --theme-border-strong: #b397c0;
  --theme-text: #fff3bf;
  --theme-text-strong: #fffbe8;
  --theme-muted: #dfd0a7;
  --theme-accent: #4fe1c1;
  --theme-accent-hover: #8bf3dc;
  --theme-accent-text: #071f1a;
  --theme-canvas: #321c3e;
  --theme-canvas-major: rgba(255, 236, 166, 0.14);
  --theme-canvas-minor: rgba(255, 236, 166, 0.055);
  --theme-workspace: #180c20;
  --theme-shape: #ffe69a;
  --theme-status: #007d6b;
  --theme-status-text: #ffffff;
  --theme-shadow: rgba(9, 2, 13, 0.62);
}

:root[data-theme] {
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-border);
  --panel: var(--theme-panel);
  --paper: var(--theme-workspace);
  --chrome: var(--theme-panel);
  --chrome-dark: var(--theme-topbar);
  --chrome-darker: var(--theme-rail);
  --canvas-gray: var(--theme-canvas);
  --field: var(--theme-surface-alt);
  --field-dark: var(--theme-field);
  --accent: var(--theme-accent);
  --accent-dark: var(--theme-accent-hover);
  scrollbar-color: var(--theme-border-strong) var(--theme-field);
}

html[data-theme] body,
html[data-theme] #app,
html[data-theme] .workspace-shell {
  color: var(--theme-text);
  background: var(--theme-bg);
}

html[data-theme] .topbar { background: var(--theme-topbar); border-color: var(--theme-border); }
html[data-theme] .topbar-main { background: var(--theme-topbar-row); border-color: var(--theme-border); }
html[data-theme] .brand { color: var(--theme-accent); }
html[data-theme] .cad-menu { color: var(--theme-text); }
html[data-theme] .cad-menu span:hover { color: var(--theme-text-strong); }
html[data-theme] .app-menu-trigger:hover,
html[data-theme] .app-menu-trigger:focus-visible,
html[data-theme] .app-menu-trigger.open { background: var(--theme-hover); color: var(--theme-text-strong); }

html[data-theme] .menu,
html[data-theme] .tool-rail,
html[data-theme] .document-tabs { background: var(--theme-toolbar); border-color: var(--theme-border); }
html[data-theme] .menu button,
html[data-theme] .tool-button,
html[data-theme] .subbar > button { color: var(--theme-text); }
html[data-theme] .menu button::before,
html[data-theme] .subbar > button::before { color: var(--theme-text); }
html[data-theme] .subbar .edit-action-icon { stroke: var(--theme-text); }
html[data-theme] button:hover,
html[data-theme] .tool-button:hover { border-color: var(--theme-border-strong); background: var(--theme-hover); color: var(--theme-text-strong); }
html[data-theme] .tool-button.active { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-accent-text); box-shadow: inset 3px 0 0 var(--theme-accent-hover); }

html[data-theme] .switchers select,
html[data-theme] .field select,
html[data-theme] .field input,
html[data-theme] .field textarea,
html[data-theme] .document-title-input {
  border-color: var(--theme-border);
  background: var(--theme-field);
  color: var(--theme-text-strong);
}

html[data-theme] .canvas-zone,
html[data-theme] .subbar,
html[data-theme] .info-bar { background: var(--theme-surface); border-color: var(--theme-border); }
html[data-theme] .info-bar,
html[data-theme] .field,
html[data-theme] .range-value { color: var(--theme-muted); }
html[data-theme] .document-tab { background: var(--theme-surface); color: var(--theme-muted); }
html[data-theme] .document-tab.active,
html[data-theme] .property-tab.active { border-bottom-color: var(--theme-accent); background: var(--theme-surface-alt); color: var(--theme-text-strong); }
html[data-theme] .document-tab-select:hover,
html[data-theme] .document-tab-select:focus-visible,
html[data-theme] .document-close:hover,
html[data-theme] .document-close:focus-visible { background: var(--theme-hover); color: var(--theme-text-strong); }

html[data-theme] .canvas-wrap {
  background-color: var(--theme-canvas);
  background-image:
    linear-gradient(var(--theme-canvas-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-canvas-major) 1px, transparent 1px),
    linear-gradient(var(--theme-canvas-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-canvas-minor) 1px, transparent 1px);
  box-shadow: inset 0 0 36px var(--theme-shadow);
}
html[data-theme="light"] .canvas-wrap { box-shadow: none; }
html[data-theme] .canvas-wrap[data-grid-visible="false"] { background-image: none; }
html[data-theme] .workspace-border { fill: var(--theme-workspace); stroke: var(--theme-border-strong); }
html[data-theme] .shape { stroke: var(--theme-shape); }
html[data-theme] .statusbar { background: var(--theme-status); border-color: var(--theme-accent-hover); color: var(--theme-status-text); }

html[data-theme] .properties,
html[data-theme] .property-tabs,
html[data-theme] .panel-section,
html[data-theme] .panel-section h2 { background: var(--theme-panel); border-color: var(--theme-border); }
html[data-theme] .property-tab { color: var(--theme-muted); }
html[data-theme] .panel-section h2,
html[data-theme] .document-info-summary,
html[data-theme] .document-info-scope,
html[data-theme] .document-info-summary dd,
html[data-theme] .document-info-types,
html[data-theme] .document-info-types h3,
html[data-theme] .design-inspection-heading h3 { color: var(--theme-text-strong); }
html[data-theme] .document-info-summary dl > div,
html[data-theme] .design-inspection { border-color: var(--theme-border); }
html[data-theme] .design-inspection-heading span { background: var(--theme-field); color: var(--theme-accent-hover); }
html[data-theme] .design-inspection-status,
html[data-theme] .design-inspection-item { background: var(--theme-field); border-color: var(--theme-border); color: var(--theme-text); }
html[data-theme] .design-inspection-item small { color: var(--theme-muted); }
html[data-theme] .design-inspection-item:hover { border-color: var(--theme-accent); background: var(--theme-hover); }

html[data-theme] .application-menu-popup,
html[data-theme] .export-dialog,
html[data-theme] .recognition-dialog,
html[data-theme] .modal-backdrop > div { border-color: var(--theme-border-strong); background: var(--theme-panel); color: var(--theme-text); box-shadow: 0 18px 60px var(--theme-shadow); }
html[data-theme] .application-menu-popup button { color: var(--theme-text); }
html[data-theme] .application-menu-popup button:hover,
html[data-theme] .application-menu-popup button:focus-visible,
html[data-theme] .primary,
html[data-theme] .design-inspection-actions button.primary { background: var(--theme-accent); border-color: var(--theme-accent); color: var(--theme-accent-text); }
html[data-theme] .application-menu-popup kbd,
html[data-theme] .export-dialog p,
html[data-theme] .export-format-grid span { color: var(--theme-muted); }
html[data-theme] .application-menu-separator { background: var(--theme-border); }
html[data-theme] .export-format-grid button { border-color: var(--theme-border); background: var(--theme-surface-alt); }
html[data-theme] .export-format-grid button:hover { border-color: var(--theme-accent); background: var(--theme-hover); }
html[data-theme] .export-format-grid strong { color: var(--theme-accent); }
html[data-theme] input[type="range"] { accent-color: var(--theme-accent); }

html[data-theme="light"] .brand { color: #005a91; }
html[data-theme="light"] .tool-button.active { color: #ffffff; }

html[data-theme] button,
html[data-theme] .tool-button {
  border-color: var(--theme-border);
  background: var(--theme-surface-alt);
  color: var(--theme-text);
}
html[data-theme] .menu button,
html[data-theme] .tool-button,
html[data-theme] .subbar > button,
html[data-theme] .document-tab-select,
html[data-theme] .document-close,
html[data-theme] .document-add,
html[data-theme] .property-tab,
html[data-theme] .application-menu-popup button { background: transparent; }
html[data-theme] button:hover,
html[data-theme] button:focus-visible,
html[data-theme] .tool-button:hover { border-color: var(--theme-border-strong); background: var(--theme-hover); color: var(--theme-text-strong); }
html[data-theme] .tool-button.active,
html[data-theme] .primary,
html[data-theme] .design-inspection-actions button.primary { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-accent-text); }
html[data-theme] .primary:hover,
html[data-theme] .primary:focus-visible,
html[data-theme] .design-inspection-actions button.primary:hover { border-color: var(--theme-accent-hover); background: var(--theme-accent-hover); color: var(--theme-accent-text); }

html[data-theme] .panel-section h2::after,
html[data-theme] .document-close,
html[data-theme] .document-add,
html[data-theme] .application-menu-check,
html[data-theme] .application-menu-popup kbd { color: var(--theme-muted); }
html[data-theme] .recognition-dialog h2,
html[data-theme] .dialog-subtitle,
html[data-theme] .modal h2,
html[data-theme] .product-modal h2 { color: var(--theme-text-strong); }

html[data-theme] .modal,
html[data-theme] .product-modal,
html[data-theme] .export-project-choice {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text);
  box-shadow: 0 18px 54px var(--theme-shadow);
}
html[data-theme] .export-project-choice { background: var(--theme-surface); box-shadow: none; }
html[data-theme] .export-project-choice:has(input:checked) { border-color: var(--theme-accent); background: var(--theme-surface-alt); }
html[data-theme] .check-row,
html[data-theme] .bom-table { color: var(--theme-text); }
html[data-theme] .bom-table th { color: var(--theme-text-strong); }
html[data-theme] .bom-row:hover,
html[data-theme] .bom-row:focus-visible { background: color-mix(in srgb, var(--theme-accent) 18%, transparent); outline-color: var(--theme-accent); }
html[data-theme] .bom-row.selected { background: color-mix(in srgb, var(--theme-accent) 28%, transparent); color: var(--theme-text-strong); }

html[data-theme] .measurement-guide { stroke: var(--theme-accent); }
html[data-theme] .measurement-label { fill: var(--theme-accent); }
html[data-theme] .cad-outline path,
html[data-theme] .cad-centerline path,
html[data-theme] .cad-bend path,
html[data-theme] .cad-dimension path { stroke: var(--theme-shape); }
html[data-theme] .cad-bend text,
html[data-theme] .cad-dimension text { fill: var(--theme-shape); stroke: var(--theme-shape); }
html[data-theme] .print-cut-mark { stroke: var(--theme-shape); }
html[data-theme] .print-dimension { fill: var(--theme-shape); }
html[data-theme] .selection-handle,
html[data-theme] .pen-preview-point,
html[data-theme] .neon-anchor-point { fill: var(--theme-surface-alt); }

.anpro-layout-controls p { line-height: 1.5; }
.anpro-custom-item { margin-bottom: 9px; }
.anpro-custom-item-inputs { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px; align-items: end; }
.anpro-custom-item-inputs .field { min-width: 0; }
.anpro-custom-item-inputs select,
.anpro-custom-item-inputs input { width: 100%; min-width: 0; box-sizing: border-box; }
.anpro-custom-layout-controls .anpro-layout-warning { white-space: pre-line; }
.anpro-custom-assessment[data-status="adequate"] { color: var(--theme-success, #71ce8a); }
.anpro-custom-assessment[data-status="insufficient"],
.anpro-custom-assessment[data-status="excess"],
.anpro-custom-assessment[data-status="invalid"] { color: var(--theme-accent, #ffcd55); }
.anpro-custom-recommendations p { overflow-wrap: anywhere; }
.anpro-layout-controls .data-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 10px 0; }
.anpro-layout-controls .data-table th,
.anpro-layout-controls .data-table td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--theme-border, #345166); }
.anpro-layout-controls .data-table th:first-child,
.anpro-layout-controls .data-table td:first-child { text-align: left; overflow-wrap: anywhere; }
.anpro-layout-controls details { margin: 12px 0; font-size: 12px; }
.anpro-layout-controls details p { margin: 7px 0; }
.anpro-layout-controls .validation-error,
.anpro-layout-warning { color: var(--theme-accent, #ffcd55); }

.anpro-recommendation-dialog { width: min(640px, calc(100vw - 40px)); max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box; padding: 24px; border: 1px solid var(--theme-border, #416078); border-radius: 12px; background: var(--theme-surface, #102f42); color: var(--theme-text, #f2f7fb); box-shadow: 0 18px 60px #0008; }
.anpro-recommendation-dialog::backdrop { background: #0009; }
.anpro-recommendation-dialog h2 { margin: 0 0 14px; font-size: 21px; }
.anpro-recommendation-dialog h3 { margin: 20px 0 10px; font-size: 16px; }
.anpro-recommendation-dialog p { line-height: 1.6; font-size: 13px; }
.anpro-recommendation-list { display: grid; gap: 9px; }
.anpro-recommendation-card { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 13px; border: 1px solid var(--theme-border, #416078); border-radius: 8px; background: var(--theme-surface-alt, #173b51); }
.anpro-recommendation-card strong { font-size: 14px; overflow-wrap: anywhere; }
.anpro-recommendation-card p { margin: 5px 0; }
.anpro-recommendation-card small { opacity: .75; }
.anpro-recommendation-card button { flex-shrink: 0; }
.anpro-recommendation-actions { display: flex; justify-content: flex-end; margin-top: 16px; }