.rote-map-view.rote-zoom-workspace-enabled .rote-map-layout {
  grid-template-columns: minmax(0, 1fr);
}

.rote-map-view.rote-zoom-workspace-enabled #roteMissionBoard {
  display: none !important;
}

.rote-map-view.rote-zoom-workspace-enabled .rote-map-card {
  padding: 14px;
}

.rote-map-view.rote-zoom-workspace-enabled #roteGalaxyMap {
  isolation: isolate;
}

.rote-planet-zoom {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
  background: rgba(3, 8, 17, .96);
  backdrop-filter: blur(8px);
  animation: roteZoomIn .18s ease-out;
}

@keyframes roteZoomIn {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

.rote-zoom-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(97, 217, 238, .2);
  background:
    radial-gradient(circle at 50% 50%, rgba(36, 93, 126, .18), transparent 54%),
    #030914;
}

.rote-zoom-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 7, 15, .18), transparent 18%, transparent 82%, rgba(2, 7, 15, .38));
}

.rote-zoom-planet-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: saturate(1.04) contrast(1.03);
}

.rote-zoom-topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.rote-zoom-title {
  display: grid;
  gap: 2px;
  max-width: 72%;
  padding: 9px 11px;
  border: 1px solid rgba(62, 91, 127, .72);
  border-radius: 12px;
  background: rgba(3, 10, 21, .86);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .32);
  pointer-events: auto;
}

.rote-zoom-title span {
  color: #6edfee;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rote-zoom-title strong {
  color: #f0f7ff;
  font-size: 1.05rem;
}

.rote-zoom-title small {
  color: #8da0bd;
  font-size: .6rem;
  line-height: 1.35;
}

.rote-zoom-close {
  pointer-events: auto;
  min-width: 94px;
  padding: 9px 11px;
  border: 1px solid #37516f;
  border-radius: 10px;
  background: rgba(6, 15, 29, .92);
  color: #dce9f9;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.rote-zoom-close:hover {
  border-color: #70dff0;
  color: #f3fdff;
}

.rote-zoom-node {
  position: absolute;
  z-index: 6;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  padding: 4px;
  border: 2px solid #4c6684;
  border-radius: 50%;
  background: rgba(5, 13, 25, .9);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .48);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.rote-zoom-node img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rote-zoom-node > span {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 160px;
  padding: 3px 6px;
  border: 1px solid rgba(46, 67, 96, .86);
  border-radius: 6px;
  background: rgba(3, 9, 19, .94);
  color: #dce8f8;
  font-size: .52rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  white-space: normal;
}

.rote-zoom-node:hover,
.rote-zoom-node.selected {
  z-index: 9;
  transform: translate(-50%, -50%) scale(1.13);
  border-color: #72e0f1;
  box-shadow: 0 0 0 3px rgba(114, 224, 241, .12), 0 9px 22px rgba(0, 0, 0, .56);
}

.rote-zoom-node:hover > span,
.rote-zoom-node.selected > span {
  opacity: 1;
}

.rote-zoom-node.status-ready { border-color: #67edb6; }
.rote-zoom-node.status-blocked { border-color: #ef6e78; }
.rote-zoom-node.status-unloaded { border-color: #6f84a3; }
.rote-zoom-node.type-special,
.rote-zoom-node.type-reva { box-shadow: 0 0 0 2px rgba(179, 126, 255, .12), 0 7px 18px rgba(0, 0, 0, .48); }
.rote-zoom-node.type-deployment { border-color: #dfbd64; }
.rote-zoom-node.type-operations { border-color: #b480f0; }

.rote-zoom-inspector {
  position: relative;
  z-index: 10;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: linear-gradient(180deg, #071221, #050c18 70%);
}

.rote-zoom-inspector-head {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1d304a;
}

.rote-zoom-inspector-head > span {
  color: #6edfee;
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.rote-zoom-inspector-head h4 {
  margin: 0;
  color: #edf7ff;
  font-size: 1.05rem;
  line-height: 1.2;
}

.rote-zoom-inspector-head p {
  margin: 0;
  color: #8498b7;
  font-size: .65rem;
  line-height: 1.45;
}

.rote-zoom-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rote-zoom-badge {
  padding: 4px 6px;
  border: 1px solid #2a405f;
  border-radius: 999px;
  color: #adc0d9;
  background: #0a1728;
  font-size: .51rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.rote-zoom-badge.ready { color: #a7f8d1; border-color: rgba(103, 237, 182, .4); }
.rote-zoom-badge.blocked { color: #ffacaa; border-color: rgba(239, 110, 120, .42); }
.rote-zoom-badge.warning { color: #ffe29a; border-color: rgba(233, 191, 89, .42); }

.rote-zoom-section {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid #182941;
}

.rote-zoom-section:last-child { border-bottom: 0; }

.rote-zoom-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

.rote-zoom-section-head div {
  display: grid;
  gap: 2px;
}

.rote-zoom-section-head span {
  color: #6edfee;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.rote-zoom-section-head strong {
  color: #e4edf9;
  font-size: .76rem;
}

.rote-zoom-section-head b {
  color: #9eb1c9;
  font-size: .62rem;
}

.rote-zoom-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.rote-zoom-rule {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #203551;
  border-radius: 9px;
  background: #091625;
}

.rote-zoom-rule span,
.rote-zoom-rule strong {
  display: block;
}

.rote-zoom-rule span {
  color: #6f85a5;
  font-size: .49rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rote-zoom-rule strong {
  margin-top: 3px;
  color: #dce8f7;
  font-size: .66rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rote-zoom-rule-note {
  margin: 0;
  color: #869ab7;
  font-size: .61rem;
  line-height: 1.45;
}

.rote-zoom-warning {
  padding: 8px 9px;
  border: 1px solid rgba(230, 183, 72, .35);
  border-radius: 9px;
  background: rgba(130, 92, 17, .09);
  color: #e8cc84;
  font-size: .6rem;
  line-height: 1.45;
}

.rote-zoom-required-grid,
.rote-zoom-allowed-grid,
.rote-zoom-recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.rote-zoom-unit {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 6px;
  border: 1px solid #20344f;
  border-radius: 9px;
  background: #091524;
  color: #dce8f8;
}

button.rote-zoom-unit {
  width: 100%;
  text-align: left;
}

.rote-zoom-unit.ready { border-color: rgba(103, 237, 182, .34); }
.rote-zoom-unit.blocked { border-color: rgba(239, 110, 120, .34); }
.rote-zoom-unit.required { background: linear-gradient(135deg, rgba(29, 78, 101, .22), #091524 58%); }

.rote-zoom-unit-portrait {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #324c6c;
  border-radius: 50%;
  background: #13243a;
  color: #82dfed;
  font-size: .56rem;
  font-weight: 900;
}

.rote-zoom-unit-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rote-zoom-unit-copy {
  min-width: 0;
}

.rote-zoom-unit-copy strong,
.rote-zoom-unit-copy span,
.rote-zoom-unit-copy small {
  display: block;
}

.rote-zoom-unit-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .64rem;
}

.rote-zoom-unit-copy span {
  margin-top: 2px;
  color: #8ca0bc;
  font-size: .53rem;
}

.rote-zoom-unit-copy small {
  margin-top: 2px;
  color: #7185a4;
  font-size: .49rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rote-zoom-pool-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.rote-zoom-empty {
  padding: 10px;
  border: 1px dashed #2a3e5b;
  border-radius: 9px;
  color: #8498b6;
  font-size: .61rem;
  line-height: 1.45;
}

.rote-zoom-recommendation {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid #233952;
  border-radius: 10px;
  background: #081421;
}

.rote-zoom-recommendation > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.rote-zoom-recommendation > header div {
  display: grid;
  gap: 2px;
}

.rote-zoom-recommendation > header span {
  color: #70dfee;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.rote-zoom-recommendation > header strong {
  color: #e2edf9;
  font-size: .7rem;
}

.rote-zoom-recommendation > header b {
  color: #a8bad1;
  font-size: .49rem;
  text-transform: uppercase;
}

.rote-zoom-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rote-zoom-action-row button {
  padding: 7px 9px;
  font-size: .57rem;
}

.rote-zoom-source-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.rote-zoom-source-facts > div {
  padding: 7px 8px;
  border: 1px solid #1e314c;
  border-radius: 8px;
  background: #081320;
}

.rote-zoom-source-facts span,
.rote-zoom-source-facts strong {
  display: block;
}

.rote-zoom-source-facts span {
  color: #7287a6;
  font-size: .5rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rote-zoom-source-facts strong {
  margin-top: 3px;
  color: #d6e4f5;
  font-size: .62rem;
  line-height: 1.4;
}

.rote-zoom-strategy-slot .tbcp-card {
  margin: 0;
}

.rote-zoom-inspector [data-rote-zoom-operations] {
  width: 100%;
}

@media (max-width: 1080px) {
  .rote-planet-zoom {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
  }
  .rote-zoom-node {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 820px) {
  .rote-map-view.rote-zoom-workspace-enabled #roteGalaxyMap {
    min-height: 760px;
  }

  .rote-planet-zoom {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(430px, 58vh) minmax(280px, auto);
    overflow-y: auto;
  }

  .rote-zoom-stage {
    min-height: 430px;
    border-right: 0;
    border-bottom: 1px solid rgba(97, 217, 238, .2);
  }

  .rote-zoom-inspector {
    overflow: visible;
  }

  .rote-zoom-title {
    max-width: calc(100% - 108px);
  }
}

@media (max-width: 560px) {
  .rote-map-view.rote-zoom-workspace-enabled .rote-map-card {
    padding: 8px;
  }

  .rote-planet-zoom {
    grid-template-rows: minmax(390px, 54vh) auto;
  }

  .rote-zoom-stage {
    min-height: 390px;
  }

  .rote-zoom-node {
    width: 34px;
    height: 34px;
    padding: 3px;
  }

  .rote-zoom-node > span {
    max-width: 120px;
    font-size: .46rem;
  }

  .rote-zoom-rule-grid,
  .rote-zoom-required-grid,
  .rote-zoom-allowed-grid,
  .rote-zoom-recommend-grid {
    grid-template-columns: 1fr;
  }

  .rote-zoom-topbar {
    top: 7px;
    left: 7px;
    right: 7px;
  }

  .rote-zoom-title {
    padding: 7px 8px;
  }

  .rote-zoom-title small {
    display: none;
  }

  .rote-zoom-close {
    min-width: 82px;
    padding: 8px;
  }
}