:root {
  color-scheme: dark;
  --bg: #080808; --panel: #101318; --card: #1e1e1e; --line: #3b4652;
  --text: #e0e0e0; --muted: #9fb0c2; --lime: #4da6ff; --cyan: #7dc4ff;
  --orange: #ffcc00; --red: #ff5a52; --shadow: 0 18px 50px rgba(0,0,0,.38);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background-image: radial-gradient(circle at 10% 0%, rgba(77,166,255,.12), transparent 32rem), linear-gradient(135deg, #080808, #101318 55%, #050607); }
button, input, select { font: inherit; }
button { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; background: #242b33; color: var(--text); cursor: pointer; transition: .16s ease; }
button:hover { border-color: #6385a8; transform: translateY(-1px); }
button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
button.primary { background: var(--lime); border-color: var(--lime); color: #071525; font-weight: 800; }
button.secondary { background: #202d3a; }
button.danger { background: rgba(255,111,97,.12); border-color: rgba(255,111,97,.5); color: #ffc0b9; }
button.ghost { border-color: transparent; background: transparent; color: var(--muted); padding: .35rem .5rem; }
button.wide { flex: 1; }
.topbar { min-height: 86px; padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); background: rgba(8,10,13,.9); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 1000; }
.topbar h1 { margin: 0; font-size: clamp(1.35rem,2.5vw,2rem); letter-spacing: -.035em; }
.eyebrow { color: var(--lime); font-size: .68rem; font-weight: 900; letter-spacing: .16em; margin: 0 0 .15rem; }
.connection-pills { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; font-size: .75rem; font-weight: 800; }
.pill.ok { color: #dfff9d; background: rgba(187,244,81,.12); border-color: rgba(187,244,81,.45); }
.pill.warn { color: #ffd899; background: rgba(255,180,74,.1); border-color: rgba(255,180,74,.35); }
.pill.muted { color: var(--muted); }
.pill.bad { color: #ffc0b9; background: rgba(255,111,97,.1); border-color: rgba(255,111,97,.35); }
.workspace { display: grid; grid-template-columns: minmax(380px,1.2fr) minmax(420px,.8fr); min-height: calc(100vh - 86px); }
.map-panel { position: sticky; top: 86px; height: calc(100vh - 86px); border-right: 1px solid var(--line); }
#map { width: 100%; height: 100%; background: #0d1218; }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { background: rgba(8,11,15,.86) !important; color: #b7c6d5; }
.leaflet-control-attribution a { color: var(--cyan); }
.map-legend, .map-hint { position: absolute; z-index: 500; background: rgba(10,14,19,.92); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.map-legend { left: 1rem; bottom: 1rem; padding: .65rem .8rem; border-radius: 12px; display: flex; gap: .85rem; font-size: .75rem; }
.map-legend span { display: flex; gap: .35rem; align-items: center; }
.map-hint { right: 1rem; top: 1rem; max-width: 250px; padding: .65rem .8rem; border-radius: 10px; color: var(--muted); font-size: .75rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-dot.aircraft { background: var(--cyan); } .legend-dot.spawn { background: var(--orange); } .legend-dot.object { background: #8b7bff; }
.legend-box { width: 13px; height: 9px; display: inline-block; } .legend-box.hangar { background: rgba(187,244,81,.25); border: 1px solid var(--lime); }
.plane-icon, .spawn-icon, .hangar-icon, .object-icon, .route-debug-start-icon, .route-debug-target-icon { display: grid; place-items: center; border-radius: 50%; border: 2px solid; box-shadow: 0 5px 16px rgba(0,0,0,.45); font-weight: 900; }
.plane-icon { width: 26px; height: 26px; color: #061110; background: var(--cyan); border-color: white; }
.spawn-icon { width: 24px; height: 24px; color: #291704; background: var(--orange); border-color: white; }
.hangar-icon { width: 24px; height: 24px; color: #12200d; background: var(--lime); border-color: white; border-radius: 7px; }
.object-icon { width: 23px; height: 23px; color: white; background: #6657d9; border-color: #d8d2ff; font-size: .68rem; }
.object-icon.selected { width: 27px; height: 27px; background: #8b7bff; border-color: white; box-shadow: 0 0 0 4px rgba(139,123,255,.25), 0 5px 16px rgba(0,0,0,.5); }
.route-debug-start-icon { width: 25px; height: 25px; color: #071817; background: #54d7d0; border-color: white; font-size: .7rem; }
.route-debug-target-icon { width: 20px; height: 20px; color: #142006; background: #bbf451; border-color: white; font-size: .65rem; }
.leaflet-marker-draggable .route-debug-start-icon, .leaflet-marker-draggable .route-debug-target-icon { cursor: grab; }
.leaflet-marker-draggable:active .route-debug-start-icon, .leaflet-marker-draggable:active .route-debug-target-icon { cursor: grabbing; }
.control-panel { padding: 1rem; overflow: auto; background: rgba(8,10,13,.62); }
.card { background: linear-gradient(145deg, rgba(31,36,43,.98), rgba(22,26,31,.98)); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; margin-bottom: .85rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.identity-card { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: center; }
.identity-card > div { display: flex; flex-direction: column; }
.label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.section-title > div { display: flex; align-items: center; gap: .6rem; }
.section-title h2 { margin: 0; font-size: 1rem; }
.step { color: var(--lime); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.field-grid { display: grid; gap: .7rem; margin-top: .7rem; }
.field-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); } .field-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.field-grid.compact { align-items: end; }
label { color: var(--muted); font-size: .72rem; font-weight: 700; }
.field-label { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; }
input, select { width: 100%; margin-top: .32rem; padding: .65rem .7rem; border-radius: 9px; border: 1px solid var(--line); background: #0b0e12; color: var(--text); outline: none; }
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(84,215,208,.1); }
input[readonly] { color: #b7c4d0; background: #14191f; cursor: default; }
input[type="range"] { padding: 0; accent-color: var(--lime); } output { float: right; color: var(--text); margin-top: .18rem; }
.rotation-control { display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; gap: .4rem; align-items: center; margin-top: .32rem; }
.rotation-control input[type="range"] { min-width: 0; margin: 0; }
.rotation-step { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; font-size: 1.1rem; font-weight: 900; }
.rotation-field output { display: block; float: none; text-align: right; }
.nudge-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; gap: .4rem; align-items: stretch; }
.nudge-center { border: 1px solid var(--line); border-radius: 10px; padding: .35rem; text-align: center; font-size: .65rem; color: var(--muted); }
.nudge-center select { display: inline; width: 58px; padding: .2rem; margin: .1rem 0 0; }
.action-row { display: flex; gap: .6rem; } .action-row.wrap { flex-wrap: wrap; }
.live-preview-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; }
.live-preview-actions #previewBtn { width: 100%; min-width: 0; }
.live-preview-actions #clearBtn { width: auto; min-width: 0; padding-inline: .75rem; white-space: nowrap; }
.probe-row { display: grid; grid-template-columns: minmax(170px,.7fr) minmax(0,1.3fr); gap: .65rem; align-items: center; margin-top: .65rem; padding: .65rem; border: 1px solid rgba(84,215,208,.24); border-radius: 11px; background: rgba(84,215,208,.055); }
.probe-row span { color: var(--muted); font-size: .66rem; line-height: 1.4; }
.diagnostic-result { overflow-wrap: anywhere; }
.count-badge { border: 1px solid var(--line); border-radius: 999px; padding: .28rem .55rem; color: var(--muted); font-size: .68rem; font-weight: 800; }
.catalog-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; align-items: end; }
.catalog-row button { min-height: 40px; }
.object-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin-top: .75rem; max-height: 240px; overflow: auto; }
.object-list-item { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: .5rem; align-items: center; padding: .55rem; text-align: left; background: #10151b; }
.object-list-item:hover { transform: none; }
.object-list-item.selected { border-color: #8b7bff; background: rgba(139,123,255,.12); box-shadow: inset 0 0 0 1px rgba(139,123,255,.16); }
.object-list-item strong, .object-list-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-list-item strong { color: var(--text); font-size: .72rem; }
.object-list-item small { color: var(--muted); font-size: .61rem; margin-top: .12rem; }
.object-index { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #6657d9; color: white; font-size: .65rem; font-weight: 900; }
.object-empty { margin-top: .75rem; padding: .75rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .7rem; text-align: center; }
.object-editor { margin: .85rem 0 0; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; }
.object-editor:disabled { opacity: .48; }
.object-editor legend { padding: 0 .35rem; color: var(--text); font-size: .75rem; font-weight: 800; }
.object-nudge { display: grid; grid-template-columns: auto auto minmax(92px,1fr) auto auto; gap: .35rem; align-items: center; margin-top: .7rem; }
.object-nudge span { color: var(--muted); font-size: .62rem; text-align: center; }
.object-nudge select { display: inline; width: 58px; margin: 0 0 0 .2rem; padding: .25rem; }
.object-actions { margin-top: .7rem; justify-content: flex-end; }
.homebase-controls-card > summary::-webkit-details-marker,
.homebase-control-category > summary::-webkit-details-marker { display: none; }
.homebase-controls-summary { margin-bottom: 0; cursor: pointer; list-style: none; }
.homebase-controls-card[open] > .homebase-controls-summary { margin-bottom: .9rem; }
.collapse-indicator {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--cyan));
  border-radius: 50%;
}
.collapse-indicator::before,
.collapse-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%,-50%);
}
.collapse-indicator::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .16s ease; }
details[open] > summary .collapse-indicator::after { transform: translate(-50%,-50%) rotate(0deg); }
.homebase-controls-body > .toggle { margin-top: 0; }
.homebase-controls { display: grid; gap: .65rem; margin-top: .8rem; }
.homebase-control-category {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
.homebase-control-category-summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: .55rem;
  padding: .6rem .7rem;
  cursor: pointer;
  list-style: none;
  color: var(--text);
}
.homebase-control-category-summary strong { font-size: .78rem; letter-spacing: .015em; }
.homebase-control-category-summary .collapse-indicator { width: 20px; height: 20px; flex-basis: 20px; margin-left: .1rem; color: var(--muted); }
.homebase-control-category-count {
  min-width: 1.4rem;
  margin-left: auto;
  padding: .15rem .38rem;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 999px;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 850;
  text-align: center;
}
.homebase-control-category-body {
  padding: .2rem .7rem .7rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}
.homebase-control-tile-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,150px));
  gap: .6rem;
  justify-content: start;
}
.homebase-building-control-list { display: grid; gap: .6rem; }
.homebase-building-control-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,150px));
  gap: .6rem;
  justify-content: start;
}
.homebase-building-control-row + .homebase-building-control-row {
  padding-top: .6rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
}
.homebase-building-light-only { grid-column: 2; }
.homebase-control-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(44px,1fr) auto auto;
  align-items: start;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  padding: .7rem;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--line) 82%, var(--cyan));
  border-radius: 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--card) 88%, var(--cyan) 12%);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.homebase-control-tile:hover { transform: translateY(-1px); }
.homebase-control-tile:disabled { opacity: .5; }
.homebase-control-tile:disabled.is-pending { opacity: .82; }
.homebase-control-tile-name {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.homebase-control-pictogram {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 48px;
  height: 44px;
  color: var(--muted);
  transition: color .16s ease, filter .16s ease;
}
.homebase-control-pictogram-door {
  overflow: hidden;
  border: 3px solid currentColor;
  border-bottom-width: 4px;
  border-radius: 4px 4px 2px 2px;
}
.homebase-control-pictogram-door::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  height: 28px;
  border: 2px solid currentColor;
  background: repeating-linear-gradient(0deg, transparent 0 5px, currentColor 5px 6px);
  transition: transform .2s ease;
}
.homebase-control-tile-door.state-open .homebase-control-pictogram-door::before { transform: translateY(-22px); }
.homebase-control-pictogram-light::before,
.homebase-control-pictogram-light::after { content: none; }
.homebase-control-pictogram-light svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.homebase-control-pictogram-light .bulb-glow {
  fill: transparent;
  stroke: none;
  transition: fill .16s ease, filter .16s ease;
}
.homebase-control-pictogram-light .bulb-outline,
.homebase-control-pictogram-light .bulb-socket {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.homebase-control-tile-light.state-on .homebase-control-pictogram-light .bulb-glow {
  fill: currentColor;
  filter: drop-shadow(0 0 7px currentColor);
}
.homebase-control-pictogram-switch {
  width: 48px;
  height: 27px;
  margin-top: 8px;
  border: 3px solid currentColor;
  border-radius: 999px;
}
.homebase-control-pictogram-switch::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: currentColor;
  transition: transform .18s ease;
}
.homebase-control-tile-switch.is-active .homebase-control-pictogram-switch::before { transform: translateX(21px); }
.homebase-control-tile-function {
  overflow: hidden;
  color: var(--muted);
  font-size: .61rem;
  font-weight: 750;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.homebase-control-tile-status {
  margin-top: .18rem;
  overflow: hidden;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.homebase-control-tile-status.ok { color: var(--lime); }
.homebase-control-tile-status.bad,
.homebase-control-tile.has-error .homebase-control-tile-status { color: var(--red); }
.homebase-control-tile.is-pending .homebase-control-pictogram { animation: homebase-control-pulse 1s ease-in-out infinite; }
@keyframes homebase-control-pulse { 50% { opacity: .48; } }
.toggle { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; } .toggle input { width: auto; margin: 0; }
.result-line { margin: .75rem 0 0; color: #c9d9d4; font-size: .75rem; line-height: 1.45; }
.result-line.ok { color: #dfff9d; } .result-line.bad { color: #ffc0b9; }
.small-note { color: var(--muted); font-size: .7rem; line-height: 1.45; } code { color: var(--cyan); }
.route-debug-panel[hidden] { display: none; }
.route-debug-panel { display: grid; gap: .7rem; margin-top: .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(4,12,17,.34); }
.route-debug-panel > label { display: grid; gap: .35rem; }
.route-debug-panel .toggle { display: flex; }
.route-debug-panel .field-grid { margin-top: 0; }
.route-debug-panel .result-line { margin: 0; }
.route-debug-card { padding: .65rem .8rem; opacity: .72; }
.route-debug-card[open] { opacity: 1; }
.route-debug-card > summary { display: flex; align-items: center; gap: .55rem; cursor: pointer; list-style: none; }
.route-debug-card > summary::-webkit-details-marker { display: none; }
.route-debug-card > summary::after { content: '+'; margin-left: auto; color: var(--muted); font-weight: 900; }
.route-debug-card[open] > summary::after { content: '−'; }
.route-debug-card > summary strong { font-size: .76rem; }
.route-debug-body { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.route-debug-legend { display: flex; flex-wrap: wrap; gap: .45rem .8rem; color: var(--muted); font-size: .67rem; }
.route-debug-legend span { display: inline-flex; align-items: center; gap: .32rem; }
.route-swatch { display: inline-block; width: 1.25rem; height: .22rem; border-radius: 1rem; background: #ff645e; }
.route-swatch-path { background: #54d7d0; }
.route-swatch-raw { height: .12rem; background: repeating-linear-gradient(90deg, #d4dde0 0 4px, transparent 4px 7px); }
.person-route-title { align-items: center; margin-top: .85rem; }
.person-route-title h3 { margin: 0; font-size: .82rem; }
.person-route-title button { width: auto; }
.person-stops { display: grid; gap: .6rem; margin: .6rem 0; }
.person-stop { display: grid; gap: .5rem; padding: .65rem; border: 1px solid var(--line); border-radius: 7px; background: rgba(4,12,17,.28); }
.person-stop-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.person-stop-head strong { font-size: .74rem; }
.person-stop-remove { width: auto; padding: .35rem .55rem; }
.person-stop-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.person-stop-target { grid-column: 1 / -1; }
.person-stop-coordinate[hidden] { display: none; }
.build-progress { margin-top: .85rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: #0b0e12; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #202832; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--lime)); transition: width .25s ease; }
.build-progress ol { margin: .75rem 0 0; padding-left: 1.35rem; color: var(--muted); font-size: .7rem; line-height: 1.8; }
.build-progress li.active { color: var(--cyan); font-weight: 800; }
.build-progress li.done { color: #dfff9d; }
.build-progress li.failed { color: #ffc0b9; font-weight: 800; }
.help-box { margin-top: .8rem; padding: .7rem; border: 1px solid rgba(255,180,74,.35); border-radius: 11px; background: rgba(255,180,74,.06); color: #e9d8b9; font-size: .7rem; line-height: 1.5; }
.help-box summary { cursor: pointer; font-weight: 800; color: #ffd899; }
.help-box a { color: var(--cyan); }
.log-card pre { min-height: 135px; max-height: 260px; overflow: auto; white-space: pre-wrap; margin: 0; background: #07090c; border: 1px solid #27313c; border-radius: 10px; padding: .75rem; font: 11px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color: #b7c6d5; }

/* App-Designs: dieselbe Auswahl wie in der VFR-Multitool-Haupt-App. */
@font-face {
  font-family: 'MS33558';
  src: url('../MS33558.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}

html[data-theme="retro"] {
  --bg: #222428; --panel: #3c4045; --card: #656b72; --line: #24272a;
  --text: #f4f4f4; --muted: #ddd7c3; --lime: #f2c12e; --cyan: #f7dc78;
  --orange: #f2c12e; --red: #d93829; --shadow: 0 14px 34px rgba(0,0,0,.55);
}
html[data-theme="retro"] body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #222428;
  background-image: radial-gradient(circle at 50% -10%, rgba(255,255,255,.1), transparent 36rem), repeating-linear-gradient(85deg, transparent 0 2px, rgba(255,255,255,.018) 2px 4px), linear-gradient(180deg, #2c2f34, #181a1d);
}
html[data-theme="retro"] .topbar {
  border-bottom: 4px solid #0f1011;
  background: linear-gradient(180deg, #34373b, #1e2023 72%, #101112);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.45);
  backdrop-filter: none;
}
html[data-theme="retro"] .topbar h1 { font-family: Georgia, serif; font-style: italic; letter-spacing: .015em; text-shadow: 1px 2px 0 #242424; }
html[data-theme="retro"] .control-panel { background: rgba(28,30,33,.76); }
html[data-theme="retro"] .card {
  border: 3px solid;
  border-color: #969ca2 #26292c #202225 #878d93;
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 22%), linear-gradient(145deg, #6e737a, #4d5258);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.18), inset 0 -5px 10px rgba(0,0,0,.27), 0 10px 22px rgba(0,0,0,.36);
}
html[data-theme="retro"] button,
html[data-theme="retro"] input,
html[data-theme="retro"] select,
html[data-theme="retro"] .nudge-center {
  border-radius: 5px;
  border: 2px solid;
  border-color: #aeb3b8 #292c2f #242629 #9ca1a6;
  background: linear-gradient(180deg, #555b61, #303439);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 2px 3px rgba(0,0,0,.3);
}
html[data-theme="retro"] button.primary { color: #171300; border-color: #fff0a0 #8c6f05 #6d5600 #f6d85b; background: linear-gradient(180deg, #ffe66f, #d9a916); }
html[data-theme="retro"] button.danger { color: #fff; border-color: #ef8d84 #6b1d16 #57130e #dc756c; background: linear-gradient(#c64b3e, #84251d); }
html[data-theme="retro"] input,
html[data-theme="retro"] select { color: #fff6d2; background: #222529; border-color: #151719 #777d83 #777d83 #151719; }
html[data-theme="retro"] input[readonly] { color: #d4d4cf; background: #383c40; }
html[data-theme="retro"] .map-legend,
html[data-theme="retro"] .map-hint { border-radius: 6px; background: rgba(47,50,54,.94); backdrop-filter: none; }
html[data-theme="retro"] .object-list-item,
html[data-theme="retro"] .build-progress,
html[data-theme="retro"] .log-card pre { background: #292c30; }

html[data-theme="navcom"] {
  --bg: #090a0b; --panel: #202328; --card: #33373c; --line: #59616a;
  --text: #d8dde2; --muted: #a7afb7; --lime: #33ff33; --cyan: #77ff77;
  --orange: #d6b56b; --red: #d78272; --shadow: 0 16px 42px rgba(0,0,0,.7);
}
html[data-theme="navcom"] body {
  font-family: "Courier New", Courier, monospace;
  background-color: #090a0b;
  background-image: radial-gradient(circle at 50% -10%, rgba(255,255,255,.075), transparent 30rem), repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px), linear-gradient(135deg, #22262a, #0b0d0f 62%);
}
html[data-theme="navcom"] .topbar {
  border-bottom: 3px solid #050607;
  background: linear-gradient(180deg, #30343a, #15181b);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.13), 0 7px 18px rgba(0,0,0,.7);
  backdrop-filter: none;
}
html[data-theme="navcom"] .topbar h1 { color: var(--lime); font: 700 1.15rem/1.2 "Courier New", monospace; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 0 8px rgba(51,255,51,.5); }
html[data-theme="navcom"] .eyebrow { color: #a8afb6; }
html[data-theme="navcom"] .control-panel { background: rgba(10,12,14,.72); }
html[data-theme="navcom"] .card {
  border: 3px solid;
  border-color: #68717a #151719 #111315 #596169;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 14%), linear-gradient(145deg, #3b4046, #24282c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -8px 15px rgba(0,0,0,.28), 0 8px 20px rgba(0,0,0,.55);
}
html[data-theme="navcom"] button { border-radius: 3px; border-color: #6c747c #181a1c #111315 #555d65; background: linear-gradient(#3c4146, #222529); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 4px #000; }
html[data-theme="navcom"] button.primary {
  color: #eef2f5;
  border-color: #737d86 #17191b #0e1012 #626b74;
  background: linear-gradient(#4b5157, #292d31);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px #000;
  text-shadow: none;
}
html[data-theme="navcom"] button.primary:active {
  border-color: #17191b #737d86 #626b74 #0e1012;
  background: linear-gradient(#24282c, #3b4147);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55);
  transform: translateY(1px);
}
html[data-theme="navcom"] button.danger { color: #ff9588; border-color: #7a3931; background: #1d0d0b; }
html[data-theme="navcom"] input,
html[data-theme="navcom"] select { border-radius: 3px; border-color: #111 #525b63 #525b63 #111; color: var(--lime); background: #050706; font-family: "Courier New", monospace; box-shadow: inset 0 0 9px rgba(51,255,51,.06); }
html[data-theme="navcom"] input[readonly] { color: #9fb89f; background: #0c100d; }
html[data-theme="navcom"] input:focus,
html[data-theme="navcom"] select:focus { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(51,255,51,.13), inset 0 0 9px rgba(51,255,51,.08); }
html[data-theme="navcom"] label { font-size: .78rem; line-height: 1.35; }
html[data-theme="navcom"] .count-badge { font-size: .74rem; }
html[data-theme="navcom"] .object-list-item { grid-template-columns: 27px minmax(0,1fr); padding: .62rem; }
html[data-theme="navcom"] .object-list-item strong { font-size: .84rem; line-height: 1.25; }
html[data-theme="navcom"] .object-list-item small { font-size: .7rem; line-height: 1.3; margin-top: .16rem; }
html[data-theme="navcom"] .object-index { width: 25px; height: 25px; font-size: .72rem; }
html[data-theme="navcom"] .object-editor legend { font-size: .82rem; }
html[data-theme="navcom"] .object-nudge span,
html[data-theme="navcom"] .homebase-control-heading span { font-size: .7rem; }
html[data-theme="navcom"] .homebase-control-heading strong { font-size: .84rem; }
html[data-theme="navcom"] .small-note,
html[data-theme="navcom"] .object-empty { font-size: .76rem; line-height: 1.55; }
html[data-theme="navcom"] .result-line { font-size: .8rem; }
html[data-theme="navcom"] .map-legend,
html[data-theme="navcom"] .map-hint { font-size: .8rem; line-height: 1.4; }
html[data-theme="navcom"] .map-legend,
html[data-theme="navcom"] .map-hint,
html[data-theme="navcom"] .object-list-item,
html[data-theme="navcom"] .build-progress,
html[data-theme="navcom"] .log-card pre { border-radius: 3px; background: rgba(5,8,6,.94); }
html[data-theme="navcom"] .log-card pre { color: var(--lime); }

html[data-theme="ops1940"] {
  --bg: #080705; --panel: #11100d; --card: #181611; --line: #745628;
  --text: #ead8ab; --muted: #c3a66f; --lime: #d0a44f; --cyan: #f2ca67;
  --orange: #f2ca67; --red: #b7432c; --shadow: 0 18px 48px rgba(0,0,0,.72);
}
html[data-theme="ops1940"] body {
  font-family: 'MS33558', "Courier New", monospace;
  background-color: #080705;
  background-image: radial-gradient(circle at 50% 12%, rgba(255,210,126,.1), transparent 34%), linear-gradient(rgba(8,7,5,.2), rgba(8,7,5,.72)), url('../assets/ui/ops1940/ops1940-desk-bg.png');
  background-size: auto, auto, cover;
  background-position: center;
}
html[data-theme="ops1940"] .topbar {
  border-bottom: 2px solid #4e3518;
  background: linear-gradient(180deg, rgba(37,32,24,.98), rgba(9,8,6,.98));
  box-shadow: inset 0 1px 0 rgba(255,235,176,.11), 0 9px 20px rgba(0,0,0,.72);
  backdrop-filter: none;
}
html[data-theme="ops1940"] .topbar h1 { color: #f0d38d; font-family: 'MS33558', "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="ops1940"] .control-panel { background: rgba(8,7,5,.68); }
html[data-theme="ops1940"] .card {
  border: 1px solid #030302;
  border-top-color: #665c4b;
  border-left-color: #4b4030;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 0, rgba(255,224,157,.055), transparent 42%), repeating-linear-gradient(90deg, rgba(255,240,196,.018) 0 1px, transparent 1px 42px), linear-gradient(180deg, #211e18, #0d0c09 66%, #070604);
  box-shadow: inset 0 2px 0 rgba(255,235,176,.07), inset 0 -14px 25px rgba(0,0,0,.48), 0 10px 24px rgba(0,0,0,.58);
}
html[data-theme="ops1940"] button { border-radius: 2px; border-color: #9a7231 #2b1a09 #251607 #7e5a25; color: #ead8ab; background: linear-gradient(#342a1d, #17120d); box-shadow: inset 0 1px rgba(255,228,166,.1), 0 2px 4px #000; }
html[data-theme="ops1940"] button.primary { color: #1b1105; border-color: #f0d28b #624113 #432906 #c49543; background: linear-gradient(#e7c36f, #a8772e); }
html[data-theme="ops1940"] button.danger { color: #f4cfb3; border-color: #a64a36 #3b0d07 #310a05 #873626; background: linear-gradient(#8f2419, #4c110c); }
html[data-theme="ops1940"] input,
html[data-theme="ops1940"] select { border-radius: 2px; border-color: #23170b #7a5b2e #7a5b2e #23170b; color: #f1d28a; background: #0c0906; font-family: "Courier New", monospace; }
html[data-theme="ops1940"] input[readonly] { color: #bba675; background: #17120c; }
html[data-theme="ops1940"] .map-legend,
html[data-theme="ops1940"] .map-hint,
html[data-theme="ops1940"] .object-list-item,
html[data-theme="ops1940"] .build-progress,
html[data-theme="ops1940"] .log-card pre { border-radius: 2px; background: rgba(14,11,7,.95); }
html[data-theme="ops1940"] .section-title h2,
html[data-theme="ops1940"] .object-editor legend { text-transform: uppercase; letter-spacing: .045em; }

html[data-theme="win95"] {
  color-scheme: light;
  --bg: #008080; --panel: #c0c0c0; --card: #c0c0c0; --line: #808080;
  --text: #000; --muted: #404040; --lime: #000080; --cyan: #000080;
  --orange: #808000; --red: #800000; --shadow: 5px 5px 0 rgba(0,0,0,.42);
}
html[data-theme="win95"] body {
  font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
  background: #008080;
}
html[data-theme="win95"] * { text-shadow: none !important; }
html[data-theme="win95"] .topbar {
  min-height: 64px;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  background: #c0c0c0;
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="win95"] .topbar h1 { color: #000080; font-size: 1.25rem; letter-spacing: 0; }
html[data-theme="win95"] .eyebrow { color: #000; }
html[data-theme="win95"] .workspace { min-height: calc(100vh - 64px); }
html[data-theme="win95"] .map-panel { top: 64px; height: calc(100vh - 64px); border-color: #404040; }
html[data-theme="win95"] .control-panel { background: #008080; }
html[data-theme="win95"] .card,
html[data-theme="win95"] .object-editor,
html[data-theme="win95"] .nudge-center,
html[data-theme="win95"] .build-progress {
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
  color: #000;
  background: #c0c0c0;
  box-shadow: 3px 3px 0 rgba(0,0,0,.34);
}
html[data-theme="win95"] button {
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
  color: #000;
  background: #c0c0c0;
  box-shadow: 1px 1px 0 #000;
  transition: none;
}
html[data-theme="win95"] button:hover { border-color: #fff #404040 #404040 #fff; transform: none; }
html[data-theme="win95"] button:active { border-color: #404040 #fff #fff #404040; box-shadow: none; transform: translate(1px,1px); }
html[data-theme="win95"] button.primary { color: #fff; border-color: #a0a0ff #000040 #000040 #a0a0ff; background: #000080; }
html[data-theme="win95"] button.danger { color: #fff; border-color: #ffaaaa #400000 #400000 #ffaaaa; background: #800000; }
html[data-theme="win95"] input,
html[data-theme="win95"] select {
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  border-radius: 0;
  color: #000;
  background: #fff;
  box-shadow: none;
}
html[data-theme="win95"] input[readonly] { color: #404040; background: #dfdfdf; }
html[data-theme="win95"] input:focus,
html[data-theme="win95"] select:focus { border-color: #000080; box-shadow: 0 0 0 1px #000080; }
html[data-theme="win95"] .pill,
html[data-theme="win95"] .count-badge { border-radius: 0; background: #dfdfdf; color: #000; }
html[data-theme="win95"] .pill.ok { color: #006000; }
html[data-theme="win95"] .pill.warn { color: #606000; }
html[data-theme="win95"] .pill.bad { color: #800000; }
html[data-theme="win95"] .map-legend,
html[data-theme="win95"] .map-hint {
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
  color: #000;
  background: #c0c0c0;
  backdrop-filter: none;
}
html[data-theme="win95"] .object-list-item { border-radius: 0; color: #000; background: #dfdfdf; }
html[data-theme="win95"] .object-list-item.selected { border-color: #000080; color: #fff; background: #000080; }
html[data-theme="win95"] .object-list-item.selected strong,
html[data-theme="win95"] .object-list-item.selected small { color: #fff; }
html[data-theme="win95"] .object-empty { border-radius: 0; border-color: #808080; }
html[data-theme="win95"] .log-card pre { border: 2px solid; border-color: #404040 #fff #fff #404040; border-radius: 0; color: #00ff00; background: #000; }
html[data-theme="win95"] .leaflet-control-attribution { color: #000; background: rgba(192,192,192,.92) !important; }
html[data-theme="win95"] .leaflet-bar a { border-radius: 0 !important; color: #000 !important; background: #c0c0c0 !important; }

html[data-theme="retro"] .probe-row,
html[data-theme="retro"] .homebase-control-group,
html[data-theme="navcom"] .probe-row,
html[data-theme="navcom"] .homebase-control-group,
html[data-theme="ops1940"] .probe-row,
html[data-theme="ops1940"] .homebase-control-group,
html[data-theme="win95"] .probe-row,
html[data-theme="win95"] .homebase-control-group { border-color: var(--line); background: color-mix(in srgb, var(--lime) 7%, transparent); }
html .homebase-control-tile.is-active {
  border-color: var(--lime);
  color: var(--lime);
  background: color-mix(in srgb, var(--lime) 15%, var(--card));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lime) 42%, transparent),
    0 8px 20px rgba(0,0,0,.18);
}
html .homebase-control-tile.is-active .homebase-control-pictogram,
html .homebase-control-tile.is-active .homebase-control-tile-status { color: var(--lime); }
html[data-theme="retro"] .homebase-control-tile.is-active {
  background: linear-gradient(180deg, #6f704f, #4c5138);
}
html[data-theme="navcom"] .homebase-control-tile.is-active {
  border-color: #33ff33;
  color: #33ff33;
  background: linear-gradient(180deg, #1d3521, #07100a);
  box-shadow: inset 0 0 0 1px rgba(51,255,51,.42), 0 0 14px rgba(51,255,51,.13);
}
html[data-theme="ops1940"] .homebase-control-tile.is-active {
  background: linear-gradient(180deg, #4a3b20, #181109);
}
html[data-theme="win95"] .homebase-control-tile.is-active {
  border-color: #a0a0ff #000040 #000040 #a0a0ff;
  color: #fff;
  background: #000080;
}
html[data-theme="win95"] .homebase-control-tile.is-active .homebase-control-tile-name,
html[data-theme="win95"] .homebase-control-tile.is-active .homebase-control-tile-function,
html[data-theme="win95"] .homebase-control-tile.is-active .homebase-control-tile-status,
html[data-theme="win95"] .homebase-control-tile.is-active .homebase-control-pictogram { color: #fff; }
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .topbar { position: static; top: auto; }
  .workspace { display: block; width: 100%; min-width: 0; overflow: visible; }
  .map-panel { position: -webkit-sticky; position: sticky; top: 0; z-index: 900; width: 100%; min-width: 0; height: 48vh; min-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,.38); }
  .control-panel { position: relative; z-index: 1; width: 100%; min-width: 0; overflow: visible; }
  html.mobile-map-pinned .workspace { padding-top: var(--mobile-map-height, 48vh); }
  html.mobile-map-pinned .map-panel { position: fixed; inset: 0 0 auto; width: auto; }
}
@media (max-width: 560px) {
  .topbar { align-items: flex-start; flex-direction: column; } .connection-pills { justify-content: flex-start; }
  .workspace { min-height: auto; } .map-panel { height: 43vh; min-height: 310px; }
  .field-grid.two, .field-grid.three { grid-template-columns: 1fr 1fr; } .field-grid.three label:last-child { grid-column: 1 / -1; }
  .identity-card { grid-template-columns: 1fr 1fr; } .identity-card button { grid-column: 1 / -1; }
  .section-title { align-items: flex-start; } .map-hint { display: none; }
  .probe-row { grid-template-columns: 1fr; }
  .homebase-global-control-grid, .homebase-control-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  html[data-theme="win95"] .map-panel { top: 0; height: 48vh; min-height: 360px; }
}

@media (max-width: 560px) {
  html[data-theme="win95"] .map-panel { height: 43vh; min-height: 310px; }
}