:root {
               --bg: #eef3f7;
               --panel: #fff;
               --panel-soft: #f7fafc;
               --line: #dbe5ec;
               --line-strong: #c5d3dd;
               --text: #102a43;
               --muted: #627d98;
               --accent: #0b6e99;
               --accent-2: #1296c7;
               --accent-soft: #e3f4fb;
               --danger: #b42318;
               --danger-soft: #fff0ee;
               --success: #16794b;
               --shadow: 0 12px 28px rgba(16, 42, 67, .08);
               --radius: 16px;
               --radius-sm: 10px;
               --topbar: 72px;
          }

          * {
               box-sizing: border-box
          }

          html,
          body {
               margin: 0;
               min-height: 100%;
               font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
               color: var(--text);
               background: var(--bg)
          }

          button,
          input,
          select,
          textarea {
               font: inherit;
               color: inherit
          }

          button {
               cursor: pointer
          }

          button:disabled {
               cursor: not-allowed;
               opacity: .45
          }

          .hidden {
               display: none !important
          }

          .grow {
               flex: 1
          }

          .full {
               width: 100%
          }

          .app-shell {
               min-height: 100vh;
               display: flex;
               flex-direction: column
          }

          .topbar {
               height: var(--topbar);
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 20px;
               padding: 0 22px;
               background: #102a43;
               color: #fff;
               border-bottom: 1px solid rgba(255, 255, 255, .08)
          }

          .brand {
               display: flex;
               align-items: center;
               gap: 12px;
               min-width: 0
          }

          .brand-mark {
               width: 44px;
               height: 44px;
               border-radius: 12px;
               display: grid;
               place-items: center;
               background: var(--panel);
               color: #102a43;
               font-size: 14px;
               font-weight: 900;
               letter-spacing: .04em
          }

          .brand-title {
               margin: 0;
               font-size: 18px;
               font-weight: 800;
               letter-spacing: .01em
          }

          .brand-subtitle {
               font-size: 12px;
               color: #bcccdc;
               margin-top: 2px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis
          }

          .top-actions {
               display: flex;
               align-items: center;
               gap: 8px;
               flex-wrap: wrap;
               justify-content: flex-end
          }

          .btn {
               min-height: 40px;
               border-radius: 10px;
               border: 1px solid transparent;
               padding: 0 14px;
               display: inline-flex;
               align-items: center;
               justify-content: center;
               gap: 7px;
               font-weight: 750;
               font-size: 13px;
               transition: .16s ease;
               white-space: nowrap;
               border: 0;
               font-family: inherit;
               cursor: pointer
          }

          .btn:hover:not(:disabled) {
               transform: translateY(-1px)
          }

          .btn-primary {
               background: var(--accent);
               color: #fff;
               border-color: var(--accent)
          }

          .btn-primary:hover:not(:disabled) {
               background: #085a7d
          }

          .btn-secondary {
               background: var(--panel);
               color: var(--text);
               border-color: var(--line-strong)
          }

          .topbar .btn-secondary {
               background: rgba(255, 255, 255, .08);
               color: #fff;
               border-color: rgba(255, 255, 255, .2)
          }

          .btn-ghost {
               background: transparent;
               color: inherit;
               border-color: rgba(255, 255, 255, .16);
               padding-inline: 11px;
               font-size: 18px
          }

          .file-btn {
               position: relative;
               overflow: hidden
          }

          .file-btn input {
               position: absolute;
               inset: 0;
               opacity: 0;
               cursor: pointer;
               font-size: 0
          }

          .topbar {
               overflow: visible;
               position: relative;
               z-index: 1600
          }

          .brand {
               flex: 0 1 auto
          }

          .top-menu-bar {
               display: flex;
               align-items: center;
               gap: 4px;
               flex: 1;
               justify-content: flex-start;
               margin-left: 10px
          }

          .top-menu {
               position: relative
          }

          .top-menu>summary {
               list-style: none;
               min-height: 38px;
               padding: 0 11px;
               border-radius: 8px;
               display: flex;
               align-items: center;
               gap: 6px;
               font-size: 12px;
               font-weight: 800;
               color: #fff;
               cursor: pointer;
               border: 1px solid transparent;
               user-select: none
          }

          .top-menu>summary::-webkit-details-marker {
               display: none
          }

          .top-menu>summary::after {
               content: 'v';
               font-size: 9px;
               color: #9fb3c8
          }

          .top-menu[open]>summary,
          .top-menu>summary:hover {
               background: rgba(255, 255, 255, .09);
               border-color: rgba(255, 255, 255, .13)
          }

          .top-menu-panel {
               position: absolute;
               top: calc(100% + 7px);
               left: 0;
               width: 250px;
               padding: 6px;
               background: var(--panel);
               border: 1px solid var(--line-strong);
               border-radius: 10px;
               box-shadow: 0 18px 45px rgba(3, 20, 33, .28);
               display: flex;
               flex-direction: column;
               gap: 2px;
               color: var(--text);
               z-index: 1700
          }

          .top-menu-panel.wide {
               width: 290px
          }

          .top-menu-item {
               width: 100%;
               min-height: 34px;
               border: 0;
               border-radius: 7px;
               background: transparent;
               color: var(--text);
               padding: 7px 9px;
               display: flex;
               align-items: center;
               gap: 9px;
               text-align: left;
               font-size: 11px;
               font-weight: 750;
               cursor: pointer;
               position: relative
          }

          .top-menu-item:hover,
          .top-menu-item:focus {
               background: var(--accent-soft);
               outline: none
          }

          .top-menu-item .mi {
               width: 18px;
               text-align: center;
               color: var(--accent);
               font-weight: 900
          }

          .top-menu-item .sub {
               margin-left: auto;
               color: var(--muted);
               font-size: 9px;
               font-weight: 650
          }

          .top-menu-sep {
               height: 1px;
               background: var(--line);
               margin: 4px 3px
          }

          .top-menu-panel .file-btn {
               justify-content: flex-start;
               overflow: hidden
          }

          .top-menu-panel .file-btn input {
               position: absolute;
               inset: 0;
               opacity: 0;
               cursor: pointer
          }

          .top-actions {
               flex-wrap: nowrap
          }

          .boot-status {
               display: inline-flex;
               align-items: center;
               gap: 5px;
               min-height: 28px;
               padding: 0 8px;
               border-radius: 999px;
               background: rgba(255, 255, 255, .08);
               font-size: 9px;
               color: #bcccdc;
               white-space: nowrap;
               border: 0;
               font-family: inherit;
               cursor: pointer
          }

          .boot-status::before {
               content: '';
               width: 7px;
               height: 7px;
               border-radius: 50%;
               background: #f59e0b
          }

          .boot-status.ready::before {
               background: #34d399
          }

          .boot-status.warn::before {
               background: #f59e0b
          }

          .boot-status.error::before {
               background: #f87171
          }

          .server-required {
               position: sticky;
               top: 0;
               z-index: 5000;
               background: #fff3cd;
               color: #664d03;
               border-bottom: 1px solid #ffecb5;
               padding: 9px 16px;
               font-size: 12px;
               text-align: center
          }

          .server-required.hidden {
               display: none !important
          }

          @media(max-width:1100px) {
               .brand-subtitle {
                    display: none
               }

               .top-menu-bar {
                    overflow-x: auto
               }

               .top-menu>summary {
                    padding: 0 8px
               }

               .boot-status {
                    display: none
               }
          }

          @media(max-width:760px) {
               .brand-copy {
                    display: none
               }

               .topbar {
                    padding: 0 8px;
                    gap: 5px
               }

               .top-menu-bar {
                    margin-left: 0
               }

               .top-actions #undoBtn,
               .top-actions #redoBtn {
                    display: none
               }

               .account-trigger span:last-child {
                    display: none
               }
          }

          .project-strip {
               min-height: 66px;
               padding: 10px 22px;
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 18px;
               background: var(--panel);
               border-bottom: 1px solid var(--line)
          }

          .project-title-wrap {
               display: flex;
               align-items: center;
               gap: 10px;
               min-width: 0
          }

          .project-title-input {
               border: 0;
               background: transparent;
               font-size: 18px;
               font-weight: 800;
               min-width: 240px;
               max-width: 560px;
               width: min(42vw, 560px);
               padding: 7px 4px;
               border-bottom: 2px solid transparent;
               outline: none
          }

          .project-title-input:focus {
               border-color: var(--accent)
          }

          .status-pill,
          .count-badge {
               display: inline-flex;
               align-items: center;
               justify-content: center;
               border-radius: 999px;
               background: var(--accent-soft);
               color: #075985;
               font-size: 11px;
               font-weight: 800;
               padding: 5px 9px;
               white-space: nowrap
          }

          .stats-grid {
               display: grid;
               grid-template-columns: repeat(4, minmax(72px, 1fr));
               gap: 8px
          }

          .stat {
               padding: 2px 12px;
               border-left: 1px solid var(--line);
               min-width: 84px
          }

          .stat strong {
               display: block;
               font-size: 14px
          }

          .stat span {
               font-size: 10px;
               text-transform: uppercase;
               letter-spacing: .08em;
               color: var(--muted);
               font-weight: 800
          }

          .workspace {
               flex: 1;
               min-height: 0;
               padding: 12px;
               display: grid;
               grid-template-columns: minmax(275px, 330px) minmax(480px, 1fr) minmax(330px, 390px);
               gap: 12px
          }

          .panel {
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: var(--radius);
               box-shadow: var(--shadow);
               min-width: 0;
               overflow: hidden
          }

          .left-panel,
          .right-panel {
               display: flex;
               flex-direction: column;
               min-height: 680px;
               max-height: calc(100vh - 174px)
          }

          .tabs {
               height: 52px;
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               gap: 3px;
               padding: 6px;
               border-bottom: 1px solid var(--line);
               background: #f8fbfd
          }

          .tab {
               border: 0;
               background: transparent;
               border-radius: 8px;
               color: var(--muted);
               font-weight: 800;
               font-size: 12px;
               padding: 0 6px
          }

          .tab.active {
               background: var(--panel);
               color: var(--accent);
               box-shadow: 0 2px 8px rgba(16, 42, 67, .08)
          }

          .tab-panel {
               display: none;
               padding: 16px;
               overflow: auto;
               min-height: 0
          }

          .tab-panel.active {
               display: block
          }

          .section-head {
               display: flex;
               align-items: flex-start;
               justify-content: space-between;
               gap: 12px;
               margin-bottom: 14px
          }

          .section-head h2,
          .inspector h2 {
               margin: 0;
               font-size: 17px
          }

          .section-head p {
               margin: 4px 0 0;
               color: var(--muted);
               font-size: 12px;
               line-height: 1.4
          }

          .button-row {
               display: flex;
               gap: 8px;
               align-items: center
          }

          .subtle-row {
               justify-content: space-between;
               border-top: 1px solid var(--line);
               padding-top: 10px;
               margin-top: 10px
          }

          .mode-hint {
               font-size: 11px;
               color: var(--muted);
               background: var(--panel-soft);
               border: 1px dashed var(--line-strong);
               padding: 8px 10px;
               border-radius: 8px;
               margin: 10px 0 12px
          }

          .text-btn {
               border: 0;
               background: transparent;
               color: var(--accent);
               font-weight: 800;
               font-size: 12px;
               padding: 7px 3px
          }

          .text-btn.danger {
               color: var(--danger)
          }

          .list {
               display: flex;
               flex-direction: column;
               gap: 7px
          }

          .list-empty {
               border: 1px dashed var(--line-strong);
               border-radius: 10px;
               padding: 18px 12px;
               text-align: center;
               color: var(--muted);
               font-size: 12px
          }

          .list-row {
               border: 1px solid var(--line);
               border-radius: 10px;
               padding: 9px;
               background: var(--panel);
               display: flex;
               align-items: center;
               gap: 9px;
               transition: .12s
          }

          .list-row:hover {
               border-color: #a8c0cf
          }

          .list-row.selected {
               border-color: var(--accent);
               box-shadow: 0 0 0 2px var(--accent-soft)
          }

          .row-number {
               width: 28px;
               height: 28px;
               display: grid;
               place-items: center;
               border-radius: 50%;
               background: #eaf1f5;
               font-size: 11px;
               font-weight: 900;
               flex: 0 0 auto
          }

          .row-number.instruction {
               background: #102a43;
               color: #fff
          }

          .row-main {
               min-width: 0;
               flex: 1
          }

          .row-title {
               font-size: 12px;
               font-weight: 800;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap
          }

          .row-sub {
               font-size: 10px;
               color: var(--muted);
               margin-top: 2px
          }

          .row-actions {
               display: flex;
               align-items: center;
               gap: 2px
          }

          .mini-btn {
               border: 0;
               background: transparent;
               width: 27px;
               height: 27px;
               border-radius: 7px;
               color: var(--muted);
               display: grid;
               place-items: center
          }

          .mini-btn:hover {
               background: #edf4f7;
               color: var(--text)
          }

          .mini-btn.danger:hover {
               background: var(--danger-soft);
               color: var(--danger)
          }

          .input {
               width: 100%;
               border: 1px solid var(--line-strong);
               background: var(--panel);
               border-radius: 9px;
               min-height: 40px;
               padding: 8px 10px;
               outline: none;
               font-size: 13px
          }

          .input:focus {
               border-color: var(--accent);
               box-shadow: 0 0 0 3px var(--accent-soft)
          }

          .textarea {
               resize: vertical;
               line-height: 1.45
          }

          .textarea.compact {
               min-height: 66px
          }

          .field {
               display: block;
               margin-bottom: 12px
          }

          .field>span {
               display: block;
               font-size: 11px;
               text-transform: uppercase;
               letter-spacing: .05em;
               font-weight: 850;
               color: var(--muted);
               margin-bottom: 5px
          }

          .form-grid.two {
               display: grid;
               grid-template-columns: 1.35fr .65fr;
               gap: 10px
          }

          .info-box {
               border-left: 3px solid var(--accent);
               background: var(--accent-soft);
               padding: 11px 12px;
               border-radius: 8px;
               font-size: 12px;
               line-height: 1.4
          }

          .info-box strong {
               display: block;
               margin-bottom: 3px
          }

          .scene-target-switch {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 3px;
               background: #eaf1f5;
               padding: 3px;
               border-radius: 10px;
               margin: 10px 0
          }

          .seg {
               border: 0;
               background: transparent;
               border-radius: 8px;
               min-height: 34px;
               font-size: 12px;
               font-weight: 800;
               color: var(--muted)
          }

          .seg.active {
               background: var(--panel);
               color: var(--accent);
               box-shadow: 0 2px 6px rgba(16, 42, 67, .08)
          }

          .symbol-grid {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               gap: 8px;
               margin: 12px 0 14px
          }

          .symbol-card {
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 10px;
               min-width: 0;
               padding: 7px;
               min-height: 92px;
               text-align: center;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               gap: 5px
          }

          .symbol-card:hover {
               border-color: var(--accent);
               background: #f9fdff
          }

          .symbol-card img {
               width: 48px;
               height: 48px;
               object-fit: contain
          }

          .symbol-card span {
               font-size: 9px;
               line-height: 1.2;
               color: var(--text);
               font-weight: 750;
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
               overflow: hidden
          }

          .map-panel {
               position: relative;
               display: flex;
               flex-direction: column;
               min-height: 680px
          }

          .map-toolbar {
               height: 48px;
               border-bottom: 1px solid var(--line);
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 0 10px 0 14px;
               background: var(--panel);
               z-index: 500
          }

          .map-mode {
               font-size: 12px;
               font-weight: 850;
               color: var(--text)
          }

          .map-toolbar-actions {
               display: flex;
               gap: 5px
          }

          .icon-btn {
               width: 34px;
               height: 34px;
               display: grid;
               place-items: center;
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 8px;
               font-weight: 900;
               color: var(--text)
          }

          .icon-btn:hover {
               background: #f4f8fa
          }

          .icon-btn.danger {
               color: var(--danger)
          }

          .map {
               flex: 1;
               min-height: 620px;
               background: #dbe5ec
          }

          .map-legend {
               position: absolute;
               z-index: 600;
               left: 12px;
               bottom: 12px;
               display: flex;
               gap: 12px;
               align-items: center;
               background: rgba(255, 255, 255, .96);
               border: 1px solid var(--line);
               border-radius: 10px;
               padding: 7px 10px;
               box-shadow: 0 5px 16px rgba(16, 42, 67, .12);
               font-size: 10px;
               font-weight: 750
          }

          .legend-line {
               display: inline-block;
               width: 22px;
               height: 0;
               border-top: 4px solid var(--accent);
               border-radius: 2px;
               vertical-align: middle;
               margin-right: 4px
          }

          .legend-dot {
               display: inline-block;
               width: 10px;
               height: 10px;
               border-radius: 50%;
               vertical-align: middle;
               margin-right: 4px
          }

          .legend-dot.control {
               background: var(--panel);
               border: 3px solid #d97706
          }

          .legend-dot.instruction {
               background: #102a43
          }

          .leaflet-control-attribution {
               font-size: 9px !important
          }

          .leaflet-div-icon {
               background: transparent;
               border: 0
          }

          .cp-marker {
               width: 24px;
               height: 24px;
               border-radius: 50%;
               border: 4px solid #d97706;
               background: var(--panel);
               box-shadow: 0 2px 6px rgba(0, 0, 0, .25)
          }

          .ins-marker {
               width: 28px;
               height: 28px;
               border-radius: 50%;
               display: grid;
               place-items: center;
               background: #102a43;
               color: #fff;
               border: 2px solid #fff;
               box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
               font-size: 10px;
               font-weight: 900
          }

          .ins-marker.selected {
               background: var(--accent-2);
               transform: scale(1.13)
          }

          .right-panel {
               overflow: auto
          }


          .right-info-table {
               width: 100%;
               border-collapse: collapse;
               border: 1px solid var(--line);
               border-radius: 8px;
               overflow: hidden;
               margin-bottom: 10px;
               font-size: 11px
          }

          .right-info-table th,
          .right-info-table td {
               border-bottom: 1px solid var(--line);
               padding: 6px 8px;
               vertical-align: top;
               text-align: left
          }

          .right-info-table th {
               width: 82px;
               color: var(--muted);
               background: #f8fbfd;
               font-size: 9px;
               text-transform: uppercase
          }

          .right-scene-table .scene-section {
               margin: 0;
               border: 0;
               padding: 0
          }

          .right-scene-table .scene-head {
               margin-bottom: 4px
          }

          .right-scene-table .scene-canvas {
               min-height: 110px;
               max-height: 150px
          }

          .right-description-field {
               display: none !important
          }

          .empty-state {
               margin: auto;
               text-align: center;
               padding: 34px 28px;
               color: var(--muted)
          }

          .empty-state h2 {
               color: var(--text);
               font-size: 17px;
               margin: 9px 0 6px
          }

          .empty-state p {
               font-size: 12px;
               line-height: 1.5;
               margin: 0
          }

          .empty-icon {
               width: 56px;
               height: 56px;
               border-radius: 18px;
               display: grid;
               place-items: center;
               margin: auto;
               background: var(--accent-soft);
               color: var(--accent);
               font-size: 28px;
               font-weight: 900
          }

          .inspector {
               padding: 16px;
               overflow: auto
          }

          .inspector-head {
               display: flex;
               align-items: center;
               justify-content: space-between;
               margin-bottom: 12px
          }

          .eyebrow {
               font-size: 9px;
               text-transform: uppercase;
               letter-spacing: .1em;
               font-weight: 900;
               color: var(--muted)
          }

          .distance-cards {
               display: grid;
               grid-template-columns: 1fr 1fr;
               border: 1px solid var(--line);
               border-radius: 12px;
               overflow: hidden;
               margin-bottom: 13px
          }

          .distance-cards>div {
               padding: 9px 12px;
               background: #f8fbfd
          }

          .distance-cards>div+div {
               border-left: 1px solid var(--line)
          }

          .distance-cards span {
               display: block;
               font-size: 9px;
               letter-spacing: .1em;
               font-weight: 900;
               color: var(--muted)
          }

          .distance-cards strong {
               font-size: 16px
          }

          .scene-section,
          .element-editor {
               margin-top: 16px;
               border-top: 1px solid var(--line);
               padding-top: 14px
          }

          .scene-head {
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 8px;
               margin-bottom: 8px
          }

          .scene-head h3 {
               font-size: 13px;
               margin: 0
          }

          .scene-head span {
               font-size: 10px;
               color: var(--muted)
          }

          .scene-canvas {
               width: 100%;
               aspect-ratio: 199/168;
               background: var(--panel);
               border: 1px solid var(--line-strong);
               border-radius: 10px;
               overflow: hidden;
               position: relative;
               background-image: linear-gradient(#f4f7f9 1px, transparent 1px), linear-gradient(90deg, #f4f7f9 1px, transparent 1px);
               background-size: 20px 20px
          }

          .scene-canvas svg {
               display: block;
               width: 100%;
               height: 100%;
               touch-action: none
          }

          .scene-canvas [data-editable="1"] {
               cursor: move
          }

          .scene-canvas [data-selected="1"] .selection-ring {
               display: block
          }

          .line-hit-target {
               stroke: transparent;
               stroke-width: 12;
               pointer-events: stroke
          }

          .line-selection-ring {
               stroke: #0b6e99;
               stroke-width: 6;
               stroke-opacity: .65;
               pointer-events: stroke
          }

          .selection-ring {
               display: none;
               fill: none;
               stroke: #0b6e99;
               stroke-width: 1.5;
               stroke-dasharray: 4 3;
               vector-effect: non-scaling-stroke
          }

          .element-fields {
               font-size: 12px
          }

          .element-fields.muted {
               color: var(--muted);
               padding: 8px 0
          }

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

          .element-grid .field {
               margin: 0
          }

          .element-actions {
               display: flex;
               gap: 8px;
               margin-top: 9px
          }

          .add-text-row {
               display: flex;
               gap: 7px;
               margin-top: 10px
          }

          .add-text-row .input {
               flex: 1
          }

          .footerbar {
               min-height: 34px;
               padding: 5px 16px;
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 12px;
               color: var(--muted);
               font-size: 10px
          }

          .footer-note {
               margin-left: auto
          }

          .toast {
               display: inline-flex;
               align-items: center;
               gap: 7px;
               background: #102a43;
               color: #fff;
               border-radius: 8px;
               padding: 6px 10px;
               font-size: 11px;
               animation: toastin .15s ease
          }

          .toast.error {
               background: #8f1d14
          }

          .toast.success {
               background: #11633d
          }

          @keyframes toastin {
               from {
                    opacity: 0;
                    transform: translateY(3px)
               }

               to {
                    opacity: 1;
                    transform: none
               }
          }

          .busy-overlay {
               position: absolute;
               inset: 48px 0 0;
               z-index: 1000;
               background: rgba(255, 255, 255, .58);
               display: grid;
               place-items: center;
               backdrop-filter: blur(2px)
          }

          .busy-card {
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: 12px;
               padding: 14px 18px;
               box-shadow: var(--shadow);
               font-size: 12px;
               font-weight: 800
          }

          .spinner {
               display: inline-block;
               width: 15px;
               height: 15px;
               border: 2px solid #c9d9e4;
               border-top-color: var(--accent);
               border-radius: 50%;
               animation: spin .7s linear infinite;
               vertical-align: -3px;
               margin-right: 7px
          }

          @keyframes spin {
               to {
                    transform: rotate(360deg)
               }
          }

          @media(max-width:1250px) {
               .workspace {
                    grid-template-columns: 300px minmax(440px, 1fr)
               }

               .right-panel {
                    grid-column: 1/-1;
                    max-height: none;
                    min-height: 0
               }

               .inspector {
                    display: grid;
                    grid-template-columns: minmax(290px, .75fr) 1fr 1fr;
                    gap: 14px
               }

               .inspector-head,
               .distance-cards,
               .form-grid,
               .inspector>.field,
               .inspector>.button-row {
                    grid-column: 1
               }

               .scene-section {
                    margin-top: 0;
                    border-top: 0;
                    padding-top: 0
               }

               .element-editor {
                    grid-column: 1/-1
               }

               .empty-state {
                    padding: 30px
               }

               .right-panel {
                    overflow: visible
               }
          }

          @media(max-width:900px) {
               :root {
                    --topbar: unset
               }

               .topbar {
                    height: auto;
                    min-height: 72px;
                    padding: 10px 12px;
                    align-items: flex-start;
                    flex-direction: column
               }

               .top-actions {
                    width: 100%;
                    justify-content: flex-start
               }

               .project-strip {
                    padding: 9px 12px;
                    align-items: flex-start;
                    flex-direction: column
               }

               .project-title-input {
                    width: 100%;
                    min-width: 0
               }

               .stats-grid {
                    width: 100%
               }

               .workspace {
                    display: flex;
                    flex-direction: column;
                    padding: 8px
               }

               .left-panel,
               .right-panel,
               .map-panel {
                    max-height: none;
                    min-height: 0
               }

               .map-panel {
                    order: -1
               }

               .map {
                    min-height: 500px
               }

               .left-panel {
                    overflow: visible
               }

               .tab-panel {
                    max-height: none
               }

               .inspector {
                    display: block
               }

               .scene-section {
                    margin-top: 16px;
                    border-top: 1px solid var(--line);
                    padding-top: 14px
               }

               .symbol-grid {
                    grid-template-columns: repeat(4, 1fr)
               }
          }

          @media(max-width:560px) {
               .brand-subtitle {
                    white-space: normal
               }

               .top-actions .btn {
                    flex: 1
               }

               .stats-grid {
                    grid-template-columns: repeat(2, 1fr)
               }

               .stat:nth-child(3) {
                    border-top: 1px solid var(--line);
                    padding-top: 5px
               }

               .stat:nth-child(4) {
                    border-top: 1px solid var(--line);
                    padding-top: 5px
               }

               .map {
                    min-height: 430px
               }

               .map-legend {
                    gap: 7px;
                    flex-wrap: wrap;
                    right: 12px
               }

               .symbol-grid {
                    grid-template-columns: repeat(3, 1fr)
               }

               .form-grid.two {
                    grid-template-columns: 1fr
               }

               .distance-cards strong {
                    font-size: 14px
               }
          }

          /* ===== Studio v2 ergonomic extensions ===== */
          .tabs.five {
               grid-template-columns: repeat(4, 1fr)
          }

          .topbar .square {
               width: 40px;
               padding: 0
          }

          .brand-copy {
               min-width: 0
          }

          .workspace.left-collapsed {
               grid-template-columns: 0 minmax(520px, 1fr) minmax(330px, 390px)
          }

          .workspace.left-collapsed .left-panel {
               display: none
          }

          .workspace.right-collapsed {
               grid-template-columns: minmax(275px, 330px) minmax(520px, 1fr) 0
          }

          .workspace.right-collapsed .right-panel {
               display: none
          }

          .workspace.left-collapsed.right-collapsed {
               grid-template-columns: 0 minmax(620px, 1fr) 0
          }

          .coordinate-add {
               display: grid;
               grid-template-columns: 1fr 1fr 40px;
               gap: 6px;
               margin-top: 9px
          }

          .filter-row,
          .roadbook-tools,
          .symbol-browser-tools {
               display: grid;
               gap: 7px;
               margin: 9px 0
          }

          .roadbook-tools,
          .symbol-browser-tools {
               grid-template-columns: 1fr .8fr
          }

          .input.small {
               min-height: 34px;
               padding: 6px 8px;
               font-size: 12px
          }

          .list.dense {
               gap: 5px
          }

          .list.dense .list-row {
               padding: 7px 8px
          }

          .list-row .row-extra {
               font-size: 9px;
               color: var(--muted);
               margin-top: 3px;
               display: flex;
               gap: 7px;
               flex-wrap: wrap
          }

          .stack-actions {
               display: grid;
               gap: 7px
          }

          .wrap {
               flex-wrap: wrap
          }

          .form-grid.two.equal {
               grid-template-columns: 1fr 1fr
          }

          .setting-card {
               border: 1px solid var(--line);
               border-radius: 10px;
               padding: 10px;
               margin: 8px 0 12px;
               background: var(--panel-soft)
          }

          .check-row {
               display: flex;
               align-items: center;
               gap: 8px;
               font-size: 12px;
               margin: 7px 0
          }

          .check-row input {
               width: 16px;
               height: 16px;
               accent-color: var(--accent)
          }

          .shortcut-list {
               display: grid;
               gap: 7px
          }

          .shortcut-list>div {
               display: flex;
               align-items: center;
               gap: 6px;
               border-bottom: 1px solid var(--line);
               padding: 7px 0;
               font-size: 12px
          }

          .shortcut-list>div span {
               margin-left: auto;
               color: var(--muted)
          }

          kbd {
               border: 1px solid var(--line-strong);
               border-bottom-width: 2px;
               border-radius: 6px;
               background: var(--panel);
               padding: 2px 6px;
               font: 700 10px ui-monospace, SFMono-Regular, Consolas, monospace
          }

          .toolbar-btn {
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 8px;
               height: 34px;
               padding: 0 10px;
               font-size: 11px;
               font-weight: 800
          }

          .toolbar-btn:hover {
               background: #f5f9fb
          }

          .right-panel {
               overflow: visible
          }

          .right-panel .inspector {
               overflow: visible
          }

          .sticky-inspector-head {
               position: sticky;
               top: -16px;
               background: var(--panel);
               z-index: 3;
               padding: 12px 0 10px;
               border-bottom: 1px solid var(--line)
          }

          .distance-cards.three {
               grid-template-columns: repeat(3, 1fr)
          }

          .distance-cards.three>div:last-child strong {
               font-size: 13px
          }

          .footer-note {
               display: flex !important;
               gap: 18px;
               align-items: center
          }

          .context-menu {
               position: absolute;
               z-index: 1000;
               min-width: 180px;
               padding: 5px;
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: 10px;
               box-shadow: 0 12px 30px rgba(16, 42, 67, .18)
          }

          .context-menu button {
               display: block;
               width: 100%;
               border: 0;
               background: transparent;
               text-align: left;
               padding: 9px 10px;
               border-radius: 7px;
               font-size: 12px
          }

          .context-menu button:hover {
               background: var(--accent-soft);
               color: var(--accent)
          }

          .compact-grid {
               grid-template-columns: repeat(2, minmax(0, 1fr));
               overflow: visible;
               padding-right: 0
          }

          .compact-grid .symbol-card {
               min-height: 92px;
               position: relative;
               padding: 6px
          }

          .symbol-card .symbol-thumb {
               width: 42px;
               height: 42px;
               display: grid;
               place-items: center;
               background: transparent;
               border: 0
          }

          .symbol-card .symbol-thumb img {
               width: 40px;
               height: 40px;
               background: transparent
          }

          .symbol-card .symbol-meta {
               font-size: 8px;
               color: var(--muted);
               line-height: 1.25
          }

          .symbol-card .symbol-actions {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 3px;
               width: 100%
          }

          .symbol-card .symbol-actions button {
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 6px;
               padding: 3px 4px;
               font-size: 8px;
               font-weight: 800
          }

          .symbol-card .symbol-actions button:hover {
               border-color: var(--accent);
               color: var(--accent)
          }

          /* ===== Tulip Studio ===== */
          .svg-studio {
               position: fixed;
               inset: 0;
               z-index: 5000;
               background: rgba(5, 18, 30, .72);
               padding: 18px;
               backdrop-filter: blur(4px)
          }

          .svg-studio-shell {
               height: 100%;
               display: flex;
               flex-direction: column;
               background: #f1f5f8;
               border: 1px solid #7890a0;
               border-radius: 16px;
               overflow: hidden;
               box-shadow: 0 24px 90px rgba(0, 0, 0, .38)
          }

          .svg-topbar {
               height: 68px;
               flex: 0 0 auto;
               background: #102a43;
               color: #fff;
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 10px 14px 10px 18px;
               gap: 16px
          }

          .svg-topbar h2 {
               margin: 1px 0 0;
               font-size: 18px
          }

          .svg-topbar .eyebrow {
               color: #9fb3c8
          }

          .svg-top-actions {
               display: flex;
               align-items: center;
               gap: 7px;
               flex-wrap: wrap
          }

          .svg-top-actions .icon-btn {
               background: rgba(255, 255, 255, .08);
               color: #fff;
               border-color: rgba(255, 255, 255, .2)
          }

          .svg-workspace {
               flex: 1;
               min-height: 0;
               display: grid;
               grid-template-columns: 184px minmax(420px, 1fr) 300px;
               gap: 1px;
               background: #cbd6de
          }

          .svg-tools-panel,
          .svg-properties-panel {
               background: var(--panel);
               min-width: 0;
               overflow: auto
          }

          .svg-stage-panel {
               background: #dfe6eb;
               min-width: 0;
               min-height: 0;
               display: flex;
               flex-direction: column
          }

          .tool-grid {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 5px;
               padding: 10px;
               border-bottom: 1px solid var(--line)
          }

          .svg-tool {
               min-height: 54px;
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 9px;
               font-size: 18px;
               font-weight: 900;
               color: var(--text);
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               gap: 2px
          }

          .svg-tool span {
               font-size: 9px;
               color: var(--muted)
          }

          .svg-tool:hover,
          .svg-tool.active {
               border-color: var(--accent);
               background: var(--accent-soft);
               color: var(--accent)
          }

          .svg-panel-section {
               padding: 11px;
               border-bottom: 1px solid var(--line)
          }

          .svg-panel-section h3 {
               font-size: 11px;
               text-transform: uppercase;
               letter-spacing: .08em;
               color: var(--muted);
               margin: 0 0 8px
          }

          .mini-metrics {
               display: flex;
               align-items: center;
               justify-content: space-between;
               font-size: 11px;
               color: var(--muted)
          }

          .svg-stage-toolbar {
               height: 46px;
               background: var(--panel);
               border-bottom: 1px solid var(--line);
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 0 10px;
               flex: 0 0 auto
          }

          .toolbar-separator {
               display: block;
               width: 1px;
               height: 22px;
               background: var(--line);
               margin: 0 3px
          }

          .svg-doc-metrics {
               font-size: 10px;
               color: var(--muted);
               font-weight: 800
          }

          .svg-stage-scroll {
               flex: 1;
               min-height: 0;
               overflow: auto;
               padding: 48px;
               background-color: #cbd4db;
               background-image: linear-gradient(45deg, #d8e0e5 25%, transparent 25%), linear-gradient(-45deg, #d8e0e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8e0e5 75%), linear-gradient(-45deg, transparent 75%, #d8e0e5 75%);
               background-size: 22px 22px;
               background-position: 0 0, 0 11px, 11px -11px, -11px 0
          }

          .svg-stage-wrap {
               width: max-content;
               height: max-content;
               margin: auto;
               background: var(--panel);
               box-shadow: 0 10px 30px rgba(17, 36, 51, .2)
          }

          .svg-editor-canvas {
               display: block;
               touch-action: none;
               user-select: none;
               overflow: visible
          }

          .svg-editor-canvas #svgArtwork,
          .svg-editor-canvas #svgArtwork * {
               pointer-events: visiblePainted
          }

          .svg-editor-canvas #svgEditorOverlay {
               pointer-events: none
          }

          .svg-editor-canvas #svgEditorOverlay [data-handle] {
               pointer-events: all
          }

          .svg-editor-canvas.grid-on {
               background-image: linear-gradient(to right, rgba(16, 42, 67, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 42, 67, .08) 1px, transparent 1px);
               background-size: 20px 20px
          }

          .svg-editor-canvas .editor-selection {
               fill: none;
               stroke: #0b6e99;
               stroke-width: 1;
               vector-effect: non-scaling-stroke;
               stroke-dasharray: 4 3
          }

          .svg-editor-canvas .editor-handle {
               fill: #fff;
               stroke: #0b6e99;
               stroke-width: 1.5;
               vector-effect: non-scaling-stroke;
               pointer-events: all;
               cursor: nwse-resize
          }

          .svg-editor-canvas .editor-rotate {
               fill: #fff;
               stroke: #d97706;
               stroke-width: 1.5;
               vector-effect: non-scaling-stroke;
               pointer-events: all;
               cursor: grab
          }

          .svg-editor-canvas .editor-node {
               fill: #fff;
               stroke: #7c3aed;
               stroke-width: 1.5;
               vector-effect: non-scaling-stroke;
               pointer-events: all;
               cursor: move
          }

          .svg-editor-canvas .editor-control {
               fill: #f5f3ff;
               stroke: #7c3aed;
               stroke-width: 1;
               vector-effect: non-scaling-stroke;
               pointer-events: all;
               cursor: move
          }

          .svg-editor-canvas .editor-control-line {
               stroke: #7c3aed;
               stroke-width: 1;
               vector-effect: non-scaling-stroke;
               stroke-dasharray: 2 2
          }

          .svg-statusbar {
               height: 28px;
               background: var(--panel);
               border-top: 1px solid var(--line);
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 0 10px;
               font-size: 10px;
               color: var(--muted);
               flex: 0 0 auto
          }

          .svg-side-tabs {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               gap: 2px;
               padding: 6px;
               border-bottom: 1px solid var(--line);
               position: sticky;
               top: 0;
               background: var(--panel);
               z-index: 2
          }

          .svg-side-tabs button {
               border: 0;
               background: transparent;
               border-radius: 7px;
               min-height: 32px;
               font-size: 10px;
               font-weight: 800;
               color: var(--muted)
          }

          .svg-side-tabs button.active {
               background: var(--accent-soft);
               color: var(--accent)
          }

          .svg-side-panel {
               display: none;
               padding: 12px
          }

          .svg-side-panel.active {
               display: block
          }

          .svg-empty-props {
               border: 1px dashed var(--line-strong);
               border-radius: 10px;
               padding: 18px 12px;
               font-size: 11px;
               line-height: 1.45;
               text-align: center;
               color: var(--muted)
          }

          .color-input {
               width: 100%;
               height: 34px;
               border: 1px solid var(--line-strong);
               border-radius: 8px;
               background: var(--panel);
               padding: 3px
          }

          .textarea.code {
               font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
               white-space: pre
          }

          .svg-layer-list {
               display: flex;
               flex-direction: column;
               gap: 4px;
               margin-top: 8px
          }

          .svg-layer-row {
               display: grid;
               grid-template-columns: 26px 26px 1fr 26px;
               align-items: center;
               gap: 3px;
               border: 1px solid var(--line);
               border-radius: 8px;
               padding: 5px
          }

          .svg-layer-row.selected {
               border-color: var(--accent);
               background: var(--accent-soft)
          }

          .svg-layer-row button {
               border: 0;
               background: transparent;
               width: 26px;
               height: 26px;
               border-radius: 5px
          }

          .svg-layer-row button:hover {
               background: #e6edf2
          }

          .svg-layer-row input {
               border: 0;
               background: transparent;
               min-width: 0;
               width: 100%;
               font-size: 10px;
               font-weight: 750
          }

          .gradient-preview {
               height: 70px;
               border: 1px solid var(--line);
               border-radius: 10px;
               margin-bottom: 12px
          }

          .layer-actions {
               margin-bottom: 8px
          }

          @media(max-width:1250px) {
               .workspace {
                    grid-template-columns: 285px minmax(430px, 1fr) 330px
               }

               .svg-workspace {
                    grid-template-columns: 160px minmax(360px, 1fr) 270px
               }
          }

          @media(max-width:980px) {
               .workspace {
                    grid-template-columns: 1fr;
                    display: flex;
                    flex-direction: column
               }

               .left-panel,
               .right-panel,
               .map-panel {
                    max-height: none;
                    min-height: 0
               }

               .left-panel {
                    order: 1
               }

               .map-panel {
                    order: 2;
                    min-height: 620px
               }

               .right-panel {
                    order: 3
               }

               .workspace.left-collapsed,
               .workspace.right-collapsed,
               .workspace.left-collapsed.right-collapsed {
                    display: flex
               }.svg-studio {
                    padding: 6px
               }

               .svg-workspace {
                    grid-template-columns: 140px minmax(320px, 1fr)
               }

               .svg-properties-panel {
                    grid-column: 1/-1;
                    max-height: 280px
               }

               .svg-studio-shell {
                    overflow: auto
               }

               .svg-stage-panel {
                    min-height: 560px
               }
          }


          .top-menu-section-title {
               padding: 8px 12px 4px;
               font-size: 11px;
               font-weight: 800;
               letter-spacing: .02em;
               text-transform: uppercase;
               color: var(--muted)
          }

          .tulip-waypoint-live {
               border: 1px solid var(--line);
               border-radius: 6px;
               background: var(--panel);
               margin-bottom: 10px;
               overflow: hidden
          }

          .tulip-waypoint-live-head {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 8px;
               padding: 8px 10px;
               border-bottom: 1px solid var(--line);
               font-size: 12px
          }

          .tulip-waypoint-live-head strong,
          .tulip-waypoint-live-head span {
               min-width: 0;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap
          }

          .tulip-waypoint-live-canvas {
               height: 132px
          }

          .tulip-waypoint-live-canvas svg {
               display: block;
               width: 100%;
               height: 100%;
               background: #f7fafc
          }

          @media(max-width:680px) {
               .project-strip {
                    align-items: flex-start;
                    flex-direction: column
               }

               .stats-grid {
                    width: 100%;
                    grid-template-columns: repeat(4, 1fr)
               }

               .topbar {
                    height: auto;
                    min-height: 72px;
                    padding-block: 10px;
                    align-items: flex-start
               }

               .brand-subtitle {
                    display: none
               }

               .coordinate-add,
               .roadbook-tools,
               .symbol-browser-tools {
                    grid-template-columns: 1fr
               }

               .svg-workspace {
                    display: block;
                    overflow: auto
               }

               .svg-tools-panel {
                    display: flex;
                    overflow: auto
               }

               .tool-grid {
                    grid-template-columns: repeat(7, 70px);
                    min-width: max-content
               }

               .svg-panel-section {
                    min-width: 150px
               }

               .svg-stage-panel {
                    min-height: 520px
               }

               .svg-properties-panel {
                    max-height: none
               }

               .svg-topbar {
                    height: auto;
                    align-items: flex-start
               }

               .svg-top-actions {
                    justify-content: flex-end
               }
          }

          /* ===== Tulip Studio ===== */
          body.studio-open {
               overflow: hidden
          }

          .tulip-studio {
               position: fixed;
               inset: 0;
               z-index: 4900;
               background: rgba(5, 18, 30, .72);
               padding: 18px;
               backdrop-filter: blur(4px)
          }

          .tulip-studio-shell {
               height: 100%;
               display: flex;
               flex-direction: column;
               background: #f1f5f8;
               border: 1px solid #7890a0;
               border-radius: 16px;
               overflow: hidden;
               box-shadow: 0 24px 90px rgba(0, 0, 0, .38)
          }

          .tulip-topbar {
               height: 68px;
               flex: 0 0 auto;
               background: #102a43;
               color: #fff;
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 10px 14px 10px 18px;
               gap: 16px
          }

          .tulip-topbar h2 {
               margin: 1px 0 0;
               font-size: 18px
          }

          .tulip-topbar .eyebrow {
               color: #9fb3c8
          }

          .tulip-top-actions {
               display: flex;
               align-items: center;
               gap: 7px;
               flex-wrap: wrap
          }

          .tulip-top-actions .icon-btn {
               background: rgba(255, 255, 255, .08);
               color: #fff;
               border-color: rgba(255, 255, 255, .2)
          }

          .tulip-workspace {
               flex: 1;
               min-height: 0;
               display: grid;
               grid-template-columns: 210px minmax(560px, 1fr) 318px;
               gap: 1px;
               background: #cbd6de
          }

          .tulip-tools-panel,
          .tulip-properties-panel {
               background: var(--panel);
               min-width: 0;
               overflow: auto
          }

          .tulip-stage-panel {
               background: #dfe6eb;
               min-width: 0;
               min-height: 0;
               display: flex;
               flex-direction: column
          }

          .tulip-tools-panel {
               display: flex;
               flex-direction: column;
               gap: 10px;
               padding: 10px
          }

          .tulip-tools-panel .svg-panel-section {
               border: 1px solid var(--line);
               border-radius: 9px;
               background: #fbfdfe;
               padding: 9px;
               margin: 0
          }

          .tulip-tools-panel .svg-panel-section h3 {
               margin: 0 0 8px;
               font-size: 10px;
               letter-spacing: .04em;
               text-transform: uppercase;
               color: #486581
          }

          .tulip-tool-grid {
               grid-template-columns: 1fr 1fr;
               gap: 6px
          }

          .tulip-tools-panel .svg-tool {
               min-height: 54px
          }

          .tulip-tools-panel .check-row {
               margin: 6px 0
          }

          .tulip-tools-panel .field {
               margin-bottom: 8px
          }

          .tulip-tools-panel .stack-actions {
               grid-template-columns: 1fr 1fr
          }

          .tulip-tools-panel .stack-actions .btn {
               min-height: 31px;
               padding: 4px 6px;
               font-size: 9px
          }

          .tulip-stage-toolbar {
               min-height: 46px;
               background: var(--panel);
               border-bottom: 1px solid var(--line);
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 6px 10px;
               flex: 0 0 auto;
               gap: 8px
          }

          .tulip-stage-scroll {
               flex: 1;
               min-height: 0;
               overflow: auto;
               padding: 24px;
               background-color: #cbd4db;
               background-image: linear-gradient(45deg, #d8e0e5 25%, transparent 25%), linear-gradient(-45deg, #d8e0e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8e0e5 75%), linear-gradient(-45deg, transparent 75%, #d8e0e5 75%);
               background-size: 22px 22px;
               background-position: 0 0, 0 11px, 11px -11px, -11px 0
          }

          .tulip-stage-scenes {
               display: grid;
               grid-template-columns: minmax(360px, 3fr) minmax(280px, 2fr);
               gap: 18px;
               align-items: start;
               justify-content: center;
               width: 100%
          }

          .tulip-stage-scene {
               min-width: 0
          }

          .tulip-stage-scene-head {
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 8px;
               min-height: 32px;
               margin-bottom: 8px;
               color: #102a43
          }

          .tulip-stage-scene-head h3 {
               margin: 0;
               font-size: 12px
          }

          .tulip-stage-scene-head span {
               font-size: 9px;
               font-weight: 800;
               color: #486581;
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: 999px;
               padding: 3px 7px
          }

          .tulip-stage-wrap {
               width: min(600px, 100%);
               aspect-ratio: 600/505;
               margin: auto;
               background: var(--panel);
               box-shadow: 0 10px 30px rgba(17, 36, 51, .2)
          }

          .tulip-info-stage-wrap {
               width: min(600px, 100%);
               aspect-ratio: 600/505;
               background: var(--panel);
               box-shadow: 0 10px 30px rgba(17, 36, 51, .16)
          }

          .tulip-info-stage-wrap .scene-canvas {
               height: 100%;
               border: 0;
               border-radius: 0
          }

          .tulip-info-stage-wrap svg {
               display: block;
               width: 100%;
               height: 100%
          }

          .tulip-editor-canvas {
               display: block;
               width: 100%;
               height: 100%;
               touch-action: none;
               user-select: none;
               overflow: visible;
               background: #fff
          }

          .tulip-editor-canvas.grid-on {
               background-image: linear-gradient(to right, rgba(16, 42, 67, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 42, 67, .07) 1px, transparent 1px);
               background-size: 10px 10px
          }

          .tulip-selection {
               fill: none;
               stroke: #0b6e99;
               stroke-width: 1;
               vector-effect: non-scaling-stroke;
               stroke-dasharray: 4 3;
               pointer-events: none
          }

          .tulip-handle {
               fill: #fff;
               stroke: #0b6e99;
               stroke-width: 1.3;
               vector-effect: non-scaling-stroke;
               pointer-events: all
          }

          .tulip-rotate {
               fill: #fff;
               stroke: #d97706;
               stroke-width: 1.4;
               vector-effect: non-scaling-stroke;
               cursor: grab;
               pointer-events: all
          }

          .tulip-node {
               fill: #fff;
               stroke: #7c3aed;
               stroke-width: 1.5;
               vector-effect: non-scaling-stroke;
               cursor: move;
               pointer-events: all
          }

          .tulip-control {
               fill: #f5f3ff;
               stroke: #7c3aed;
               stroke-width: 1.3;
               vector-effect: non-scaling-stroke;
               cursor: move;
               pointer-events: all
          }

          .tulip-control-line {
               stroke: #7c3aed;
               stroke-width: 1;
               vector-effect: non-scaling-stroke;
               stroke-dasharray: 2 2;
               pointer-events: none
          }

          .tulip-side-tabs {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               gap: 2px;
               padding: 6px;
               border-bottom: 1px solid var(--line);
               position: sticky;
               top: 0;
               background: var(--panel);
               z-index: 2
          }

          .tulip-side-tabs button {
               border: 0;
               background: transparent;
               border-radius: 7px;
               min-height: 32px;
               font-size: 10px;
               font-weight: 800;
               color: var(--muted)
          }

          .tulip-side-tabs button.active {
               background: var(--accent-soft);
               color: var(--accent)
          }

          .tulip-side-panel {
               display: none;
               padding: 12px
          }

          .tulip-side-panel.active {
               display: block
          }

          .tulip-prop-title {
               display: flex;
               align-items: flex-start;
               justify-content: space-between;
               gap: 8px;
               border-bottom: 1px solid var(--line);
               padding-bottom: 9px;
               margin-bottom: 10px
          }

          .tulip-prop-title strong {
               font-size: 13px
          }

          .tulip-prop-title span {
               font-size: 9px;
               color: var(--muted);
               background: var(--panel-soft);
               border: 1px solid var(--line);
               border-radius: 999px;
               padding: 3px 6px
          }

          .tulip-layer-list {
               display: flex;
               flex-direction: column;
               gap: 4px
          }

          .tulip-layer-row {
               display: grid;
               grid-template-columns: 28px minmax(0, 1fr) auto;
               gap: 4px;
               align-items: center;
               border: 1px solid var(--line);
               border-radius: 8px;
               padding: 5px
          }

          .tulip-layer-row.selected {
               border-color: var(--accent);
               background: var(--accent-soft)
          }

          .tulip-layer-row button {
               border: 0;
               background: transparent;
               min-height: 27px;
               border-radius: 5px
          }

          .tulip-layer-row .layer-name {
               text-align: left;
               font-size: 10px;
               font-weight: 750;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap
          }

          .layer-source {
               font-size: 8px;
               font-weight: 900;
               color: var(--muted);
               padding: 2px 4px;
               border-radius: 4px;
               background: #eef3f7
          }

          .tulip-waypoint-list {
               display: flex;
               flex-direction: column;
               gap: 5px;
               max-height: calc(100vh - 190px);
               overflow: auto
          }

          .tulip-waypoint-table {
               width: 100%;
               border-collapse: collapse;
               font-size: 10px
          }

          .tulip-waypoint-table th,
          .tulip-waypoint-table td {
               border-bottom: 1px solid var(--line);
               padding: 6px 5px;
               text-align: left;
               vertical-align: top
          }

          .tulip-waypoint-table th {
               position: sticky;
               top: 0;
               background: var(--panel);
               color: var(--muted);
               font-size: 9px;
               text-transform: uppercase;
               z-index: 1
          }

          .tulip-waypoint-table tr.active {
               background: var(--accent-soft)
          }

          .tulip-waypoint-table tr {
               cursor: pointer
          }

          .tulip-waypoint-table button {
               border: 0;
               background: transparent;
               color: var(--accent);
               font-weight: 800;
               padding: 0;
               text-align: left
          }

          .tulip-waypoint-row {
               width: 100%;
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 8px;
               padding: 7px;
               text-align: left;
               font-size: 10px
          }

          .tulip-waypoint-row.active {
               border-color: var(--accent);
               background: var(--accent-soft)
          }

          .tulip-waypoint-row strong,
          .tulip-waypoint-row span {
               display: block
          }

          .tulip-waypoint-row span {
               color: var(--muted);
               font-size: 9px;
               margin-top: 2px
          }

          .tulip-waypoint-mini-layout {
               margin-top: 6px;
               height: 86px;
               border: 1px solid var(--line);
               background: #fff
          }

          .tulip-waypoint-mini-layout svg {
               width: 100%;
               height: 100%;
               display: block
          }

          .tulip-symbol-grid {
               display: grid;
               grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: 6px;
               margin-top: 9px
          }

          .tulip-symbol-card {
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 9px;
               padding: 6px;
               min-height: 76px;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               gap: 4px
          }

          .tulip-symbol-card:hover {
               border-color: var(--accent);
               background: var(--accent-soft)
          }

          .tulip-symbol-card img {
               width: 38px;
               height: 38px;
               object-fit: contain
          }

          .tulip-symbol-card span {
               font-size: 8px;
               font-weight: 800;
               text-align: center;
               line-height: 1.15;
               max-width: 100%
          }

          .osm-panel-intro {
               font-size: 11px;
               line-height: 1.45;
               color: var(--muted);
               border-left: 3px solid var(--accent);
               padding: 8px 9px;
               background: var(--accent-soft);
               border-radius: 7px;
               margin-bottom: 12px
          }

          .osm-result {
               margin-top: 10px;
               border: 1px solid var(--line);
               background: var(--panel-soft);
               border-radius: 9px;
               padding: 10px;
               font-size: 10px;
               line-height: 1.45;
               color: var(--muted)
          }

          .osm-result strong,
          .osm-result span {
               display: block
          }

          .osm-result strong {
               font-size: 11px;
               color: var(--text);
               margin-bottom: 3px
          }

          .osm-object-meta {
               margin-top: 10px;
               padding: 8px 9px;
               border: 1px solid var(--line);
               border-radius: 8px;
               background: var(--panel-soft);
               font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
               color: var(--muted);
               word-break: break-word
          }

          .danger.btn-secondary {
               color: var(--danger);
               border-color: #efc2be
          }

          .danger.btn-secondary:hover {
               background: var(--danger-soft)
          }

          @media(max-width:1250px) {
               .tulip-workspace {
                    grid-template-columns: 185px minmax(500px, 1fr) 280px
               }

               .tulip-stage-scenes {
                    grid-template-columns: minmax(300px, max-content) minmax(220px, 300px);
                    gap: 12px
               }

               .tulip-tools-panel {
                    padding: 8px
               }

               .tulip-tools-panel .stack-actions,
               .creator-pro-actions {
                    grid-template-columns: 1fr
               }
          }

          @media(max-width:980px) {
               .tulip-studio {
                    padding: 6px
               }

               .tulip-workspace {
                    grid-template-columns: 170px minmax(330px, 1fr)
               }

               .tulip-properties-panel {
                    grid-column: 1/-1;
                    max-height: 300px
               }

               .tulip-studio-shell {
                    overflow: auto
               }

               .tulip-stage-panel {
                    min-height: 570px
               }

               .tulip-stage-scenes {
                    grid-template-columns: 1fr
               }

               .tulip-info-stage-wrap {
                    max-width: 360px;
                    margin: 0 auto
               }
          }


          .top-menu-section-title {
               padding: 8px 12px 4px;
               font-size: 11px;
               font-weight: 800;
               letter-spacing: .02em;
               text-transform: uppercase;
               color: var(--muted)
          }

          .tulip-waypoint-live {
               border: 1px solid var(--line);
               border-radius: 6px;
               background: var(--panel);
               margin-bottom: 10px;
               overflow: hidden
          }

          .tulip-waypoint-live-head {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 8px;
               padding: 8px 10px;
               border-bottom: 1px solid var(--line);
               font-size: 12px
          }

          .tulip-waypoint-live-head strong,
          .tulip-waypoint-live-head span {
               min-width: 0;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap
          }

          .tulip-waypoint-live-canvas {
               height: 132px
          }

          .tulip-waypoint-live-canvas svg {
               display: block;
               width: 100%;
               height: 100%;
               background: #f7fafc
          }

          @media(max-width:680px) {
               .tulip-workspace {
                    display: block;
                    overflow: auto
               }

               .tulip-tools-panel {
                    display: flex;
                    overflow: auto;
                    flex-direction: row
               }

               .tulip-tool-grid {
                    grid-template-columns: repeat(6, 70px);
                    min-width: max-content
               }

               .tulip-tools-panel .svg-panel-section {
                    min-width: 150px
               }

               .tulip-stage-panel {
                    min-height: 520px
               }

               .tulip-properties-panel {
                    max-height: none
               }

               .tulip-topbar {
                    height: auto;
                    align-items: flex-start
               }

               .tulip-top-actions {
                    justify-content: flex-end
               }

               .tulip-symbol-grid {
                    grid-template-columns: repeat(4, 1fr)
               }
          }

          /* v3 ergonomic canvas */
          .tulip-stage-scroll {
               display: grid;
               place-items: center
          }

          .tulip-stage-wrap {
               align-self: center;
               justify-self: center
          }

          .tulip-studio-shell.canvas-max .tulip-tools-panel,
          .tulip-studio-shell.canvas-max .tulip-properties-panel {
               display: none
          }

          .tulip-studio-shell.canvas-max .tulip-workspace {
               grid-template-columns: minmax(0, 1fr)
          }

          .tulip-studio-shell.canvas-max .tulip-stage-panel {
               grid-column: 1;
               min-height: 0
          }

          .tulip-symbol-card[draggable="true"],
          .symbol-card[draggable="true"] {
               cursor: grab
          }

          .tulip-symbol-card[draggable="true"]:active,
          .symbol-card[draggable="true"]:active {
               cursor: grabbing
          }

          .elevation-card {
               margin-top: 10px;
               padding: 10px;
               border: 1px solid var(--line);
               border-radius: 10px;
               background: #fff
          }

          .elevation-card canvas {
               width: 100%;
               display: block;
               border-radius: 6px;
               background: linear-gradient(#f8fbfd, #edf3f6)
          }

          .section-head.compact {
               margin-bottom: 4px
          }

          .section-head.compact h3 {
               margin: 0;
               font-size: .88rem
          }

          .section-head.compact span {
               font-size: .75rem;
               color: var(--muted)
          }

          .smart-audit {
               margin-top: 8px;
               font-size: .76rem;
               line-height: 1.35;
               color: var(--muted);
               padding: 8px;
               background: #f5f8fa;
               border-radius: 7px
          }

          .command-palette {
               position: fixed;
               z-index: 5000;
               left: 50%;
               top: 12%;
               transform: translateX(-50%);
               width: min(560px, calc(100% - 28px));
               padding: 10px;
               background: var(--panel);
               border: 1px solid #8599a6;
               border-radius: 12px;
               box-shadow: 0 24px 70px rgba(0, 0, 0, .3)
          }

          .command-palette.hidden {
               display: none
          }

          .command-palette #commandResults {
               display: grid;
               gap: 4px;
               margin-top: 8px;
               max-height: 330px;
               overflow: auto
          }

          .command-palette #commandResults button {
               border: 0;
               background: #f4f7f9;
               text-align: left;
               padding: 10px;
               border-radius: 7px;
               cursor: pointer
          }

          .command-palette #commandResults button:hover,
          .command-palette #commandResults button:focus {
               background: #e6eff4;
               outline: 2px solid var(--accent)
          }

          .personal-library-status a {
               display: block;
               overflow-wrap: anywhere;
               margin-top: 4px
          }

          /* ===== Tulip Studio Advanced P0 (features 67-85) ===== */
          .svg-side-tabs {
               grid-template-columns: repeat(3, 1fr);
               grid-auto-rows: 32px
          }

          .svg-operation-grid {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 5px
          }

          .svg-operation-grid .btn {
               min-height: 32px;
               padding: 5px 7px;
               font-size: 9px
          }

          .svg-operation-grid .wide {
               grid-column: 1/-1
          }

          .svg-mini-note {
               font-size: 9px;
               line-height: 1.35;
               color: var(--muted);
               margin-top: 6px
          }

          .svg-selection-count {
               display: inline-flex;
               align-items: center;
               justify-content: center;
               min-width: 22px;
               height: 20px;
               border-radius: 10px;
               background: var(--accent-soft);
               color: var(--accent);
               font-size: 9px;
               font-weight: 900;
               padding: 0 6px;
               margin-left: 5px
          }

          .svg-layer-row.multi-selected {
               outline: 2px solid rgba(124, 58, 237, .35);
               outline-offset: 1px
          }

          .svg-editor-canvas .editor-selection-secondary {
               fill: none;
               stroke: #7c3aed;
               stroke-width: 1;
               vector-effect: non-scaling-stroke;
               stroke-dasharray: 2 2
          }

          .svg-node-type-row {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 5px;
               margin-top: 6px
          }

          .svg-gradient-stops {
               display: flex;
               flex-direction: column;
               gap: 5px;
               margin: 8px 0
          }

          .svg-gradient-stop {
               display: grid;
               grid-template-columns: 52px 42px 1fr 28px;
               gap: 4px;
               align-items: center
          }

          .svg-gradient-stop input[type="number"] {
               min-width: 0
          }

          .svg-gradient-stop input[type="color"] {
               width: 42px;
               height: 28px;
               padding: 1px;
               border: 1px solid var(--line);
               border-radius: 6px
          }

          .svg-gradient-stop button {
               height: 28px;
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 6px
          }

          .svg-compare {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 8px;
               margin-top: 8px
          }

          .svg-compare-card {
               border: 1px solid var(--line);
               border-radius: 8px;
               background: var(--panel);
               padding: 6px;
               min-width: 0
          }

          .svg-compare-card strong {
               display: block;
               font-size: 9px;
               margin-bottom: 5px
          }

          .svg-compare-card img {
               width: 100%;
               height: 120px;
               object-fit: contain;
               background: repeating-conic-gradient(#eef2f5 0 25%, #fff 0 50%) 50%/14px 14px;
               border-radius: 5px
          }

          .svg-history-list {
               display: flex;
               flex-direction: column;
               gap: 5px;
               max-height: 280px;
               overflow: auto
          }

          .svg-history-row {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 5px;
               border: 1px solid var(--line);
               border-radius: 7px;
               padding: 6px;
               font-size: 9px
          }

          .svg-history-row small {
               display: block;
               color: var(--muted)
          }

          .svg-history-row .button-row {
               gap: 3px
          }

          .svg-history-row button {
               font-size: 8px;
               padding: 3px 5px
          }

          .svg-meta-status {
               padding: 7px;
               border-radius: 7px;
               background: #f5f8fa;
               color: var(--muted);
               font-size: 9px;
               line-height: 1.35;
               margin: 6px 0
          }

          .svg-duplicate-results {
               display: flex;
               flex-direction: column;
               gap: 4px;
               max-height: 180px;
               overflow: auto
          }

          .svg-duplicate-hit {
               border: 1px solid var(--line);
               border-radius: 7px;
               padding: 6px;
               font-size: 9px
          }

          .svg-trace-row {
               display: grid;
               grid-template-columns: 1fr 64px;
               gap: 5px;
               align-items: end
          }

          .svg-studio input[type=file].inline-file {
               font-size: 9px;
               max-width: 100%
          }

          .svg-danger {
               border-color: #b91c1c !important;
               color: #991b1b !important
          }

          .svg-success {
               border-color: #15803d !important;
               color: #166534 !important
          }


          /* ===== User Administration P0 ===== */
          .account-trigger {
               display: flex !important;
               align-items: center;
               gap: 7px;
               width: auto !important;
               padding: 0 10px !important
          }

          .account-avatar-mini {
               width: 22px;
               height: 22px;
               border-radius: 50%;
               display: grid;
               place-items: center;
               background: rgba(255, 255, 255, .14);
               overflow: hidden;
               font-size: 10px
          }

          .account-avatar-mini img {
               width: 100%;
               height: 100%;
               object-fit: cover
          }

          .account-modal {
               position: fixed;
               inset: 0;
               z-index: 7000;
               background: rgba(5, 18, 30, .68);
               display: grid;
               place-items: center;
               padding: 18px;
               backdrop-filter: blur(4px)
          }

          .account-modal.hidden {
               display: none
          }

          .account-shell {
               width: min(1180px, 100%);
               height: min(820px, calc(100vh - 36px));
               background: #f5f8fa;
               border: 1px solid #7890a0;
               border-radius: 16px;
               box-shadow: 0 24px 90px rgba(0, 0, 0, .38);
               overflow: hidden;
               display: flex;
               flex-direction: column
          }

          .account-head {
               min-height: 64px;
               background: #102a43;
               color: #fff;
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 10px 14px 10px 18px
          }

          .account-head h2 {
               margin: 1px 0 0;
               font-size: 18px
          }

          .account-head .eyebrow {
               color: #9fb3c8
          }

          .account-body {
               flex: 1;
               min-height: 0;
               display: grid;
               grid-template-columns: 190px minmax(0, 1fr)
          }

          .account-nav {
               background: var(--panel);
               border-right: 1px solid var(--line);
               padding: 10px;
               display: flex;
               flex-direction: column;
               gap: 5px
          }

          .account-nav button {
               border: 0;
               background: transparent;
               text-align: left;
               padding: 10px 11px;
               border-radius: 8px;
               font-size: 12px;
               font-weight: 800;
               color: var(--muted)
          }

          .account-nav button.active {
               background: var(--accent-soft);
               color: var(--accent)
          }

          .account-content {
               overflow: auto;
               padding: 18px
          }

          .account-panel {
               display: none
          }

          .account-panel.active {
               display: block
          }

          .osm-context-dashboard{display:grid;gap:14px}.osm-progress-overview{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center}.osm-progress-ring{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) var(--osm-progress,0%),#d9e7f1 0);position:relative}.osm-progress-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--panel)}.osm-progress-ring strong{position:relative;font-size:22px;color:var(--ink)}.osm-phase-title{font-size:17px;font-weight:850;margin-bottom:4px}.osm-stage-list{display:grid;gap:12px}.osm-stage{display:grid;grid-template-columns:150px minmax(0,1fr) 58px;gap:10px;align-items:center}.osm-stage-name{font-weight:800;font-size:12px}.osm-stage-track{height:10px;background:#d9e7f1;border-radius:999px;overflow:hidden}.osm-stage-fill{height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .2s ease}.osm-stage-value{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;font-weight:800}.osm-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.osm-status-cell{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.osm-status-cell span{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.osm-status-cell strong{display:block;margin-top:4px;font-size:13px;overflow-wrap:anywhere}.osm-status-error{padding:11px;border-radius:9px;background:#fee2e2;color:#991b1b;font-weight:700}.osm-status-source{font-size:11px;color:var(--muted);overflow-wrap:anywhere}@media(max-width:780px){.osm-status-grid{grid-template-columns:1fr 1fr}.osm-progress-overview{grid-template-columns:1fr}.osm-stage{grid-template-columns:105px minmax(0,1fr) 48px}}

          .account-login-card {
               max-width: 480px;
               margin: 36px auto;
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: 14px;
               padding: 18px
          }

          .account-profile-grid {
               display: grid;
               grid-template-columns: 180px minmax(0, 560px);
               gap: 20px;
               align-items: start
          }

          .profile-picture-card {
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: 12px;
               padding: 12px;
               text-align: center
          }

          .profile-picture {
               width: 128px;
               height: 128px;
               border-radius: 50%;
               margin: 0 auto 10px;
               background: #eaf1f5;
               display: grid;
               place-items: center;
               overflow: hidden;
               font-size: 34px;
               font-weight: 900;
               color: #486581
          }

          .profile-picture img {
               width: 100%;
               height: 100%;
               object-fit: cover
          }

          .account-card {
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: 12px;
               padding: 14px;
               margin-bottom: 12px
          }

          .account-card h3 {
               margin: 0 0 10px;
               font-size: 14px
          }

          .account-meta-grid {
               display: grid;
               grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: 8px
          }

          .account-meta-grid>div {
               background: #f8fbfd;
               border: 1px solid var(--line);
               border-radius: 8px;
               padding: 9px
          }

          .account-meta-grid span {
               display: block;
               font-size: 9px;
               color: var(--muted);
               font-weight: 850;
               text-transform: uppercase
          }

          .account-meta-grid strong {
               font-size: 11px;
               overflow-wrap: anywhere
          }

          .ua-toolbar {
               display: flex;
               gap: 8px;
               align-items: center;
               margin-bottom: 10px
          }

          .ua-user-layout {
               display: grid;
               grid-template-columns: minmax(340px, .9fr) minmax(380px, 1.1fr);
               gap: 12px;
               min-height: 520px
          }

          .ua-user-list,
          .ua-user-detail {
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: 12px;
               overflow: auto
          }

          .ua-user-row {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 8px;
               padding: 10px 12px;
               border-bottom: 1px solid var(--line);
               cursor: pointer
          }

          .ua-user-row:hover,
          .ua-user-row.selected {
               background: var(--accent-soft)
          }

          .ua-user-row strong {
               display: block;
               font-size: 12px
          }

          .ua-user-row small {
               display: block;
               font-size: 9px;
               color: var(--muted);
               margin-top: 2px
          }

          .ua-badges {
               display: flex;
               gap: 4px;
               flex-wrap: wrap;
               justify-content: flex-end
          }

          .ua-badge {
               font-size: 8px;
               font-weight: 900;
               padding: 3px 5px;
               border-radius: 999px;
               background: #eaf1f5;
               color: #486581
          }

          .ua-badge.disabled {
               background: #fde8e8;
               color: #a61b1b
          }

          .ua-badge.admin {
               background: #fff4d6;
               color: #9a6700
          }

          .ua-detail-inner {
               padding: 14px
          }

          .ua-role-grid {
               display: grid;
               grid-template-columns: repeat(2, 1fr);
               gap: 6px
          }

          .ua-project-add {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 8px;
               align-items: end
          }

          .ua-rights-list {
               display: flex;
               flex-direction: column;
               gap: 5px;
               margin-top: 8px
          }

          .ua-right-row {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 8px;
               align-items: center;
               border: 1px solid var(--line);
               border-radius: 8px;
               padding: 7px 9px
          }

          .ua-login-list {
               display: flex;
               flex-direction: column;
               gap: 5px;
               max-height: 220px;
               overflow: auto
          }

          .ua-login-row {
               display: grid;
               grid-template-columns: 160px 1fr;
               gap: 8px;
               font-size: 10px;
               padding: 6px 8px;
               background: #f8fbfd;
               border-radius: 7px
          }

          .preferences-json {
               font: 10px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
               white-space: pre-wrap;
               max-height: 240px;
               overflow: auto;
               background: #102a43;
               color: #e6edf2;
               border-radius: 8px;
               padding: 10px
          }

          .danger-zone {
               border-color: #ef9a9a !important
          }

          .danger-zone h3 {
               color: var(--danger)
          }

          .account-status-line {
               font-size: 11px;
               color: var(--muted);
               margin-top: 8px
          }

          .account-admin-only.hidden {
               display: none !important
          }

          @media(max-width:900px) {
               .account-body {
                    grid-template-columns: 1fr
               }

               .account-nav {
                    flex-direction: row;
                    overflow: auto;
                    border-right: 0;
                    border-bottom: 1px solid var(--line)
               }

               .account-nav button {
                    white-space: nowrap
               }

               .account-profile-grid,
               .ua-user-layout {
                    grid-template-columns: 1fr
               }

               .account-meta-grid {
                    grid-template-columns: 1fr
               }
          }


          .account-profile-grid .button-row,.account-profile-grid .btn.full{margin-top:8px}
          .account-profile-grid .profile-picture-card .btn{width:100%;margin-top:7px}
          .account-login-history-list{max-height:none}.account-login-history-list .ua-login-row{grid-template-columns:180px minmax(0,1fr)}
          .account-global-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.account-global-settings-grid .v5-card{margin:0}.account-global-settings-actions{margin-top:10px}
          .quality-inline-card{display:grid;gap:12px}.quality-inline-actions{padding-top:4px;border-top:1px solid var(--line)}
          .review-badge.auto_error{background:#fee2e2!important;color:#991b1b!important;border-color:#e6b1b1!important}

          .tulip-status-actions{display:flex!important;flex-wrap:nowrap!important;gap:6px;width:100%}.tulip-status-actions>.btn{flex:1 1 0;min-width:0}
          .tulip-text-card,.tulip-font-controls{min-width:0;max-width:100%;overflow-x:hidden}.font-control-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(90px,.7fr) minmax(110px,1fr) minmax(110px,1fr);gap:8px;width:100%}.font-control-grid .field,.font-control-grid .input{min-width:0;width:100%}@media(max-width:900px){.font-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
          @media(max-width:780px){.account-global-settings-grid{grid-template-columns:1fr}.account-login-history-list .ua-login-row{grid-template-columns:1fr}}

          /* ===== Server Projects v4.2 ===== */
          .project-trigger {
               position: relative
          }

          .project-sync-dot {
               width: 8px;
               height: 8px;
               border-radius: 50%;
               background: #9fb3c8;
               display: inline-block
          }

          .project-sync-dot.dirty {
               background: #d97706
          }

          .project-sync-dot.saved {
               background: #22c55e
          }

          .project-sync-dot.locked {
               background: #ef4444
          }

          .projects-modal {
               position: fixed;
               inset: 0;
               z-index: 6800;
               background: rgba(5, 18, 30, .68);
               display: grid;
               place-items: center;
               padding: 18px;
               backdrop-filter: blur(4px)
          }

          .projects-modal.hidden {
               display: none
          }

          .projects-shell {
               width: min(1320px, 100%);
               height: min(880px, calc(100vh - 36px));
               background: #f4f7f9;
               border: 1px solid #7890a0;
               border-radius: 16px;
               box-shadow: 0 24px 90px rgba(0, 0, 0, .38);
               overflow: hidden;
               display: flex;
               flex-direction: column
          }

          .projects-head {
               min-height: 66px;
               background: #102a43;
               color: #fff;
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 12px;
               padding: 10px 14px 10px 18px
          }

          .projects-head h2 {
               margin: 1px 0 0;
               font-size: 18px
          }

          .projects-head .eyebrow {
               color: #9fb3c8
          }

          .projects-head-actions {
               display: flex;
               gap: 7px;
               align-items: center;
               flex-wrap: wrap
          }

          .projects-body {
               flex: 1;
               min-height: 0;
               display: grid;
               grid-template-columns: 360px minmax(0, 1fr);
               gap: 1px;
               background: #cbd6de
          }

          .projects-sidebar,
          .projects-detail {
               background: var(--panel);
               min-width: 0;
               overflow: auto
          }

          .projects-sidebar {
               display: flex;
               flex-direction: column
          }

          .projects-toolbar {
               padding: 10px;
               border-bottom: 1px solid var(--line);
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 7px
          }

          .projects-filters {
               display: flex;
               gap: 4px;
               padding: 8px 10px;
               border-bottom: 1px solid var(--line);
               overflow: auto
          }

          .projects-filters button {
               border: 0;
               background: #f4f7f9;
               border-radius: 999px;
               padding: 5px 8px;
               font-size: 9px;
               font-weight: 850;
               white-space: nowrap
          }

          .projects-filters button.active {
               background: var(--accent);
               color: #fff
          }

          .project-list {
               display: flex;
               flex-direction: column
          }

          .project-row {
               padding: 10px 12px;
               border-bottom: 1px solid var(--line);
               cursor: pointer
          }

          .project-row:hover,
          .project-row.selected {
               background: var(--accent-soft)
          }

          .project-row strong {
               display: block;
               font-size: 12px
          }

          .project-row small {
               display: block;
               color: var(--muted);
               font-size: 9px;
               margin-top: 3px
          }

          .project-row-badges {
               display: flex;
               gap: 4px;
               flex-wrap: wrap;
               margin-top: 5px
          }

          .project-badge {
               font-size: 8px;
               font-weight: 900;
               border-radius: 999px;
               background: #eaf1f5;
               padding: 3px 6px;
               color: #486581
          }

          .project-badge.ready {
               background: #dcfce7;
               color: #166534
          }

          .project-badge.rejected {
               background: #fee2e2;
               color: #991b1b
          }

          .project-badge.lock {
               background: #fff4d6;
               color: #92400e
          }

          .projects-detail {
               padding: 16px
          }

          .project-detail-empty {
               height: 100%;
               display: grid;
               place-items: center;
               text-align: center;
               color: var(--muted)
          }

          .project-detail-head {
               display: flex;
               justify-content: space-between;
               align-items: flex-start;
               gap: 12px;
               margin-bottom: 12px
          }

          .project-detail-head h2 {
               margin: 0;
               font-size: 19px
          }

          .project-detail-head p {
               margin: 4px 0 0;
               color: var(--muted);
               font-size: 10px
          }

          .project-detail-actions {
               display: flex;
               gap: 6px;
               flex-wrap: wrap;
               justify-content: flex-end
          }

          .project-grid {
               display: grid;
               grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: 10px
          }

          .project-card {
               border: 1px solid var(--line);
               border-radius: 11px;
               background: var(--panel);
               padding: 11px;
               min-width: 0
          }

          .project-card.wide {
               grid-column: 1/-1
          }

          .project-card h3 {
               font-size: 12px;
               margin: 0 0 8px
          }

          .project-version-list,
          .project-comment-list,
          .project-audit-list,
          .project-acl-list,
          .project-share-list {
               display: flex;
               flex-direction: column;
               gap: 5px;
               max-height: 230px;
               overflow: auto
          }

          .project-mini-row {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 7px;
               align-items: center;
               padding: 6px 7px;
               border: 1px solid var(--line);
               border-radius: 7px;
               font-size: 9px
          }

          .project-mini-row strong {
               display: block;
               font-size: 10px
          }

          .project-mini-row small {
               display: block;
               color: var(--muted);
               margin-top: 2px
          }

          .project-mini-actions {
               display: flex;
               gap: 3px
          }

          .project-mini-actions button {
               min-height: 27px;
               padding: 3px 6px;
               font-size: 8px
          }

          .project-lock-banner {
               padding: 8px 10px;
               border-radius: 8px;
               background: #fff4d6;
               color: #8a4b08;
               font-size: 10px;
               margin-bottom: 9px
          }

          .project-lock-banner.mine {
               background: #ecfdf5;
               color: #166534
          }

          .project-diff {
               font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
               background: #102a43;
               color: #e6edf2;
               border-radius: 8px;
               padding: 9px;
               max-height: 220px;
               overflow: auto;
               white-space: pre-wrap
          }

          .project-inline-form {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 7px;
               align-items: end
          }

          .project-inline-form.three {
               grid-template-columns: 1fr 140px auto
          }

          .project-workflow {
               display: flex;
               gap: 6px;
               flex-wrap: wrap
          }

          .project-readonly {
               opacity: .62;
               pointer-events: none
          }

          .project-sync-status {
               font-size: 9px;
               color: #bcccdc;
               max-width: 250px;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap
          }

          @media(max-width:950px) {
               .projects-body {
                    grid-template-columns: 1fr
               }

               .projects-sidebar {
                    max-height: 310px
               }

               .project-grid {
                    grid-template-columns: 1fr
               }

               .project-card.wide {
                    grid-column: auto
               }
          }


          /* v4.2 project detail renderer */
          .project-row {
               display: block;
               width: 100%;
               border: 0;
               background: var(--panel);
               text-align: left
          }

          .project-row>span {
               display: block;
               color: var(--muted);
               font-size: 9px;
               margin-top: 3px
          }

          .project-badges {
               display: flex;
               gap: 4px;
               flex-wrap: wrap;
               margin-top: 5px
          }

          .project-badges i {
               font-style: normal;
               font-size: 8px;
               font-weight: 900;
               border-radius: 999px;
               background: #eaf1f5;
               padding: 3px 6px;
               color: #486581
          }

          .project-detail-inner {
               display: flex;
               flex-direction: column;
               gap: 12px
          }

          .project-actionbar,
          .project-diff-controls,
          .project-comment-add,
          .project-acl-add {
               display: flex;
               gap: 7px;
               align-items: center;
               flex-wrap: wrap
          }

          .project-meta-grid {
               display: grid;
               grid-template-columns: repeat(4, minmax(0, 1fr));
               gap: 7px
          }

          .project-meta-grid>div {
               padding: 8px;
               border: 1px solid var(--line);
               border-radius: 8px;
               background: #f8fafc
          }

          .project-meta-grid span,
          .project-meta-grid strong {
               display: block
          }

          .project-meta-grid span {
               font-size: 8px;
               color: var(--muted);
               text-transform: uppercase
          }

          .project-meta-grid strong {
               font-size: 10px;
               margin-top: 2px
          }

          .project-section {
               border: 1px solid var(--line);
               border-radius: 10px;
               background: var(--panel);
               padding: 11px
          }

          .project-section h3 {
               margin: 0 0 9px;
               font-size: 12px
          }

          .project-release-list,
          .project-version-list,
          .project-comment-list,
          .project-share-list,
          .project-acl-list,
          .project-audit-list {
               display: flex;
               flex-direction: column;
               gap: 5px;
               margin-top: 8px;
               max-height: 240px;
               overflow: auto
          }

          .project-release-list>div,
          .project-version-row,
          .project-comment-row,
          .project-share-list>div,
          .project-acl-list>div,
          .project-audit-list>div {
               display: grid;
               grid-template-columns: minmax(0, 1fr) auto;
               gap: 7px;
               align-items: center;
               padding: 7px;
               border: 1px solid var(--line);
               border-radius: 7px;
               font-size: 9px
          }

          .project-release-list span,
          .project-version-row span,
          .project-comment-row span,
          .project-audit-list span {
               display: block;
               color: var(--muted);
               font-size: 8px;
               margin-top: 2px
          }

          .project-comment-row p {
               margin: 5px 0 0;
               white-space: pre-wrap
          }

          .project-comment-row.resolved {
               opacity: .58
          }

          .project-diff-viewer {
               font: 10px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
               background: #102a43;
               color: #e6edf2;
               border-radius: 8px;
               padding: 9px;
               min-height: 74px;
               max-height: 260px;
               overflow: auto;
               white-space: pre-wrap
          }

          .project-sync-dot.saving {
               animation: projectPulse 1s infinite
          }

          @keyframes projectPulse {
               50% {
                    opacity: .35
               }
          }

          @media(max-width:850px) {
               .project-meta-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
               }
          }

          /* ===== Route/Roadbook/Tulip Pro v4.2 ===== */
          .advanced-card {
               border: 1px solid var(--line);
               border-radius: 11px;
               background: #fbfdfe;
               margin: 10px 0;
               padding: 0
          }

          .advanced-card>summary {
               cursor: pointer;
               padding: 10px 11px;
               font-size: 11px;
               font-weight: 900;
               color: var(--text);
               list-style: none
          }

          .advanced-card>summary::-webkit-details-marker {
               display: none
          }

          .advanced-card>summary:after {
               content: 'v';
               float: right;
               color: var(--muted)
          }

          .advanced-card[open]>summary {
               border-bottom: 1px solid var(--line)
          }

          .advanced-card .advanced-body {
               padding: 10px
          }

          .studio-card {
               border: 1px solid var(--line);
               border-radius: 8px;
               background: #fbfdfe;
               margin: 10px 0;
               padding: 10px
          }

          .studio-card .card-title {
               margin: 0 0 8px;
               font-size: 12px;
               font-weight: 900;
               color: var(--text)
          }

          /* Roadbook Studio workflow cards: every primary card in Route and Roadbook can be collapsed. */
          .collapsible-card > .card-title {
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 8px;
               cursor: pointer;
               user-select: none
          }

          .collapsible-card > .card-title .card-collapse-btn {
               width: 26px;
               height: 26px;
               border: 1px solid var(--line);
               border-radius: 7px;
               background: var(--panel);
               color: var(--muted);
               font: 900 13px/1 system-ui;
               cursor: pointer;
               flex: 0 0 auto
          }

          .collapsible-card.is-collapsed > :not(.card-title) { display: none !important; }
          .collapsible-card.is-collapsed > .card-title { margin-bottom: 0; }

          /* Visual point cards in the right column. The map tile is the same configured OSM source used by the main map. */
          .right-side-list .right-list-row {
               display: grid;
               grid-template-columns: 104px minmax(0, 1fr) auto;
               gap: 9px;
               align-items: stretch;
               padding: 7px;
               border: 1px solid var(--line);
               border-radius: 10px;
               background: var(--panel);
               min-width: 0
          }

          .right-side-list .right-list-row.selected {
               border-color: var(--accent);
               box-shadow: 0 0 0 2px var(--accent-soft) inset
          }

          .point-osm-preview {
               position: relative;
               width: 104px;
               min-height: 72px;
               overflow: hidden;
               border: 1px solid var(--line);
               border-radius: 8px;
               background-color: #dbe5ec;
               background-repeat: no-repeat;
               box-shadow: inset 0 0 0 1px rgba(255,255,255,.45)
          }

          .point-osm-preview::after {
               content: '';
               position: absolute;
               inset: 0;
               background: rgba(255,255,255,.08);
               pointer-events: none
          }

          .point-osm-preview .osm-mini-viewport { position:absolute; inset:0; width:104px; height:72px; max-width:none; border:0; user-select:none; pointer-events:none; }
          .point-osm-preview svg { position: absolute; z-index:2; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
          .point-card-main { border: 0; background: transparent; text-align: left; padding: 3px 2px; min-width: 0; cursor: pointer; color: var(--text); }
          .point-card-main strong { display: block; font-size: 11px; line-height: 1.25; }
          .point-card-main span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.25; overflow-wrap: anywhere; }
          .point-card-actions { display: flex; flex-direction: column; gap: 5px; justify-content: center; }
          .point-card-actions .mini-btn { width: 28px; height: 28px; padding: 0; }

          .workflow-rule-note { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.35; }
          .workflow-subsection { display:grid; gap:8px; }
          .workflow-subsection + .workflow-subsection { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
          .workflow-subsection h4 { margin:0; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
          .studio-topbar > .top-menu-bar, .v5-head > .top-menu-bar { flex:0 1 auto; margin-left:0; min-width:0; }
          .studio-topbar > .top-menu-bar .top-menu>summary, .v5-head > .top-menu-bar .top-menu>summary { min-height:34px; padding:0 8px; color:#fff; border-bottom-color:rgba(255,255,255,.22); }

          /* Shared map zoom readout used in the Route and Roadbook workflow cards. */
          .zoom-readout {
               display: inline-flex;
               align-items: center;
               min-height: 26px;
               padding: 0 8px;
               border: 1px solid var(--line);
               border-radius: 8px;
               background: var(--panel);
               color: var(--muted);
               font-size: 12px;
               font-weight: 800
          }
          .mini-grid-3 {
               display: grid;
               grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: 6px
          }

          .mini-grid-4 {
               display: grid;
               grid-template-columns: repeat(4, minmax(0, 1fr));
               gap: 6px
          }

          .route-filter-grid {
               display: grid;
               grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: 4px 8px
          }

          .route-filter-grid .check-row {
               margin: 3px 0
          }

          .route-alt-list {
               display: flex;
               flex-direction: column;
               gap: 5px;
               margin-top: 8px
          }

          .route-alt-row {
               display: grid;
               grid-template-columns: 34px minmax(0, 1fr) auto;
               gap: 7px;
               align-items: center;
               border: 1px solid var(--line);
               border-radius: 8px;
               padding: 7px;
               background: #fff
          }

          .route-alt-row.selected {
               border-color: var(--accent);
               background: var(--accent-soft)
          }

          .route-alt-row strong {
               font-size: 10px
          }

          .route-alt-row small {
               display: block;
               color: var(--muted);
               font-size: 9px;
               margin-top: 2px
          }

          .route-quality {
               font-size: 9px;
               font-weight: 900;
               border-radius: 999px;
               padding: 3px 6px;
               background: #eaf1f5
          }

          .route-warning {
               background: #fff4d8;
               color: #8a4b08
          }

          .route-good {
               background: #e8f7ef;
               color: #166534
          }

          .geocode-results,
          .poi-results,
          .avoid-zone-list,
          .section-list {
               display: flex;
               flex-direction: column;
               gap: 5px;
               max-height: 220px;
               overflow: auto;
               margin-top: 7px
          }

          .geocode-row,
          .poi-row,
          .avoid-zone-row,
          .section-row {
               border: 1px solid var(--line);
               border-radius: 8px;
               padding: 7px;
               background: var(--panel);
               font-size: 10px
          }

          .geocode-row button,
          .poi-row button {
               width: 100%;
               border: 0;
               background: transparent;
               text-align: left;
               padding: 0
          }

          .route-analysis-grid {
               display: grid;
               grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: 5px
          }

          .route-analysis-grid>div {
               background: var(--panel);
               border: 1px solid var(--line);
               border-radius: 7px;
               padding: 6px
          }

          .route-analysis-grid span {
               display: block;
               color: var(--muted);
               font-size: 8px;
               text-transform: uppercase
          }

          .route-analysis-grid strong {
               font-size: 11px
          }

          .map-draw-banner {
               position: absolute;
               z-index: 850;
               top: 60px;
               left: 50%;
               transform: translateX(-50%);
               background: #102a43;
               color: #fff;
               border-radius: 9px;
               padding: 8px 11px;
               box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
               font-size: 10px;
               display: flex;
               gap: 8px;
               align-items: center
          }

          .map-draw-banner.hidden {
               display: none
          }

          .map-draw-banner button {
               border: 1px solid rgba(255, 255, 255, .25);
               background: rgba(255, 255, 255, .1);
               color: #fff;
               border-radius: 6px;
               padding: 4px 7px
          }

          .roadbook-bulkbar {
               display: none;
               position: sticky;
               top: 0;
               z-index: 3;
               border: 1px solid #a7c7d8;
               background: #eef9fd;
               border-radius: 9px;
               padding: 7px;
               margin-bottom: 8px;
               gap: 6px;
               align-items: center;
               flex-wrap: wrap
          }

          .roadbook-bulkbar.active {
               display: flex
          }

          .roadbook-bulkbar strong {
               font-size: 10px
          }

          .roadbook-bulkbar .input {
               width: auto;
               min-height: 30px;
               font-size: 10px;
               padding: 4px 6px
          }

          .list-row.multi-selected {
               border-color: #7c3aed;
               background: #f7f3ff;
               box-shadow: 0 0 0 1px rgba(124, 58, 237, .22)
          }

          .list-row[draggable=true] {
               cursor: grab
          }

          .list-row.drag-over {
               outline: 2px dashed var(--accent);
               outline-offset: 2px
          }

          .provenance-badge {
               display: inline-flex;
               border-radius: 999px;
               padding: 2px 5px;
               font-size: 8px;
               font-weight: 900;
               background: #eaf1f5;
               color: #486581
          }

          .provenance-badge.manual {
               background: #e8f7ef;
               color: #166534
          }

          .provenance-badge.auto {
               background: #fff4d8;
               color: #8a4b08
          }

          .checkpoint-card {
               border: 1px solid var(--line);
               border-radius: 9px;
               padding: 9px;
               background: #fbfdfe;
               margin: 8px 0
          }

          .section-row {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 6px
          }

          .section-row small {
               display: block;
               color: var(--muted);
               margin-top: 2px
          }

          .creator-pro-actions {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 5px
          }

          .creator-pro-actions .btn {
               min-height: 32px;
               padding: 4px 6px;
               font-size: 9px
          }

          .tulip-selection-secondary {
               fill: none;
               stroke: #7c3aed;
               stroke-width: 1;
               vector-effect: non-scaling-stroke;
               stroke-dasharray: 2 2;
               pointer-events: none
          }

          .tulip-layer-row.multi-selected {
               outline: 2px solid rgba(124, 58, 237, .35)
          }

          .tulip-osm-preview path {
               pointer-events: none
          }

          .tulip-safe-area {
               display: none;
               fill: none;
               stroke: #e11d48;
               stroke-width: .8;
               stroke-dasharray: 4 3;
               vector-effect: non-scaling-stroke;
               pointer-events: none
          }

          .tulip-compare-overlay {
               pointer-events: none
          }

          .tulip-provenance {
               font: 9px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
               background: #102a43;
               color: #e6edf2;
               border-radius: 7px;
               padding: 7px;
               white-space: pre-wrap;
               max-height: 150px;
               overflow: auto
          }

          .template-grid {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 5px
          }

          .template-grid button {
               min-height: 31px;
               border: 1px solid var(--line);
               background: var(--panel);
               border-radius: 7px;
               font-size: 9px;
               font-weight: 800
          }

          .route-segment-overlay {
               position: absolute;
               inset: 0;
               z-index: 25;
               pointer-events: none
          }

          .route-drag-hint {
               font-size: 9px;
               color: var(--muted);
               margin-top: 4px
          }

          .osm-ignore-rule {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 4px;
               margin: 4px 0
          }

          .safearea-on .tulip-safe-area {
               display: block
          }

          .tulip-info-live {
               border-bottom: 1px solid var(--line);
               padding: 10px 12px;
               background: #fff
          }

          .tulip-info-live .scene-head {
               margin-bottom: 8px
          }

          .tulip-info-preview {
               height: 142px;
               min-height: 0
          }

          .tulip-info-preview svg {
               display: block;
               width: 100%;
               height: 100%
          }

          .tulip-top-actions [hidden] {
               display: none !important
          }


          .top-menu-section-title {
               padding: 8px 12px 4px;
               font-size: 11px;
               font-weight: 800;
               letter-spacing: .02em;
               text-transform: uppercase;
               color: var(--muted)
          }

          .tulip-waypoint-live {
               border: 1px solid var(--line);
               border-radius: 6px;
               background: var(--panel);
               margin-bottom: 10px;
               overflow: hidden
          }

          .tulip-waypoint-live-head {
               display: grid;
               grid-template-columns: 1fr auto;
               gap: 8px;
               padding: 8px 10px;
               border-bottom: 1px solid var(--line);
               font-size: 12px
          }

          .tulip-waypoint-live-head strong,
          .tulip-waypoint-live-head span {
               min-width: 0;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap
          }

          .tulip-waypoint-live-canvas {
               height: 132px
          }

          .tulip-waypoint-live-canvas svg {
               display: block;
               width: 100%;
               height: 100%;
               background: #f7fafc
          }

          @media(max-width:680px) {

               .mini-grid-3,
               .mini-grid-4,
               .route-analysis-grid {
                    grid-template-columns: 1fr 1fr
               }

               .route-filter-grid {
                    grid-template-columns: 1fr
               }

               .roadbook-bulkbar {
                    position: static
               }
          }
          /* Roadbook Studio scope guards */
          .inspector .checkpoint-card,
          .inspector .creator-fields,
          .inspector .element-editor,
          .inspector .form-grid.two,
          .inspector #summaryTulip,
          .inspector label:has(#summaryTulip),
          .inspector #regenerateTulipBtn,
          .inspector #moveInstructionBackBtn,
          .inspector #moveInstructionForwardBtn,
          .inspector [data-open-tab="symbols"],
          .inspector #cloneTulipToInfoBtn,
          .inspector #clearInfoSceneBtn,
          .inspector #autoTulipOsmBtn { display: none !important; }

          .studio-topbar {
               height: var(--topbar) !important;
               padding: 0 22px !important;
               gap: 20px !important;
               overflow: visible;
               position: relative;
               z-index: 2;
          }

          .studio-topbar .brand {
               flex: 1 1 auto;
               min-width: 220px;
          }

          .studio-topbar .brand-copy {
               min-width: 0;
          }

          .studio-topbar .brand-title {
               display: flex;
               align-items: center;
               gap: 8px;
               white-space: nowrap;
          }

          .studio-topbar .top-actions {
               flex: 0 1 auto;
               max-width: 58vw;
          }

          .studio-topbar .btn-secondary,
          .studio-topbar .icon-btn,
          .v5-head .btn-secondary,
          .v5-head .icon-btn {
               background: rgba(255, 255, 255, .08);
               color: #fff;
               border-color: rgba(255, 255, 255, .2);
          }

          .studio-topbar .btn-primary,
          .v5-head .btn-primary {
               background: var(--accent);
               color: #fff;
               border-color: rgba(255, 255, 255, .18);
          }
          .svg-library-overview { max-height: 260px; overflow: auto; display: grid; gap: 6px; }
          .svg-library-row { width: 100%; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 6px; padding: 8px; text-align: left; display: grid; gap: 2px; cursor: pointer; }
          .svg-library-row strong { font-size: 12px; }
          .svg-library-row span { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
          .svg-studio, .tulip-studio { padding: 0 !important; }
          .svg-studio-shell, .tulip-studio-shell { width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; }
          .v5-modal { padding: 24px !important; }
          .v5-modal > .v5-shell { width: min(980px, calc(100vw - 48px)) !important; height: auto !important; max-width: 980px !important; max-height: min(780px, calc(100vh - 48px)) !important; border-radius: 16px !important; }
          #v5OfflineModal > .v5-shell, #v5ProdModal > .v5-shell { max-width: 1120px !important; }
          .roadbook-right-list.hidden { display: none !important; }
          .roadbook-right-list { padding: 14px; overflow: auto; min-height: 0; }
          body[data-active-tab="route"] .tab-panel[data-panel="roadbook"] { display: block !important; }
          .tab[data-tab="roadbook"] { display: none !important; }

          body[data-active-tab="route"] .tab-panel[data-panel="roadbook"].left-roadbook-panel-merged { display: none !important; }
          .left-waypoint-workflow-merged { display: none !important; }
          .auto-waypoint-card .auto-waypoint-subsection { margin: 0; }
          .route-action-info { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
          .route-action-elevation { margin-top: 10px; }
          .left-waypoint-card-merged { display: none !important; }
          .right-waypoint-tools { display: grid; gap: 8px; margin-bottom: 10px; }
          .right-waypoint-tools .roadbook-bulkbar { margin: 0; display: none; }
          .right-waypoint-tools .roadbook-bulkbar.active { display: flex; }
          .right-waypoint-tools .roadbook-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
          .right-waypoint-tools .advanced-card { margin: 0; }
          .right-waypoint-tools .mode-hint { margin: 0; font-size: 12px; }
          .right-waypoint-tools .button-row { gap: 6px; }
          .right-side-list { display: grid; gap: 8px; }
          .right-wp-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--panel); color: var(--text); cursor: pointer; text-align: left; width: 100%; }
          .right-wp-row.selected, .right-sp-row.selected { border-color: var(--accent); background: var(--accent-soft); }
          .right-sp-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--panel); color: var(--text); cursor: grab; text-align: left; width: 100%; }
          .right-sp-row:active { cursor: grabbing; }
          .right-sp-row.drag-over { border-color: var(--accent); background: var(--accent-soft); }
          .right-sp-row small, .right-wp-row small { display: block; color: var(--muted); margin-top: 3px; }
          .right-mini-tulip svg { width: 100%; aspect-ratio: 199 / 168; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; margin-top: 7px; }
          body[data-active-tab="route"] #emptyInspector, body[data-active-tab="route"] #instructionInspector, body[data-active-tab="roadbook"] #emptyInspector, body[data-active-tab="roadbook"] #instructionInspector { display: none !important; }
          body[data-active-tab="route"] #roadbookRightPanel, body[data-active-tab="roadbook"] #roadbookRightPanel { display: block !important; }
          body[data-active-tab="route"] .workspace.show-waypoint-detail #emptyInspector, body[data-active-tab="roadbook"] .workspace.show-waypoint-detail #emptyInspector { display: none !important; }
          body[data-active-tab="route"] .workspace.show-waypoint-detail #instructionInspector:not(.hidden), body[data-active-tab="roadbook"] .workspace.show-waypoint-detail #instructionInspector:not(.hidden) { display: block !important; }
          body[data-active-tab="route"] .tab-panel[data-panel="route"] #controlPointList, body[data-active-tab="roadbook"] .tab-panel[data-panel="roadbook"] #instructionList { display: none !important; }
          .map-panel > #instructionInspector.map-tulip-overlay {
               position: absolute;
               left: 50%;
               top: 72px;
               right: auto;
               width: min(820px, calc(100% - 24px));
               max-height: min(520px, calc(100% - 28px));
               transform: translateX(-50%);
               z-index: 720;
               background: transparent;
               border: 0;
               border-radius: 0;
               box-shadow: none;
               backdrop-filter: none;
               pointer-events: none;
          }
          .map-panel > #instructionInspector.map-tulip-overlay::after { display: none; }
          .map-panel > #instructionInspector.map-tulip-overlay .inspector-head,
          .map-panel > #instructionInspector.map-tulip-overlay .waypoint-map-info,
          .map-panel > #instructionInspector.map-tulip-overlay .right-scene-table tr,
          .map-panel > #instructionInspector.map-tulip-overlay .element-editor { pointer-events: auto; }
          .map-panel > #instructionInspector.map-tulip-overlay .inspector-head {
               width: min(360px, calc(100vw - 42px));
               margin: 0 auto 8px;
               padding: 8px 10px;
               background: rgba(255,255,255,.88);
               border: 1px solid rgba(16,42,67,.22);
               border-radius: 8px;
               box-shadow: 0 10px 24px rgba(16,42,67,.14);
          }
          .map-panel > #instructionInspector.map-tulip-overlay .waypoint-map-info {
               width: min(420px, calc(100vw - 42px));
               margin: 0 auto 8px;
               padding: 7px 10px;
               background: rgba(255,255,255,.9);
               border: 1px solid rgba(16,42,67,.2);
               border-radius: 8px;
               color: var(--text);
               box-shadow: 0 8px 20px rgba(16,42,67,.12);
               font-size: 11px;
               line-height: 1.35;
          }
          .map-panel > #instructionInspector.map-tulip-overlay .waypoint-map-info span,
          .map-panel > #instructionInspector.map-tulip-overlay .waypoint-map-info small { display: block; color: var(--muted); margin-top: 2px; }
          .map-panel > #instructionInspector.map-tulip-overlay .right-scene-table { display: block; margin-top: 0; }
          .map-panel > #instructionInspector.map-tulip-overlay .right-scene-table tbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
          .map-panel > #instructionInspector.map-tulip-overlay .right-scene-table tr { display: grid; grid-template-columns: 1fr; gap: 6px; border: 1px solid rgba(16,42,67,.24); border-radius: 8px; padding: 8px; background: rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(16,42,67,.16); }
          .map-panel > #instructionInspector.map-tulip-overlay .right-scene-table th, .map-panel > #instructionInspector.map-tulip-overlay .right-scene-table td { display: block; width: auto; padding: 0; border: 0; background: transparent; }
          .map-panel > #instructionInspector.map-tulip-overlay .right-scene-table th { font-size: 10px; color: var(--muted); }
          .map-panel > #instructionInspector.map-tulip-overlay .scene-canvas { min-height: 150px; max-height: 210px; background: rgba(255,255,255,.12); }
          .map-panel > #instructionInspector.map-tulip-overlay .tulip-popup-row { transform: translateY(2px); }
          .map-panel > #instructionInspector.map-tulip-overlay .info-popup-row { transform: translateY(18px); }
          .workspace.show-waypoint-detail .map-panel > #instructionInspector.map-tulip-overlay:not(.hidden) { display: block !important; }
          .right-panel > #emptyInspector, .right-panel > #instructionInspector { display: none !important; }
          .cp-marker, .ins-marker { min-width: 32px; height: 24px; padding: 0 5px; display: grid; place-items: center; font-size: 10px; font-weight: 900; }
/* v5.6.0 Roadbook visual overlays. Tulip is a transparent geographic window
   over the OSM map; Extra info remains an independent adjacent popup. */
.scene-row-relocated{display:none!important}.roadbook-map-popup{position:absolute;z-index:650;width:min(330px,42%);max-height:62%;overflow:auto;background:rgba(255,255,255,.96);border:1px solid rgba(16,42,67,.28);border-radius:12px;box-shadow:0 12px 32px rgba(16,42,67,.22);pointer-events:auto}.roadbook-map-popup.hidden{display:none!important}.roadbook-map-popup-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}.roadbook-map-popup-body{padding:8px}.roadbook-map-popup .scene-head{margin-bottom:6px}.roadbook-map-popup .scene-canvas{min-height:210px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}.roadbook-map-popup .scene-canvas svg{display:block;width:100%;height:100%}.roadbook-map-popup.tulip{width:min(390px,46%);height:min(330px,48%);max-height:none;overflow:hidden;background:transparent!important;border:2px solid rgba(11,110,153,.86);border-radius:10px;box-shadow:none!important;backdrop-filter:none!important}.roadbook-map-popup.tulip .roadbook-map-popup-head{position:absolute;inset:0 0 auto 0;z-index:5;background:transparent!important;border:0;padding:5px 6px;pointer-events:none;text-shadow:0 1px 2px #fff,0 0 5px #fff}.roadbook-map-popup.tulip .roadbook-map-popup-head strong{display:none!important}.roadbook-map-popup.tulip .roadbook-map-popup-head .icon-btn{pointer-events:auto;background:transparent!important;border:1px solid rgba(16,42,67,.42);text-shadow:0 1px 3px #fff}.roadbook-map-popup.tulip .roadbook-map-popup-body{position:absolute;inset:0;padding:0;background:transparent!important}.roadbook-map-popup.tulip .scene-section{position:absolute;inset:0;margin:0;padding:0;background:transparent!important;border:0!important}.roadbook-map-popup.tulip .scene-head{display:none!important}.roadbook-map-popup.tulip .scene-canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;background:transparent!important;border:0!important;border-radius:0;overflow:hidden;pointer-events:none}.roadbook-map-popup.tulip .scene-canvas svg{width:100%;height:100%;background:transparent!important;aspect-ratio:auto!important}.roadbook-map-popup.tulip .map-aligned-tulip-svg{overflow:hidden}.roadbook-map-popup.tulip.without-osm-map,.roadbook-map-popup.tulip.without-osm-map .roadbook-map-popup-body,.roadbook-map-popup.tulip.without-osm-map .scene-section,.roadbook-map-popup.tulip.without-osm-map .scene-canvas{background:#fff!important}.roadbook-map-popup.tulip.without-osm-map{box-shadow:0 12px 32px rgba(16,42,67,.22)!important}.roadbook-map-popup.info{width:min(300px,38%)}@media(max-width:850px){.roadbook-map-popup.tulip{width:min(320px,62%);height:min(270px,42%)}.roadbook-map-popup.info{width:min(260px,44%)}}

/* v5.6.0 viewport-fit and OSM overlay editing */
@media (min-width:981px){
 html,body{height:100%;overflow:hidden!important}
 .app-shell{height:100dvh;min-height:0!important;overflow:hidden}
 .workspace{min-height:0!important;overflow:hidden;height:auto}
 .left-panel,.right-panel,.map-panel{min-height:0!important;max-height:none!important;height:100%;overflow:hidden}
 .left-panel .tab-panel.active,.right-panel{min-height:0;overflow:auto}
 .map{min-height:0!important}
}
.right-close-btn{font-size:22px;line-height:1;width:40px!important;min-width:40px!important;padding:0!important}
.right-del-btn{min-width:48px!important;padding:0 10px!important;font-weight:800}
.overlay-target-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 7px}
.overlay-target-switch .active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.overlay-target-hint{font-size:10px;line-height:1.35;color:var(--muted);margin:0 0 9px}
.roadbook-map-popup.scene-target-active{border-color:var(--accent)!important;box-shadow:0 0 0 2px rgba(11,110,153,.18)}
.roadbook-map-popup.tulip .scene-canvas{pointer-events:auto!important}
.roadbook-map-popup.tulip .scene-canvas svg{pointer-events:auto}
.roadbook-map-popup.tulip .scene-canvas svg .map-route-geometry{pointer-events:none}
.roadbook-map-popup.info{overflow:hidden;background:transparent!important;border:1px solid rgba(16,42,67,.34);box-shadow:none!important}
.roadbook-map-popup.info .roadbook-map-popup-head{position:relative;background:rgba(255,255,255,.72);border-bottom:1px solid var(--line);padding:7px 9px}
.roadbook-map-popup.info .roadbook-map-popup-body{padding:0}
.roadbook-map-popup.info .scene-section{margin:0;border:0;background:transparent}
.roadbook-map-popup.info .scene-head{display:none!important}
.roadbook-map-popup.info .scene-canvas{min-height:210px;border:0;border-radius:0;background:transparent!important;pointer-events:auto}
.roadbook-map-popup.info .scene-canvas svg{background:transparent!important}

/* v5.12 static presentation helpers: keep markup free of inline style attributes. */
.instruction-eta { color: var(--muted); }
.autofill-username-proxy { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }