/* Configurator "Макет" (floor-plan editor) overlay. */
.cfg-layout-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #0c0d10;
  color: #f1f2f4;
  user-select: none;
  -webkit-user-select: none;
}
.cfg-layout-overlay[hidden] { display: none; }
.cfg-layout-overlay input,
.cfg-layout-overlay textarea,
.cfg-layout-overlay select {
  user-select: auto;
  -webkit-user-select: auto;
}

.cfg-layout-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: #131419;
}
.cfg-layout-bar .cfg-layout-title { font-weight: 700; margin-right: 8px; }
.cfg-layout-bar .spacer { flex: 1 1 auto; }

/* ---- Применён мокап 3: тулбар в 3 ряда-зоны ---- */
.cfg-layout-bar-v3 { flex-direction: column; align-items: stretch; gap: 4px; }
.cfg-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.cfg-bar-row .spacer { flex: 1 1 auto; }
.cfg-bar-zone { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; min-width: 70px; padding-right: 4px; }
.cfg-bar-row + .cfg-bar-row { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 4px; }
/* В 3-рядном тулбаре зональные подписи рядов заменяют подписи кластеров — убираем дубль и экономим ширину */
.cfg-layout-bar-v3 .cfg-ltool-group-title { display: none; }
.cfg-layout-bar-v3 .cfg-ltool-cluster { border: 0; background: transparent; padding: 1px 2px; }
.cfg-layout-bar-v3 .cfg-ltool-group { border-left: 1px solid rgba(255, 255, 255, 0.10); }

.cfg-ltool {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: #e7e9ee;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}
.cfg-ltool:hover { background: rgba(255, 255, 255, 0.1); }
.cfg-ltool.is-active { background: var(--red, #d90012); border-color: var(--red, #d90012); color: #fff; }
.cfg-ltool[disabled] { opacity: 0.4; cursor: default; }
.cfg-ltool-group { display: inline-flex; gap: 4px; padding: 0 6px; border-left: 1px solid rgba(255,255,255,0.12); }
.cfg-ltool-cluster {
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}
.cfg-ltool-group-title {
  color: #9ca3af;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 2px;
}
.cfg-ltool-icon {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cfg-ltool-icon svg { width: 17px; height: 17px; display: block; }
.cfg-ltool-text { padding: 4px 9px; font-size: 12px; }
.cfg-ltool-accent { border-color: var(--red, #d90012); color: #fff; background: rgba(217, 0, 18, 0.18); }

/* ===== Лента (ribbon) — за фича-флагом ?ribbon=1: та же функциональность, новая раскладка по вкладкам ===== */
.cfg-layout-ribbon { flex-direction: column; align-items: stretch; gap: 0; }
.cfg-rb-qat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; }
.cfg-rb-qat-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; padding-right: 4px; }
.cfg-rb-qat .spacer { flex: 1 1 auto; }
.cfg-rb-tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 3px 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cfg-rb-tab { appearance: none; border: 1px solid transparent; border-bottom: none; background: transparent; padding: 5px 12px; border-radius: 7px 7px 0 0; font: inherit; font-size: 12px; font-weight: 700; color: #9ca3af; cursor: pointer; }
.cfg-rb-tab:hover { color: #e7e9ee; }
.cfg-rb-tab.is-active { color: #fff; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
.cfg-rb-panels { border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 7px 6px; }
.cfg-rb-panel { display: none; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cfg-rb-panel.is-active { display: flex; }
.cfg-rb-group { display: flex; flex-direction: column; gap: 4px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 8px; padding: 5px 8px 3px; background: rgba(255, 255, 255, 0.02); }
.cfg-rb-grow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.cfg-layout-ribbon .cfg-ltool-group-title { display: block; text-align: center; color: #9ca3af; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 2px; padding-top: 3px; border-top: 1px dashed rgba(255, 255, 255, 0.10); }
@media (max-width: 860px) { .cfg-rb-qat-label { display: none; } .cfg-rb-tab { padding: 5px 8px; } }
.cfg-layout-place-wrap { align-items: center; gap: 6px; flex-wrap: wrap; }
.cfg-layout-place-label {
  font-size: 12px;
  font-weight: 600;
  color: #c8ccd4;
  white-space: nowrap;
  user-select: none;
}
.cfg-layout-place {
  min-width: 180px;
  max-width: 260px;
  background: #1a1c22;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f2f4;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color-scheme: dark;
  cursor: pointer;
}
.cfg-layout-place option {
  background-color: #1a1c22;
  color: #f1f2f4;
}
.cfg-layout-place.is-active { border-color: var(--red, #d90012); box-shadow: 0 0 0 1px rgba(217, 0, 18, 0.35); }
.cfg-layout-project-controls,
.cfg-layout-system-controls,
.cfg-layout-route-settings { align-items: center; flex-wrap: wrap; }
.cfg-layout-mini-select {
  min-width: 118px;
  max-width: 190px;
  background: #1a1c22;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f2f4;
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 12px;
}
.cfg-layout-version-select { max-width: 150px; }
.cfg-layout-reserve-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c8ccd4;
  font-size: 12px;
  white-space: nowrap;
}
.cfg-layout-reserve-label input {
  width: 54px;
  background: #1a1c22;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f2f4;
  border-radius: 8px;
  padding: 6px 7px;
  font-size: 12px;
}

/* Native select dropdowns in layout overlay — dark list, readable text */
.cfg-layout-overlay select {
  color-scheme: dark;
}
.cfg-layout-overlay select option {
  background-color: #1a1c22;
  color: #f1f2f4;
}
.cfg-layout-overlay select option:checked,
.cfg-layout-overlay select option:hover {
  background-color: #2a2d36;
  color: #ffffff;
}

.cfg-layout-body { flex: 1 1 auto; display: flex; min-height: 0; }
.cfg-layout-stage { flex: 1 1 auto; position: relative; overflow: hidden; background:
  repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(255,255,255,0.04) 24px),
  repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(255,255,255,0.04) 24px),
  #16181d; }
.cfg-layout-stage.is-map-enabled {
  background: #0c0f13;
}
.cfg-layout-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  background: #0c0f13;
  pointer-events: none;
}
.cfg-layout-map.is-visible {
  display: block;
}
.cfg-layout-map.is-interactive {
  pointer-events: auto;
}
.cfg-layout-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  width: min(260px, calc(100% - 28px));
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(19, 20, 25, 0.88);
  color: #e7e9ee;
  font-size: 12px;
  line-height: 1.25;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.cfg-layout-legend-title { font-weight: 800; margin-bottom: 6px; color: #fff; }
.cfg-layout-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 7px;
  margin: 4px 0;
}
.cfg-layout-legend-row b { color: #fff; font-size: 11px; }
.cfg-layout-legend .swatch {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  display: inline-block;
}
.swatch-camera { background: #d90012; }
.swatch-equipment { background: #1f6feb; }
.swatch-route { background: #ffb020; }
.swatch-riser { background: #7c3aed; }
.swatch-outdoor { background: #64748b; }
.swatch-site-feature { background: #0f766e; }
.swatch-wifi { background: #0891b2; }
.swatch-fov-good { background: #4ade80; }
.swatch-fov-fair { background: #fbbf24; }
.cfg-layout-legend-subtitle {
  margin: 8px 0 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #c8ccd4;
  font-size: 11px;
  font-weight: 800;
}
.cfg-layout-legend-room {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
  margin: 5px 0;
}
.cfg-layout-legend-room span:nth-child(2) {
  min-width: 0;
}
.cfg-layout-legend-room b {
  display: block;
  color: #fff;
  font-size: 11px;
  line-height: 1.15;
}
.cfg-layout-legend-room small {
  display: block;
  margin-top: 2px;
  color: #aeb2ba;
  font-size: 10px;
  line-height: 1.25;
}
.cfg-layout-legend-room strong {
  color: #fff;
  font-size: 12px;
}
.cfg-layout-legend-check {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 800;
}
.cfg-layout-legend-check.is-ok { color: #4ade80; }
.cfg-layout-legend-check.has-warnings { color: #fbbf24; }
.cfg-layout-legend-check.has-errors { color: #ff8a8a; }
.cfg-layout-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.cfg-layout-svg text {
  user-select: none;
  -webkit-user-select: none;
}
.cfg-layout-svg.tool-select { cursor: default; }
.cfg-layout-svg.tool-pan { cursor: grab; }
.cfg-layout-svg.tool-route { cursor: crosshair; }
.cfg-layout-svg.tool-place { cursor: crosshair; }
.cfg-layout-svg.tool-map {
  pointer-events: none;
  cursor: grab;
}
.cfg-layout-svg.tool-route .cfg-el-cam-hit,
.cfg-layout-svg.tool-route .cfg-el-handle,
.cfg-layout-svg.tool-route .cfg-el-selbox,
.cfg-layout-svg.tool-route .cfg-el-aim-axis,
.cfg-layout-svg.tool-route .cfg-el-aim-axis-vis {
  pointer-events: none;
}

.cfg-layout-inspector {
  width: 280px;
  flex: 0 0 280px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: #131419;
  padding: 12px;
  overflow-y: auto;
  font-size: 13px;
}
.cfg-layout-inspector h3 { margin: 0 0 8px; font-size: 14px; }
.cfg-layout-inspector .row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cfg-layout-inspector label { color: #aeb2ba; font-size: 12px; }
.cfg-layout-inspector select,
.cfg-layout-inspector input[type="text"],
.cfg-layout-inspector input[type="number"],
.cfg-layout-inspector input[type="range"] {
  width: 100%;
  background: #1a1c22;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f2f4;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color-scheme: dark;
}
.cfg-layout-inspector select option {
  background-color: #1a1c22;
  color: #f1f2f4;
}
.cfg-layout-map-panel {
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.42);
}
.cfg-layout-map-panel h3 {
  margin: 0 0 8px;
}
.cfg-layout-map-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 2px 0 8px;
}
.cfg-layout-map-actions .cfg-ltool {
  justify-content: center;
  min-width: 0;
}
.cfg-layout-map-readout {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #cdd3dd;
  font-size: 11px;
}
.cfg-layout-map-readout b {
  color: #fff;
}
.cfg-layout-map-status {
  margin-top: 8px;
  color: #dbeafe;
}
.cfg-layout-inspector .hint { color: #8f949d; font-size: 12px; line-height: 1.45; }
.cfg-scale-manual {
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
  background: #1a1c22;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cfg-scale-manual-title { margin: 0 0 4px; font-size: 13px; color: #fff; }
.cfg-scale-manual-now { margin: 0 0 10px; font-size: 11px; color: #b6bcc7; }
.cfg-scale-manual-now b { color: #fff; }
.cfg-scale-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.cfg-scale-row:last-child { margin-bottom: 0; }
.cfg-scale-field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #cdd3dd;
}
.cfg-scale-field input {
  width: 64px;
  padding: 5px 7px;
  font-size: 12px;
  color: #fff;
  background: #0f1116;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
}
.cfg-scale-row .cfg-ltool-text:disabled { opacity: 0.45; cursor: not-allowed; }
.cfg-room-subtitle { margin: 12px 0 6px; font-size: 12px; color: #cdd3dd; }
.cfg-room-walls { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.cfg-room-wall {
  padding: 5px 9px;
  font-size: 12px;
  color: #cdd3dd;
  background: #1a1c22;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  cursor: pointer;
}
.cfg-room-wall:hover { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.cfg-el-room-fill.is-selected { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.25)); }
.cfg-layout-inspector .danger { color: #ff8a8a; }
.cfg-layout-inspector .pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.cfg-layout-subtitle { margin-top: 14px !important; }
.cfg-layout-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 8px 0 12px;
}
.cfg-layout-overview div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #1a1c22;
}
.cfg-layout-overview span { color: #aeb2ba; }
.cfg-layout-overview b { color: #fff; text-align: right; }
.cfg-layout-diagnostics {
  margin: 8px 0 12px;
  padding-left: 18px;
  color: #c8ccd4;
  font-size: 12px;
  line-height: 1.45;
}
.cfg-layout-diagnostics li { margin: 4px 0; }
.cfg-layout-diagnostics .is-error { color: #ff9f9f; }
.cfg-layout-diagnostics .is-warn { color: #fbbf24; }
.cfg-layout-ok {
  margin: 8px 0 12px;
  color: #4ade80;
  font-size: 12px;
  font-weight: 700;
}

.cfg-layout-status {
  padding: 6px 12px;
  font-size: 12px;
  color: #aeb2ba;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #131419;
  /* Одна строка: при смене текста статус не меняет высоту, иначе SVG
     пере-масштабировался бы (preserveAspectRatio) и сбивал координаты кликов. */
  display: flex; gap: 16px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; align-items: center;
}
.cfg-layout-status b { color: #f1f2f4; }

/* SVG element styling */
.cfg-layout-svg .cfg-el-wall,
.cfg-layout-svg .cfg-el-wall-gap,
.cfg-layout-svg .cfg-el-room-fill,
.cfg-layout-svg .cfg-el-fov-good,
.cfg-layout-svg .cfg-el-fov-fair,
.cfg-layout-svg .cfg-el-wifi-zone,
.cfg-layout-svg .cfg-el-wifi-bridge-zone,
.cfg-layout-svg .cfg-el-alarm-zone,
.cfg-layout-svg .cfg-el-site-line,
.cfg-layout-svg .cfg-el-site-line-hit,
.cfg-layout-svg .cfg-el-site-detail,
.cfg-layout-svg .cfg-el-site-detail-box,
.cfg-layout-svg .cfg-el-site-post,
.cfg-layout-svg .cfg-el-site-device,
.cfg-layout-svg .cfg-el-site-mast,
.cfg-layout-svg .cfg-el-site-wifi,
.cfg-layout-svg .cfg-el-route,
.cfg-layout-svg .cfg-el-route-preview,
.cfg-layout-svg .cfg-el-tray,
.cfg-layout-svg .cfg-el-tray-hit,
.cfg-layout-svg .cfg-el-door-arc,
.cfg-layout-svg .cfg-el-window-mark,
.cfg-layout-svg .cfg-el-handle,
.cfg-layout-svg .cfg-el-handle-hit,
.cfg-layout-svg .cfg-el-aim-axis-vis,
.cfg-layout-svg .cfg-el-aim-axis,
.cfg-layout-svg .cfg-el-snap-hint,
.cfg-layout-svg .cfg-el-selbox,
.cfg-layout-svg .cfg-el-marquee,
.cfg-layout-svg .cfg-el-multisel-box,
.cfg-layout-svg .cfg-el-multisel-line,
.cfg-layout-svg .cfg-el-multisel-dot,
.cfg-layout-svg .cfg-el-calib {
  vector-effect: non-scaling-stroke;
}
.cfg-el-marquee { fill: rgba(56, 189, 248, 0.12); stroke: #38bdf8; stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.cfg-el-multisel-box { fill: none; stroke: #38bdf8; stroke-width: 1.5; stroke-dasharray: 6 4; opacity: 0.85; pointer-events: none; }
.cfg-el-multisel-line { fill: none; stroke: #38bdf8; stroke-width: 2.5; opacity: 0.8; pointer-events: none; }
.cfg-el-multisel-dot { fill: rgba(56, 189, 248, 0.25); stroke: #38bdf8; stroke-width: 1.5; pointer-events: none; }
.cfg-ltool.cfg-ltool-danger { color: #fca5a5; border-color: rgba(220, 0, 18, 0.5); }
.cfg-ltool.cfg-ltool-danger:hover { background: rgba(220, 0, 18, 0.16); color: #fecaca; }
.cfg-el-wall { stroke: #cfd3da; stroke-width: 3; stroke-linecap: round; }
.cfg-el-wall-ai { stroke: #38bdf8; stroke-dasharray: 8 5; opacity: 0.8; pointer-events: none; }
.cfg-el-ai-door { fill: rgba(34, 197, 94, 0.35); stroke: #22c55e; stroke-width: 1.5; pointer-events: none; }
.cfg-el-ai-window { fill: rgba(56, 189, 248, 0.3); stroke: #38bdf8; stroke-width: 1.5; pointer-events: none; }
.cfg-el-wall-gap { stroke: #0c0d10; }
.cfg-el-room-fill { pointer-events: none; }
.cfg-el-room-label { pointer-events: none; }
.cfg-el-room-label text {
  fill: rgba(241, 242, 244, 0.52);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(12, 13, 16, 0.72);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
.cfg-el-room-label-area {
  font-weight: 700;
  opacity: 0.82;
}
.cfg-el-wall-label text {
  fill: #8ec8ff;
  font: 600 10px system-ui, sans-serif;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(12, 13, 16, 0.85);
  stroke-width: 3px;
}
.cfg-el-wall-label-draft text { fill: #fbbf24; }
.cfg-el-fov-good { fill: rgba(74, 222, 128, 0.28); stroke: rgba(74, 222, 128, 0.65); stroke-width: 1; pointer-events: none; }
.cfg-el-fov-fair { fill: rgba(251, 191, 36, 0.18); stroke: rgba(251, 191, 36, 0.45); stroke-width: 1; pointer-events: none; }
.cfg-el-cam-body { fill: #d90012; stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.cfg-el-cam-hit { fill: rgba(255, 255, 255, 0.01); stroke: none; cursor: move; pointer-events: all; }
.cfg-el-label { fill: #f1f2f4; font: 600 11px system-ui, sans-serif; pointer-events: none; }
.cfg-el-wall-label { pointer-events: none; }
.cfg-el-equip { fill: #1f6feb; stroke: #fff; stroke-width: 1.5; }
.cfg-el-equip-text { fill: #fff; font: 700 9px system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
/* Ф1 — значок шкафа: «дверца» стойки + полоски-юниты + бейдж занятых юнитов */
.cfg-el-rack { fill: #0f172a; stroke: #38bdf8; stroke-width: 1.6; }
.cfg-el-rack-unit { stroke: rgba(148, 163, 184, 0.55); stroke-width: 1; pointer-events: none; }
.cfg-el-rack-badge { fill: #38bdf8; font: 700 9px system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
/* Р1 — коридоры прокладки (кротовые норы) */
.cfg-el-conduit-casing { fill: none; stroke: rgba(255,255,255,0.85); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cfg-el-conduit { fill: none; stroke: #d633ff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cfg-el-conduit-draft { fill: none; stroke: #d633ff; stroke-width: 3.2; stroke-dasharray: 8 6; stroke-linecap: round; }
.cfg-el-conduit-node { fill: #d633ff; stroke: #fff; stroke-width: 1.4; }
.cfg-el-conduit-wrap { cursor: pointer; }
/* режим «только подложка»: рисуем коридоры — остальной план приглушён и не кликается */
svg.tool-conduit > *:not(.cfg-el-conduit-wrap):not(.cfg-el-conduit-draft):not(image) { opacity: .16; pointer-events: none; }
.cfg-el-riser { cursor: move; }
.cfg-el-riser-body { fill: #7c3aed; stroke: #fff; stroke-width: 1.8; }
.cfg-el-riser-arrow { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cfg-el-wifi-zone { fill: rgba(8, 145, 178, 0.12); stroke: rgba(34, 211, 238, 0.46); stroke-width: 1.2; pointer-events: none; }
.cfg-el-wifi-zone-24 { fill: rgba(8, 145, 178, 0.12); stroke: rgba(34, 211, 238, 0.46); }
.cfg-el-wifi-zone-5 { fill: rgba(124, 58, 237, 0.14); stroke: rgba(168, 85, 247, 0.54); stroke-dasharray: 4 4; }
.cfg-el-wifi-bridge-zone { fill: rgba(2, 132, 199, 0.16); stroke: rgba(56, 189, 248, 0.58); stroke-width: 1.2; stroke-dasharray: 7 5; pointer-events: none; }
.cfg-el-wifi-bridge-zone.is-linked { fill: rgba(34, 197, 94, 0.2); stroke: rgba(74, 222, 128, 0.72); }
.cfg-el-wifi-bridge-zone.is-blocked { fill: rgba(239, 68, 68, 0.18); stroke: rgba(248, 113, 113, 0.7); }
.cfg-el-alarm-zone { fill: rgba(239, 68, 68, 0.14); stroke: rgba(248, 113, 113, 0.56); stroke-width: 1.2; pointer-events: none; }
.cfg-el-alarm-zone-leak { fill: rgba(14, 165, 233, 0.14); stroke: rgba(56, 189, 248, 0.58); }
.cfg-el-alarm-zone-smoke { fill: rgba(148, 163, 184, 0.15); stroke: rgba(203, 213, 225, 0.58); }
.cfg-el-alarm-zone-siren { fill: rgba(250, 204, 21, 0.14); stroke: rgba(250, 204, 21, 0.62); stroke-dasharray: 5 4; }
.cfg-el-alarm-device { cursor: move; }
.cfg-el-alarm-body { stroke: #f8fafc; stroke-width: 1.5; pointer-events: none; }
.cfg-el-alarm-text { fill: #fff; font: 700 7px system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.cfg-el-site-feature { cursor: move; }
.cfg-el-site-line-hit { stroke: rgba(255,255,255,0.001); stroke-width: 18; stroke-linecap: round; pointer-events: stroke; cursor: move; }
.cfg-el-site-line { fill: none; stroke-width: 4; stroke-linecap: round; pointer-events: none; }
.cfg-el-site-fence { stroke-linecap: round; }
.cfg-el-site-fence-draft { pointer-events: none; }
.cfg-el-site-barrier { stroke-width: 5; stroke-dasharray: 14 8; }
.cfg-el-site-detail { fill: none; stroke: #f8fafc; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cfg-el-site-detail-box { fill: rgba(15, 118, 110, 0.16); stroke: #f8fafc; stroke-width: 1.4; pointer-events: none; }
.cfg-el-site-post { fill: #111827; stroke: #f8fafc; stroke-width: 1.5; pointer-events: none; }
.cfg-el-site-device { fill: #7c3aed; stroke: #f8fafc; stroke-width: 1.4; pointer-events: none; }
.cfg-el-site-mast { fill: #64748b; stroke: #f8fafc; stroke-width: 1.5; pointer-events: none; }
.cfg-el-site-wifi { fill: #0891b2; stroke: #f8fafc; stroke-width: 1.5; pointer-events: none; }
.cfg-el-route { fill: none; stroke: #ffb020; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.cfg-el-route-sel { stroke: #ffd166; filter: drop-shadow(0 0 4px rgba(255, 176, 32, 0.45)); }
.cfg-el-route-label { pointer-events: none; }
.cfg-el-route-label text {
  fill: #ffb020;
  font: 600 10px system-ui, sans-serif;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(12, 13, 16, 0.85);
  stroke-width: 3px;
}
.cfg-el-route-preview { fill: none; stroke: #ffb020; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }

/* — Плавность (smooth1): гладкие линии в покое; во время drag/pan — быстрая отрисовка + облегчённые тяжёлые слои (меньше рывков) — */
.cfg-layout-svg { shape-rendering: geometricPrecision; }
.cfg-layout-svg.is-interacting { shape-rendering: optimizeSpeed; }
.cfg-layout-svg.is-interacting .cfg-el-fov-good,
.cfg-layout-svg.is-interacting .cfg-el-fov-fair { opacity: .42; }
.cfg-layout-svg.is-interacting .cfg-el-conduit-casing { opacity: .5; }
.cfg-layout-svg.is-interacting image { image-rendering: optimizeSpeed; }
.cfg-el-tray-hit { fill: none; stroke: rgba(255,255,255,0.001); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; cursor: move; }
.cfg-el-tray { fill: none; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.cfg-el-tray-sel { filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)); }
.cfg-el-tray-visual-only { opacity: 0.54; stroke-dasharray: 8 5; }
.cfg-el-tray-draft { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cfg-el-tray-label { fill: #fbbf24; }
.cfg-el-door-arc { fill: none; stroke: #a8adb6; stroke-width: 1.5; }
.cfg-el-window-mark { stroke: #6ec6ff; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.cfg-el-window-athermal { stroke: #f472b6; stroke-width: 2.8; }
.cfg-el-opening { cursor: pointer; }
.cfg-layout-inspector .cfg-layout-check { display: inline-flex; align-items: center; gap: 8px; color: #f1f2f4; }
.cfg-layout-inspector .cfg-layout-check input { width: 16px; height: 16px; accent-color: #d90012; }
.cfg-el-handle { fill: #fff; stroke: #d90012; stroke-width: 1.5; cursor: pointer; }
.cfg-el-handle-hit { fill: rgba(255, 255, 255, 0.001); stroke: none; cursor: pointer; pointer-events: all; }
.cfg-el-handle-route-end { fill: #ffe8a3; }
.cfg-el-handle-bound { stroke: #4ade80; stroke-width: 2.5; }
.cfg-el-handle-active { stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(217, 0, 18, 0.55)); }
.cfg-el-handle-wall-edge { fill: #0c0d10; stroke: #fbbf24; stroke-width: 2.5; cursor: move; }
.cfg-el-handle-rotate { stroke-width: 2.5; cursor: grab; filter: drop-shadow(0 0 4px rgba(0,0,0,0.45)); }
.cfg-el-aim-axis-vis { stroke: rgba(255,255,255,0.7); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.cfg-el-aim-axis { stroke: transparent; stroke-width: 16; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.cfg-el-snap-hint { fill: none; stroke: #4ade80; stroke-width: 2; pointer-events: none; }
.cfg-el-selected { outline: none; }
.cfg-el-selbox { fill: none; stroke: #36c; stroke-width: 1.5; stroke-dasharray: 4 3; }
.cfg-el-calib { stroke: #36c; stroke-width: 2; stroke-dasharray: 5 4; }
.cfg-status-hint { color: #fbbf24; }
.swatch-tray { background: #f59e0b; }
.swatch-alarm { background: #ef4444; }
.cfg-layout-context-menu {
  position: fixed;
  z-index: 220;
  min-width: 176px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(19, 20, 25, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}
.cfg-layout-context-menu[hidden] { display: none; }
.cfg-layout-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #f1f2f4;
  font: 600 12px system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.cfg-layout-context-menu button:hover {
  background: rgba(255, 255, 255, 0.09);
}

@media (max-width: 860px) {
  .cfg-layout-inspector { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: -8px 0 24px rgba(0,0,0,0.4); }
  .cfg-layout-bar { gap: 4px; padding: 6px 8px; }
  .cfg-ltool { padding: 6px 9px; font-size: 12px; }
  .cfg-ltool-group-title { width: 100%; }
  .cfg-layout-legend { display: none; }
}

@media (pointer: coarse) {
  .cfg-layout-bar { gap: 8px; padding: 10px 12px; }
  .cfg-ltool-icon { width: 44px; height: 44px; }
  .cfg-ltool-text,
  .cfg-layout-mini-select,
  .cfg-layout-place { min-height: 44px; }
  .cfg-layout-inspector {
    width: 320px;
    flex-basis: 320px;
  }
  .cfg-layout-status {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ---- Волна 1: toast «Вернуть» (W1.4), справка (W1.5), мастер «3 шага» (W1.6) ---- */
.cfg-layout-toast {
  position: fixed;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 230;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(28, 30, 38, 0.98);
  color: #f1f2f4;
  font: 500 13px system-ui, sans-serif;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.cfg-layout-toast[hidden] { display: none; }
.cfg-layout-toast-act {
  border: 0;
  background: transparent;
  color: #34d399;
  font: 600 13px system-ui, sans-serif;
  cursor: pointer;
  padding: 2px 4px;
}
.cfg-layout-toast-act:hover { text-decoration: underline; }

.cfg-layout-help {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 9, 12, 0.62);
}
.cfg-layout-help[hidden] { display: none; }
.cfg-layout-help-card {
  width: min(560px, 100%);
  max-height: calc(100% - 24px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: #15171d;
  color: #f1f2f4;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.cfg-layout-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
}
.cfg-layout-help-x {
  border: 0;
  background: transparent;
  color: #aeb2ba;
  font-size: 16px;
  cursor: pointer;
}
.cfg-layout-help-x:hover { color: #fff; }
.cfg-layout-help-body { padding: 6px 18px 14px; }
.cfg-layout-help-dl { margin: 0; }
.cfg-layout-help-dl > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cfg-layout-help-dl > div:first-child { border-top: 0; }
.cfg-layout-help-dl dt { font-weight: 600; color: #f1f2f4; }
.cfg-layout-help-dl dd { margin: 0; color: #c4c8d0; font-size: 13px; line-height: 1.5; }
.cfg-layout-onboard { list-style: none; margin: 4px 0 0; padding: 0; }
.cfg-layout-onboard li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cfg-layout-onboard li:first-child { border-top: 0; }
.cfg-layout-onboard-n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 211, 153, 0.16);
  color: #34d399;
  font-weight: 700;
  font-size: 13px;
}
.cfg-layout-onboard li > div { display: flex; flex-direction: column; gap: 2px; }
.cfg-layout-onboard li b { font-size: 14px; }
.cfg-layout-onboard li span { color: #c4c8d0; font-size: 13px; }
.cfg-layout-help-foot { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; }
/* Ф2 — редактор шкафа (фронтальный вид стойки) */
.cfg-help-wide .cfg-layout-help-card { width: min(880px, 100%); }
.cfg-rack-editor { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.cfg-rack-col { flex: 1 1 0; min-width: 170px; }
.cfg-rack-catalog { max-width: 220px; }
.cfg-rack-catalog summary { cursor: pointer; font-weight: 600; padding: 4px 0; color: #c4c8d0; }
.cfg-rack-models { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.cfg-rack-model { text-align: left; padding: 5px 8px; border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; background: #1b1e25; color: #e6e8ec; cursor: pointer; font-size: 12px; }
.cfg-rack-model:hover { border-color: #38bdf8; }
.cfg-rack-model.is-active { background: #0e3a52; border-color: #38bdf8; color: #fff; }
.cfg-rack-elev-col { flex: 0 0 auto; text-align: center; }
.cfg-rack-elev { display: block; margin: 0 auto; }
.cfg-rack-stat { margin-top: 8px; font-size: 12px; color: #aeb2ba; }
.cfg-rack-palette-title { font-weight: 600; color: #c4c8d0; margin-bottom: 6px; }
.cfg-rack-palette { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.cfg-rack-add { text-align: left; padding: 5px 8px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 7px; background: transparent; color: #e6e8ec; cursor: pointer; font-size: 12px; }
.cfg-rack-add:hover { border-color: #16a34a; background: rgba(22,163,74,0.12); }
.cfg-rack-inspect { margin-top: 12px; padding: 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: #1b1e25; }
.cfg-rack-inspect b { color: #f1f2f4; display: block; margin-bottom: 6px; }
.cfg-rack-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 5px 0; font-size: 12px; color: #c4c8d0; }
.cfg-rack-field input { width: 120px; padding: 4px 6px; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; background: #0f1116; color: #e6e8ec; font-size: 12px; }
.cfg-rack-field input[type="number"] { width: 70px; }
.cfg-rack-outdoor { display: flex; align-items: center; gap: 7px; padding: 6px 8px; margin-bottom: 8px; border: 1px solid rgba(56,189,248,0.4); border-radius: 7px; background: rgba(56,189,248,0.08); color: #e6e8ec; font-size: 12px; cursor: pointer; }
.cfg-rack-outdoor input { accent-color: #38bdf8; }
.cfg-rack-shelf { display: flex; align-items: center; gap: 7px; margin: 7px 0 4px; font-size: 12px; color: #c4c8d0; cursor: pointer; }
.cfg-rack-shelf input { accent-color: #38bdf8; }
.cfg-rack-remove { margin-top: 8px; padding: 5px 10px; border: 1px solid #b91c1c; border-radius: 7px; background: rgba(185,28,28,0.14); color: #fca5a5; cursor: pointer; font-size: 12px; }
.cfg-ltool-primary { background: #1f6feb !important; color: #fff !important; }
@media (max-width: 860px) {
  .cfg-layout-help-dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Волна 2: сетка (W2.1) ---- */
.cfg-layout-grid { pointer-events: none; }
.cfg-layout-svg .cfg-grid-line { fill: none; stroke: rgba(120, 130, 150, 0.30); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---- Волна 2: шпаргалка горячих клавиш (W2.4) ---- */
.cfg-layout-help-sub { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: #aeb2ba; }
.cfg-layout-help-dl kbd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

/* ---- Волна 2: блок/скрытие, «Сохранено ✓», режим Просто/Профи ---- */
.cfg-layout-saved { font-size: 12px; color: #6b7280; align-self: center; }
.cfg-layout-saved.is-flash { color: #34d399; animation: cfgSavedFlash 0.9s ease; }
@keyframes cfgSavedFlash { 0% { opacity: 0.35; } 30% { opacity: 1; } 100% { opacity: 1; } }
.cfg-layout-simple .cfg-ltool-pro { display: none !important; }

/* ---- Волна 2: панель слоёв + drag-n-drop файла-плана ---- */
.cfg-layers { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 8px; }
.cfg-layers-head { font-size: 12px; color: #aeb2ba; margin-bottom: 6px; }
.cfg-layer-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; border-radius: 6px; }
.cfg-layer-row.is-selected { background: rgba(96, 165, 250, 0.18); }
.cfg-layer-name { flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; color: #dfe3ea; font: 400 12px system-ui, sans-serif; cursor: pointer; padding: 5px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-layer-name:hover { background: rgba(255, 255, 255, 0.08); }
.cfg-layer-ic { width: 28px; height: 26px; flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; border-radius: 5px; font-size: 13px; line-height: 1; opacity: 0.6; }
.cfg-layer-ic:hover, .cfg-layer-ic.is-on { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.cfg-layer-ic.is-off { opacity: 0.35; }
.cfg-layout-stage.is-dropping { outline: 2px dashed #34d399; outline-offset: -8px; }

/* ---- Волна 2: текст-подпись и размерные линии ---- */
.cfg-el-text { fill: #e7eaf0; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.cfg-el-text.is-selected { fill: #93c5fd; }
.cfg-el-dim-line, .cfg-el-dim-tick { stroke: #9aa3af; stroke-width: 1.2; }
.cfg-el-dimension.is-selected .cfg-el-dim-line { stroke: #60a5fa; stroke-width: 2; }
.cfg-el-dimension.is-draft { opacity: 0.7; }
.cfg-el-dim-label text { fill: #cbd5e1; font: 700 11px system-ui, sans-serif; paint-order: stroke; stroke: #0c0e13; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

/* ---- Волна 3: спецификация (BOM) ---- */
.cfg-spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-spec-table th { text-align: left; color: #aeb2ba; font-weight: 500; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.cfg-spec-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.cfg-spec-qty { text-align: right; font-weight: 600; white-space: nowrap; }
.cfg-spec-unit { color: #98a0ad; width: 44px; }

/* ---- Волна 3: тепловая карта покрытия ---- */
.cfg-layout-coverage { pointer-events: none; }
.cfg-cov-ok { fill: rgba(52, 211, 153, 0.45); }
.cfg-cov-no { fill: rgba(239, 68, 68, 0.55); }
.cfg-cov-ov { fill: rgba(245, 158, 11, 0.55); }

/* ---- Волна 4: командная палитра / поиск ---- */
.cfg-pal-input { width: 100%; height: 38px; box-sizing: border-box; background: #10141c; border: 1px solid #3d6fc2; border-radius: 8px; color: #e7eaf0; font-size: 14px; padding: 0 12px; margin-bottom: 10px; }
.cfg-pal-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.cfg-pal-item { text-align: left; background: transparent; border: 0; color: #dfe3ea; font-size: 13px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.cfg-pal-item:hover { background: rgba(96, 165, 250, 0.18); }