#map { position: absolute; top:0; left:0; width:100%; height:100%; }

    #map .leaflet-tooltip {
      color: #2c3e50;
      font-weight: bold;
    }

    #map .leaflet-tooltip:not(.attr-tooltip) {
      background: transparent;
      border: none;
      box-shadow: none;
      text-shadow: 0 0 3px #fff, 0 0 3px #fff;
    }

    #map .attr-tooltip {
      background: rgba(255,255,255,0.92);
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      font-size: 12px;
      line-height: 1.4;
      max-width: 300px;
      white-space: normal;
      pointer-events: none;
    }

    .leaflet-popup-content {
      width: 280px !important;
      max-width: 280px !important;
    }

    .popup-confirm {
      position: absolute; top: 0; left: 0;
      width: 24px; height: 24px; padding: 0;
      border: none; background: transparent; border-radius: 4px;
      color: #27813e; font: bold 18px/24px Arial, sans-serif;
      cursor: pointer;
    }
    .popup-confirm:hover { background: #e8f4eb; color: #185b29; }
    .popup-confirm:focus-visible { outline: 2px solid #27813e; }
    #map .leaflet-popup-close-button {
      width: 24px; height: 24px;
      font: bold 24px/24px Arial, sans-serif;
    }
    .popup-delete {
      position: absolute; top: 0; left: 66%; transform: translateX(-50%);
      display: flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; padding: 0;
      border: none; background: transparent; border-radius: 4px;
      color: #c0392b; cursor: pointer;
    }
    .popup-delete:hover { background: #fbeceb; color: #922b21; }
    .popup-delete:focus-visible { outline: 2px solid #c0392b; }
    .popup-connect {position:absolute;top:0;left:33%;transform:translateX(-50%);width:30px;height:24px;padding:0;border:0;background:transparent;color:#2477cf;cursor:pointer;border-radius:4px;}
    .popup-connect:hover {background:#e6f0fc;}
    .popup-connect:focus-visible {outline:2px solid #2477cf;}
    .single-cable-anchor {visibility:hidden;pointer-events:none;bottom:auto;margin:0;height:0;}
    .single-cable-source {position:absolute;display:grid;grid-template-columns:max-content max-content;grid-template-areas:'name name' 'inputs outputs';gap:6px 8px;align-items:start;}
    .single-cable-source > .cable-panel {position:static !important;left:auto !important;top:auto !important;}
    .single-cable-source > .cable-input {grid-area:inputs;}
    .single-cable-source > .cable-output {grid-area:outputs;}
    /* Local scenario names average 22 characters; 90% are at most 32 characters. */
    .single-cable-name {grid-area:name;justify-self:center;position:relative;box-sizing:border-box;width:max-content;max-width:32ch;padding:6px 10px;border-radius:6px;background:#edf5ff;border:1px solid #91b9e1;box-shadow:0 3px 12px #0003;font:bold 12px/1.4 Arial,sans-serif;text-align:center;white-space:normal;word-break:normal;overflow-wrap:anywhere;color:#243746;}
    .single-cable-name::before,.single-cable-name::after {content:'';position:absolute;bottom:-7px;width:2px;height:7px;background:#91b9e1;}
    .single-cable-name::before {left:25%;}.single-cable-name::after {right:25%;}
    .single-connection-active .attr-tooltip {display:none;}
    .connection-title {font-weight:bold;font-size:13px;margin:8px 0;}
    .connection-list {max-height:180px;overflow:auto;}
    .connection-row {display:flex;gap:6px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #ddd;font-size:11px;overflow-wrap:anywhere;}
    .connection-row > div {flex:1;min-width:0;}
    .connection-row button {font-size:10px;}
    .connection-removed > div {opacity:.5;text-decoration:line-through;}
    .connection-warning {color:#a64b00;font-size:11px;margin:4px 0;}
    .connection-hint {color:#68737a;font-size:11px;margin:5px 0;}
    .connection-builder {background:#f3f5f6;padding:8px;margin-top:6px;}
    .connection-builder label {display:block;font-size:11px;margin:6px 0;}
    .connection-builder select {display:block;width:100%;font-size:11px;margin-top:3px;}
    [data-connections] summary {cursor:pointer;font-weight:bold;font-size:12px;margin-top:8px;}
    [data-show-builder] {margin-top:8px;}
    .cable-editor {position:absolute;inset:0;z-index:800;pointer-events:none;overflow:hidden;}
    .cable-svg {position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
    .cable-svg path {fill:none;stroke:#2477cf;stroke-width:3;stroke-dasharray:7 5;}
    [data-live-cable] {stroke:#159447 !important;stroke-width:3 !important;}
    .cable-panel {position:absolute;width:max-content;min-width:94px;max-width:180px;max-height:min(300px,65vh);overflow-y:auto;pointer-events:auto;background:rgba(255,255,255,.97);border:1px solid #8a9cae;border-radius:6px;box-shadow:0 3px 12px #0003;padding:5px;box-sizing:border-box;}
    .cable-panel-title {font:bold 11px/1.35 Arial,sans-serif;color:#34495e;padding:3px 4px;overflow-wrap:anywhere;}
    .cable-port {display:flex;align-items:center;gap:7px;width:100%;border:0;border-radius:4px;padding:3px 4px;background:transparent;color:#243746;font:12px/1.2 Arial,sans-serif;text-align:left;cursor:grab;touch-action:none;}
    .cable-output .cable-port {justify-content:flex-end;text-align:right;}
    .cable-output .cable-panel-title {text-align:right;}
    .cable-port > span:not(.cable-dot) {min-width:0;overflow-wrap:anywhere;}
    .cable-port:hover,.cable-port:focus-visible {background:#e6f0fc;outline:2px solid #91b9e1;outline-offset:-2px;}
    .cable-dot {display:block;flex:0 0 11px;height:11px;border-radius:50%;border:2px solid #2477cf;background:white;box-sizing:border-box;}
    .cable-target {border:2px solid #159447;}
    .cable-target .cable-dot {border-color:#159447;}
    .cable-port-hover {background:#d7f4df !important;outline:2px solid #159447;outline-offset:-2px;}
    .cable-port-hover .cable-dot {background:#159447;}
    .cable-port-source {background:#dcecff !important;outline:2px solid #2477cf;outline-offset:-2px;}
    .cable-port-source .cable-dot {background:#2477cf;border-color:#2477cf;}
    .cable-empty {padding:5px;color:#68737a;font-size:11px;}
    .cable-instruction {position:absolute;bottom:10px;left:50%;transform:translateX(-50%);max-width:65%;padding:7px 12px;border-radius:5px;background:#fffef0;box-shadow:0 2px 8px #0003;font:12px/1.4 Arial,sans-serif;text-align:center;}
    .cable-drawing {cursor:crosshair;}
    .cable-popup-drawing {opacity:.18;pointer-events:none;}
    #map .fixed-edit-popup {position:absolute;left:var(--edit-left) !important;top:var(--edit-top) !important;bottom:auto !important;transform:none !important;margin:0;z-index:900;}
    .fixed-edit-popup .leaflet-popup-tip-container {display:none;}
    .fixed-edit-popup .leaflet-popup-content {margin:30px 14px 12px;}
    .edit-node-name {font:bold 13px/1.4 Arial,sans-serif;overflow-wrap:anywhere;margin:0 0 10px;}
    .edit-tabs {display:flex;gap:4px;border-bottom:1px solid #ccd5dd;margin-bottom:10px;}
    .edit-tabs button {flex:1;border:0;padding:7px 4px;background:#edf1f4;color:#34495e;cursor:pointer;font-size:12px;}
    .edit-tabs button[aria-selected="true"] {background:#dcecff;border-bottom:3px solid #2477cf;font-weight:bold;}
    .edit-tabs button:focus-visible {outline:2px solid #2477cf;outline-offset:-2px;}
    .editor-selected {outline:3px solid #1676cb;outline-offset:5px;border-radius:50%;box-shadow:0 0 0 6px #ffffffbb;}
    [data-connection-summary] {font-size:12px;color:#34495e;margin:8px 0;}

    #typeList .cat-header {
      font-size:10px; font-weight:bold; color:#7f8c8d;
      text-transform:uppercase; margin-top:8px; margin-bottom:2px;
    }
    #typeList .type-item {
      padding:5px 8px; font-size:12px; cursor:pointer; border-radius:3px;
      display:flex; align-items:center; gap:6px;
    }
    #typeList .type-item:hover { 
      background:#ecf0f1; 
    }