mudlet-map-editor 0.1.0

package/dist-lib/styles.css

@@ -0,0 +1,3476 @@
+* { box-sizing: border-box; }
+
+a { color: rgba(143, 184, 255, 0.85); text-decoration: none; }
+a:hover { color: rgba(143, 184, 255, 1); text-decoration: underline; }
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(143, 184, 255, 0.15) transparent;
+}
+*::-webkit-scrollbar { width: 5px; height: 5px; }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb {
+  background: rgba(143, 184, 255, 0.15);
+  border-radius: 3px;
+}
+*::-webkit-scrollbar-thumb:hover { background: rgba(143, 184, 255, 0.28); }
+*::-webkit-scrollbar-corner { background: transparent; }
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border: 1px solid rgba(143, 184, 255, 0.2);
+  border-radius: 3px;
+  background: rgba(10, 14, 22, 0.7);
+  cursor: pointer;
+  vertical-align: middle;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+  position: relative;
+}
+input[type="checkbox"]:hover {
+  border-color: rgba(143, 184, 255, 0.4);
+  background: rgba(20, 30, 50, 0.8);
+}
+input[type="checkbox"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(52, 100, 168, 0.45);
+}
+input[type="checkbox"]:checked {
+  background: rgba(52, 100, 168, 0.85);
+  border-color: rgba(52, 100, 168, 0.9);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.5 4.5,9 10,3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+input[type="checkbox"]:checked:hover {
+  background-color: rgba(74, 128, 192, 0.9);
+  border-color: rgba(74, 128, 192, 1);
+}
+input[type="checkbox"]:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+input[type="color"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 1px solid rgba(143, 184, 255, 0.2);
+  border-radius: 4px;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  overflow: hidden;
+  height: 24px;
+  width: 40px;
+}
+input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }
+input[type="color"]::-moz-color-swatch { border: none; border-radius: 3px; }
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(143, 184, 255, 0.2);
+  outline: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #00e5ff;
+  cursor: pointer;
+}
+input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: none;
+  border-radius: 50%;
+  background: #00e5ff;
+  cursor: pointer;
+}
+
+html, body, #root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background: #080c14;
+  background-image:
+    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(30, 53, 83, 0.35) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(18, 30, 60, 0.3) 0%, transparent 55%),
+    linear-gradient(160deg, #0a0d16 0%, #080c14 50%, #06090f 100%);
+  color: #e6e9ef;
+  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.app {
+  position: relative;
+  height: 100%;
+}
+
+#logo {
+  height: 46px;
+  vertical-align: middle;
+  margin: -10px;
+  opacity: 0.8;
+}
+
+.toolbar {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  right: 12px;
+  display: flex;
+  flex-direction: column;
+  background: rgba(30, 42, 62, 0.52);
+  backdrop-filter: blur(16px) saturate(1.8) brightness(0.4);
+  border: 1px solid rgba(143, 184, 255, 0.18);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
+  z-index: 9;
+  overflow: visible;
+}
+
+.toolbar-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+}
+
+.toolbar-row-header {
+  min-height: 44px;
+}
+
+.toolbar-row-tools {
+  border-top: 1px solid rgba(143, 184, 255, 0.08);
+  padding: 4px 14px;
+  gap: 6px;
+}
+
+
+.toolbar h1 {
+  margin: 0 8px 0 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #8fb8ff;
+  white-space: nowrap;
+  padding: 6px 12px;
+  text-shadow: 0 0 20px rgba(143, 184, 255, 0.4);
+  transition: text-shadow 0.2s;
+}
+
+.toolbar h1:hover {
+  text-shadow: 0 0 12px rgba(143, 184, 255, 0.9), 0 0 28px rgba(143, 184, 255, 0.5);
+}
+
+.toolbar-sep {
+  width: 1px;
+  height: 22px;
+  background: rgba(143, 184, 255, 0.1);
+  margin: 0 4px;
+}
+
+.toolbar button,
+.toolbar select,
+.toolbar label.file-button {
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  padding: 6px 12px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+  font-family: inherit;
+  backdrop-filter: blur(8px);
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.toolbar select option,
+.side-panel select option,
+.cl-form select option,
+.area-move-row select option {
+  background: #0e1520;
+  color: #e6e9ef;
+}
+
+.toolbar button:hover:not(:disabled),
+.toolbar label.file-button:hover {
+  background: rgba(52, 100, 168, 0.3);
+  border-color: rgba(143, 184, 255, 0.25);
+  box-shadow: 0 0 12px rgba(143, 184, 255, 0.08);
+}
+
+.toolbar button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.toolbar .tool-group {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  background: rgba(6, 9, 16, 0.5);
+  border: 1px solid rgba(143, 184, 255, 0.08);
+  border-radius: 6px;
+  backdrop-filter: blur(8px);
+}
+
+.toolbar .tool-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 1px solid transparent;
+  padding: 5px 10px;
+  border-radius: 4px;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.toolbar .tool-btn.active {
+  background: rgba(30, 53, 83, 0.7);
+  border-color: rgba(52, 100, 168, 0.6);
+  color: #cfe1ff;
+  box-shadow: 0 0 12px rgba(52, 100, 168, 0.2), inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+.toolbar .tool-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  line-height: 1;
+  color: #6a7588;
+  background: rgba(10, 14, 22, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 2px 5px;
+  border-radius: 3px;
+  font-family: ui-monospace, Consolas, monospace;
+  align-self: center;
+}
+
+.toolbar .tool-btn.active .tool-key {
+  background: rgba(6, 9, 16, 0.8);
+  color: #8fb8ff;
+  border-color: rgba(52, 100, 168, 0.5);
+}
+
+/* ── Custom DropdownSelect ── */
+.dropdown-select {
+  position: relative;
+  display: inline-flex;
+}
+
+.dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(10, 14, 22, 0.55);
+  border: 1px solid rgba(143, 184, 255, 0.14);
+  border-radius: 7px;
+  padding: 0 10px 0 0;
+  height: 30px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #e6e9ef;
+  font-family: inherit;
+  transition: border-color 0.15s, background 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.dropdown-trigger:hover,
+.dropdown-trigger.open {
+  background: rgba(20, 28, 46, 0.7);
+  border-color: rgba(143, 184, 255, 0.28);
+}
+
+.dropdown-trigger-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1;
+  color: #6a7588;
+  padding: 0 8px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid rgba(143, 184, 255, 0.08);
+  flex-shrink: 0;
+}
+
+.dropdown-trigger-value {
+  flex: 1;
+  min-width: 0;
+  padding-left: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  text-align: left;
+}
+
+.dropdown-arrow {
+  font-size: 9px;
+  color: #6a7588;
+  flex-shrink: 0;
+}
+
+.dropdown-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+}
+
+.dropdown-list {
+  z-index: 1000;
+  background: rgba(12, 18, 30, 0.96);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(143, 184, 255, 0.14);
+  border-radius: 10px;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 320px;
+}
+
+.dropdown-search-wrap {
+  padding: 8px 8px 6px;
+  border-bottom: 1px solid rgba(143, 184, 255, 0.07);
+  flex-shrink: 0;
+}
+
+.dropdown-search {
+  width: 100%;
+  background: rgba(8, 12, 20, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  border-radius: 6px;
+  color: #e6e9ef;
+  font-size: 12px;
+  font-family: inherit;
+  padding: 5px 9px;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+.dropdown-search:focus {
+  border-color: rgba(52, 100, 168, 0.6);
+}
+.dropdown-search::placeholder { color: #4a5568; }
+
+.dropdown-options {
+  overflow-y: auto;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dropdown-option {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: #c8d0dc;
+  font-size: 13px;
+  font-family: inherit;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s, border-color 0.1s;
+  white-space: nowrap;
+}
+.dropdown-option:hover {
+  background: rgba(52, 100, 168, 0.2);
+  color: #e6e9ef;
+  border-color: rgba(143, 184, 255, 0.1);
+}
+.dropdown-option.selected {
+  background: rgba(30, 53, 83, 0.7);
+  border-color: rgba(52, 100, 168, 0.5);
+  color: #cfe1ff;
+}
+.dropdown-option.highlighted {
+  background: rgba(52, 100, 168, 0.25);
+  color: #e6e9ef;
+  border-color: rgba(143, 184, 255, 0.15);
+}
+.dropdown-option.highlighted.selected {
+  background: rgba(52, 100, 168, 0.45);
+  border-color: rgba(52, 100, 168, 0.7);
+  color: #cfe1ff;
+}
+
+.dropdown-empty {
+  color: #4a5568;
+  font-size: 12px;
+  padding: 8px 10px;
+  text-align: center;
+}
+
+/* keep legacy .toolbar-select-group for zlevel wrapper */
+.toolbar-select-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #6a7588;
+  padding: 0 8px;
+  white-space: nowrap;
+  border-right: 1px solid rgba(143, 184, 255, 0.08);
+  line-height: 30px;
+  flex-shrink: 0;
+}
+
+
+.toolbar-row-tools button,
+.toolbar-row-tools label.file-button {
+  font-size: 12px;
+  padding: 3px 9px;
+}
+
+.toolbar-row-tools .tool-btn {
+  padding: 3px 8px;
+  font-size: 12px;
+}
+
+.toolbar-row-tools .tool-key {
+  font-size: 9px;
+  padding: 2px 4px;
+}
+
+.toolbar-snap-btn {
+  background: rgba(10, 14, 22, 0.5);
+  border: 1px solid rgba(143, 184, 255, 0.12) !important;
+  border-radius: 6px !important;
+  padding: 3px 10px !important;
+  font-size: 12px;
+  color: #6a7588;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s, border-color 0.15s !important;
+}
+.toolbar-snap-btn:hover { color: #cfd6e0; }
+
+.toolbar-pending-hint {
+  margin-left: 8px;
+  font-size: 11px;
+  color: #8fb8ff;
+  opacity: 0.85;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.toolbar-snap-btn.active {
+  background: rgba(30, 53, 83, 0.7) !important;
+  border-color: rgba(52, 100, 168, 0.6) !important;
+  color: #cfe1ff !important;
+  box-shadow: 0 0 12px rgba(52, 100, 168, 0.2), inset 0 1px 0 rgba(255,255,255,0.05) !important;
+}
+
+.toolbar-goto {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(10, 14, 22, 0.55);
+  border: 1px solid rgba(143, 184, 255, 0.14);
+  border-radius: 7px;
+  height: 30px;
+  overflow: hidden;
+  transition: border-color 0.15s, background 0.15s;
+}
+.toolbar-goto:focus-within {
+  background: rgba(20, 28, 46, 0.7);
+  border-color: rgba(143, 184, 255, 0.28);
+}
+
+.toolbar-goto-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #6a7588;
+  padding: 0 8px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid rgba(143, 184, 255, 0.08);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.toolbar-goto-input {
+  width: 56px;
+  background: transparent;
+  border: none;
+  padding: 0 8px;
+  font-size: 10px;
+  font-family: inherit;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #e6e9ef;
+  outline: none;
+  appearance: textfield;
+  height: 100%;
+}
+.toolbar-goto-input::-webkit-inner-spin-button,
+.toolbar-goto-input::-webkit-outer-spin-button { display: none; }
+.toolbar-goto-input::placeholder { color: #4a5568; }
+
+.toolbar-goto-btn {
+  height: 100%;
+  padding: 0 10px;
+  background: transparent;
+  border: none;
+  border-left: 1px solid rgba(143, 184, 255, 0.08);
+  border-radius: 0;
+  color: #6a7588;
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.toolbar-goto-btn:hover:not(:disabled) {
+  color: #cfe1ff;
+  background: rgba(52, 100, 168, 0.2);
+}
+.toolbar-goto-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.toolbar .status {
+  font-size: 12px;
+  color: #8f97a6;
+  margin-left: auto;
+  padding-left: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.toolbar .status-file {
+  color: #6a7588;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 280px;
+}
+
+.toolbar .status-action {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 280px;
+}
+
+.map-viewport {
+  position: absolute;
+  inset: 0;
+  background: #000;
+}
+
+.map-container {
+  position: absolute;
+  inset: 0;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+.empty-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #55606f;
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.empty-state-logo {
+  margin-top: 24px;
+  width: 150px;
+  opacity: 0.375;
+}
+
+.sessions-panel-overlay {
+  position: absolute;
+  top: 76px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 12px 16px 16px;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.sessions-panel {
+  pointer-events: all;
+  background: rgba(14, 20, 35, 0.96);
+  border: 1px solid rgba(52, 100, 168, 0.4);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+  padding: 20px;
+  min-width: 360px;
+  max-width: 520px;
+  width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.sessions-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 600;
+  color: #cfe1ff;
+  letter-spacing: 0.03em;
+}
+
+.sessions-delete-all {
+  font-size: 11px;
+  font-weight: 400;
+  padding: 3px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(168, 52, 52, 0.4);
+  background: rgba(168, 52, 52, 0.1);
+  color: #c97a7a;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.sessions-delete-all:hover {
+  background: rgba(168, 52, 52, 0.25);
+}
+
+.sessions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.session-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 6px;
+}
+
+.session-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.session-filename {
+  font-size: 12px;
+  color: #cfe1ff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-meta {
+  font-size: 11px;
+  color: #6a8ab0;
+}
+
+.session-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.session-actions button {
+  padding: 3px 10px;
+  border-radius: 4px;
+  border: 1px solid rgba(52,100,168,0.5);
+  background: rgba(52,100,168,0.15);
+  color: #8ab4d8;
+  font-size: 11px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.session-actions button:hover {
+  background: rgba(52,100,168,0.3);
+}
+
+.session-actions button.session-delete {
+  border-color: rgba(168,52,52,0.4);
+  background: rgba(168,52,52,0.1);
+  color: #c97a7a;
+}
+
+.session-actions button.session-delete:hover {
+  background: rgba(168,52,52,0.25);
+}
+
+.sessions-empty {
+  font-size: 12px;
+  color: #445566;
+  text-align: center;
+  padding: 8px 0;
+}
+
+.sessions-autodelete {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255,255,255,0.06);
+}
+
+.sessions-autodelete-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: #6a8ab0;
+  cursor: pointer;
+  user-select: none;
+}
+
+
+.sessions-autodelete-days {
+  width: 48px;
+  padding: 2px 6px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(52,100,168,0.35);
+  border-radius: 4px;
+  color: #8ab4d8;
+  font-size: 11px;
+  text-align: center;
+}
+
+.sessions-autodelete-days:disabled {
+  opacity: 0.35;
+}
+
+.sessions-autodelete-unit {
+  font-size: 11px;
+  color: #6a8ab0;
+}
+
+.sessions-panel-hint {
+  font-size: 11px;
+  color: #445566;
+  text-align: center;
+}
+
+.side-panel {
+  position: absolute;
+  top: 104px; /* below floating toolbar (12px offset + ~44px header row + ~32px tools row + 16px gap) */
+  right: 12px;
+  bottom: 12px;
+  width: 440px;
+  background: rgba(28, 40, 60, 0.52);
+  backdrop-filter: blur(16px) saturate(1.8) brightness(0.4);
+  border: 1px solid rgba(143, 184, 255, 0.18);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
+  padding: 0;
+  overflow: hidden;
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+}
+
+.side-panel--collapsed {
+  width: 48px;
+  overflow: visible;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+}
+
+.side-panel-collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 0 6px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #6a7588;
+  cursor: pointer;
+  font-size: 11px;
+  flex-shrink: 0;
+  transition: color 0.15s;
+}
+.side-panel-collapse-btn:hover { color: #8fb8ff; }
+
+.side-panel-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 1px solid rgba(143, 184, 255, 0.08);
+  flex-shrink: 0;
+  background: rgba(8, 12, 20, 0.5);
+  border-radius: 0;
+}
+
+.side-panel-tabs .side-panel-tab {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  color: #6a7588;
+  cursor: pointer;
+  font-size: 11px;
+  padding: 8px 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  transition: color 0.15s, border-color 0.15s;
+  margin-bottom: -1px;
+}
+
+.side-panel-tab:hover {
+  color: #cfd6e0;
+}
+
+.side-panel-tab.active {
+  color: #8fb8ff;
+  border-bottom-color: #8fb8ff;
+  text-shadow: 0 0 16px rgba(143, 184, 255, 0.5);
+}
+
+/* Badge on tab buttons */
+.tab-badge {
+  margin-left: 4px;
+  padding: 0 5px;
+  font-size: 10px;
+  line-height: 16px;
+  border-radius: 8px;
+  background: rgba(143, 184, 255, 0.15);
+  color: #8fb8ff;
+  font-weight: 600;
+}
+.side-panel-tab.active .tab-badge {
+  background: rgba(143, 184, 255, 0.25);
+}
+
+/* Collapse arrow button inside the tab bar */
+.side-panel-tabs .side-panel-tab--collapse {
+  flex: 0 0 26px;
+  padding: 8px 0;
+  justify-content: center;
+  color: #4a5568;
+  letter-spacing: 0;
+  font-size: 10px;
+  border-left: 1px solid rgba(143, 184, 255, 0.07);
+  margin-left: auto;
+}
+
+/* Vertical tab strip (collapsed state) */
+.side-panel-tabs--vert {
+  display: flex;
+  flex-direction: column;
+  border-bottom: none;
+  background: transparent;
+  width: 100%;
+  padding: 4px 0;
+}
+.side-panel-tabs--vert .side-panel-tab {
+  flex: 0 0 auto;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  text-orientation: mixed;
+  padding: 14px 0;
+  margin-bottom: 0;
+  border-bottom: none;
+  border-left: 2px solid transparent;
+  border-right: none;
+  letter-spacing: 0.06em;
+  font-size: 10px;
+  width: 100%;
+  text-align: center;
+}
+.side-panel-tabs--vert .side-panel-tab.active {
+  color: #8fb8ff;
+  border-left-color: #8fb8ff;
+  text-shadow: 0 0 16px rgba(143, 184, 255, 0.5);
+  border-bottom-color: transparent;
+}
+
+.panel-content {
+  padding: 14px;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.side-panel.empty {
+  color: #6a7588;
+}
+
+.side-panel h3 {
+  margin: 0 0 10px;
+  font-size: 12px;
+  color: #8fb8ff;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  text-shadow: 0 0 12px rgba(143, 184, 255, 0.3);
+}
+
+.room-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.room-heading-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.room-coords {
+  font-size: 11px;
+  color: #6a7588;
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 400;
+  text-shadow: none;
+}
+
+.room-center-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 3px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: #6a7588;
+  cursor: pointer;
+  line-height: 1;
+  transition: color 0.1s, border-color 0.1s, background 0.1s;
+}
+.room-center-btn:hover {
+  color: #b8c8e8;
+  border-color: #3a4560;
+  background: #1e2535;
+}
+
+.env-symbol-row {
+  display: flex;
+  gap: 8px;
+}
+
+.env-symbol-row .field {
+  flex: 1;
+  min-width: 0;
+}
+
+.env-field {
+  flex: 1;
+  min-width: 0;
+}
+
+.symbol-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.symbol-row input[type="text"],
+.symbol-row input:not([type]) {
+  flex: 1;
+  min-width: 0;
+}
+
+.symbol-color-input {
+  width: 28px;
+  height: 24px;
+  padding: 1px 2px;
+  border: 1px solid #2a3550;
+  border-radius: 3px;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.symbol-color-clear {
+  background: none;
+  border: none;
+  color: #7a8aaa;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 2px;
+  flex-shrink: 0;
+}
+.symbol-color-clear:hover { color: #e06060; }
+
+.side-panel h4 {
+  margin: 14px 0 6px;
+  font-size: 11px;
+  color: #8f97a6;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+.side-panel p {
+  margin: 6px 0;
+  color: #8f97a6;
+}
+
+.side-panel p.hint {
+  font-size: 12px;
+}
+
+.side-panel .hint-tool {
+  margin-top: 10px;
+  padding: 8px 10px;
+  background: rgba(6, 9, 16, 0.6);
+  border: 1px solid rgba(143, 184, 255, 0.07);
+  border-radius: 5px;
+  font-size: 11px;
+  color: #cfd6e0;
+}
+
+.side-panel .field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 8px 0;
+}
+
+.side-panel .field .label {
+  font-size: 11px;
+  color: #8f97a6;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.side-panel .field input,
+.side-panel .field textarea {
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 5px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.side-panel .field input:focus,
+.side-panel .field textarea:focus {
+  outline: none;
+  border-color: rgba(52, 100, 168, 0.7);
+  box-shadow: 0 0 0 2px rgba(52, 100, 168, 0.15);
+}
+
+/* Inline field group: fields side-by-side with a button at the end */
+.side-panel .field-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  margin: 8px 0 12px;
+}
+
+.side-panel .field-row > .field {
+  margin: 0;
+}
+
+.side-panel .field-row > button {
+  padding: 5px 8px;
+  font-size: 12px;
+  font-family: inherit;
+  border: 1px solid #444;
+  border-radius: 3px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Checkbox row: horizontal, no separate section label */
+.side-panel .field.checkbox-field {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  margin: 7px 0;
+}
+
+.side-panel .field.checkbox-field input[type="checkbox"] {
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.side-panel .field.checkbox-field span {
+  font-size: 13px;
+  color: #e6e9ef;
+  line-height: 1;
+}
+
+.side-panel .readonly {
+  color: #cfd6e0;
+  padding: 5px 0;
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 12px;
+}
+
+.exit-list {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.exit-row {
+  display: grid;
+  grid-template-columns: 90px 20px 1fr;
+  align-items: center;
+  gap: 6px;
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 12px;
+  padding: 4px 6px;
+  background: rgba(6, 9, 16, 0.5);
+  border: 1px solid rgba(143, 184, 255, 0.05);
+  border-radius: 4px;
+}
+
+.exit-row .dir {
+  color: #8fb8ff;
+}
+
+.exit-row .arrow {
+  color: #55606f;
+}
+
+.exit-row .exit-target {
+  background: transparent;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  color: #e6e9ef;
+  padding: 2px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: inherit;
+  text-align: left;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.exit-row .exit-target:hover {
+  background: rgba(31, 42, 60, 0.6);
+  border-color: rgba(143, 184, 255, 0.2);
+}
+
+.exit-row.empty {
+  color: #55606f;
+  grid-template-columns: 1fr;
+  text-align: center;
+  background: transparent;
+  border-color: transparent;
+}
+
+.exit-row.special {
+  grid-template-columns: 90px 20px 1fr 22px;
+}
+
+.exit-row.with-line {
+  grid-template-columns: 90px 20px 1fr 26px;
+}
+
+.exit-row.special.with-line {
+  grid-template-columns: 90px 20px 1fr 26px 22px;
+}
+
+.exit-line-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  color: #6a7588;
+  cursor: pointer;
+  width: 22px;
+  height: 20px;
+  padding: 0;
+  border-radius: 3px;
+  font-size: 13px;
+  line-height: 1;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.exit-line-btn:hover {
+  color: #cfe1ff;
+  border-color: rgba(52, 100, 168, 0.6);
+  background: rgba(30, 53, 83, 0.4);
+}
+
+.exit-line-btn.has-line {
+  border-color: rgba(52, 100, 168, 0.5);
+  background: rgba(6, 9, 16, 0.6);
+}
+
+.exit-line-btn .cl-swatch {
+  width: 12px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+.exit-line-icon {
+  font-family: ui-monospace, Consolas, monospace;
+  font-weight: 700;
+  font-size: 12px;
+}
+
+.cl-form-inline {
+  margin: 2px 0 6px;
+}
+
+.exit-remove {
+  background: transparent;
+  border: none;
+  color: #55606f;
+  cursor: pointer;
+  font-size: 11px;
+  padding: 0 2px;
+  line-height: 1;
+  border-radius: 2px;
+  transition: color 0.15s, background 0.15s;
+}
+
+.exit-remove:hover {
+  color: #ff7f7f;
+  background: rgba(32, 10, 10, 0.7);
+}
+
+.special-exits-list {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.special-exits-list .compass-cell {
+  height: auto;
+}
+
+.special-exits-list .cc-label {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.special-exit-add {
+  display: flex;
+  gap: 4px;
+  margin-top: 6px;
+  align-items: center;
+}
+
+.special-exit-add input {
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 0 6px;
+  height: 24px;
+  box-sizing: border-box;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: inherit;
+  flex: 1;
+}
+
+.special-exit-add button:not(.cc-pick-btn) {
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  padding: 4px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+  white-space: nowrap;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.special-exit-add button:not(.cc-pick-btn):disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.special-exit-add .cc-exit-add {
+  width: auto;
+  flex-shrink: 0;
+}
+
+.special-exit-add .cc-exit-input {
+  width: 60px;
+  flex: none;
+}
+
+.userdata-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 22px;
+  gap: 3px 4px;
+  align-items: center;
+}
+
+.userdata-row {
+  display: contents;
+}
+
+.ud-key {
+  font-size: 12px;
+  color: #8fb8ff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ud-value {
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  border-radius: 4px;
+  padding: 2px 5px;
+  font-size: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+.ud-value:focus {
+  outline: none;
+  border-color: rgba(143, 184, 255, 0.35);
+}
+
+.ud-delete {
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+  color: #55606f;
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+  padding: 0 4px 1px;
+  margin: 0;
+  border-radius: 3px;
+  line-height: 1;
+  width: 22px;
+  height: 22px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  box-sizing: border-box;
+}
+
+.ud-delete:hover {
+  color: #e6e9ef;
+  background: rgba(31, 42, 60, 0.6);
+}
+
+.userdata-empty {
+  grid-column: 1 / -1;
+  color: #55606f;
+  font-size: 12px;
+  text-align: center;
+  padding: 4px 0;
+}
+
+.userdata-add {
+  display: contents;
+}
+
+.ud-new-key,
+.ud-new-val {
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  border-radius: 4px;
+  padding: 2px 5px;
+  font-size: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+.ud-new-key:focus,
+.ud-new-val:focus {
+  outline: none;
+  border-color: rgba(143, 184, 255, 0.35);
+}
+
+.ud-add {
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+  color: #55606f;
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+  padding: 0 4px 1px;
+  margin: 0;
+  border-radius: 3px;
+  line-height: 1;
+  width: 22px;
+  height: 22px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  box-sizing: border-box;
+}
+
+.ud-add:hover {
+  color: #e6e9ef;
+  background: rgba(31, 42, 60, 0.6);
+}
+
+.ud-add:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* Compass rose exits */
+.compass-rose {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3px;
+}
+
+.compass-extra {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3px;
+  margin-top: 3px;
+}
+
+.compass-vert-spacer {
+  /* invisible column-spacer keeping Up/Down and In/Out symmetrical */
+}
+
+.compass-cell {
+  background: rgba(8, 12, 20, 0.55);
+  border: 1px solid rgba(143, 184, 255, 0.07);
+  border-radius: 5px;
+  padding: 4px 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  height: 86px;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.compass-extra .compass-cell {
+  height: 86px;
+}
+
+.compass-cell.compass-center {
+  align-items: center;
+  justify-content: center;
+  border-style: dashed;
+  border-color: rgba(143, 184, 255, 0.06);
+  gap: 4px;
+}
+
+.compass-cell .cc-room-lock-btn {
+  background: rgba(5, 8, 15, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.08);
+  border-radius: 3px;
+  padding: 0;
+  width: 28px;
+  height: 22px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #4a6070;
+  box-sizing: border-box;
+  transition: border-color 0.15s, color 0.15s;
+}
+.compass-cell .cc-room-lock-btn:hover { border-color: rgba(52, 100, 168, 0.6); color: #8fb8ff; }
+.compass-cell .cc-room-lock-btn.lock-active { color: #f07070; border-color: rgba(92, 28, 28, 0.8); }
+
+.cc-room-weight {
+  background: rgba(5, 8, 15, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.07);
+  color: #55606f;
+  font-size: 10px;
+  font-family: ui-monospace, Consolas, monospace;
+  width: 36px;
+  height: 20px;
+  padding: 0 3px;
+  border-radius: 2px;
+  text-align: center;
+  -moz-appearance: textfield;
+}
+.cc-room-weight::-webkit-outer-spin-button,
+.cc-room-weight::-webkit-inner-spin-button { -webkit-appearance: none; }
+.cc-room-weight:focus { border-color: rgba(52, 100, 168, 0.7); outline: none; color: #e6e9ef; }
+
+.cc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.cc-header-btn-slot {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.cc-middle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cc-dim {
+  opacity: 0.22;
+  pointer-events: none;
+}
+
+.cc-weight-wrap {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+  color: #3a4a5a;
+}
+
+.cc-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: rgba(43, 51, 64, 0.8);
+  font-family: ui-monospace, Consolas, monospace;
+  letter-spacing: 0.04em;
+}
+
+.compass-cell.has-exit .cc-label {
+  color: #8fb8ff;
+}
+
+.cc-target {
+  background: transparent;
+  border: none;
+  color: #8f97a6;
+  cursor: pointer;
+  font-size: 10px;
+  font-family: ui-monospace, Consolas, monospace;
+  padding: 1px 0;
+  text-align: center;
+  display: block;
+  width: 100%;
+  transition: color 0.15s;
+}
+
+.cc-target:hover {
+  color: #8fb8ff;
+}
+
+.cc-stub-label {
+  display: block;
+  text-align: center;
+  font-size: 9px;
+  color: #55606f;
+  font-style: italic;
+  padding: 1px 0;
+}
+
+.cc-footer {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 3px;
+}
+
+/* Compass icon buttons — scoped under .compass-cell to beat .side-panel button specificity */
+.compass-cell .cc-door-btn,
+.compass-cell .cc-icon-btn {
+  background: rgba(5, 8, 15, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.07);
+  padding: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 24px;
+  font-size: 11px;
+  font-weight: 700;
+  font-family: ui-monospace, Consolas, monospace;
+  box-sizing: border-box;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+/* Door icon — color-coded by state */
+.compass-cell .cc-door-btn               { color: #5a7090; }
+.compass-cell .cc-door-btn:hover         { color: #8fb8ff; border-color: rgba(52, 100, 168, 0.6); }
+.compass-cell .cc-door-btn.door-open     { color: #4caf50; border-color: rgba(42, 92, 42, 0.7); }
+.compass-cell .cc-door-btn.door-closed   { color: #e6c84a; border-color: rgba(90, 78, 30, 0.7); }
+.compass-cell .cc-door-btn.door-locked   { color: #f07070; border-color: rgba(92, 28, 28, 0.7); }
+
+/* Lock / stub icon */
+.compass-cell .cc-icon-btn               { color: #5a7090; }
+.compass-cell .cc-icon-btn:hover         { color: #8fb8ff; border-color: rgba(52, 100, 168, 0.6); }
+.compass-cell .cc-icon-btn.lock-active   { color: #f07070; border-color: rgba(92, 28, 28, 0.7); }
+.compass-cell .cc-icon-btn.stub-active   { color: #e6c84a; border-color: rgba(90, 78, 30, 0.7); }
+.compass-cell .cc-icon-btn.cc-delete-btn { color: #7a4040; }
+.compass-cell .cc-icon-btn.cc-delete-btn:hover { color: #f07070; border-color: rgba(92, 28, 28, 0.7); }
+
+/* Stub + delete live in the header — match exit-line-btn 22×20 size */
+.cc-header-btn-slot .cc-icon-btn {
+  width: 22px;
+  height: 20px;
+  font-size: 10px;
+}
+
+/* Dim state (no exit) — override hover too so disabled buttons stay dim */
+.compass-cell .cc-dim,
+.compass-cell .cc-dim:hover { opacity: 0.2; pointer-events: none; border-color: rgba(143,184,255,0.06); color: #5a7090; }
+
+.cc-weight {
+  background: rgba(5, 8, 15, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.07);
+  color: #55606f;
+  font-size: 11px;
+  font-family: ui-monospace, Consolas, monospace;
+  width: 0;
+  flex: 1;
+  min-width: 0;
+  height: 24px;
+  padding: 0 3px;
+  border-radius: 2px;
+  -moz-appearance: textfield;
+}
+.cc-weight::-webkit-outer-spin-button,
+.cc-weight::-webkit-inner-spin-button { -webkit-appearance: none; }
+.cc-weight:focus { border-color: rgba(52, 100, 168, 0.7); outline: none; color: #e6e9ef; }
+
+.compass-cell.active {
+  border-color: rgba(52, 100, 168, 0.6);
+  background: rgba(14, 24, 37, 0.7);
+  box-shadow: inset 0 0 0 1px rgba(52, 100, 168, 0.15);
+}
+
+.compass-cell.picking-exit {
+  border-color: rgba(230, 200, 74, 0.7);
+  background: rgba(14, 18, 8, 0.7);
+  animation: pick-pulse 1s ease-in-out infinite alternate;
+}
+
+@keyframes url-progress-indeterminate {
+  0%   { transform: translateX(-100%); width: 40%; }
+  50%  { transform: translateX(150%);  width: 60%; }
+  100% { transform: translateX(250%);  width: 40%; }
+}
+
+@keyframes pick-pulse {
+  from { border-color: rgba(230, 200, 74, 0.7); box-shadow: 0 0 8px rgba(230, 200, 74, 0.1); }
+  to   { border-color: rgba(122, 100, 32, 0.4); box-shadow: none; }
+}
+
+.cc-exit-add {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+}
+
+.cc-exit-input {
+  background: rgba(5, 8, 15, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.07);
+  color: #55606f;
+  font-size: 9px;
+  font-family: ui-monospace, Consolas, monospace;
+  height: 24px;
+  width: 0;
+  flex: 1;
+  min-width: 0;
+  padding: 0 3px;
+  border-radius: 2px;
+  -moz-appearance: textfield;
+}
+.cc-exit-input::-webkit-outer-spin-button,
+.cc-exit-input::-webkit-inner-spin-button { -webkit-appearance: none; }
+.cc-exit-input:focus { border-color: rgba(52, 100, 168, 0.7); outline: none; color: #e6e9ef; }
+.cc-exit-input::placeholder { color: rgba(42, 53, 64, 0.8); }
+
+.compass-cell .cc-pick-btn,
+.special-exit-add .cc-pick-btn {
+  background: rgba(5, 8, 15, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.07);
+  border-radius: 3px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: #4a6070;
+  box-sizing: border-box;
+  transition: color 0.15s, border-color 0.15s;
+}
+.compass-cell .cc-pick-btn:hover,
+.special-exit-add .cc-pick-btn:hover { color: #8fb8ff; border-color: rgba(52, 100, 168, 0.6); }
+.compass-cell .cc-pick-btn.picking,
+.special-exit-add .cc-pick-btn.picking { color: #e6c84a; border-color: rgba(122, 100, 32, 0.7); }
+
+/* Environment field */
+.env-field-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.env-pick-btn {
+  width: 32px;
+  height: 24px;
+  border: 2px solid rgba(143, 184, 255, 0.15);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: border-color 0.15s;
+}
+
+.env-pick-btn:hover {
+  border-color: rgba(52, 100, 168, 0.6);
+}
+
+.env-id-label {
+  font-size: 12px;
+  color: #8f97a6;
+  font-family: ui-monospace, Consolas, monospace;
+}
+
+/* Env picker popup */
+.env-picker-popup {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  z-index: 200;
+  background: rgba(12, 17, 28, 0.9);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  border-radius: 8px;
+  padding: 8px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
+  min-width: 200px;
+  max-width: 280px;
+}
+
+.env-picker-filter {
+  width: 100%;
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 4px 7px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+  margin-bottom: 7px;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+
+.env-picker-filter:focus {
+  outline: none;
+  border-color: rgba(52, 100, 168, 0.7);
+  box-shadow: 0 0 0 2px rgba(52, 100, 168, 0.12);
+}
+
+.env-picker-scroll {
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.env-picker-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.env-picker-swatch {
+  width: 36px;
+  height: 36px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0 0 2px 0;
+  position: relative;
+  transition: transform 0.12s, border-color 0.12s;
+}
+
+.env-picker-swatch:hover {
+  border-color: #8fb8ff;
+  transform: scale(1.1);
+}
+
+.env-picker-swatch.selected {
+  border-color: #00e5ff;
+  box-shadow: 0 0 0 1px #00e5ff, 0 0 8px rgba(0, 229, 255, 0.3);
+}
+
+.env-picker-id {
+  font-size: 9px;
+  color: rgba(255,255,255,0.8);
+  text-shadow: 0 0 2px #000, 0 0 2px #000;
+  font-family: ui-monospace, Consolas, monospace;
+  line-height: 1;
+}
+
+/* Modal overlay */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  background: rgba(12, 17, 28, 0.88);
+  backdrop-filter: blur(24px);
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  border-radius: 10px;
+  width: 480px;
+  max-width: 95vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow:
+    0 24px 64px rgba(0,0,0,0.7),
+    0 0 0 1px rgba(255,255,255,0.03),
+    inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+.modal.modal-wide {
+  width: 560px;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid rgba(143, 184, 255, 0.08);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #8fb8ff;
+  letter-spacing: 0.03em;
+  text-shadow: 0 0 16px rgba(143, 184, 255, 0.35);
+}
+
+.modal-close {
+  background: transparent;
+  border: none;
+  color: #6a7588;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: color 0.15s, background 0.15s;
+}
+
+.modal-close:hover {
+  color: #e6e9ef;
+  background: rgba(31, 42, 60, 0.6);
+}
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.modal-add-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.modal-add-row input {
+  flex: 1;
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.modal-add-row input:focus {
+  outline: none;
+  border-color: rgba(52, 100, 168, 0.7);
+  box-shadow: 0 0 0 2px rgba(52, 100, 168, 0.15);
+}
+
+.modal-add-row button {
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  white-space: nowrap;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.modal-add-row button:hover:not(:disabled) {
+  background: rgba(52, 100, 168, 0.3);
+  border-color: rgba(143, 184, 255, 0.25);
+}
+
+.modal-add-row button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.modal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.modal-list-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: rgba(6, 9, 16, 0.5);
+  border-radius: 5px;
+  border: 1px solid rgba(143, 184, 255, 0.06);
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.modal-list-name {
+  flex: 1;
+  font-size: 13px;
+  color: #e6e9ef;
+  cursor: default;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modal-inline-edit {
+  flex: 1;
+  background: rgba(12, 17, 28, 0.8);
+  color: #e6e9ef;
+  border: none;
+  outline: 1px solid rgba(52, 100, 168, 0.6);
+  outline-offset: 0;
+  padding: 0 6px;
+  border-radius: 3px;
+  font-size: 13px;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.modal-list-meta {
+  font-size: 11px;
+  color: #6a7588;
+  font-family: ui-monospace, Consolas, monospace;
+  white-space: nowrap;
+}
+
+.modal-list-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.modal-list-actions button {
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 3px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.15s;
+}
+
+.modal-list-actions button:hover {
+  background: rgba(52, 80, 120, 0.4);
+}
+
+.modal-list-actions button.danger {
+  color: #ff8080;
+  border-color: rgba(58, 28, 28, 0.8);
+}
+
+.modal-list-actions button.danger:hover {
+  background: rgba(32, 14, 14, 0.8);
+}
+
+.modal-list-actions button.icon-btn {
+  padding: 3px 6px;
+  min-width: 24px;
+}
+
+.modal-empty {
+  color: #55606f;
+  font-size: 13px;
+  padding: 8px 0;
+  text-align: center;
+}
+
+/* Environment grid in modal */
+.env-grid-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.env-list-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  background: rgba(6, 9, 16, 0.5);
+  border: 1px solid rgba(143, 184, 255, 0.05);
+  border-radius: 4px;
+}
+
+.env-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  border: 1px solid rgba(143, 184, 255, 0.15);
+  flex-shrink: 0;
+}
+
+.env-list-id {
+  font-size: 12px;
+  font-family: ui-monospace, Consolas, monospace;
+  color: #8fb8ff;
+  width: 36px;
+}
+
+.env-list-builtin {
+  font-size: 11px;
+  color: #55606f;
+}
+
+.env-list-used {
+  font-size: 10px;
+  color: #7fff9f;
+  background: rgba(10, 26, 10, 0.7);
+  border: 1px solid rgba(26, 58, 26, 0.8);
+  padding: 1px 5px;
+  border-radius: 10px;
+}
+
+.env-remove {
+  background: transparent;
+  border: none;
+  color: #55606f;
+  cursor: pointer;
+  font-size: 12px;
+  margin-left: auto;
+  padding: 2px 4px;
+  border-radius: 3px;
+  transition: color 0.15s, background 0.15s;
+}
+
+.env-remove:hover {
+  color: #ff7f7f;
+  background: rgba(32, 10, 10, 0.7);
+}
+
+/* Custom line form in side panel */
+.cl-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  flex-shrink: 0;
+  border: 1px solid rgba(255,255,255,0.15);
+}
+
+.customline-row {
+  display: grid;
+  grid-template-columns: 14px 1fr auto 18px;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  background: rgba(6, 9, 16, 0.5);
+  border: 1px solid rgba(143, 184, 255, 0.05);
+  border-radius: 4px;
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 12px;
+  min-width: 0;
+}
+
+.side-panel .customline-name {
+  background: transparent;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  color: #e6e9ef;
+  padding: 2px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: inherit;
+  text-align: left;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+
+.side-panel .customline-name:hover {
+  background: rgba(31, 42, 60, 0.5);
+}
+
+.customline-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 8px;
+  background: rgba(31, 42, 60, 0.6);
+  color: #8f97a6;
+  font-size: 10px;
+  font-family: ui-monospace, Consolas, monospace;
+  line-height: 1;
+}
+
+.side-panel .customline-remove {
+  background: transparent;
+  border: none;
+  color: #55606f;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+  line-height: 1;
+  border-radius: 2px;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, background 0.15s;
+}
+
+.side-panel .customline-remove:hover {
+  color: #ff7f7f;
+  background: rgba(32, 10, 10, 0.7);
+}
+
+.cl-add-btn {
+  width: 100%;
+  background: transparent;
+  border: 1px dashed rgba(143, 184, 255, 0.12);
+  color: #6a7588;
+  padding: 5px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  text-align: left;
+  margin-top: 4px;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.cl-add-btn:hover {
+  border-color: rgba(52, 100, 168, 0.5);
+  color: #cfe1ff;
+}
+
+.cl-form {
+  background: rgba(6, 9, 16, 0.55);
+  border: 1px solid rgba(143, 184, 255, 0.07);
+  border-radius: 5px;
+  padding: 8px;
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cl-form-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #8f97a6;
+}
+
+.cl-form-label {
+  width: 44px;
+  flex-shrink: 0;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.cl-form select {
+  flex: 1;
+  background: rgba(12, 17, 28, 0.7);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 3px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+/* Area delete confirm panel */
+.area-delete-confirm {
+  background: rgba(14, 10, 10, 0.7);
+  border: 1px solid rgba(58, 28, 28, 0.8);
+  border-radius: 5px;
+  padding: 10px 12px;
+  margin-top: 2px;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.area-delete-confirm p {
+  margin: 0 0 8px;
+  color: #cfd6e0;
+}
+
+.area-delete-confirm strong {
+  color: #e6e9ef;
+}
+
+.area-delete-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.area-delete-actions button {
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.15s;
+}
+
+.area-delete-actions button:hover:not(:disabled) {
+  background: rgba(52, 80, 120, 0.4);
+}
+
+.area-delete-actions button.danger {
+  color: #ff8080;
+  border-color: rgba(58, 28, 28, 0.8);
+  background: rgba(21, 8, 8, 0.7);
+}
+
+.area-delete-actions button.danger:hover {
+  background: rgba(32, 14, 14, 0.8);
+}
+
+.area-move-row {
+  display: flex;
+  gap: 6px;
+}
+
+.area-move-row select {
+  flex: 1;
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 5px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.area-move-row button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.area-ud-section {
+  padding: 4px 8px 8px;
+  border-left: 2px solid rgba(143, 184, 255, 0.15);
+  margin: 0 0 4px 4px;
+}
+
+.map-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 12px;
+}
+
+.map-stat-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  padding: 3px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.map-stat-label {
+  color: #6a7588;
+}
+
+.map-stat-value {
+  color: #e6e9ef;
+  font-variant-numeric: tabular-nums;
+}
+
+.warnings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.warning-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  background: rgba(220, 160, 30, 0.08);
+  border: 1px solid rgba(220, 160, 30, 0.25);
+  border-radius: 4px;
+  padding: 5px 6px;
+  font-size: 12px;
+}
+
+.warning-icon {
+  color: #d4922a;
+  flex-shrink: 0;
+  line-height: 1.4;
+}
+
+.warning-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+
+.warning-text strong {
+  color: #e6c870;
+  font-weight: 600;
+}
+
+.warning-detail {
+  color: #8a96aa;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.warning-go-btn {
+  flex-shrink: 0;
+  background: rgba(220, 160, 30, 0.15);
+  border: 1px solid rgba(220, 160, 30, 0.35);
+  border-radius: 3px;
+  color: #e6c870;
+  cursor: pointer;
+  font-size: 11px;
+  padding: 2px 7px;
+}
+
+.warning-go-btn:hover {
+  background: rgba(220, 160, 30, 0.28);
+}
+
+/* Env manager modal — grid layout */
+.modal.modal-env {
+  width: 680px;
+  max-width: 95vw;
+  max-height: 85vh;
+}
+
+.env-modal-body {
+  flex-direction: row !important;
+  gap: 16px !important;
+  align-items: flex-start;
+  min-height: 0;
+}
+
+.env-modal-left {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.env-modal-right {
+  width: 180px;
+  flex-shrink: 0;
+}
+
+.env-filter-input {
+  flex: 1;
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 5px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.env-filter-input:focus {
+  outline: none;
+  border-color: rgba(52, 100, 168, 0.7);
+  box-shadow: 0 0 0 2px rgba(52, 100, 168, 0.12);
+}
+
+.env-tile-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 4px 6px;
+}
+
+.env-tile {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  border-radius: 5px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0 0 3px;
+  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
+}
+
+.env-tile:hover {
+  transform: scale(1.08);
+  border-color: #8fb8ff;
+  box-shadow: 0 0 12px rgba(143, 184, 255, 0.2);
+}
+
+.env-tile.selected {
+  border-color: #00e5ff;
+  box-shadow: 0 0 0 1px #00e5ff, 0 0 12px rgba(0, 229, 255, 0.25);
+}
+
+.env-tile.custom {
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
+}
+
+.env-tile-id {
+  font-size: 10px;
+  color: rgba(255,255,255,0.9);
+  text-shadow: 0 0 3px #000, 0 0 3px #000;
+  font-family: ui-monospace, Consolas, monospace;
+  line-height: 1;
+}
+
+.env-tile-badge {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  font-size: 8px;
+  background: rgba(0,0,0,0.6);
+  color: #ffdf80;
+  padding: 1px 3px;
+  border-radius: 2px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.env-tile-dot {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 6px;
+  height: 6px;
+  background: #7fff9f;
+  border-radius: 50%;
+  border: 1px solid rgba(0,0,0,0.4);
+  box-shadow: 0 0 4px rgba(127, 255, 159, 0.4);
+}
+
+/* Env detail panel */
+.env-detail {
+  background: rgba(6, 9, 16, 0.6);
+  border: 1px solid rgba(143, 184, 255, 0.08);
+  border-radius: 6px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.env-detail-swatch {
+  width: 100%;
+  height: 64px;
+  border-radius: 5px;
+  border: 1px solid rgba(143, 184, 255, 0.15);
+}
+
+.env-detail-id {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #8fb8ff;
+}
+
+.env-detail-tags {
+  margin: 0;
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.env-detail-label {
+  font-size: 11px;
+  color: #8f97a6;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.env-detail-empty {
+  background: rgba(6, 9, 16, 0.5);
+  border: 1px dashed rgba(143, 184, 255, 0.1);
+  border-radius: 6px;
+  padding: 16px 12px;
+  color: #55606f;
+  font-size: 13px;
+}
+
+.env-detail-input {
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 5px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.env-detail-input:focus {
+  outline: none;
+  border-color: rgba(52, 100, 168, 0.7);
+  box-shadow: 0 0 0 2px rgba(52, 100, 168, 0.12);
+}
+
+.env-detail-btn {
+  width: 100%;
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-family: inherit;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.env-detail-btn:hover:not(:disabled) {
+  background: rgba(52, 100, 168, 0.3);
+  border-color: rgba(143, 184, 255, 0.25);
+}
+
+.env-detail-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.env-detail-btn--danger {
+  color: #ff8080;
+  border-color: rgba(58, 28, 28, 0.8);
+}
+
+.env-detail-btn--danger:hover {
+  background: rgba(32, 14, 14, 0.8);
+}
+
+.env-tile-add {
+  background: transparent;
+  border: 2px dashed rgba(143, 184, 255, 0.12);
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.env-tile-add:hover {
+  border-color: #8fb8ff;
+  background: rgba(6, 9, 16, 0.6);
+}
+
+.env-tile-add.selected {
+  border-style: solid;
+}
+
+.env-tile-add-icon {
+  font-size: 22px;
+  color: #55606f;
+  line-height: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: color 0.15s;
+}
+
+.env-tile-add:hover .env-tile-add-icon {
+  color: #8fb8ff;
+}
+
+.modal-list-actions button.danger {
+  color: #ff8080;
+  border-color: rgba(58, 28, 28, 0.8);
+}
+
+.modal-list-actions button.danger:hover {
+  background: rgba(32, 14, 14, 0.8);
+}
+
+/* Side panel selects */
+.side-panel select {
+  background: rgba(6, 9, 16, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 5px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.side-panel select:focus {
+  outline: none;
+  border-color: rgba(52, 100, 168, 0.7);
+}
+
+.side-panel button {
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-family: inherit;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.side-panel button:hover:not(:disabled) {
+  background: rgba(52, 100, 168, 0.3);
+  border-color: rgba(143, 184, 255, 0.2);
+}
+
+.side-panel button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* ── Link selection panels (ExitPanel / CustomLineSelectPanel) ── */
+.link-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 0;
+}
+
+.link-info-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 13px;
+  color: #b0b8c6;
+}
+
+.link-info-row .label {
+  min-width: 48px;
+  flex-shrink: 0;
+  font-size: 11px;
+  color: #8f97a6;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.link-info-row .readonly {
+  padding: 0;
+}
+
+.link-info-row strong {
+  color: #e6e9ef;
+  min-width: 64px;
+}
+
+.link-info-row .exit-target {
+  margin-left: auto;
+}
+
+.link-info-row button {
+  background: rgba(31, 42, 60, 0.6);
+  color: #7cb8e0;
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  padding: 2px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.15s;
+}
+
+.link-info-row button:hover {
+  background: rgba(52, 80, 120, 0.4);
+}
+
+.link-delete-btn {
+  width: 100%;
+  background: rgba(58, 26, 26, 0.6) !important;
+  color: #ff6b6b !important;
+  border: 1px solid rgba(90, 42, 42, 0.8) !important;
+  padding: 6px !important;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.15s !important;
+}
+
+.link-delete-btn:hover:not(:disabled) {
+  background: rgba(74, 32, 32, 0.8) !important;
+}
+
+.exit-flow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.exit-flow .exit-target {
+  margin-left: 0;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.exit-flow-center {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.exit-dir-arrow {
+  color: #7cb8e0;
+  font-size: 14px;
+  padding: 0 2px;
+}
+
+.exit-dir-label {
+  color: #8a95a3;
+  font-size: 12px;
+}
+
+.link-delete-inline {
+  background: transparent !important;
+  border: none !important;
+  color: #ff6b6b !important;
+  cursor: pointer;
+  padding: 0 4px !important;
+  font-size: 12px;
+  opacity: 0.5;
+  flex-shrink: 0;
+  transition: opacity 0.15s !important;
+}
+
+.link-delete-inline:hover {
+  opacity: 1;
+}
+
+/* History panel */
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.history-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 8px;
+  padding: 5px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  border: 1px solid transparent;
+  text-align: left;
+  width: 100%;
+}
+
+.history-current {
+  background: rgba(30, 53, 83, 0.6);
+  border-color: rgba(52, 100, 168, 0.5) !important;
+  color: #cfe1ff !important;
+  cursor: default;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 1px rgba(52, 100, 168, 0.1);
+}
+
+.history-marker {
+  color: #8fb8ff;
+  font-size: 8px;
+  flex-shrink: 0;
+}
+
+.side-panel .history-done {
+  background: rgba(6, 9, 16, 0.5);
+  color: #b0b8c6;
+  border-color: transparent;
+}
+
+.side-panel .history-done:hover {
+  background: rgba(31, 42, 60, 0.5);
+  color: #e6e9ef;
+  border-color: rgba(143, 184, 255, 0.1);
+}
+
+.side-panel .history-undone {
+  background: transparent;
+  color: #3a4a5a;
+  border-color: transparent;
+}
+
+.side-panel .history-undone:hover {
+  background: rgba(6, 9, 16, 0.4);
+  color: #6a7588;
+  border-color: rgba(143, 184, 255, 0.05);
+}
+
+.history-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, Consolas, monospace;
+}
+
+.history-sub {
+  flex-basis: 100%;
+  padding-left: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, Consolas, monospace;
+  opacity: 0.45;
+  font-size: 11px;
+}
+
+.history-sep {
+  text-align: center;
+  font-size: 10px;
+  color: rgba(43, 51, 64, 0.8);
+  padding: 6px 0 4px;
+  letter-spacing: 0.04em;
+}
+
+.context-menu {
+  position: fixed;
+  z-index: 500;
+  background: rgba(10, 14, 24, 0.92);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  border-radius: 7px;
+  box-shadow:
+    0 8px 32px rgba(0,0,0,0.7),
+    0 0 0 1px rgba(255,255,255,0.03),
+    inset 0 1px 0 rgba(255,255,255,0.04);
+  padding: 3px;
+  min-width: 140px;
+}
+
+.context-menu-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  color: #e6e9ef;
+  padding: 6px 10px;
+  font: inherit;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.context-menu-item:hover {
+  background: rgba(52, 80, 120, 0.4);
+}
+
+.context-menu-item.danger {
+  color: #ff8080;
+}
+
+.context-menu-item.danger:hover {
+  background: rgba(58, 26, 26, 0.6);
+}
+
+.context-menu-form {
+  min-width: 200px;
+  padding: 3px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.context-menu-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #8fb8ff;
+  letter-spacing: 0.04em;
+  padding: 4px 6px 2px;
+  text-transform: uppercase;
+}
+
+.context-menu-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 4px;
+}
+
+.context-menu-field label {
+  font-size: 11px;
+  color: #6a7588;
+  letter-spacing: 0.03em;
+}
+
+.context-menu-field select,
+.context-menu-field input[type="number"] {
+  background: rgba(6, 9, 16, 0.7);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  border-radius: 4px;
+  padding: 4px 6px;
+  font-size: 12px;
+  font-family: inherit;
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+
+.context-menu-field select:focus,
+.context-menu-field input[type="number"]:focus {
+  outline: none;
+  border-color: rgba(52, 100, 168, 0.7);
+}
+
+.context-menu-coords {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 4px;
+  padding: 0 4px;
+}
+
+.context-menu-coords .context-menu-field {
+  padding: 0;
+}
+
+.context-menu-actions {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+}
+
+.context-menu-btn {
+  flex: 1;
+  background: rgba(31, 42, 60, 0.6);
+  color: #e6e9ef;
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  border-radius: 4px;
+  padding: 5px 8px;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.context-menu-btn:hover {
+  background: rgba(52, 80, 120, 0.4);
+}
+
+.context-menu-btn.primary {
+  background: rgba(52, 100, 168, 0.35);
+  border-color: rgba(143, 184, 255, 0.25);
+  color: #8fb8ff;
+}
+
+.context-menu-btn.primary:hover {
+  background: rgba(52, 100, 168, 0.55);
+}
+
+/* Help button */
+.help-btn {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid rgba(143, 184, 255, 0.2);
+  background: rgba(143, 184, 255, 0.06);
+  color: #8fb8ff;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+.help-btn:hover {
+  background: rgba(143, 184, 255, 0.15);
+  border-color: rgba(143, 184, 255, 0.4);
+}
+
+/* Help modal */
+.help-modal-body {
+  padding: 16px 18px 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.help-desc {
+  margin: 0;
+  font-size: 12px;
+  color: #8a94a6;
+  line-height: 1.6;
+}
+.help-desc code {
+  background: rgba(143, 184, 255, 0.1);
+  border-radius: 3px;
+  padding: 1px 4px;
+  font-size: 11px;
+  color: #8fb8ff;
+}
+.help-section-title {
+  margin: 4px 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #4a6080;
+}
+.help-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.help-table td {
+  padding: 4px 6px;
+  vertical-align: top;
+  color: #cfd6e0;
+  border-bottom: 1px solid rgba(143, 184, 255, 0.05);
+}
+.help-table tr:last-child td { border-bottom: none; }
+.help-table td:first-child {
+  white-space: nowrap;
+  padding-right: 10px;
+}
+.help-tool-name {
+  white-space: nowrap;
+  font-weight: 500;
+  color: #8fb8ff;
+  padding-right: 10px;
+}
+.help-tool-hint { color: #7a8494; }
+kbd {
+  display: inline-block;
+  padding: 1px 5px;
+  background: rgba(20, 28, 46, 0.9);
+  border: 1px solid rgba(143, 184, 255, 0.2);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: inherit;
+  color: #a8bcd8;
+  white-space: nowrap;
+}
+
+/* ── Swatch Palette ── */
+.swatch-palette {
+  position: fixed;
+  z-index: 20;
+  background: rgba(14, 20, 34, 0.97);
+  backdrop-filter: blur(18px);
+  border: 1px solid rgba(143, 184, 255, 0.18);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
+  min-width: 260px;
+  max-width: 380px;
+  user-select: none;
+}
+
+.swatch-palette-header {
+  display: flex;
+  align-items: center;
+  padding: 7px 10px;
+  cursor: grab;
+  border-bottom: 1px solid rgba(143, 184, 255, 0.08);
+  gap: 6px;
+}
+.swatch-palette-header:active { cursor: grabbing; }
+
+.swatch-palette-title {
+  flex: 1;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #8fb8ff;
+}
+
+.swatch-palette-close {
+  background: none;
+  border: none;
+  color: #55606f;
+  cursor: pointer;
+  padding: 2px 5px;
+  font-size: 12px;
+  border-radius: 3px;
+  line-height: 1;
+}
+.swatch-palette-close:hover { color: #e6e9ef; background: rgba(143, 184, 255, 0.1); }
+
+.swatch-set-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid rgba(143, 184, 255, 0.08);
+}
+
+.swatch-set-select {
+  flex: 1;
+  min-width: 80px;
+  background: rgba(10, 14, 22, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.14);
+  border-radius: 4px;
+  color: #e6e9ef;
+  font-size: 12px;
+  font-family: inherit;
+  padding: 3px 6px;
+  height: 26px;
+  cursor: pointer;
+}
+.swatch-set-select:focus { outline: none; border-color: rgba(143, 184, 255, 0.35); }
+
+.swatch-set-name-input {
+  flex: 1;
+  min-width: 80px;
+  background: rgba(10, 14, 22, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.25);
+  border-radius: 4px;
+  color: #e6e9ef;
+  font-size: 12px;
+  font-family: inherit;
+  padding: 3px 6px;
+  height: 26px;
+}
+.swatch-set-name-input:focus { outline: none; border-color: rgba(52, 100, 168, 0.7); }
+
+.swatch-icon-btn {
+  background: rgba(31, 42, 60, 0.5);
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  border-radius: 4px;
+  color: #8fb8ff;
+  cursor: pointer;
+  padding: 3px 7px;
+  font-size: 12px;
+  line-height: 1;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+.swatch-icon-btn:hover:not(:disabled) { background: rgba(52, 100, 168, 0.3); border-color: rgba(143, 184, 255, 0.25); }
+.swatch-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.swatch-icon-btn-danger { color: #ff8080; }
+.swatch-icon-btn-danger:hover:not(:disabled) { background: rgba(168, 52, 52, 0.3) !important; }
+
+.swatch-empty-hint {
+  font-size: 11px;
+  color: #55606f;
+  flex: 1;
+}
+
+.swatch-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 8px 8px;
+}
+
+.swatch-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(31, 42, 60, 0.5);
+  border: 1px solid rgba(143, 184, 255, 0.1);
+  border-radius: 5px;
+  padding: 4px 6px;
+  cursor: pointer;
+  font-size: 12px;
+  max-width: 160px;
+  transition: background 0.12s, border-color 0.12s;
+}
+.swatch-chip:hover { background: rgba(52, 100, 168, 0.2); border-color: rgba(143, 184, 255, 0.2); }
+.swatch-chip.active {
+  background: rgba(30, 53, 83, 0.7);
+  border-color: rgba(52, 100, 168, 0.65);
+  box-shadow: 0 0 8px rgba(52, 100, 168, 0.25);
+}
+.swatch-chip.editing { border-color: rgba(52, 100, 168, 0.4); }
+
+.swatch-chip-env {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid rgba(255,255,255,0.15);
+}
+
+.swatch-chip-symbol {
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 11px;
+  color: #00e5ff;
+  min-width: 10px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.swatch-chip-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #c8d4e8;
+  font-size: 12px;
+  min-width: 0;
+}
+
+.swatch-chip-edit,
+.swatch-chip-del {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 2px;
+  font-size: 11px;
+  opacity: 0;
+  transition: opacity 0.12s, color 0.12s;
+  flex-shrink: 0;
+  color: #55606f;
+  line-height: 1;
+}
+.swatch-chip:hover .swatch-chip-edit,
+.swatch-chip:hover .swatch-chip-del,
+.swatch-chip.active .swatch-chip-edit,
+.swatch-chip.active .swatch-chip-del { opacity: 1; }
+.swatch-chip-edit:hover { color: #8fb8ff !important; opacity: 1 !important; }
+.swatch-chip-del:hover { color: #ff8080 !important; opacity: 1 !important; }
+
+.swatch-add-btn {
+  background: rgba(31, 42, 60, 0.35);
+  border: 1px dashed rgba(143, 184, 255, 0.18);
+  border-radius: 5px;
+  color: #4a5568;
+  cursor: pointer;
+  padding: 4px 12px;
+  font-size: 15px;
+  line-height: 1;
+  transition: color 0.12s, border-color 0.12s;
+}
+.swatch-add-btn:hover { color: #8fb8ff; border-color: rgba(143, 184, 255, 0.4); }
+
+.swatch-edit-form {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  background: rgba(8, 12, 22, 0.6);
+  border-top: 1px solid rgba(143, 184, 255, 0.08);
+}
+
+.swatch-edit-name {
+  flex: 1;
+  min-width: 0;
+  background: rgba(10, 14, 22, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.2);
+  border-radius: 4px;
+  color: #e6e9ef;
+  font-size: 12px;
+  font-family: inherit;
+  padding: 3px 6px;
+  height: 26px;
+}
+.swatch-edit-name:focus { outline: none; border-color: rgba(52, 100, 168, 0.7); }
+
+.swatch-edit-symbol {
+  width: 44px;
+  flex-shrink: 0;
+  background: rgba(10, 14, 22, 0.7);
+  border: 1px solid rgba(143, 184, 255, 0.2);
+  border-radius: 4px;
+  color: #00e5ff;
+  font-size: 12px;
+  font-family: ui-monospace, Consolas, monospace;
+  padding: 3px 4px;
+  height: 26px;
+  text-align: center;
+}
+.swatch-edit-symbol:focus { outline: none; border-color: rgba(52, 100, 168, 0.7); }
+
+.swatch-env-picker-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.swatch-env-btn {
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  border: 1px solid rgba(255,255,255,0.2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.swatch-env-btn:hover { border-color: rgba(255,255,255,0.4); }
+
+.swatch-env-id {
+  font-size: 9px;
+  font-weight: 700;
+  color: rgba(255,255,255,0.9);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
+  pointer-events: none;
+}
+
+.swatch-env-picker-wrap .env-picker-popup {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  z-index: 100;
+}
+
+.swatch-edit-ok,
+.swatch-edit-cancel {
+  flex-shrink: 0;
+  background: rgba(31, 42, 60, 0.5);
+  border: 1px solid rgba(143, 184, 255, 0.12);
+  border-radius: 4px;
+  color: #8fb8ff;
+  cursor: pointer;
+  padding: 3px 7px;
+  font-size: 12px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+}
+.swatch-edit-ok:hover { background: rgba(52, 100, 168, 0.4); }
+.swatch-edit-cancel:hover { background: rgba(80, 40, 40, 0.4); color: #ff9090; }
+
+.swatch-empty {
+  padding: 10px 12px;
+  color: #55606f;
+  font-size: 11px;
+  text-align: center;
+}
+
+.swatch-pick-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: rgba(255, 208, 128, 0.07);
+  border-top: 1px solid rgba(255, 208, 128, 0.15);
+  font-size: 11px;
+  color: #ffd080;
+}
+.swatch-pick-banner span { flex: 1; }