:root {
  --bg-0: #060910;
  --bg-1: #0b111a;
  --panel: rgba(11, 16, 24, 0.9);
  --panel-solid: #0d131c;
  --border: rgba(126, 166, 206, 0.35);
  --border-soft: rgba(100, 132, 166, 0.24);
  --text: #d7e6f2;
  --muted: rgba(170, 192, 212, 0.72);
  --accent: #59b9e6;
  --accent-2: #48d1f3;
  --ok: #74d8c0;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Segoe UI", "Roboto Condensed", Tahoma, sans-serif;
  letter-spacing: 0.012em;
  background:
    radial-gradient(1100px 700px at 9% -8%, rgba(52, 95, 144, 0.15), transparent 66%),
    radial-gradient(900px 560px at 95% 8%, rgba(44, 78, 128, 0.12), transparent 62%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 68%);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(136, 175, 220, 0.016) 0px,
    rgba(136, 175, 220, 0.016) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.55;
}

body.embedMode {
  overflow: hidden;
}

body.embedMode::before {
  display: none;
}

body.embedMode .app {
  max-width: none;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body.embedMode .top {
  display: none;
}

body.embedMode .pagePanel {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100vh;
  box-shadow: none;
}

.app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
}

.mapPage,
.mapPage body {
  overflow: hidden;
}

.mapPage .app {
  max-width: none;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
}

.mapPage .top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 6;
}

.mapPage .top {
  display: none;
}

.mapPage .mapOrgSummary {
  position: absolute;
  top: 10px;
  left: 92px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 8px;
  pointer-events: none;
  color: rgba(205, 226, 247, 0.44);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

.mapPage .mapOrgStat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.mapPage .mapOrgLabel {
  opacity: 0.64;
}

.mapPage .mapOrgValue {
  opacity: 0.82;
  font-weight: 600;
}

.mapPage .mapBrandMark {
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  text-align: right;
}

.mapPage .mapBrandTitle {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(220, 236, 252, 0.34);
  text-transform: uppercase;
  line-height: 1.1;
}

.mapPage .mapBrandStage {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(208, 226, 244, 0.24);
  text-transform: uppercase;
  line-height: 1.1;
}

@media (max-width: 900px) {
  .mapPage .mapOrgSummary {
    gap: 12px;
    left: 74px;
    right: 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .mapPage .mapOrgLabel {
    display: none;
  }

  .mapPage .mapBrandMark {
    top: 10px;
    right: 12px;
  }

  .mapPage .mapBrandTitle {
    font-size: 14px;
    letter-spacing: 0.05em;
  }

  .mapPage .mapBrandStage {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}

.mapPage .content {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
}

.mapPage .mapDock {
  position: absolute;
  left: 12px;
  top: 16px;
  z-index: 9;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: auto;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 165, 214, 0.18);
  background: rgba(8, 14, 24, 0.24);
  backdrop-filter: blur(5px);
  box-shadow: none;
}

.mapPage .mapDock::after {
  display: none;
}

.mapPage .mapDockBtn {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(219, 236, 251, 0.68);
  border: 1px solid rgba(120, 165, 214, 0.18);
  border-radius: 999px;
  background: rgba(7, 12, 20, 0.18);
}

.mapPage .mapDockBtn[data-tooltip]::before,
.mapPage .mapDockBtn[data-tooltip]::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}

.mapPage .mapDockBtn[data-tooltip]::before {
  content: "";
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid rgba(9, 16, 27, 0.96);
}

.mapPage .mapDockBtn[data-tooltip]::after {
  content: attr(data-tooltip);
  left: calc(100% + 11px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  padding: 5px 9px;
  border: 1px solid rgba(120, 165, 214, 0.42);
  border-radius: 6px;
  background: rgba(9, 16, 27, 0.96);
  color: rgba(232, 244, 255, 0.95);
  font-size: 11px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.mapPage .mapDockBtn[data-tooltip]:hover::before,
.mapPage .mapDockBtn[data-tooltip]:hover::after,
.mapPage .mapDockBtn[data-tooltip]:focus-visible::before,
.mapPage .mapDockBtn[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.mapPage .mapDockBtnIcon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 34px 34px;
  opacity: 0.92;
}

.mapPage .mapDockBtn.hasIcon {
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
}

.mapPage .mapDockBtn.hasIcon .mapDockBtnIcon {
  display: inline-block;
  background-image: var(--dock-icon);
}

.mapPage .mapDockBtn.hasIcon .mapDockBtnLabel {
  display: none;
}

.mapPage .mapDockBtn:hover,
.mapPage .mapDockBtn.isOpen {
  border-color: rgba(109, 182, 255, 0.55);
  background: rgba(24, 43, 64, 0.38);
  color: rgba(232, 244, 255, 0.95);
}

.mapPage .mapDockBtn.isOpen {
  border-color: rgba(109, 182, 255, 0.48);
  background: rgba(109, 182, 255, 0.13);
  color: rgba(234, 246, 255, 0.92);
  box-shadow: 0 0 14px rgba(68, 224, 255, 0.16);
}

.mapPage .appWindowLayer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.mapPage .appWindow {
  position: absolute;
  pointer-events: auto;
  min-width: 440px;
  min-height: 360px;
  width: 780px;
  height: 540px;
  padding: 0;
  overflow: hidden;
}

.mapPage .appWindow .mapWindowHeader {
  margin: 0;
  padding: 4px 7px;
}

.mapPage .appWindowHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mapPage .appWindowActions {
  display: flex;
  gap: 6px;
}

.mapPage .appWindowAction {
  width: 20px;
  height: 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(210, 226, 240, 0.74);
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

.mapPage .appWindowAction:hover {
  background: rgba(90, 168, 212, 0.12);
  color: rgba(235, 245, 252, 0.98);
}

.mapPage .appWindowBody {
  height: calc(100% - 42px);
  background: rgba(8, 13, 20, 0.64);
}

.mapPage .appWindowFrame {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.mapPage .inventoryWindow {
  min-width: 480px;
  min-height: 360px;
}

.mapPage .inventoryWindowBody {
  overflow: auto;
  padding: 10px;
  background: rgba(8, 13, 20, 0.78);
}

.mapPage .inventoryWindow.stackWindow .inventoryWindowBody {
  background: rgba(6, 18, 30, 0.84);
}

.mapPage .inventoryWindowMeta {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mapPage .inventoryWorkspace {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 10px;
  min-height: 100%;
}

.mapPage .inventoryIndexPane,
.mapPage .inventoryMainPane {
  border: 1px solid var(--border-soft);
  background: rgba(8, 13, 22, 0.68);
  min-height: 0;
}

.mapPage .inventoryIndexTitle {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.14);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  color: var(--muted);
}

.mapPage .inventoryIndexList {
  padding: 6px;
  display: grid;
  gap: 5px;
}

.mapPage .inventoryIndexRow {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(11, 17, 27, 0.8);
  color: var(--text);
  text-align: left;
  border-radius: 5px;
  padding: 7px 8px;
}

.mapPage .inventoryIndexRow:hover {
  border-color: rgba(109, 182, 255, 0.32);
  background: rgba(24, 43, 64, 0.34);
}

.mapPage .inventoryIndexRow.isActive {
  border-color: rgba(109, 182, 255, 0.5);
  background: rgba(47, 99, 161, 0.22);
}

.mapPage .inventoryIndexRowTitle {
  font-size: 12px;
}

.mapPage .inventoryIndexRowSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mapPage .inventoryMainPane {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mapPage .inventoryMainHead {
  padding: 2px 2px 6px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.14);
}

.mapPage .stackWorkspace .inventoryMainHead {
  border-bottom-color: rgba(121, 196, 255, 0.3);
}

.mapPage .stackModeBadge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(121, 196, 255, 0.42);
  background: rgba(44, 120, 176, 0.24);
  color: rgba(221, 240, 255, 0.95);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mapPage .inventoryMainTitle {
  font-size: 12px;
  color: rgba(235, 245, 252, 0.95);
}

.mapPage .inventoryMainSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mapPage .inventoryCapSummary {
  margin-top: 6px;
  display: grid;
  gap: 4px;
}

.mapPage .inventoryCapSummaryLine,
.mapPage .inventoryCapSummaryPhases {
  font-size: 10px;
  color: var(--muted);
}

.mapPage .inventoryCapBar {
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(117, 160, 208, 0.38);
  background: rgba(11, 20, 33, 0.95);
  overflow: hidden;
}

.mapPage .inventoryCapBarFill {
  height: 100%;
  background: linear-gradient(90deg, rgba(76, 147, 221, 0.84), rgba(68, 224, 255, 0.9));
}

.mapPage .inventoryItemGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
  justify-content: start;
}

.mapPage .inventoryContainerGroupList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
}

.mapPage .inventoryContainerGroup {
  border: 1px solid rgba(120, 165, 214, 0.16);
  background: rgba(7, 12, 20, 0.6);
  border-radius: 5px;
  padding: 7px;
  display: grid;
  gap: 6px;
}

.mapPage .inventoryContainerGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(120, 165, 214, 0.12);
  padding-bottom: 5px;
}

.mapPage .containerGroupHeadLeft {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mapPage .containerPhaseBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
  flex-shrink: 0;
}

.mapPage .containerPhaseBadge-solid {
  background: rgba(180, 140, 80, 0.22);
  border: 1px solid rgba(200, 160, 90, 0.4);
  color: #d4b06a;
}

.mapPage .containerPhaseBadge-liquid {
  background: rgba(70, 140, 220, 0.22);
  border: 1px solid rgba(80, 160, 240, 0.4);
  color: #6abbd4;
}

.mapPage .containerPhaseBadge-gas {
  background: rgba(160, 100, 220, 0.22);
  border: 1px solid rgba(180, 120, 240, 0.4);
  color: #c4a0e8;
}

/* Phase-colored container group borders */
.mapPage .containerPhase-solid {
  border-color: rgba(200, 160, 90, 0.25);
}

.mapPage .containerPhase-liquid {
  border-color: rgba(80, 160, 240, 0.25);
}

.mapPage .containerPhase-gas {
  border-color: rgba(180, 120, 240, 0.25);
}

/* Empty container placeholder */
.mapPage .containerEmptySlot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px dashed rgba(120, 165, 214, 0.2);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 8px 12px;
}

.mapPage .containerEmptySlot-solid {
  color: rgba(200, 170, 100, 0.55);
  border-color: rgba(200, 160, 90, 0.2);
}

.mapPage .containerEmptySlot-liquid {
  color: rgba(100, 180, 240, 0.55);
  border-color: rgba(80, 160, 240, 0.2);
}

.mapPage .containerEmptySlot-gas {
  color: rgba(180, 140, 240, 0.55);
  border-color: rgba(180, 120, 240, 0.2);
}

.mapPage .inventoryContainerGroupTitle {
  font-size: 12px;
  color: rgba(235, 245, 252, 0.95);
}

.mapPage .inventoryContainerGroupSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mapPage .inventoryContainerItems {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  justify-content: start;
}

.stackItemStrip,
.mapPage .stackItemStrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
  justify-content: start;
}

.stackItemCard,
.mapPage .stackItemCard {
  min-height: 52px;
}

.inventoryItemCard,
.mapPage .inventoryItemCard {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(120, 165, 214, 0.14);
  background: rgba(7, 12, 20, 0.78);
  border-radius: 5px;
  min-height: 54px;
  padding: 7px;
}

.inventoryItemCard.isDraggable,
.mapPage .inventoryItemCard.isDraggable {
  cursor: grab;
}

.inventoryItemCard.isDragging,
.mapPage .inventoryItemCard.isDragging {
  opacity: 0.55;
}

.inventoryItemCard:hover,
.mapPage .inventoryItemCard:hover {
  border-color: rgba(109, 182, 255, 0.35);
}

.inventoryItemIcon,
.mapPage .inventoryItemIcon {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid rgba(144, 191, 236, 0.36);
}

.inventoryItemBody,
.mapPage .inventoryItemBody {
  min-width: 0;
}

.inventoryItemTitle,
.mapPage .inventoryItemTitle {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventoryItemSub,
.inventoryItemStats,
.mapPage .inventoryItemSub,
.mapPage .inventoryItemStats {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapPage .inventoryDropZone.isOver {
  border-color: rgba(109, 182, 255, 0.58) !important;
  box-shadow: inset 0 0 0 1px rgba(109, 182, 255, 0.3);
}

/* ── Hangar window layout ───────────────────────────────── */

.mapPage .hangarWindow {
  min-width: 580px;
  min-height: 400px;
}

.mapPage .hangarWorkspace {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 10px;
  min-height: 100%;
}

.mapPage .hangarIndexPane {
  border: 1px solid var(--border-soft);
  background: rgba(8, 13, 22, 0.68);
  min-height: 0;
  overflow-y: auto;
}

.mapPage .hangarMainPane {
  border: 1px solid var(--border-soft);
  background: rgba(8, 13, 22, 0.68);
  min-height: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.mapPage .hangarMainHead {
  padding: 2px 2px 6px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.14);
}

.mapPage .hangarSections {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 6px;
}

.mapPage .hangarSection {
  border: 1px solid rgba(120, 165, 214, 0.12);
  background: rgba(7, 12, 20, 0.52);
  border-radius: 5px;
  padding: 7px;
}

.mapPage .hangarSectionHead {
  padding-bottom: 5px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.10);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.mapPage .hangarModulesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  justify-content: start;
}

/* Stats rows inside delta-v and power sections */
.mapPage .hangarSection .dvRow,
.mapPage .hangarSection .pbRow {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
  color: var(--text);
}

.mapPage .hangarSection .dvRow .dvLabel,
.mapPage .hangarSection .pbRow .pbLabel {
  color: var(--muted);
}

.mapPage .hangarSection .dvRow .dvValue,
.mapPage .hangarSection .pbRow .pbValue {
  font-variant-numeric: tabular-nums;
}

.mapPage .hangarSection .fuelBarOuter {
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(117, 160, 208, 0.38);
  background: rgba(11, 20, 33, 0.95);
  overflow: hidden;
  margin-top: 4px;
}

.mapPage .hangarSection .fuelBarInner {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(76, 147, 221, 0.84), rgba(68, 224, 255, 0.9));
  transition: width 0.25s ease;
}

/* Transfer button on cargo items */
.mapPage .hangarTransferBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid rgba(109, 182, 255, 0.3);
  border-radius: 3px;
  background: rgba(44, 100, 160, 0.22);
  color: rgba(180, 220, 255, 0.92);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.mapPage .hangarTransferBtn:hover {
  background: rgba(55, 120, 190, 0.36);
  border-color: rgba(109, 182, 255, 0.52);
}

/* ── Eve-style square grid cells ────────────────────────── */

.invCell {
  position: relative;
  width: 72px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgba(120, 165, 214, 0.16);
  border-radius: 4px;
  background: rgba(7, 12, 20, 0.82);
  padding: 4px 2px 2px;
  cursor: default;
  user-select: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.invCell:hover {
  border-color: rgba(109, 182, 255, 0.42);
  box-shadow: 0 0 10px rgba(68, 180, 255, 0.12);
  z-index: 2;
}

.invCell.isDraggable {
  cursor: grab;
}

.invCell.isDragging {
  opacity: 0.45;
  border-color: rgba(109, 182, 255, 0.55);
}

.invCell.isDisabled {
  opacity: 0.35;
  pointer-events: none;
}

.invCellIcon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
}

.invCellLabel {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
  color: rgba(210, 228, 244, 0.88);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.invCellQty {
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 14px;
  padding: 0 3px;
  height: 14px;
  border-radius: 7px;
  background: rgba(22, 42, 68, 0.92);
  border: 1px solid rgba(109, 182, 255, 0.35);
  color: rgba(200, 228, 255, 0.95);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}

/* ── Info button (top-right "i" on each cell) ───────────── */

.invCellInfoBtn {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(140, 195, 255, 0.95);
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s, color 0.12s, text-shadow 0.12s;
  pointer-events: auto;
}

.invCell:hover .invCellInfoBtn {
  opacity: 1;
}

.invCellInfoBtn:hover {
  color: #fff;
  text-shadow: 0 0 6px rgba(130, 200, 255, 0.8);
}

/* When both qty badge and info button exist, shift qty badge left */
.invCell .invCellQty ~ .invCellInfoBtn,
.invCell .invCellInfoBtn ~ .invCellQty {
  /* info button stays top-right; qty badge shifts below */
}
.invCell:has(.invCellInfoBtn) .invCellQty {
  top: 20px;
}

/* ── Tooltip ────────────────────────────────────────────── */

.invTooltip {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid rgba(109, 182, 255, 0.36);
  border-radius: 6px;
  background: rgba(8, 14, 24, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(109, 182, 255, 0.08);
  pointer-events: none;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

.invTooltipTitle {
  font-size: 13px;
  font-weight: 700;
  color: rgba(235, 245, 252, 0.96);
  margin-bottom: 2px;
}

.invTooltipSub {
  font-size: 10px;
  color: rgba(163, 184, 203, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.invTooltipTech {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 10px;
}

.invTooltipTechTree {
  color: rgba(100, 200, 255, 0.85);
  font-weight: 600;
}

.invTooltipTechBranch {
  color: rgba(163, 184, 203, 0.62);
}

.invTooltipTechLevel {
  margin-left: auto;
  color: rgba(255, 210, 100, 0.9);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.invTooltipDivider {
  height: 1px;
  background: rgba(109, 182, 255, 0.18);
  margin: 6px 0;
}

.invTooltipRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 1px 0;
  font-size: 11px;
}

.invTooltipRowLabel {
  color: rgba(163, 184, 203, 0.82);
}

.invTooltipRowVal {
  color: rgba(220, 238, 255, 0.95);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Ship Tooltip (map hover) ───────────────────────────── */

.shipTooltip {
  position: fixed;
  z-index: 9999;
  min-width: 160px;
  max-width: 260px;
  padding: 8px 11px 9px;
  border: 1px solid rgba(109, 182, 255, 0.32);
  border-radius: 6px;
  background: rgba(6, 12, 22, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(109, 182, 255, 0.06);
  pointer-events: none;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

.shipTooltipTitle {
  font-size: 13px;
  font-weight: 700;
  color: rgba(235, 245, 252, 0.96);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shipTooltipOwner {
  font-size: 10px;
  color: rgba(163, 184, 203, 0.72);
  letter-spacing: 0.03em;
  margin-bottom: 1px;
}

.shipTooltipStatus {
  font-size: 10.5px;
  color: rgba(163, 184, 203, 0.82);
  margin-bottom: 2px;
}

.shipTooltipDivider {
  height: 1px;
  background: rgba(109, 182, 255, 0.15);
  margin: 5px 0 4px;
}

.shipTooltipRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 1px 0;
  font-size: 11px;
}

.shipTooltipLabel {
  color: rgba(163, 184, 203, 0.78);
}

.shipTooltipVal {
  color: rgba(220, 238, 255, 0.95);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Fleet Filter Toggle ────────────────────────────────── */

/* ── Body (Celestial) Tooltip ───────────────────────────── */

.bodyTooltip {
  position: fixed;
  z-index: 9999;
  min-width: 170px;
  max-width: 280px;
  padding: 8px 11px 9px;
  border: 1px solid rgba(109, 182, 255, 0.32);
  border-radius: 6px;
  background: rgba(6, 12, 22, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(109, 182, 255, 0.06);
  pointer-events: none;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

.bodyTooltipTitle {
  font-size: 13px;
  font-weight: 700;
  color: rgba(235, 245, 252, 0.96);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bodyTooltipDivider {
  height: 1px;
  background: rgba(109, 182, 255, 0.15);
  margin: 5px 0 4px;
}

.bodyTooltipRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 1px 0;
  font-size: 11px;
}

.bodyTooltipLabel {
  color: rgba(163, 184, 203, 0.78);
}

.bodyTooltipVal {
  color: rgba(220, 238, 255, 0.95);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bodyTooltipSitesHeader {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(163, 184, 203, 0.82);
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.bodyTooltipSiteRow {
  font-size: 10.5px;
  color: rgba(200, 218, 235, 0.88);
  padding: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bodyTooltipSiteProspected {
  color: rgba(100, 220, 130, 0.9);
  font-weight: 700;
  margin-right: 3px;
}

.bodyTooltipSiteUnknown {
  color: rgba(200, 180, 100, 0.7);
  font-weight: 700;
  margin-right: 3px;
}

.bodyTooltipSiteEligible {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 1px 0 2px 18px;
}

.bodyTooltipEligTag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(116, 216, 192, 0.15);
  color: rgba(116, 216, 192, 0.9);
  white-space: nowrap;
}

.bodyTooltipMuted {
  font-size: 10px;
  color: rgba(163, 184, 203, 0.55);
  font-style: italic;
}

.bodyTooltipHint {
  font-size: 10px;
  color: rgba(200, 210, 140, 0.85);
  font-style: italic;
  padding: 2px 0;
  line-height: 1.35;
}

.bodyTooltipHazard {
  font-size: 10px;
  color: #e05050;
  font-style: italic;
  padding: 2px 0;
  line-height: 1.35;
}

/* ── Fleet Filter Toggle (cont.) ────────────────────────── */

.fleetToggleBtn {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 6px 16px;
  border: 1px solid rgba(109, 182, 255, 0.28);
  border-radius: 16px;
  background: rgba(8, 14, 24, 0.82);
  backdrop-filter: blur(6px);
  color: rgba(180, 200, 220, 0.85);
  font-family: 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
}

.fleetToggleBtn:hover {
  background: rgba(30, 55, 85, 0.85);
  border-color: rgba(109, 182, 255, 0.45);
  color: rgba(220, 238, 255, 0.95);
}

.fleetToggleBtn.isActive {
  background: rgba(30, 65, 110, 0.78);
  border-color: rgba(109, 182, 255, 0.55);
  color: rgba(235, 248, 255, 1);
}

/* ── Item Info Modal (Eve Online-style) ─────────────────── */

.iiOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.iiModal {
  width: 440px;
  max-width: 94vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(109, 182, 255, 0.32);
  border-radius: 8px;
  background: rgba(8, 14, 26, 0.97);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(109, 182, 255, 0.08);
  font-family: 'Segoe UI', Roboto, sans-serif;
  color: rgba(210, 228, 244, 0.92);
  overflow: hidden;
}

/* Header */
.iiHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(109, 182, 255, 0.15);
  background: rgba(12, 22, 38, 0.6);
}

.iiHeaderIcon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.iiHeaderInfo {
  flex: 1;
  min-width: 0;
}

.iiHeaderTitle {
  font-size: 15px;
  font-weight: 700;
  color: rgba(235, 245, 252, 0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iiHeaderSub {
  font-size: 10px;
  color: rgba(140, 175, 210, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.iiCloseBtn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(109, 182, 255, 0.2);
  border-radius: 4px;
  background: transparent;
  color: rgba(180, 210, 240, 0.7);
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}

.iiCloseBtn:hover {
  background: rgba(220, 60, 60, 0.25);
  color: rgba(255, 120, 120, 0.95);
  border-color: rgba(255, 100, 100, 0.4);
}

/* Tab bar */
.iiTabBar {
  display: flex;
  border-bottom: 1px solid rgba(109, 182, 255, 0.15);
  background: rgba(10, 18, 30, 0.5);
  padding: 0 6px;
}

.iiTab {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(160, 190, 220, 0.65);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.12s, border-color 0.12s;
}

.iiTab:hover {
  color: rgba(200, 225, 250, 0.88);
}

.iiTab.active {
  color: rgba(130, 200, 255, 0.95);
  border-bottom-color: rgba(100, 185, 255, 0.7);
}

/* Body (tab panels) */
.iiBody {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.iiPanel {
  display: none;
  padding: 14px;
}

.iiPanel.active {
  display: block;
}

/* Description tab */
.iiDescText {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(200, 220, 240, 0.88);
}

.iiTagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}

.iiTag {
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(50, 90, 140, 0.35);
  border: 1px solid rgba(109, 182, 255, 0.2);
  font-size: 10px;
  color: rgba(150, 200, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Attributes tab */
.iiAttrTable {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.iiAttrRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 5px 4px;
  font-size: 11.5px;
  border-bottom: 1px solid rgba(109, 182, 255, 0.06);
}

.iiAttrRow:last-child {
  border-bottom: none;
}

.iiAttrLabel {
  color: rgba(150, 180, 210, 0.75);
}

.iiAttrValue {
  color: rgba(220, 240, 255, 0.92);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Recipe tab */
.iiRecipeCard {
  border: 1px solid rgba(109, 182, 255, 0.14);
  border-radius: 5px;
  background: rgba(14, 24, 40, 0.5);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.iiRecipeCard:last-child {
  margin-bottom: 0;
}

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

.iiRecipeName {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(220, 238, 255, 0.92);
}

.iiRecipeBadge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 8px;
}

.iiRecipeBadge.iiProduces {
  background: rgba(40, 140, 80, 0.35);
  border: 1px solid rgba(80, 200, 120, 0.35);
  color: rgba(120, 230, 160, 0.95);
}

.iiRecipeBadge.iiConsumes {
  background: rgba(140, 100, 40, 0.3);
  border: 1px solid rgba(200, 160, 80, 0.3);
  color: rgba(230, 200, 120, 0.9);
}

.iiRecipeSection {
  margin-bottom: 6px;
}

.iiRecipeSectionLabel {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(140, 175, 210, 0.55);
  margin-bottom: 3px;
}

.iiRecipeItem {
  font-size: 11.5px;
  color: rgba(200, 222, 244, 0.88);
  padding: 1px 0 1px 8px;
}

.iiItemLink {
  color: rgba(100, 190, 255, 0.92);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted rgba(100, 190, 255, 0.3);
  transition: color 0.1s, border-color 0.1s;
}

.iiItemLink:hover {
  color: rgba(160, 220, 255, 1);
  border-bottom-color: rgba(160, 220, 255, 0.6);
}

.iiRecipeMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(109, 182, 255, 0.08);
  font-size: 10px;
  color: rgba(150, 180, 210, 0.65);
}

.iiMetaSep {
  color: rgba(109, 182, 255, 0.25);
}

/* Utility states */
.iiLoading {
  text-align: center;
  padding: 30px 0;
  color: rgba(150, 190, 230, 0.6);
  font-size: 12px;
}

.iiEmpty {
  text-align: center;
  padding: 24px 0;
  color: rgba(150, 180, 210, 0.5);
  font-size: 12px;
  font-style: italic;
}

.mapPage .overview,
.mapPage .info {
  position: absolute;
  top: 16px;
  z-index: 5;
  backdrop-filter: blur(8px);
}

.mapPage .mapWindow {
  touch-action: none;
}

.mapPage .mapWindow.isDragging,
.mapPage .mapWindow.isResizing {
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.56),
    inset 0 0 0 1px rgba(220, 238, 255, 0.05);
}

/* Block child elements from capturing pointer events during drag/resize */
.mapPage .mapWindow.isDragging .appWindowBody,
.mapPage .mapWindow.isDragging .appWindowFrame,
.mapPage .mapWindow.isDragging .inventoryWindowBody,
.mapPage .mapWindow.isDragging .mapWindowBody,
.mapPage .mapWindow.isResizing .appWindowBody,
.mapPage .mapWindow.isResizing .appWindowFrame,
.mapPage .mapWindow.isResizing .inventoryWindowBody,
.mapPage .mapWindow.isResizing .mapWindowBody {
  pointer-events: none;
}

.mapPage .mapWindow.isSelected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(109, 182, 255, 0.52);
  box-shadow: 0 0 12px rgba(68, 224, 255, 0.16);
  pointer-events: none;
  z-index: 3;
}

.mapPage .mapWindowHeader {
  cursor: move;
  user-select: none;
  border-bottom: 1px solid rgba(120, 165, 214, 0.14);
  margin: -14px -14px 4px;
  padding: 4px 7px;
  background: linear-gradient(180deg, rgba(14, 23, 36, 0.58), rgba(9, 16, 25, 0));
}

.mapPage .mapWindowHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mapPage .mapWindowActions {
  display: flex;
  gap: 6px;
}

.mapPage .mapWindowAction {
  width: 20px;
  height: 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(210, 226, 240, 0.74);
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

.mapPage .mapWindow .titleSmall {
  margin-bottom: 0;
  line-height: 1.1;
}

.mapPage .mapWindow.isMinimized {
  min-height: 0 !important;
  height: 30px !important;
  overflow: hidden;
}

.mapPage .appWindow.isMinimized {
  min-height: 0 !important;
  height: 30px !important;
}

.mapPage .mapWindowAction:hover {
  background: rgba(90, 168, 212, 0.12);
  color: rgba(235, 245, 252, 0.98);
}

.mapPage .mapWindowBody {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 30px);
  max-height: none;
  padding-bottom: 2px;
}

.mapPage .mapWindowResize {
  position: absolute;
  z-index: 4;
  background: transparent;
}

.mapPage .mapWindowResize--n,
.mapPage .mapWindowResize--s {
  left: 10px;
  right: 10px;
  height: 10px;
}

.mapPage .mapWindowResize--n {
  top: -3px;
  cursor: ns-resize;
}

.mapPage .mapWindowResize--s {
  bottom: -3px;
  cursor: ns-resize;
}

.mapPage .mapWindowResize--e,
.mapPage .mapWindowResize--w {
  top: 10px;
  bottom: 10px;
  width: 10px;
}

.mapPage .mapWindowResize--e {
  right: -3px;
  cursor: ew-resize;
}

.mapPage .mapWindowResize--w {
  left: -3px;
  cursor: ew-resize;
}

.mapPage .mapWindowResize--ne,
.mapPage .mapWindowResize--nw,
.mapPage .mapWindowResize--se,
.mapPage .mapWindowResize--sw {
  width: 14px;
  height: 14px;
}

.mapPage .mapWindowResize--ne {
  right: -3px;
  top: -3px;
  cursor: nesw-resize;
}

.mapPage .mapWindowResize--nw {
  left: -3px;
  top: -3px;
  cursor: nwse-resize;
}

.mapPage .mapWindowResize--se {
  right: -3px;
  bottom: -3px;
  cursor: nwse-resize;
}

.mapPage .mapWindowResize--sw {
  left: -3px;
  bottom: -3px;
  cursor: nesw-resize;
}

.mapPage .overview {
  left: 160px;
  width: 300px;
  min-width: 240px;
  min-height: 220px;
  max-height: calc(100vh - 108px);
}

.mapPage .info {
  right: 16px;
  width: 320px;
  min-width: 260px;
  min-height: 280px;
  max-height: calc(100vh - 108px);
  overflow: hidden;
}

.mapPage .mapOverview {
  max-height: none;
  min-height: 120px;
  flex: 1 1 auto;
}

.mapPage .overview,
.mapPage .info {
  font-size: 12px;
}

.mapPage .titleSmall {
  margin-bottom: 5px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.mapPage .muted.small,
.mapPage .small {
  font-size: 12px;
}

.mapPage .stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  border-radius: 0;
  border: none;
  z-index: 1;
}

.mapPage .stage::after {
  display: none;
}

.mapPage .zoneJumpBar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 165, 214, 0.18);
  background: rgba(8, 14, 24, 0.24);
  backdrop-filter: blur(5px);
}

.zoneJumpBtn {
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(120, 165, 214, 0.18);
  background: rgba(7, 12, 20, 0.18);
  color: rgba(219, 236, 251, 0.68);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.zoneJumpBtn:hover {
  border-color: rgba(109, 182, 255, 0.55);
  background: rgba(24, 43, 64, 0.38);
  color: rgba(232, 244, 255, 0.95);
}

.zoneJumpBtn.isInOverview {
  border-color: rgba(109, 182, 255, 0.48);
  background: rgba(109, 182, 255, 0.13);
  color: rgba(234, 246, 255, 0.92);
  box-shadow: 0 0 14px rgba(68, 224, 255, 0.16);
}

.panel {
  background:
    linear-gradient(160deg, rgba(18, 30, 45, 0.16), transparent 34%),
    var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  padding: 10px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(220, 238, 255, 0.02);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109, 182, 255, 0.7));
}

.top {
  padding: 8px 10px;
}

.top .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.top .subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tabs {
  display: flex;
  gap: 6px;
  align-items: center;
}

.top .tabs {
  display: none;
}

.tab {
  display: inline-block;
  padding: 6px 10px;
  min-width: 70px;
  text-align: center;
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(99, 128, 162, 0.52);
  border-radius: 1px;
  color: rgba(194, 212, 228, 0.86);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(18, 24, 34, 0.96), rgba(11, 15, 22, 0.98));
  transition: 120ms ease;
}

.tab--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tab--icon::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-image: var(--tab-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.92;
}

.tab--contracts {
  --tab-icon: url("/static/img/dock/contractsicon.png");
}

.tab--missions {
  --tab-icon: url("/static/img/dock/missions.png");
}

.tab:hover {
  border-color: rgba(90, 168, 212, 0.72);
  color: rgba(219, 235, 247, 0.98);
}

.tab.active {
  background: linear-gradient(180deg, rgba(33, 124, 168, 0.46), rgba(20, 47, 66, 0.95));
  border-color: rgba(84, 180, 228, 0.82);
  color: #def6ff;
  box-shadow: inset 0 0 0 1px rgba(52, 206, 255, 0.14);
}

.tab.isTemplate {
  opacity: 0.38;
  font-style: italic;
}

.tab.isTemplate:hover {
  opacity: 0.6;
}

.tab.isTemplate.active {
  opacity: 0.55;
}

.content {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
}

.overview {
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mapOverview {
  margin-top: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: rgba(7, 12, 20, 0.72);
  overflow: auto;
  max-height: calc(100vh - 220px);
  min-height: 240px;
}

.ovHead,
.ovRowBtn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
}

.ovHead {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(218, 236, 252, 0.82);
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8, 13, 21, 0.96);
}

.ovNode {
  border-bottom: 1px solid rgba(120, 165, 214, 0.08);
}

.ovNode:last-child {
  border-bottom: none;
}

.ovGroup > summary {
  list-style: none;
  cursor: pointer;
}

.ovGroup > summary::-webkit-details-marker {
  display: none;
}

.ovRowBtn {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 3px 7px;
  min-height: 20px;
  text-align: left;
  font-weight: 500;
  font-size: 11px;
}

.ovFolderRow {
  width: 100%;
  min-height: 20px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ovSubFolder {
  border-left: 1px solid var(--border-soft);
  padding-left: 7px !important;
}

.ovPlanetGroup > summary {
  padding: 3px 7px;
}

.ovPlanetGroup > summary:hover {
  background: rgba(71, 127, 191, 0.14);
}

.ovPlanetGroup > summary::before {
  content: "▸";
  margin-right: 8px;
  color: var(--muted);
  font-size: 10px;
}

.ovPlanetGroup[open] > summary::before {
  content: "▾";
}

.ovFolderSelectBtn {
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: inherit;
  text-align: left;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: calc(100% - 18px);
  display: flex;
  align-items: center;
  min-width: 0;
}

.ovFolderSelectBtn:hover {
  color: rgba(167, 209, 255, 0.98);
}

.ovFolderSelectBtn:focus {
  outline: none;
  text-decoration: underline;
}

.ovZoneGroup > summary {
  list-style: none;
  cursor: pointer;
}

.ovZoneGroup > summary::-webkit-details-marker {
  display: none;
}

.ovZoneGroup > summary {
  padding: 3px 7px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.12);
}

.ovZoneRow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(198, 222, 250, 0.9);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ovAstroSymbol {
  font-size: 1.6em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.ovZoneGroup > summary::before {
  content: "▸";
  margin-right: 8px;
  color: var(--muted);
  font-size: 10px;
}

.ovZoneGroup[open] > summary::before {
  content: "▾";
}

.ovRowBtn:hover {
  background: rgba(71, 127, 191, 0.14);
}

.ovRowBtn:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(109, 182, 255, 0.45);
}

.ovRowStatic {
  cursor: default;
  user-select: none;
}

.ovName {
  font-size: 11px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ovTreePrefix {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre;
  margin-right: 4px;
  flex: 0 0 auto;
}

.ovTreeLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ovChildren {
  margin: 0;
  padding: 0;
  margin-left: 5px;
  border-left: 1px solid rgba(120, 165, 214, 0.2);
}

@media (max-width: 1240px) {
  .content {
    grid-template-columns: 1fr;
  }
  .mapOverview {
    max-height: 320px;
  }
}

.stage {
  height: calc(100vh - 128px);
  min-height: 540px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(112, 162, 220, 0.3);
  background-image: url("https://cdn.eso.org/images/screen/eso0932a.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  will-change: background-position;
  position: relative;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 8%, rgba(89, 149, 209, 0.14), transparent 45%),
    linear-gradient(180deg, rgba(5, 8, 14, 0.52), rgba(4, 6, 10, 0.7));
  pointer-events: none;
}

.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(8, 12, 20, 0.64));
  pointer-events: none;
}

.stage canvas {
  position: relative;
  z-index: 1;
  display: block;
}

.info {
  padding-bottom: 12px;
}

.titleSmall {
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 11px;
}

.infoList {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 11px;
}

.realWorldRef {
  margin-top: 10px;
}

.wikiCard {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: rgba(8, 13, 22, 0.78);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.wikiHead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.wikiThumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  background: rgba(10, 16, 26, 0.82);
}

.wikiTitleWrap {
  min-width: 0;
}

.wikiTitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wikiExtract {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.wikiFacts {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 0;
  display: grid;
  gap: 6px;
}

.wikiFactRow {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
  align-items: baseline;
}

.wikiFactLabel {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wikiFactValue {
  font-size: 12px;
  color: var(--text);
}

.wikiLinks a {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}

.wikiLinks a:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

ul {
  margin: 10px 0 0 18px;
}

hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 12px 0;
}

button,
.adminBtn,
.iconBtn {
  appearance: none;
  border-radius: 1px;
  border: 1px solid rgba(99, 128, 162, 0.58);
  background: linear-gradient(180deg, rgba(20, 25, 34, 0.96), rgba(11, 15, 22, 0.98));
  color: var(--text);
  padding: 7px 11px;
  min-height: 30px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: 120ms ease;
}

button:hover,
.adminBtn:hover,
.iconBtn:hover {
  border-color: rgba(109, 182, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(68, 224, 255, 0.2) inset;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.adminBtn,
.btnPrimary {
  background: linear-gradient(180deg, rgba(41, 134, 178, 0.56), rgba(20, 49, 68, 0.96));
  border-color: rgba(84, 180, 228, 0.84);
}

.btnSecondary {
  background: linear-gradient(180deg, rgba(20, 25, 34, 0.95), rgba(11, 15, 22, 0.98));
}

.field label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 7px 8px;
  border-radius: 1px;
  border: 1px solid rgba(107, 153, 205, 0.42);
  background: rgba(10, 15, 23, 0.94);
  color: var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(109, 182, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(68, 224, 255, 0.18);
}

.field textarea {
  resize: vertical;
}

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

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

.tableWrap {
  overflow: auto;
}

/* ── Fleet page layout (sidebar + detail) ─────────────── */

.fleetLayout {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 52px);
  overflow: hidden;
}

.fleetSidebar {
  border-right: 1px solid var(--border-soft);
  background: rgba(7, 12, 20, 0.96);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fleetSidebarHead {
  padding: 10px 12px;
  font-weight: 650;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(218, 236, 252, 0.8);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.fleetShipList {
  overflow-y: auto;
  flex: 1;
}

.fleetShipRow {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(120, 165, 214, 0.08);
  transition: background 80ms ease;
}

.fleetShipRow:hover {
  background: rgba(80, 130, 182, 0.10);
}

.fleetShipRow.isActive {
  background: rgba(68, 140, 220, 0.16);
  border-left: 3px solid rgba(109, 182, 255, 0.7);
  padding-left: 9px;
}

.fleetShipRowName {
  font-weight: 650;
  font-size: 12px;
  margin-bottom: 3px;
}

.fleetShipRowMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.fleetShipRowLoc {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.fleetShipRowStats {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

/* ── Detail pane ─────────────────────────────────────── */

.fleetDetail {
  overflow-y: auto;
  padding: 12px 16px;
  background: rgba(10, 17, 27, 0.6);
}

.fleetDetailEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
}

.fleetDetailHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.fleetDetailHeadInfo {
  flex: 1;
  min-width: 0;
}

.fleetDetailName {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}

.fleetDetailSub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.fleetDetailActions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn.btnSmall {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(34, 54, 78, 0.34);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.btn.btnSmall:hover:not(:disabled) {
  background: rgba(68, 140, 220, 0.18);
  border-color: rgba(109, 182, 255, 0.45);
}

.btn.btnSmall:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── Fleet sections ──────────────────────────────────── */

.fleetSection {
  margin-bottom: 14px;
}

.fleetSectionTitle {
  font-weight: 650;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(218, 236, 252, 0.7);
  margin-bottom: 6px;
}

.fleetTransitInfo {
  font-size: 12px;
}

/* ── Cargo display ───────────────────────────────────── */

.fleetCargoSummary {
  font-size: 12px;
  margin-bottom: 8px;
}

.fleetContainerBreakdown {
  margin-top: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: rgba(6, 11, 18, 0.8);
  overflow: hidden;
}

.fleetContainerRow {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  padding: 5px 8px;
  font-size: 11px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.08);
  align-items: center;
}

.fleetContainerRow:last-child {
  border-bottom: none;
}

.fleetContainerName {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleetContainerContent {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleetContainerBar {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ── Legacy fleet table (reusable bits) ──────────────── */

.fleetTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px;
}

.fleetTable th,
.fleetTable td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.fleetTable th {
  color: rgba(218, 236, 252, 0.8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  position: sticky;
  top: 0;
  background: rgba(7, 12, 20, 0.96);
}

.shipName {
  font-weight: 650;
  font-size: 12px;
}

.badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 1px;
  border: 1px solid rgba(117, 160, 208, 0.38);
  background: rgba(34, 54, 78, 0.34);
  font-size: 11px;
}

.badgeMove {
  border-color: rgba(109, 182, 255, 0.56);
  background: rgba(68, 224, 255, 0.12);
}

.bar {
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(117, 160, 208, 0.38);
  background: rgba(11, 20, 33, 0.95);
  overflow: hidden;
  width: 200px;
}

.barFill {
  height: 100%;
  background: linear-gradient(90deg, rgba(76, 147, 221, 0.84), rgba(68, 224, 255, 0.9));
}

.fleetRow {
  cursor: pointer;
}

.fleetRow:hover td {
  background: rgba(80, 130, 182, 0.08);
}

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

.fleetChevron {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  transition: transform 120ms ease;
}

.fleetRow.isExpanded .fleetChevron {
  transform: rotate(90deg);
}

.fleetDetailsRow td {
  padding-top: 0;
}

.fleetDetailsRow:not(.isOpen) {
  display: none;
}

.fleetDetails {
  margin: 6px 0 10px;
  padding: 10px 11px;
  border-radius: 2px;
  border: 1px solid var(--border-soft);
  background: rgba(10, 17, 27, 0.8);
  display: grid;
  gap: 7px;
  font-size: 12px;
}

.partsStack {
  margin-top: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 1px;
  background: rgba(6, 11, 18, 0.88);
  overflow: hidden;
}

.partsStackHead,
.partsStackRow {
  display: grid;
  grid-template-columns: 44px 1fr;
}

.partsStackWithActions .partsStackHead,
.partsStackWithActions .partsStackRow {
  grid-template-columns: 44px 1fr auto;
}

.partsStackHead {
  background: rgba(16, 30, 46, 0.86);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.partsStackRow:nth-child(odd) {
  background: rgba(14, 25, 38, 0.45);
}

.partsStackCell {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.12);
}

.partsStackAction {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 88px;
}

body.fleetPage {
  height: 100vh;
  overflow: hidden;
}

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

.fleetPage .panel {
  overflow: visible;
  flex-shrink: 0;
}

.fleetPage .muted,
.fleetPage .small,
.fleetPage td,
.fleetPage th {
  font-size: 12px;
}

.partsStackRow:last-child .partsStackCell {
  border-bottom: none;
}

.partsStackIndex {
  text-align: right;
  color: var(--muted);
}

.partsStackEmpty {
  color: var(--muted);
}

.fleetPartsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  margin-top: 6px;
  justify-content: start;
}

.fleetProgress .bar {
  margin-top: 6px;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
  z-index: -1;
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.modalTitle {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.iconBtn {
  min-height: 30px;
  padding: 5px 10px;
}

.modalBody {
  position: relative;
  width: min(980px, 92vw);
  max-height: 86vh;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(122, 170, 222, 0.4);
  background:
    linear-gradient(180deg, rgba(24, 40, 60, 0.42), transparent 22%),
    var(--panel-solid);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.62);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 14px;
}

.modalCol {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 10px;
  overflow: auto;
  max-height: calc(86vh - 108px);
  background: rgba(8, 14, 24, 0.9);
}

.quoteBox {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pathBox {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  background: rgba(4, 8, 14, 0.62);
  white-space: nowrap;
  overflow: auto;
}

.tree {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* ── Transfer destination tree — segmented accordion ──── */

.transferTreeRoot {
  padding: 0;
}

/* Top-level zone headers (Sun, Mercury, Earth, Mars…) */
.transferTreeZone {
  border-bottom: 1px solid rgba(120, 165, 214, 0.1);
}

.transferTreeZone > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(198, 222, 250, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  user-select: none;
}

.transferTreeZone > summary::-webkit-details-marker { display: none; }

.transferTreeZone > summary::before {
  content: "\25B8";
  color: var(--muted);
  font-size: 9px;
  flex: 0 0 auto;
  transition: transform 0.12s ease;
}

.transferTreeZone[open] > summary::before {
  transform: rotate(90deg);
}

.transferTreeZone > summary:hover {
  background: rgba(71, 127, 191, 0.14);
}

.transferTreeZoneSymbol {
  font-size: 1.3em;
  line-height: 1;
}

.transferTreeZoneBody {
  padding: 0 0 2px 0;
}

/* Sub-groups within a zone (Orbits, Moons, Lagrange, Surface Sites…) */
.transferTreeGroup {
  margin: 0;
}

.transferTreeSummary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 16px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}

.transferTreeSummary::-webkit-details-marker { display: none; }

.transferTreeSummary::before {
  content: "\25B8";
  color: var(--muted);
  font-size: 8px;
  flex: 0 0 auto;
  transition: transform 0.12s ease;
}

details.transferTreeGroup[open] > .transferTreeSummary::before {
  transform: rotate(90deg);
}

.transferTreeSummary:hover {
  background: rgba(71, 127, 191, 0.1);
}

/* ── Body-level groups (Luna, Ceres, Vesta, Io…) ────── */

.transferTreeBody {
  border-top: 1px solid rgba(120, 165, 214, 0.08);
}

.transferTreeBody:first-child {
  border-top: none;
}

.transferTreeBodySummary {
  padding: 4px 6px 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(198, 222, 250, 0.9);
  text-transform: none;
  letter-spacing: 0;
  gap: 5px;
}

.transferTreeBodySymbol {
  font-size: 1.15em;
  line-height: 1;
  opacity: 0.8;
}

/* ── Category-level groups (Orbits, Surface Sites…) ──── */

.transferTreeCatSummary {
  padding: 3px 6px 1px 18px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(140, 165, 195, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.transferTreeCatSummary::before {
  font-size: 7px;
}

.transferTreeChildren {
  padding: 0;
  margin: 0;
}

/* Hidden — no longer used */
.transferTreePrefix { display: none; }
.transferTreeRow { display: contents; }
.transferTreeFolderRow { display: contents; }
.transferTreeSymbol { display: none; }

.transferTreeLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Leaf items (orbit destinations) */
.transferTreeLeaf {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(225, 238, 249, 0.82);
  cursor: pointer;
  padding: 2px 6px 2px 26px;
  font-size: 11px;
  display: block;
  line-height: 1.5;
}

.transferTreeLeaf:hover {
  background: rgba(71, 127, 191, 0.14);
}

.transferTreeLeaf.isSelected {
  background: rgba(68, 224, 255, 0.1);
  box-shadow: inset 2px 0 0 0 var(--accent);
  color: var(--accent);
}

.adminGrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
}

.adminForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adminSide {
  min-height: 260px;
}

.adminShipItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}

.adminShipMeta {
  min-width: 0;
}

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

.adminDeleteBtn {
  min-height: 30px;
  padding: 6px 10px;
}

.adminRefuelBtn {
  min-height: 30px;
  padding: 6px 10px;
}

.adminSimControls {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.adminSimActions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.simClock {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 10000;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  background: rgba(7, 12, 20, 0.9);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.03em;
  pointer-events: none;
  user-select: none;
}

.simClock .muted {
  margin-left: 8px;
}

.authPage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.terminalCard {
  width: min(640px, 94vw);
  border: 1px solid rgba(109, 182, 255, 0.45);
  border-radius: 8px;
  background: rgba(6, 12, 20, 0.94);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.62);
  overflow: hidden;
}

.terminalHeader {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  color: rgba(186, 216, 244, 0.88);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.terminalBody {
  padding: 14px;
  font-family: "Consolas", "JetBrains Mono", "Fira Code", "Courier New", monospace;
}

.terminalLine {
  color: #8ed2ff;
  margin: 0 0 4px;
  line-height: 1.4;
}

.terminalPrompt {
  margin: 14px 0 10px;
  color: #c8ebff;
}

.terminalField {
  margin-bottom: 10px;
}

.terminalField label {
  display: block;
  margin-bottom: 6px;
  color: rgba(180, 212, 241, 0.82);
  font-size: 12px;
}

.terminalField input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 3px;
  border: 1px solid rgba(92, 142, 196, 0.52);
  background: rgba(3, 8, 15, 0.94);
  color: #dff3ff;
  font-family: inherit;
}

.terminalActions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.terminalStatus {
  margin-top: 8px;
  min-height: 18px;
}

.profilePanel {
  display: grid;
  gap: 10px;
}

.adminAccounts {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.adminAccountActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.accountListItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.pagePanel {
  margin: 10px;
}

.researchPagePanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
  border-radius: 2px;
  border-color: rgba(120, 150, 184, 0.34);
  background:
    linear-gradient(180deg, rgba(17, 23, 32, 0.9), rgba(10, 14, 21, 0.94)),
    rgba(9, 13, 19, 0.94);
}

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

.researchPage .researchPagePanel {
  flex: 1 1 auto;
  min-height: 0;
}

.researchPage .top.panel,
.researchPage .researchPagePanel,
.researchPage .researchPagePanel .panel {
  border-radius: 2px;
}

.researchPage .top .title,
.researchPage .top .subtitle,
.researchPage .researchPagePanel,
.researchPage .researchPagePanel button,
.researchPage .researchPagePanel .titleSmall,
.researchPage .researchPagePanel .muted,
.researchPage .researchPagePanel .small,
.researchPage .researchPagePanel .infoList {
  font-family: "Segoe UI", "Roboto Condensed", Tahoma, sans-serif;
  letter-spacing: 0.012em;
}

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

.researchSubtab {
  min-width: 108px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 1px;
  border-color: rgba(99, 128, 162, 0.52);
  background: linear-gradient(180deg, rgba(18, 24, 34, 0.96), rgba(11, 15, 22, 0.98));
  color: rgba(192, 212, 228, 0.82);
  text-transform: none;
  font-size: 12px;
}

.researchSubtab.active {
  border-color: rgba(84, 180, 228, 0.82);
  color: #def6ff;
  background: linear-gradient(180deg, rgba(33, 124, 168, 0.46), rgba(20, 47, 66, 0.95));
  box-shadow: inset 0 0 0 1px rgba(52, 206, 255, 0.14);
}

.researchLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 10px;
  min-height: 0;
}

.researchViewport {
  height: 100%;
  min-height: 500px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(98, 130, 165, 0.5);
  background:
    linear-gradient(180deg, rgba(14, 19, 27, 0.98), rgba(8, 11, 17, 0.99)),
    repeating-linear-gradient(
      0deg,
      rgba(116, 153, 194, 0.05),
      rgba(116, 153, 194, 0.05) 1px,
      transparent 1px,
      transparent 24px
    );
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.researchSkillTree {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}

.researchSkillEdge {
  position: absolute;
  height: 1px;
  background: rgba(91, 186, 233, 0.7);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
}

.researchSkillNode {
  position: absolute;
  width: 210px;
  min-height: 142px;
  padding: 9px;
  border-radius: 1px;
  border: 1px solid rgba(103, 132, 163, 0.42);
  background: linear-gradient(180deg, rgba(20, 25, 34, 0.96), rgba(11, 15, 22, 0.98));
  color: rgba(215, 230, 242, 0.95);
  text-align: left;
  font-size: 12px;
  line-height: 1.3;
  z-index: 2;
  transition: border-color 120ms ease, background 120ms ease;
}

.researchSkillNode:hover {
  border-color: rgba(113, 186, 225, 0.78);
}

.researchSkillNode.isSelected {
  border-color: rgba(93, 205, 244, 0.95);
  box-shadow: inset 0 0 0 1px rgba(85, 220, 255, 0.22);
  background: linear-gradient(180deg, rgba(24, 40, 53, 0.96), rgba(12, 20, 29, 0.98));
}

.researchSkillNodeName {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.researchSkillNodeLevel {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(163, 184, 203, 0.9);
  text-transform: uppercase;
}

.researchSkillPassive {
  margin-top: 7px;
  font-size: 12px;
  color: rgba(173, 203, 223, 0.86);
}

.researchLevelRow {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.researchLevelBtn {
  min-height: 30px;
  border: 1px solid rgba(94, 124, 156, 0.52);
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(20, 25, 34, 0.95), rgba(11, 15, 22, 0.98));
  color: rgba(146, 170, 192, 0.92);
  font-size: 12px;
}

.researchLevelBtn.isReached {
  border-color: rgba(84, 180, 228, 0.86);
  color: #e8f9ff;
  background: linear-gradient(180deg, rgba(41, 134, 178, 0.56), rgba(20, 49, 68, 0.96));
}

.researchSidebar {
  display: grid;
  gap: 10px;
  align-content: start;
}

.researchInfo {
  padding-bottom: 14px;
}

.researchUnlockPanel {
  display: grid;
  gap: 8px;
  border-color: rgba(120, 150, 184, 0.34);
  background:
    linear-gradient(180deg, rgba(17, 23, 32, 0.9), rgba(10, 14, 21, 0.94)),
    rgba(9, 13, 19, 0.94);
}

.researchUnlockRows {
  display: grid;
  gap: 8px;
}

.researchUnlockGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  justify-content: start;
}

.researchUnlockGrid .invCell.isLocked {
  opacity: 0.55;
  filter: saturate(0.4);
}

.researchUnlockRow {
  border: 1px solid rgba(94, 124, 156, 0.52);
  border-radius: 1px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(20, 25, 34, 0.94), rgba(11, 15, 22, 0.98));
}

.researchUnlockRow.isUnlocked {
  border-color: rgba(84, 180, 228, 0.72);
}

.researchUnlockName {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.researchUnlockStats {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(163, 184, 203, 0.9);
}

/* ── Shipyard Mode Selector ──────────────────────────────── */

.shipyardModeSelect {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 420px;
}

.shipyardModeTitle {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

.shipyardModeCards {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.shipyardModeCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 220px;
  padding: 28px 18px 22px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(8, 13, 22, 0.7);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 100ms ease;
  text-align: center;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
}

.shipyardModeCard:hover {
  border-color: rgba(109, 182, 255, 0.55);
  background: rgba(14, 26, 42, 0.85);
  box-shadow: 0 0 14px rgba(79, 195, 247, 0.12);
  transform: translateY(-2px);
}

.shipyardModeCard:active {
  transform: translateY(0);
}

.shipyardModeCard .modeIcon {
  font-size: 32px;
  line-height: 1;
}

.shipyardModeCard .modeLabel {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.shipyardModeCard .modeDesc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Ship Selector (Edit Mode) ───────────────────────────── */

.shipyardShipSelect {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 420px;
}

.shipyardShipList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 500px;
  overflow-y: auto;
}

.shipyardShipCard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: rgba(8, 13, 22, 0.55);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.shipyardShipCard:hover {
  border-color: rgba(109, 182, 255, 0.5);
  background: rgba(14, 26, 42, 0.7);
}

.shipyardShipCard .shipCardName {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.shipyardShipCard .shipCardDetail {
  font-size: 11px;
  color: var(--muted);
}

.shipyardShipCardDisabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Boost cost panel ────────────────────────────────────── */

.shipyardBoostCost {
  background: rgba(18, 30, 45, 0.8);
  border: 1px solid rgba(109, 182, 255, 0.2);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 12px;
}

.boostCostLine {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.boostCostLine b {
  font-weight: 600;
}

.boostCostTotal {
  border-top: 1px solid rgba(109, 182, 255, 0.15);
  padding-top: 4px;
  margin-top: 4px;
}

.boostCostInsufficient {
  color: #ff9aa3;
}

.shipyardPanel {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.shipyardHeader {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: end;
}

.shipyardHeader .field {
  max-width: 320px;
  width: 100%;
}

.shipyardLayout {
  display: grid;
  grid-template-columns: 340px 1fr 300px;
  gap: 8px;
  min-height: 520px;
}

.shipyardColumn {
  min-height: 360px;
}

/* ── Ship Blueprint (Column 1) ─────────────────────────── */

.shipyardBlueprint {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.blueprintScroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
}

/* Each category section in the blueprint */
.bpSection {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: rgba(8, 13, 22, 0.55);
  transition: border-color 180ms ease, background 180ms ease;
  overflow: hidden;
}

.bpSection.isActive {
  border-color: rgba(109, 182, 255, 0.5);
  background: rgba(14, 26, 42, 0.8);
}

.bpSectionHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease;
}

.bpSectionHeader:hover {
  background: rgba(79, 195, 247, 0.06);
}

.bpSection.isActive .bpSectionHeader {
  background: rgba(79, 195, 247, 0.08);
}

.bpSectionColorBar {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

.bpSectionLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex: 1;
}

.bpSection.isActive .bpSectionLabel {
  color: var(--text);
}

.bpSectionCount {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
  min-width: 14px;
  text-align: right;
}

/* Slot grid within each section */
.bpSlotRow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px 8px 8px;
}

.bpSlotRow:empty {
  display: none;
}

/* Individual slot */
.bpSlot {
  width: 68px;
  height: 68px;
  border-radius: 5px;
  position: relative;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Empty "add" slot */
.bpSlotEmpty {
  border: 1px dashed rgba(109, 182, 255, 0.2);
  background: rgba(109, 182, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: rgba(109, 182, 255, 0.3);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.bpSlotEmpty:hover {
  border-color: rgba(109, 182, 255, 0.45);
  background: rgba(109, 182, 255, 0.07);
  color: rgba(109, 182, 255, 0.6);
}

.bpSection.isActive .bpSlotEmpty {
  border-color: rgba(109, 182, 255, 0.35);
  background: rgba(109, 182, 255, 0.05);
}

/* Filled slot - wraps an invCell */
.bpSlotFilled {
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
}

.bpSlotFilled:hover {
  border-color: rgba(255, 120, 120, 0.45);
  box-shadow: 0 0 6px rgba(255, 80, 80, 0.15);
}

.bpSlotFilled .invCell {
  width: 100%;
  height: 100%;
}

/* Remove overlay on hover */
.bpSlotRemove {
  position: absolute;
  inset: 0;
  background: rgba(140, 30, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
  border-radius: 4px;
  z-index: 2;
}

.bpSlotRemove::after {
  content: "✕";
  color: #ff9aa3;
  font-size: 16px;
  font-weight: bold;
}

.bpSlotFilled:hover .bpSlotRemove {
  opacity: 1;
}

/* Drag-over highlight for slots */
.bpSlot.dragOver {
  border-color: rgba(79, 195, 247, 0.7) !important;
  box-shadow: 0 0 8px rgba(79, 195, 247, 0.25);
  background: rgba(79, 195, 247, 0.08);
}

/* ── Parts Picker (Column 2) ───────────────────────────── */

.shipyardPicker {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

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

.pickerCategoryBadge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  background: rgba(9, 16, 25, 0.76);
  color: var(--muted);
}

.pickerCategoryBadge.hasCategory {
  border-color: rgba(109, 182, 255, 0.4);
  color: var(--text);
  background: rgba(47, 99, 161, 0.18);
}

.pickerGrid {
  flex: 1 1 0;
  min-height: 120px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  justify-content: start;
  align-content: start;
  overflow-y: auto;
  padding: 2px;
}

/* When fuel section is visible, constrain parts grid to ~half */
.shipyardPicker.hasFuel .pickerGrid {
  flex: 0 1 50%;
}

.pickerEmpty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 12px;
}

.pickerItemCell {
  position: relative;
}

.pickerItemCell.isDraggable {
  cursor: pointer;
}

.pickerItemCell.isDisabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Fuel Loading Section ────────────────────────────────── */

.shipyardFuelSection {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  margin-top: 10px;
  overflow-y: auto;
}

.shipyardFuelHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.shipyardFuelControls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shipyardFuelSlider {
  width: 100%;
  cursor: pointer;
  accent-color: #4fc3f7;
}

.shipyardFuelInputRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shipyardFuelInput {
  width: 90px;
  padding: 4px 6px;
  font-size: 12px;
  background: rgba(9, 16, 25, 0.76);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--text);
}

.shipyardFuelUnit {
  font-size: 11px;
  color: var(--muted);
}

.shipyardFuelBar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.shipyardFuelBarFill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1a6dd4, #4fc3f7);
  transition: width 150ms ease;
  width: 0%;
}

.btnSmall {
  padding: 3px 8px;
  font-size: 11px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: rgba(9, 16, 25, 0.76);
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btnSmall:hover {
  background: rgba(79, 195, 247, 0.12);
  color: var(--text);
  border-color: #4fc3f7;
}

/* ── Legacy shipyard classes (kept for compatibility) ──── */

.shipyardCardStrip {
  max-height: 260px;
}

.shipyardGarageGrid,
.shipyardSlotsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  justify-content: start;
}

.shipyardGarageGrid {
  max-height: 280px;
  overflow-y: auto;
}

.shipyardItemCard,
.shipyardItemCell {
  position: relative;
}

.shipyardItemCard.isDraggable,
.shipyardItemCell.isDraggable {
  cursor: pointer;
}

.shipyardItemCard.isDisabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.shipyardItemCard.isIncompatible {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(255, 160, 60, 0.35);
}

.shipyardCardRemoveBtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.shipyardGarageGroup {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px;
  background: rgba(8, 13, 22, 0.66);
}

.shipyardGarageGroup .partsStack {
  margin-top: 0;
}

.shipyardGarageHeading {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.shipyardGarageHeading:hover {
  color: var(--text);
}

.garageFolderHint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garageChevron {
  display: inline-block;
  font-size: 10px;
  transition: transform 120ms ease;
  transform: rotate(0deg);
}

.garageChevron.isOpen {
  transform: rotate(90deg);
}

.garageCount {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.5;
}

.shipyardSlotEmpty {
  border: 1px dashed rgba(109, 182, 255, 0.25);
  border-radius: 6px;
  padding: 10px;
}

.shipyardStats {
  margin-top: 0;
}

.shipyardStatsCol {
  overflow-y: auto;
}

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

.shipInfoTabsHost {
  margin-bottom: 8px;
}

.shipInfoTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

.shipInfoTabBtn {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 6px 10px;
  background: rgba(9, 16, 25, 0.76);
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shipInfoTabBtn.isActive {
  border-color: rgba(109, 182, 255, 0.62);
  color: #e7f6ff;
  background: linear-gradient(180deg, rgba(47, 99, 161, 0.28), rgba(17, 32, 48, 0.84));
}

.shipInvRoot {
  display: grid;
  gap: 10px;
}

.shipInvSection {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: rgba(8, 13, 22, 0.66);
  overflow: hidden;
}

.shipInvSectionTitle {
  padding: 7px 9px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.14);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  color: var(--muted);
}

.shipInvGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  padding: 6px;
  justify-content: start;
}

.shipInvEmpty {
  padding: 8px 9px;
}

.shipInvSummary {
  overflow: visible;
}

.shipInvSummaryBody {
  padding: 8px 9px;
  display: grid;
  gap: 5px;
}

.shipInvSummaryLine,
.shipInvSummaryPhases {
  font-size: 11px;
  color: var(--muted);
}

.shipInvBar {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(117, 160, 208, 0.38);
  background: rgba(11, 20, 33, 0.95);
  overflow: hidden;
}

.shipInvBarFill {
  height: 100%;
  background: linear-gradient(90deg, rgba(76, 147, 221, 0.84), rgba(68, 224, 255, 0.9));
}

.shipInvTable {
  width: 100%;
  border-collapse: collapse;
}

.shipInvTable th,
.shipInvTable td {
  border-bottom: 1px solid rgba(120, 165, 214, 0.1);
  padding: 7px 8px;
  font-size: 12px;
  text-align: left;
  vertical-align: top;
}

.shipInvTable th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

.shipInvActionBtn {
  min-height: 22px;
  line-height: 1;
  padding: 2px 7px;
  font-size: 10px;
}

.mapContextMenu {
  position: fixed;
  z-index: 40;
  min-width: 220px;
  max-width: min(360px, 90vw);
  display: none;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.48);
}

.mapContextMenuTitle {
  padding: 7px 9px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mapContextMenuItem {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}

.mapContextMenuItem:hover:not(:disabled),
.mapContextMenuItem:focus-visible:not(:disabled) {
  border-color: rgba(109, 182, 255, 0.35);
  background: rgba(24, 43, 64, 0.38);
  outline: none;
}

.mapContextMenuItem:disabled {
  color: var(--muted);
  opacity: 0.62;
  cursor: default;
}

.inventoryAmountOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 8, 14, 0.62);
  backdrop-filter: blur(2px);
}

.inventoryAmountDialog {
  width: min(460px, calc(100vw - 28px));
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-solid);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.5);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.inventoryAmountTitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(235, 245, 252, 0.96);
}

.inventoryAmountSub,
.inventoryAmountStatus {
  font-size: 11px;
  color: var(--muted);
}

.inventoryAmountSlider {
  width: 100%;
}

.inventoryAmountInput {
  width: 100%;
  min-height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: rgba(10, 16, 26, 0.86);
  color: var(--text);
  padding: 6px 8px;
}

.inventoryAmountActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 1020px) {
  .content {
    grid-template-columns: 1fr;
  }

  .stage {
    height: 66vh;
    min-height: 460px;
  }

  .modalBody {
    grid-template-columns: 1fr;
  }

  .researchLayout {
    grid-template-columns: 1fr;
  }

  .shipyardLayout {
    grid-template-columns: 1fr;
  }

  .shipyardHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .researchViewport {
    height: 56vh;
    min-height: 420px;
  }
}

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

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .tabs {
    width: 100%;
  }

  .tab {
    flex: 1;
  }
}

/* ── Power & Thermal Balance Panel ── */

.powerBalancePanel {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: rgba(8, 13, 22, 0.82);
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(163, 184, 203, 0.95);
}

.powerBalanceFleet {
  margin-top: 8px;
}

.pbTitle {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: rgba(109, 182, 255, 0.85);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(109, 182, 255, 0.18);
}

.pbSection {
  margin-bottom: 6px;
}

.pbSection:last-child {
  margin-bottom: 0;
}

.pbSectionHead {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: rgba(163, 184, 203, 0.6);
  margin-bottom: 3px;
  margin-top: 4px;
}

.pbRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1px 0;
  font-size: 12px;
}

.pbRow.pbDivider {
  border-top: 1px solid rgba(109, 182, 255, 0.12);
  margin-top: 2px;
  padding-top: 3px;
}

.pbLabel {
  color: rgba(163, 184, 203, 0.82);
}

.pbVal {
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 72px;
}

.pbPositive {
  color: #5ee89c;
}

.pbNegative {
  color: #ff6b7a;
}

.pbNeutral {
  color: rgba(163, 184, 203, 0.82);
}

/* ── Overheating warning banner ── */
.pbOverheatBanner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 60, 60, 0.15);
  border: 1px solid rgba(255, 80, 80, 0.55);
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 6px;
  color: #ff6b7a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  animation: pbOverheatPulse 2s ease-in-out infinite;
}

.pbOverheatBanner .pbOverheatIcon {
  font-size: 16px;
  flex-shrink: 0;
}

.pbOverheatBanner .pbOverheatText {
  line-height: 1.35;
}

@keyframes pbOverheatPulse {
  0%, 100% { background: rgba(255, 60, 60, 0.15); }
  50% { background: rgba(255, 60, 60, 0.28); }
}

.powerBalancePanel.pbOverheating {
  border-color: rgba(255, 80, 80, 0.55);
}

.pbUnit {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 1px;
}

.pbBarWrap {
  display: inline-block;
  width: 60px;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
  overflow: hidden;
}

.pbBar {
  display: block;
  height: 100%;
  background: #5ee89c;
  border-radius: 3px 0 0 3px;
  transition: width 0.3s ease;
}


/* ═══════════════════════════════════════════════════════════
   SITES & INDUSTRY PAGE
   ═══════════════════════════════════════════════════════════ */

.sitesPage .app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.sitesPage .top.panel {
  flex-shrink: 0;
}

.sitesTabContent {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}

/* ── Sub-tabs ───────────────────────────────────────────── */

.sitesSubTabs {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 0 16px;
  margin-bottom: 8px;
}

.siteSubTab {
  background: rgba(30,44,62,0.6);
  border: 1px solid var(--border-soft);
  border-bottom: none;
  color: var(--muted);
  padding: 8px 20px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.15s;
  border-radius: 4px 4px 0 0;
}

.siteSubTab:hover {
  color: var(--text);
  background: rgba(40,58,80,0.7);
}

.siteSubTab.active {
  background: var(--panel);
  color: var(--accent);
  border-color: var(--border);
  border-bottom: 2px solid var(--accent);
}

/* ── Filter bar ─────────────────────────────────────────── */

.sitesFilterBar {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.siteFilterBtn {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.siteFilterBtn:hover { color: var(--text); border-color: var(--border); }
.siteFilterBtn.active { color: var(--accent); border-color: var(--accent); background: rgba(89,185,230,0.08); }

.filterSpacer { flex: 1; }

.siteGroupBtn {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.siteGroupBtn:hover { color: var(--text); border-color: var(--border); }
.siteGroupBtn.active { color: var(--accent); border-color: var(--accent); background: rgba(89,185,230,0.08); }

/* ── Body group header rows ─────────────────────────────── */

tr.bodyGroupHeader td {
  background: var(--bg-deeper, #0d1117);
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
}

/* ── Overview layout ────────────────────────────────────── */

.sitesOverviewLayout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 12px;
  padding: 0 16px 16px;
  height: 100%;
  min-height: 0;
}

@media (max-width: 1020px) {
  .sitesOverviewLayout { grid-template-columns: 1fr; }
}

.sitesListPanel { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.sitesListPanel .tableWrap { flex: 1 1 0; overflow-y: auto; min-height: 0; }
.siteDetailPanel { overflow-y: auto; min-height: 0; }

.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.panelTitle {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* ── Sites search ───────────────────────────────────────── */

.sitesSearch {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px;
  width: 140px;
}

.sitesSearch:focus { outline: none; border-color: var(--accent); }

/* ── Sites table ────────────────────────────────────────── */

.sitesTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.sitesTable thead th {
  position: sticky;
  top: 0;
  background: var(--panel-solid);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.sitesTable tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}

.sitesTable tbody tr:hover { background: rgba(89,185,230,0.06); }
.sitesTable tbody tr.selected { background: rgba(89,185,230,0.12); border-left: 2px solid var(--accent); }

.sitesTable td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}

.sitesTable .siteName { font-weight: 500; color: var(--text); }

/* ── Badges ─────────────────────────────────────────────── */

.badgeSurface {
  background: rgba(116,216,192,0.15);
  color: #74d8c0;
  border: 1px solid rgba(116,216,192,0.3);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badgeOrbital {
  background: rgba(89,185,230,0.12);
  color: var(--accent);
  border: 1px solid rgba(89,185,230,0.25);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badgeActive {
  background: rgba(94,232,156,0.15);
  color: #5ee89c;
  border: 1px solid rgba(94,232,156,0.3);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}

.badgeOk {
  background: rgba(94,232,156,0.12);
  color: #5ee89c;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}

.badgeWarn {
  background: rgba(255,107,122,0.12);
  color: #ff6b7a;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}

.eqBadge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 2px;
  margin-right: 3px;
  font-weight: 600;
}

.eqBadge.ref {
  background: rgba(255,165,0,0.15);
  color: #ffa500;
}

.eqBadge.con {
  background: rgba(130,200,255,0.15);
  color: #82c8ff;
}

/* ── Site detail panel ──────────────────────────────────── */

.siteDetailPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.siteInfoGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px 14px;
}

.infoRow {
  flex: 1 1 50%;
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(100,132,166,0.08);
}

.infoLabel { color: var(--muted); }
.infoValue { color: var(--text); font-weight: 500; }

.siteSection {
  padding: 0 14px 10px;
}

.siteSectionTitle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 8px;
}

/* ── Resource deposit bars ──────────────────────────────── */

.siteDepositsGrid, .depositRow, .miningDepositRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}

.siteDepositsGrid {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.depositName { width: 120px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.depositBar { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.depositBarFill { height: 100%; background: linear-gradient(90deg, #74d8c0, #48d1f3); border-radius: 3px; transition: width 0.3s; }
.depositPct { width: 48px; text-align: right; color: var(--muted); font-size: 11px; flex-shrink: 0; }

/* ── Eligible equipment list ─────────────────────────────── */

.eligibleGroupLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 6px 0 2px;
}
.eligibleGroupLabel:first-child { margin-top: 0; }

.eligibleRow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text);
}

.eligibleIcon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 12px;
}

.eligibleLabel {
  font-weight: 500;
  color: #74d8c0;
}

.eligibleReason {
  font-size: 11px;
  margin-left: auto;
}

.siteShipRow {
  padding: 4px 0;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(100,132,166,0.08);
}

/* ── Industry location bar ──────────────────────────────── */

#tabIndustrial {
  padding-bottom: 16px;
}

/* ── Industrial Subtab Bar ───────────────────────────────── */

.industrySubTabs {
  display: flex;
  gap: 2px;
  padding: 0 16px;
  margin-bottom: 8px;
}

.indSubTab {
  background: rgba(30,44,62,0.5);
  border: 1px solid var(--border-soft);
  border-bottom: none;
  color: var(--muted);
  padding: 7px 16px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.15s;
  border-radius: 4px 4px 0 0;
}

.indSubTab:hover {
  color: var(--text);
  background: rgba(40,58,80,0.6);
}

.indSubTab.active {
  background: var(--panel);
  color: var(--accent);
  border-color: var(--border);
  border-bottom: 2px solid var(--accent);
}

.indSubTabContent {
  padding: 0;
}

/* ── Aggregate Rates Grid ───────────────────────────────── */

.aggRatesGrid {
  display: flex;
  gap: 16px;
  padding: 12px 14px;
  flex-wrap: wrap;
}

.aggRateItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.aggRateVal {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.aggRateLabel {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Deployments group panels ───────────────────────────── */

.deployGroupPanel {
  margin: 0 16px 8px;
}

.deployGroupBody {
  padding: 4px 0;
}

.deployEquipRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.deployEquipRow:last-child { border-bottom: none; }

.deployEquipInfo { flex: 1; min-width: 0; }

.deployEquipName {
  font-size: 13px;
  color: var(--text);
}

.deployEquipStats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.deployEquipStatus { flex-shrink: 0; }

.badgeIdle {
  background: rgba(120,120,120,0.25);
  color: var(--muted);
}

.badgeCrit {
  background: rgba(255,80,80,0.2);
  color: #f66;
}

/* ── Power Breakdown Table ──────────────────────────────── */

.pwrBreakdownTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pwrBreakdownTable th {
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
}

.pwrBreakdownTable td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pwrBreakdownTotals td {
  border-top: 2px solid var(--border);
  color: var(--accent);
  font-weight: 600;
}

/* ── Queue Waiting Materials State ──────────────────────── */

.queueWaiting {
  border-left: 3px solid #e8a435;
}

.queueWaitingMaterials {
  margin-top: 4px;
}

.queueMissingList {
  font-size: 11px;
  color: #e8a435;
  margin-top: 2px;
}

.queueMissingItem {
  display: inline-block;
  margin-right: 8px;
}

.industryLocationBar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 0 16px 8px;
}

.industryLabel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}

.industrySelect {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 13px;
  min-width: 200px;
}

.industrySelect:focus { outline: none; border-color: var(--accent); }

/* ── Industry top row ───────────────────────────────────── */

.industryTopRow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 0 16px 8px;
}

@media (max-width: 1200px) {
  .industryTopRow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .industryTopRow { grid-template-columns: 1fr; }
}

.industryEquipPanel, .industryJobsPanel, .industryChainPanel,
.industryRecipesPanel, .industryMiningPanel, .industryHistoryPanel,
.industryConstructPanel, .industryPowerPanel,
.industryConstructorsPanel, .industryRefineriesPanel,
.industryRefinerySlotsPanel, .industryPrintersPanel,
.industryConstructionPanel, .industryAggPanel,
.industryPowerBreakdownPanel {
  margin: 0 16px 8px;
}

.industryTopRow .industryEquipPanel,
.industryTopRow .industryJobsPanel,
.industryTopRow .industryPowerPanel {
  margin: 0;
}

/* ── Equipment rows ─────────────────────────────────────── */

.industryEquipRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.1s;
}

.industryEquipRow:hover { background: rgba(89,185,230,0.04); }

.eqIcon {
  font-size: 22px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.eqInfo { flex: 1; min-width: 0; }
.eqName { font-size: 13px; font-weight: 500; color: var(--text); }
.eqDetails { display: flex; gap: 8px; flex-wrap: wrap; }
.eqDetail { font-size: 11px; color: var(--muted); }

/* ── Power & Thermal panel ──────────────────────────────── */

.pwrPanelBlock {
  background: var(--surface-alt, rgba(20, 30, 45, 0.55));
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  margin-bottom: 10px;
}
.pwrPanelTitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, #66ccff);
  padding: 8px 14px 4px;
}

.pwrSection {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.pwrSection:last-child { border-bottom: none; }

.pwrSectionTitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.pwrBarRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.pwrBarLabel {
  font-size: 11px;
  color: var(--muted);
  width: 100px;
  flex-shrink: 0;
  text-align: right;
}

.pwrBarTrack {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.pwrBarFill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.pwrFillThermal  { background: #ff9f43; }
.pwrFillElectric { background: #5ee89c; }
.pwrFillDemand   { background: #59b9e6; }
.pwrFillWaste    { background: #ff6b7a; }
.pwrFillRadiator { background: #a29bfe; }

.pwrBarValue {
  font-size: 11px;
  color: var(--text);
  width: 80px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.pwrNote {
  font-size: 11px;
  padding: 2px 0 0 108px;
}
.pwrNote.ok   { color: #5ee89c; }
.pwrNote.warn { color: #ff9f43; }
.pwrNote.crit { color: #ff6b7a; font-weight: 600; }

/* Per-consumer breakdown in site power panel */
.pwrConsumerList {
  margin: 3px 0 2px 108px;
  border-left: 2px solid rgba(109, 182, 255, 0.15);
  padding-left: 8px;
}
.pwrConsumerRow {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 1px 0;
  color: rgba(163, 184, 203, 0.72);
}
.pwrConsumerName { flex: 1; }
.pwrConsumerVal { font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: 8px; }

/* Power deficit badge on facility cards */
.pwrBadBadge { color: #ff6b7a !important; font-weight: 600; }

/* Indented sub-rows in ship power panel */
.pbRow.pbIndent {
  padding-left: 12px;
  font-size: 11px;
  color: rgba(163, 184, 203, 0.72);
}
.pbRow.pbIndent .pbLabel { color: rgba(163, 184, 203, 0.62); }

/* Note line in power balance panel */
.pbNote {
  font-size: 10px;
  padding: 2px 0;
  line-height: 1.35;
}
.pbNote.muted { color: rgba(163, 184, 203, 0.5); }

.eqStatus {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

.eqStatusIdle { color: var(--muted); border: 1px solid var(--border-soft); }
.eqStatusActive { color: #5ee89c; background: rgba(94,232,156,0.12); border: 1px solid rgba(94,232,156,0.25); }

.eqActions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Job rows ───────────────────────────────────────────── */

.industryJobRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.jobIcon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.jobInfo { flex: 1; min-width: 0; }
.jobName { font-size: 13px; font-weight: 500; color: var(--text); }
.jobMeta { font-size: 11px; color: var(--muted); }

.jobProgress {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 130px;
}

.jobProgress .bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.jobProgress .barFill {
  height: 100%;
  background: linear-gradient(90deg, #59b9e6, #48d1f3);
  border-radius: 4px;
  transition: width 0.5s linear;
}

.jobPct { font-size: 11px; color: var(--accent); width: 32px; text-align: right; }

/* ═══ Production Chain Flow ═══════════════════════════════ */

.chainFlow {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 16px 14px;
  min-height: 200px;
}

.chainColumn {
  flex: 1;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow-y: auto;
  max-height: 400px;
}

.chainColumnHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border-bottom: 1px solid var(--border-soft);
  background: rgba(89,185,230,0.05);
  position: sticky;
  top: 0;
}

.chainColumnIcon { font-size: 14px; }

.chainColumnBody {
  padding: 8px;
}

/* Chain arrow connector */
.chainArrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  flex-shrink: 0;
  position: relative;
}

.chainArrowLine {
  width: 2px;
  height: 0;
  flex: 0;
}

.chainArrowHead {
  color: var(--accent);
  font-size: 18px;
  opacity: 0.6;
}

.chainArrowLabel {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Chain items */
.chainItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  margin-bottom: 3px;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.chainItem:hover { background: rgba(89,185,230,0.06); border-color: var(--border-soft); }
.chainItemEmpty { opacity: 0.45; }

.chainItemIcon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.chainItemInfo { flex: 1; min-width: 0; }

.chainItemName {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chainItemQty {
  font-size: 11px;
  color: var(--muted);
}

.chainEmpty { padding: 20px; text-align: center; }

/* ── Recipes list ───────────────────────────────────────── */

.recipeCategoryGroup { margin-bottom: 4px; }

.recipeCategoryHeader {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding: 8px 14px;
  background: rgba(89,185,230,0.05);
  border-bottom: 1px solid var(--border-soft);
}

/* ── Collapsible recipe groups ──────────────────────────── */

.collapsibleHeader {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.collapsibleHeader:hover {
  background: rgba(89,185,230,0.10);
}

.collapseToggle {
  font-size: 12px;
  width: 12px;
  text-align: center;
  color: var(--muted);
  transition: transform 0.15s;
}

.recipeCategoryCount {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

.recipeRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.1s;
}

.recipeRow:hover { background: rgba(89,185,230,0.04); }
.recipeRow.cantStart { opacity: 0.6; }

.recipeInfo { flex: 1; min-width: 0; }
.recipeName { font-size: 13px; color: var(--text); font-weight: 500; }
.recipeInputs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }

.recipeInput {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid;
}

.recipeInput.sufficient {
  color: #5ee89c;
  border-color: rgba(94,232,156,0.25);
  background: rgba(94,232,156,0.06);
}

.recipeInput.insufficient {
  color: #ff6b7a;
  border-color: rgba(255,107,122,0.25);
  background: rgba(255,107,122,0.06);
}

.recipeMeta {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

.recipeOutput { flex-shrink: 0; }
.recipeOutputLabel { font-size: 12px; color: var(--ok); font-weight: 500; }

.recipeAction { flex-shrink: 0; }

/* ── Start job modal content ────────────────────────────── */

.startJobEquipName {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  padding: 8px 0 12px;
}

.startJobRecipeRow {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}

.startJobRecipeRow .recipeName { margin-bottom: 4px; }
.startJobRecipeRow .recipeInputs { margin-bottom: 4px; }
.startJobRecipeRow .recipeMeta { margin-bottom: 6px; }

.startJobRecipeRow .sufficient { color: #5ee89c; }
.startJobRecipeRow .insufficient { color: #ff6b7a; }

/* Batch slider */
.batchSliderRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
  font-size: 13px;
  color: var(--muted);
}
.batchSliderRow label { white-space: nowrap; }
.batchSlider {
  flex: 1;
  max-width: 200px;
  accent-color: var(--accent, #5ee89c);
  cursor: pointer;
}
.batchCount { color: var(--text); font-weight: 600; min-width: 20px; text-align: center; }

/* ── Mining section ─────────────────────────────────────── */

.miningSectionTitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 10px 14px 4px;
}

.miningActiveRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}

.miningIcon { font-size: 16px; }
.miningResource { flex: 1; color: var(--text); font-weight: 500; }
.miningRate { color: var(--ok); }
.miningTotal { color: var(--muted); }

.miningSelectList { padding: 8px 0; }

.miningSelectRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}

.miningSelectName { flex: 1; color: var(--text); font-size: 13px; }
.miningSelectPct { color: var(--muted); font-size: 12px; }

/* ── Deploy modal ───────────────────────────────────────── */

.deployModalBody, .startJobModalBody, .miningModalBody {
  display: block;
  max-width: 560px;
  max-height: 75vh;
  overflow-y: auto;
}

/* Power summary banner at top of deploy modal */
.deployPowerSummary {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}
.deployPowerSummary:empty { display: none; }
.deployPwrStat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.deployPwrLabel { color: var(--muted); }
.deployPwrVal { color: var(--text); font-weight: 600; }
.deployPwrVal.pwrOk { color: var(--accent); }
.deployPwrVal.pwrWarn { color: #e8a22e; }
.deployPwrVal.pwrBad { color: #e05252; }

/* Category group sections */
.deployCatGroup { margin-bottom: 10px; }
.deployCatHeader {
  padding: 6px 10px;
  background: var(--panel-solid);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Individual deploy item rows */
.deployItemsList { display: flex; flex-direction: column; gap: 2px; }
.deployItemRow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.deployItemRow:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
}
.deployItemInfo { min-width: 0; }
.deployItemName {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deployItemDetails {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 2px;
}
.deployItemDetail {
  font-size: 11px;
  color: var(--muted);
}
.deployItemDetail b {
  color: var(--text);
  font-weight: 600;
}
.deployItemMeta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.deployItemQty {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-solid);
  padding: 1px 8px;
  border-radius: 3px;
}
.deployItemSource {
  font-size: 10px;
  color: var(--muted);
}

/* ── History table ──────────────────────────────────────── */

.historyTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.historyTable th {
  background: var(--panel-solid);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.historyTable td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}

/* ── Cargo transfer tab ────────────────────────────────── */

.cargoTabLayout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 12px;
  padding: 0 16px 16px;
  height: 100%;
  min-height: 0;
}

@media (max-width: 1020px) {
  .cargoTabLayout { grid-template-columns: 1fr; }
}

.cargoLocationsPanel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cargoLocationsPanel .tableWrap {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}

.cargoSitesTable th,
.cargoSitesTable td {
  padding: 6px 10px;
}

.cargoWorkspacePanel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cargoPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
}

.cargoWorkspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.cargoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.cargoContextBreadcrumb {
  padding: 6px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 11px;
}

.cargoFacilityRow td {
  padding-left: 18px;
  font-size: 11px;
  color: var(--muted);
}

.cargoFacilityRow.selected td {
  color: var(--text);
  background: rgba(120, 170, 255, 0.12);
}

.cargoColumns {
  display: grid;
  grid-template-columns: 1fr 240px 1fr;
  gap: 8px;
  flex: 1 1 0;
  min-height: 0;
  padding: 8px;
}

@media (max-width: 1200px) {
  .cargoColumns { grid-template-columns: 1fr 200px 1fr; }
}

.cargoColumn {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  background: rgba(8, 13, 22, 0.68);
  border-radius: 5px;
  min-height: 0;
  overflow: hidden;
}

.cargoColHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.cargoColTitle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.cargoEntitySelect {
  flex: 1;
  min-width: 0;
  background: rgba(11, 17, 27, 0.8);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 3px;
}

.cargoColBody {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cargoEntitySummary {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.10);
}

.cargoItemGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  justify-content: start;
}

.cargoGroupLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 4px 0 2px;
  border-bottom: 1px solid rgba(120, 165, 214, 0.08);
}

/* ── Shared container phase styles (hangar + cargo tab) ─── */
.inventoryCapSummary {
  margin-top: 6px;
  display: grid;
  gap: 4px;
}

.inventoryCapSummaryLine,
.inventoryCapSummaryPhases {
  font-size: 10px;
  color: var(--muted);
}

.inventoryCapBar {
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(117, 160, 208, 0.38);
  background: rgba(11, 20, 33, 0.95);
  overflow: hidden;
}

.inventoryCapBarFill {
  height: 100%;
  background: linear-gradient(90deg, rgba(76, 147, 221, 0.84), rgba(68, 224, 255, 0.9));
}

.inventoryContainerGroupList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
}

.inventoryContainerGroup {
  border: 1px solid rgba(120, 165, 214, 0.16);
  background: rgba(7, 12, 20, 0.6);
  border-radius: 5px;
  padding: 7px;
  display: grid;
  gap: 6px;
}

.inventoryContainerGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(120, 165, 214, 0.12);
  padding-bottom: 5px;
}

.containerGroupHeadLeft {
  display: flex;
  align-items: center;
  gap: 6px;
}

.containerPhaseBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
  flex-shrink: 0;
}

.containerPhaseBadge-solid {
  background: rgba(180, 140, 80, 0.22);
  border: 1px solid rgba(200, 160, 90, 0.4);
  color: #d4b06a;
}

.containerPhaseBadge-liquid {
  background: rgba(70, 140, 220, 0.22);
  border: 1px solid rgba(80, 160, 240, 0.4);
  color: #6abbd4;
}

.containerPhaseBadge-gas {
  background: rgba(160, 100, 220, 0.22);
  border: 1px solid rgba(180, 120, 240, 0.4);
  color: #c4a0e8;
}

.containerPhase-solid {
  border-color: rgba(200, 160, 90, 0.25);
}

.containerPhase-liquid {
  border-color: rgba(80, 160, 240, 0.25);
}

.containerPhase-gas {
  border-color: rgba(180, 120, 240, 0.25);
}

.containerEmptySlot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px dashed rgba(120, 165, 214, 0.2);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 8px 12px;
}

.containerEmptySlot-solid {
  color: rgba(200, 170, 100, 0.55);
  border-color: rgba(200, 160, 90, 0.2);
}

.containerEmptySlot-liquid {
  color: rgba(100, 180, 240, 0.55);
  border-color: rgba(80, 160, 240, 0.2);
}

.containerEmptySlot-gas {
  color: rgba(180, 140, 240, 0.55);
  border-color: rgba(180, 120, 240, 0.2);
}

.inventoryContainerGroupTitle {
  font-size: 12px;
  color: rgba(235, 245, 252, 0.95);
}

.inventoryContainerGroupSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inventoryContainerItems {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 4px;
  justify-content: start;
}

/* Staging column */
.cargoStagingCol {
  background: rgba(6, 18, 30, 0.72);
  border-color: rgba(89, 185, 230, 0.22);
}

.cargoStagingBody {
  gap: 0 !important;
}

.cargoStagingEmpty {
  text-align: center;
  padding: 20px 8px;
  font-size: 11px;
}

.cargoStagingList {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cargoStagedRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(120, 165, 214, 0.12);
  background: rgba(7, 12, 20, 0.7);
  border-radius: 4px;
  font-size: 11px;
}

.cargoStagedRow:hover {
  border-color: rgba(109, 182, 255, 0.3);
}

.cargoStagedInfo {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.cargoStagedName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.cargoStagedQty {
  flex-shrink: 0;
  font-size: 10px;
}

.cargoStagedRemove {
  padding: 1px 5px !important;
  font-size: 10px !important;
  flex-shrink: 0;
}

.cargoStagingActions {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.cargoStagingActions .btnPrimary {
  flex: 1;
}

/* ── Buttons ────────────────────────────────────────────── */

.btnSmall {
  background: rgba(89,185,230,0.12);
  border: 1px solid rgba(89,185,230,0.3);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btnSmall:hover {
  background: rgba(89,185,230,0.2);
  border-color: var(--accent);
}

.btnSmall.btnCancel {
  border-color: rgba(255,107,122,0.3);
  color: #ff6b7a;
  background: rgba(255,107,122,0.08);
}

.btnSmall.btnCancel:hover {
  background: rgba(255,107,122,0.16);
  border-color: #ff6b7a;
}

/* ── Equipment active glow on invCell ───────────────────── */

.invCell.eqActive {
  border-color: rgba(94,232,156,0.35);
  box-shadow: inset 0 0 10px rgba(94,232,156,0.12), 0 0 6px rgba(94,232,156,0.08);
}

/* ══════════════════════════════════════════════════════════
   Transfer Planner — Refactored UI
   ══════════════════════════════════════════════════════════ */

.tpModal {
  position: relative;
  width: min(1080px, 94vw);
  height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  border: 1px solid rgba(122, 170, 222, 0.4);
  background:
    linear-gradient(180deg, rgba(24, 40, 60, 0.42), transparent 22%),
    var(--panel-solid);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.62);
}

.tpHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(18, 28, 42, 0.6), transparent);
  flex: 0 0 auto;
}

.tpHeaderLeft { display: flex; flex-direction: column; gap: 2px; }

.tpTitle {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.tpSubtitle {
  font-size: 11px;
  color: var(--muted);
}

.tpBody {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.tpDestPanel {
  border-right: 1px solid var(--border-soft);
  overflow-y: auto;
  padding: 0;
  background: rgba(6, 10, 18, 0.5);
  min-height: 0;
}

.tpDestLabel {
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: rgba(218, 236, 252, 0.82);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8, 13, 21, 0.96);
}

.tpDetailPanel {
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* ── Transfer details sections ─────────────────────────── */

.tpSection {
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  background: rgba(8, 13, 22, 0.82);
  padding: 12px 14px;
}

.tpSectionTitle {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: rgba(109, 182, 255, 0.85);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(109, 182, 255, 0.18);
}

.tpRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
  color: rgba(163, 184, 203, 0.95);
}

.tpRow.tpHighlight {
  border-top: 1px solid rgba(109, 182, 255, 0.12);
  margin-top: 4px;
  padding-top: 6px;
}

.tpLabel { color: var(--muted); }
.tpVal { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tpVal.tpPositive { color: var(--ok); }
.tpVal.tpNegative { color: #ff6b7a; }
.tpVal.tpAccent { color: var(--accent); }
.tpVal.tpWarn { color: #ffc266; }

/* ── Path display ───────────────────────────────────────── */

.tpPathWrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 2px;
  border: 1px solid var(--border-soft);
  background: rgba(4, 8, 14, 0.62);
  font-size: 12px;
}

.tpPathNode {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.tpPathNode.tpPathOrigin { color: var(--ok); }
.tpPathNode.tpPathDest { color: var(--accent); }

.tpPathArrow {
  color: rgba(109, 182, 255, 0.45);
  font-size: 10px;
}

/* ── Departure date picker ──────────────────────────────── */

.tpDateRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tpDateInput {
  background: rgba(8, 14, 24, 0.9);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  color: var(--text);
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  min-width: 180px;
}

.tpDateInput:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(89, 185, 230, 0.3);
}

.tpDateBtn {
  background: rgba(89,185,230,0.12);
  border: 1px solid rgba(89,185,230,0.3);
  color: var(--accent);
  padding: 5px 10px;
  border-radius: 2px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.tpDateBtn:hover {
  background: rgba(89,185,230,0.2);
  border-color: var(--accent);
}

.tpDateBtn.active {
  background: rgba(89,185,230,0.25);
  border-color: var(--accent);
}

/* ── Delta-v slider ─────────────────────────────────────── */

.tpSliderWrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tpSliderRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tpSlider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(109,182,255,0.3), rgba(89,185,230,0.15));
  outline: none;
}

.tpSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(8, 14, 24, 0.9);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(89, 185, 230, 0.4);
}

.tpSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(8, 14, 24, 0.9);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(89, 185, 230, 0.4);
}

.tpSliderLabel {
  font-size: 11px;
  color: var(--muted);
  min-width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tpSliderTicks {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(163, 184, 203, 0.4);
  padding: 0 2px;
}

/* ── Orbital alignment badge ────────────────────────────── */

.tpAlignBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tpAlignBadge.tpAlignGood {
  background: rgba(116,216,192,0.15);
  color: #74d8c0;
  border: 1px solid rgba(116,216,192,0.3);
}

.tpAlignBadge.tpAlignFair {
  background: rgba(255,194,102,0.12);
  color: #ffc266;
  border: 1px solid rgba(255,194,102,0.3);
}

.tpAlignBadge.tpAlignPoor {
  background: rgba(255,107,122,0.12);
  color: #ff6b7a;
  border: 1px solid rgba(255,107,122,0.3);
}

/* ── Confirm bar ────────────────────────────────────────── */

.tpActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}

.tpActions .btnPrimary {
  min-width: 100px;
}

/* ── Porkchop plot ──────────────────────────────────────── */

.tpPorkchopTip {
  position: absolute;
  pointer-events: none;
  background: rgba(8, 14, 24, 0.95);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
  z-index: 100;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.tpPorkchopTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tpPorkchopTable th {
  text-align: left;
  padding: 4px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
  font-weight: 600;
}

.tpPorkchopTable td {
  padding: 3px 6px;
  color: rgba(163, 184, 203, 0.95);
  border-bottom: 1px solid rgba(109, 182, 255, 0.06);
}

.tpPorkchopTable tr:first-child td {
  color: var(--accent);
  font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 700px) {
  .tpBody {
    grid-template-columns: 1fr;
  }
  .tpDestPanel {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    max-height: 200px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORGANIZATION PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.orgPage .top.panel {
  border-bottom-color: var(--border-soft);
}

.orgLayout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  max-width: 1400px;
  margin: 0 auto;
}

.orgSubTabs {
  display: flex;
  gap: 8px;
  padding: 8px;
}

.orgSubTabBtn {
  border: 1px solid var(--border-soft);
  background: rgba(12, 18, 30, 0.75);
  color: var(--muted);
  border-radius: 3px;
  padding: 6px 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  cursor: pointer;
}

.orgSubTabBtn:hover,
.orgSubTabBtn.active {
  color: var(--text);
  border-color: var(--border);
  background: rgba(32, 58, 86, 0.4);
}

.orgTabPane {
  display: block;
}

#orgTabOverview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 4px;
}

#orgTabFinances {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 4px;
}

#orgTabMarketplace {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 4px;
}

body.embedMode #orgTabFinances {
  max-height: calc(100vh - 96px);
}

body.embedMode #orgTabMarketplace {
  max-height: calc(100vh - 96px);
}

body.embedMode #orgTabOverview {
  max-height: calc(100vh - 96px);
}

.orgLeftCol,
.orgRightCol {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.orgFinancesCol {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.orgMarketplaceCol {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.orgTableWrap {
  margin-top: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}

.orgMarketTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.orgMarketTable th,
.orgMarketTable td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.orgMarketTable th {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(8, 13, 22, 0.62);
}

.orgMarketTable tbody tr:last-child td {
  border-bottom: none;
}

.orgMarketSellRows {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.orgMarketSellRow {
  border: 1px solid var(--border-soft);
  background: rgba(12, 18, 30, 0.7);
  border-radius: 4px;
  padding: 8px;
  display: grid;
  gap: 8px;
}

.orgMarketSellHead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.orgMarketSellLeft {
  display: grid;
  gap: 2px;
}

.orgMarketSellTitle {
  font-size: 13px;
  color: var(--text);
}

.orgMarketSellControls {
  display: grid;
  gap: 6px;
}

.orgMarketSellSlider {
  width: 100%;
}

.orgLoanOffers {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.orgLoanCard {
  border: 1px solid var(--border-soft);
  background: rgba(12, 18, 30, 0.7);
  border-radius: 4px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.orgLoanTitleRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

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

.orgLoanMetaItem {
  border: 1px solid var(--border-soft);
  background: rgba(8, 13, 22, 0.58);
  border-radius: 3px;
  padding: 6px 8px;
}

.orgLoanMetaLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.orgLoanMetaValue {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text);
}

.orgLoanTracker {
  display: grid;
  gap: 4px;
}

.orgLoanProgress {
  height: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(7, 12, 20, 0.75);
  overflow: hidden;
}

.orgLoanProgressFill {
  height: 100%;
  background: linear-gradient(90deg, rgba(72, 209, 243, 0.85), rgba(89, 185, 230, 0.45));
}

/* Stat grid */
.orgStatGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.orgStat {
  background: var(--bg-panel, #1a1e2e);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 10px 12px;
}

.orgStatLabel {
  font-size: 11px;
  color: var(--muted, #8899aa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.orgStatValue {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e0e8f0);
}

.orgStatValue.small {
  font-size: 14px;
}

/* Teams */
.orgTeamsList {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.orgTeamRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg-panel, #1a1e2e);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.orgTeamName {
  font-weight: 500;
  flex: 1;
}

.orgTeamActions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btnDanger {
  background: #8b2020;
  color: #fff;
  border: 1px solid #a03030;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.btnDanger:hover {
  background: #a83030;
}

.btnSmall {
  padding: 3px 8px;
  font-size: 11px;
}

/* Boost controls */
.orgBoostControls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
  align-items: end;
}

.orgBoostItems {
  display: grid;
  gap: 8px;
}

.orgBoostLine {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.orgBoostRemoveBtn {
  min-width: 28px;
}

.orgBoostAddBtn {
  margin-top: 8px;
}

.orgBoostField label {
  display: block;
  font-size: 11px;
  color: var(--muted, #8899aa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.orgSelect,
.orgInput {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-dark, #0d1117);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  color: var(--text-primary, #e0e8f0);
  font-size: 13px;
}

.orgBoostHistory {
  max-height: 200px;
  overflow-y: auto;
}

/* Account panel */
.orgAccountPanel {
  margin-top: auto;
}

@media (max-width: 800px) {
  #orgTabOverview {
    grid-template-columns: 1fr;
  }
  .orgBoostControls {
    grid-template-columns: 1fr;
  }
  .orgBoostLine {
    grid-template-columns: 1fr;
  }
  .orgLoanMeta {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KSP TECH TREE (Research page)
   ═══════════════════════════════════════════════════════════════════════════ */

.researchBadge {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 4px;
}

.researchRpIndicator {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #40c8ff;
  padding: 4px 12px;
  border: 1px solid rgba(64, 200, 255, 0.3);
  border-radius: 3px;
  background: rgba(64, 200, 255, 0.08);
}

/* Vertical connector between nodes */
.kspTreeEdge {
  position: absolute;
  width: 2px;
  background: #334;
  pointer-events: none;
  z-index: 0;
}

.kspTreeEdge.isUnlocked {
  background: #40c860;
}

/* Subtree column header (for multi-tree tabs like Refineries) */
.kspSubtreeHeader {
  position: absolute;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #40c8ff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 1px solid rgba(64, 200, 255, 0.2);
  z-index: 2;
}

/* Tech node card */
.kspTechNode {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border: 2px solid #334;
  border-radius: 6px;
  background: #181c28;
  cursor: pointer;
  text-align: left;
  color: #c0c8d0;
  font-size: 13px;
  z-index: 1;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.kspTechNode:hover {
  border-color: #556;
}

.kspTechNode.isSelected {
  border-color: #40a0ff;
  box-shadow: 0 0 12px rgba(64, 160, 255, 0.25);
}

.kspTechNode.isUnlocked {
  border-color: #40c860;
  background: #1a2820;
}

.kspTechNode.isAvailable {
  border-color: #40a0ff;
  background: #181e30;
}

.kspTechNode.isLocked {
  opacity: 0.5;
  border-color: #222;
}

/* Fit-to-view button */
.researchFitBtn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  padding: 4px 14px;
  border: 1px solid rgba(98, 130, 165, 0.5);
  border-radius: 3px;
  background: rgba(20, 26, 36, 0.85);
  color: #c0c8d0;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.researchFitBtn:hover {
  background: rgba(30, 42, 58, 0.9);
  border-color: rgba(113, 186, 225, 0.6);
}

.kspNodeName {
  font-weight: 600;
  font-size: 14px;
  color: #e0e8f0;
}

.kspNodeCost {
  font-size: 12px;
  color: #40c8ff;
}

.kspNodeCost.unlocked {
  color: #40c860;
}

.kspNodeItemCount {
  font-size: 11px;
  color: #667;
}

/* Unlock rows in sidebar */
.kspUnlockRow {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft, #223);
  opacity: 0.6;
}

.kspUnlockRow.isUnlocked {
  opacity: 1.0;
}

.kspUnlockName {
  font-weight: 500;
  font-size: 13px;
  color: #e0e8f0;
  margin-bottom: 2px;
}

.kspUnlockStats {
  font-size: 11px;
}

/* ══════════════════════════════════════════════════════════
   Prospecting Dialog
   ══════════════════════════════════════════════════════════ */

.prospectModal {
  position: relative;
  width: min(680px, 94vw);
  max-height: 85vh;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid rgba(122, 170, 222, 0.4);
  background:
    linear-gradient(180deg, rgba(24, 40, 60, 0.42), transparent 22%),
    var(--panel-solid);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.62);
}

.prospectHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(18, 28, 42, 0.6), transparent);
}

.prospectHeaderLeft { display: flex; flex-direction: column; gap: 2px; }

.prospectTitle {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.prospectSubtitle {
  font-size: 11px;
  color: var(--muted);
}

.prospectBody {
  overflow-y: auto;
  padding: 12px 16px;
  max-height: calc(85vh - 60px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prospectLoading,
.prospectEmpty,
.prospectError {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 13px;
}

.prospectError { color: var(--fuel-low, #f44); }

.prospectSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 2px;
  background: rgba(8, 13, 22, 0.65);
  border: 1px solid var(--border-soft);
  font-size: 12px;
}

.prospectSummaryCount {
  font-weight: 600;
  color: var(--accent);
}

.prospectSummaryDetail {
  color: var(--muted);
}

.prospectBodyGroup {
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  background: rgba(8, 13, 22, 0.5);
  overflow: hidden;
}

.prospectBodyHeader {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(16, 24, 36, 0.7);
  border-bottom: 1px solid var(--border-soft);
}

.prospectSiteRow {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(40, 55, 75, 0.3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.prospectSiteRow:last-child { border-bottom: none; }

.prospectSiteRow:hover {
  background: rgba(60, 100, 160, 0.08);
}

.prospectSiteRow.isUncharted {
  border-left: 3px solid rgba(200, 160, 60, 0.5);
}

.prospectSiteRow.isProspected {
  border-left: 3px solid rgba(80, 180, 120, 0.4);
}

.prospectSiteInfo {
  flex: 1;
  min-width: 180px;
}

.prospectSiteName {
  font-weight: 500;
  font-size: 13px;
  color: #e0e8f0;
}

.prospectSiteMeta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.prospectSiteAction {
  display: flex;
  align-items: center;
  gap: 6px;
}

.prospectBtn {
  font-size: 12px;
  padding: 4px 14px;
  min-height: 28px;
}

.prospectBadge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 2px;
  font-weight: 500;
}

.prospectBadgeGreen {
  background: rgba(60, 160, 100, 0.18);
  color: #6fd890;
  border: 1px solid rgba(60, 160, 100, 0.3);
}

.prospectResourceList {
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(4, 8, 14, 0.5);
  border-radius: 2px;
  border: 1px solid rgba(40, 55, 75, 0.25);
}

.prospectResourceRow {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 11px;
}

.prospectResName {
  color: #b0c0d8;
}

.prospectResFraction {
  color: var(--accent);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   INDUSTRY V2 — Constructors, Refinery Slots, Construction Queue
   ══════════════════════════════════════════════════════════════ */

/* ── Collapsible Constructors Section ─────────────────────── */

.constructorsSectionHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}
.constructorsSectionHeader:hover { color: var(--accent); }
.constructorsSectionHeader .collapseToggle {
  font-size: 12px;
  width: 14px;
}
.constructorsSectionHeader .sectionTitle { margin: 0; }

#constructorCountBadge {
  background: rgba(89,185,230,0.15);
  color: var(--accent);
  border-radius: 8px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
}

#constructorSummary {
  font-size: 11px;
  color: #8899aa;
  margin-left: auto;
}

.constructorRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(40,55,75,0.25);
}
.constructorRow:last-child { border-bottom: none; }
.constructorRow:hover { background: rgba(89,185,230,0.04); }

.constructorInfo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.constructorIcon { font-size: 16px; }
.constructorDetails { flex: 1; min-width: 0; }
.constructorName {
  font-size: 12px;
  font-weight: 500;
  color: #d0dce8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.constructorStats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.constructorStats .eqDetail {
  font-size: 10px;
  color: #7888a0;
}

/* ── Mode toggle switch ───────────────────────────────────── */

.constructorModeSwitch {
  display: flex;
  gap: 2px;
  background: rgba(20,30,45,0.6);
  border-radius: 4px;
  padding: 2px;
  border: 1px solid rgba(40,55,75,0.35);
}
.modeOption {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  color: #7888a0;
  transition: all 0.15s;
  white-space: nowrap;
}
.modeOption:hover { color: #b0c0d8; }
.modeOption.active {
  background: rgba(89,185,230,0.2);
  color: var(--accent);
  font-weight: 500;
}
.modeOption input[type="radio"] { display: none; }

.btnUndeploy {
  font-size: 10px;
  padding: 3px 8px;
  opacity: 0.6;
}
.btnUndeploy:hover { opacity: 1; }
.btnUndeploy:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Mining Summary ───────────────────────────────────────── */

.miningSummaryHeader {
  padding: 6px 10px;
  font-size: 12px;
  color: #b0c0d8;
  border-bottom: 1px solid rgba(40,55,75,0.25);
}
.miningDistribution { padding: 4px 0; }
.miningDistRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 11px;
}
.miningDistName {
  width: 120px;
  color: #d0dce8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.miningDistRate {
  width: 80px;
  text-align: right;
  color: var(--accent);
  font-weight: 500;
  font-size: 11px;
}

/* ── Refinery Slots ───────────────────────────────────────── */

#refinerySlotCountBadge {
  background: rgba(89,185,230,0.15);
  color: var(--accent);
  border-radius: 8px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
}

.refinerySlotRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(40,55,75,0.25);
  transition: background 0.15s;
  flex-wrap: wrap;
}
.refinerySlotRow:last-child { border-bottom: none; }
.refinerySlotRow:hover { background: rgba(89,185,230,0.04); }
.refinerySlotRow.slotActive { border-left: 2px solid var(--accent); }
.refinerySlotRow.dragging { opacity: 0.4; }

.slotDragHandle {
  cursor: grab;
  color: #556677;
  font-size: 14px;
  user-select: none;
  padding: 0 2px;
}
.slotDragHandle:hover { color: var(--accent); }

.slotPriority {
  font-size: 11px;
  color: #7888a0;
  font-weight: 600;
  width: 24px;
  text-align: center;
}

.slotEquipName {
  font-size: 10px;
  color: #667788;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slotRecipe {
  flex: 1;
  font-size: 12px;
  color: #d0dce8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.slotRecipe:hover { background: rgba(89,185,230,0.08); }
.slotRecipe.slotEmpty { color: #556677; font-style: italic; }

.slotStats { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 11px; white-space: nowrap; }
.slotProduced { color: #7888a0; }
.slotBatches { color: #66bbaa; }
.slotBatches.noBatches { color: #cc6655; }

.btnClearSlot {
  font-size: 10px;
  padding: 2px 6px;
  opacity: 0.6;
}
.btnClearSlot:hover { opacity: 1; }

.slotActions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.slotActions .btnSmall {
  font-size: 10px;
  padding: 2px 6px;
  opacity: 0.6;
}
.slotActions .btnSmall:hover { opacity: 1; }

.slotProgressWrap {
  position: relative;
  width: 100%;
  height: 14px;
  background: rgba(30,42,58,0.6);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.slotProgressBar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(89,185,230,0.35), rgba(89,185,230,0.55));
  transition: width 1s linear;
  border-radius: 2px;
}
.slotProgressLabel {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #b0c4d8;
  letter-spacing: 0.3px;
  text-shadow: 0 0 3px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* ── Construction Queue ───────────────────────────────────── */

#constructionPoolInfo {
  font-size: 11px;
  color: #7888a0;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(40,55,75,0.2);
}

.constructionQueueRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(40,55,75,0.25);
  transition: background 0.15s;
}
.constructionQueueRow:last-child { border-bottom: none; }
.constructionQueueRow:hover { background: rgba(89,185,230,0.04); }
.constructionQueueRow.queueActive { border-left: 2px solid #5ee89c; }
.constructionQueueRow.dragging { opacity: 0.4; }

.queueOrder {
  font-size: 11px;
  color: #7888a0;
  font-weight: 600;
  width: 24px;
  text-align: center;
}
.queueInfo { flex: 1; min-width: 0; }
.queueName {
  font-size: 12px;
  color: #d0dce8;
  font-weight: 500;
}
.queueOutput {
  font-size: 10px;
  color: #7888a0;
}
.queueProgress { flex: 0 0 200px; display: flex; align-items: center; gap: 6px; }
.queuePct { font-size: 10px; color: #7888a0; white-space: nowrap; }

.btnDequeue {
  font-size: 10px;
  padding: 3px 8px;
  opacity: 0.6;
}
.btnDequeue:hover { opacity: 1; }

#btnAddConstruction {
  margin: 8px 10px;
}

/* ── Facility Grid ────────────────────────────────────────── */

.facilityBreadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  margin: 0 16px 8px;
}
.facilityBreadcrumb .btnBack {
  font-size: 12px;
  padding: 4px 10px;
}
.facilityBreadcrumbText {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.facilityGridLayout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  padding: 0 16px;
}
@media (max-width: 900px) {
  .facilityGridLayout { grid-template-columns: 1fr; }
}

.facilityGridCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.facilityCard {
  background: rgba(20,30,45,0.5);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.facilityCard:hover {
  border-color: var(--accent);
  background: rgba(30,42,58,0.6);
}
.facilityCard.facilityOther {
  cursor: default;
  opacity: 0.7;
}
.facilityCard.facilityOther:hover {
  border-color: var(--border);
  background: rgba(20,30,45,0.5);
}
.facilityCard.facilityCreate {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100px;
}
.facilityCard.facilityCreate .facilityCreatePlus {
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}
.facilityCard.facilityCreate .facilityCreateLabel {
  font-size: 12px;
  color: var(--muted);
}
.facilityCardName {
  font-size: 14px;
  font-weight: 600;
  color: #d0dce8;
  margin-bottom: 6px;
}
.facilityCardCorp {
  font-size: 11px;
  color: #7888a0;
  margin-bottom: 8px;
}
.facilityCardStats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #9aafca;
}
.facilityCardEnter {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.siteUpgradesPlaceholder {
  margin: 0;
}
.siteUpgradesBody {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  border: 1px dashed rgba(89,185,230,0.2);
  border-radius: 4px;
  margin: 12px;
}

/* ── Recipe Select Modal ──────────────────────────────────── */

.recipeSelectModalBody {
  width: min(980px, 92vw) !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.recipeSelectModalBody > .panelHeader {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}

#recipeSelectSinglePane {
  padding: 0;
}

#recipeSelectContent {
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 0;
}

/* Dual-pane layout for construction mode */
.recipeModalDual {
  display: flex;
  height: calc(70vh - 56px);
  min-height: 300px;
}
.recipeModalStaging {
  width: 280px;
  min-width: 220px;
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  background: rgba(8, 14, 24, 0.5);
}
.recipeStagingHeader {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.recipeStagingList {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.recipeStagingFooter {
  padding: 8px 12px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: flex-end;
}
.recipeStagingFooter .btnAccent {
  background: var(--accent);
  color: #0a0e14;
  font-weight: 600;
  padding: 6px 16px;
}
.recipeStagingFooter .btnAccent:disabled {
  opacity: 0.4;
  cursor: default;
}
.recipeModalCatalog {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* Staging row */
.stagingRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(40,55,75,0.15);
}
.stagingRow:last-child { border-bottom: none; }
.stagingInfo { flex: 1; min-width: 0; }
.stagingName {
  font-size: 11px;
  font-weight: 500;
  color: #d0dce8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stagingMeta {
  font-size: 9px;
  color: #7888a0;
}
.stagingControls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.stagingQty {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 20px;
  text-align: center;
}
.btnStagingMinus, .btnStagingPlus {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  background: rgba(89,185,230,0.08);
  border: 1px solid rgba(89,185,230,0.2);
  border-radius: 3px;
  color: var(--accent);
  cursor: pointer;
}
.btnStagingMinus:hover, .btnStagingPlus:hover {
  background: rgba(89,185,230,0.18);
}
.btnStagingRemove {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  background: rgba(200,60,60,0.1);
  border: 1px solid rgba(200,60,60,0.2);
  border-radius: 3px;
  color: #c83c3c;
  cursor: pointer;
  margin-left: 4px;
}
.btnStagingRemove:hover { background: rgba(200,60,60,0.25); }

.btnAddToStaging {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  flex-shrink: 0;
}

.recipeSelectRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(40,55,75,0.2);
}
.recipeSelectRow:last-child { border-bottom: none; }
.recipeSelectRow:hover { background: rgba(89,185,230,0.04); }
.recipeSelectRow.cantStart { opacity: 0.5; }
.recipeSelectRow .recipeInfo { flex: 1; }
.recipeSelectRow .recipeName {
  font-size: 12px;
  font-weight: 500;
  color: #d0dce8;
  margin-bottom: 2px;
}
.recipeSelectRow .recipeInputs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.recipeSelectRow .recipeMeta {
  font-size: 10px;
  color: #7888a0;
  display: flex;
  gap: 10px;
}
.recipeGroupHeader {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  padding: 8px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(89,185,230,0.15);
}

/* ── Shared bar styles ────────────────────────────────────── */

.bar {
  flex: 1;
  height: 6px;
  background: rgba(20,30,45,0.6);
  border-radius: 3px;
  overflow: hidden;
}
.barFill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════
   Contracts page
   ═══════════════════════════════════════════════════════════ */

.contractsPage .app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.contractsPage .top.panel {
  flex-shrink: 0;
}

body.embedMode.contractsPage .app {
  max-width: none;
  padding: 0;
}

body.embedMode.contractsPage .top {
  display: none;
}

/* ── Sub-tabs (matches sites pattern) ───────────────────── */

.contractsSubTabs {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 0 16px;
  margin-bottom: 0;
}

.contractsSubTabBtn {
  background: rgba(30,44,62,0.6);
  border: 1px solid var(--border-soft);
  border-bottom: none;
  color: var(--muted);
  padding: 8px 20px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.15s;
  border-radius: 4px 4px 0 0;
}

.contractsSubTabBtn:hover {
  color: var(--text);
  background: rgba(40,58,80,0.7);
}

.contractsSubTabBtn.active {
  background: var(--panel);
  color: var(--accent);
  border-color: var(--border);
  border-bottom: 2px solid var(--accent);
}

/* ── Tab pane ───────────────────────────────────────────── */

.contractsTabPane {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
  padding: 16px;
}

body.embedMode .contractsTabPane {
  padding: 8px;
}

/* ── Contracts Start Page (Tab 1) ───────────────────────── */

.contractsStartPage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contractsStartHeader {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.contractsStartText h2 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contractsStartText p {
  margin: 0;
  font-size: 12px;
}

.contractsIncomingList {
  width: 100%;
}

.contractsIncomingRow {
  display: flex;
  gap: 16px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background 80ms ease;
}

.contractsIncomingRow:hover {
  background: rgba(89, 185, 230, 0.06);
}

/* ── Create bar ─────────────────────────────────────────── */

.contractsCreateBar {
  padding: 12px 0;
}

.contractsCreateBtn {
  padding: 7px 20px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(12, 18, 30, 0.6);
  color: var(--text);
  border-radius: 2px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.contractsCreateBtn:hover {
  background: rgba(32, 58, 86, 0.4);
  border-color: var(--accent);
}

/* ── My Contracts filters (Tab 2) ───────────────────────── */

.contractsMyPage {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contractsMyFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border-soft);
}

.contractsFilterGroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contractsFilterLabel {
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.02em;
}

.contractsSelect {
  background: rgba(12, 18, 30, 0.85);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 2px;
  font-size: 12px;
  min-width: 120px;
  cursor: pointer;
}

.contractsSelect:focus {
  border-color: var(--border);
  outline: none;
}

.contractsInput {
  background: rgba(12, 18, 30, 0.85);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 2px;
  font-size: 12px;
  min-width: 120px;
}

.contractsInput:focus {
  border-color: var(--border);
  outline: none;
}

.contractsInputSmall {
  background: rgba(12, 18, 30, 0.85);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 5px 6px;
  border-radius: 2px;
  font-size: 12px;
  width: 58px;
}

.contractsFilterNav {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.contractsPagerBtn {
  background: rgba(12, 18, 30, 0.6);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  width: 26px;
  height: 28px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contractsPagerBtn:hover:not(:disabled) {
  border-color: var(--border);
  color: var(--text);
}

.contractsPagerBtn:disabled {
  opacity: 0.35;
  cursor: default;
}

.contractsGetBtn {
  padding: 6px 14px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(12, 18, 30, 0.6);
  color: var(--text);
  border-radius: 2px;
  cursor: pointer;
}

.contractsGetBtn:hover {
  background: rgba(32, 58, 86, 0.4);
}

/* ── Result area (shared) ───────────────────────────────── */

.contractsResultArea {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contractsEmptyMsg {
  color: var(--muted);
  font-size: 16px;
  text-align: center;
  padding: 40px 0;
}

/* ── Contract Search (Tab 3) ────────────────────────────── */

.contractsSearchPage {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contractsSearchTypeTabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.contractsSearchTypeBtn {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}

.contractsSearchTypeBtn:first-child {
  border-radius: 3px;
}

.contractsSearchTypeBtn:last-child {
  border-radius: 3px;
}

.contractsSearchTypeBtn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(89,185,230,0.08);
}

.contractsSearchLayout {
  display: flex;
  gap: 16px;
}

/* ── Search sidebar ─────────────────────────────────────── */

.contractsSearchSidebar {
  width: 210px;
  min-width: 190px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contractsSearchField {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── Courier zone icon bar ─────────────────────────────── */
.czBar {
  display: flex;
  gap: 5px;
  padding: 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(120, 165, 214, 0.18);
  background: rgba(8, 14, 24, 0.38);
  flex-wrap: wrap;
  justify-content: center;
}
.czBtn {
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(120, 165, 214, 0.18);
  background: rgba(7, 12, 20, 0.18);
  color: rgba(219, 236, 251, 0.68);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.czBtn:hover {
  border-color: rgba(109, 182, 255, 0.55);
  background: rgba(24, 43, 64, 0.38);
  color: rgba(232, 244, 255, 0.95);
}
.czBtn.czActive {
  border-color: rgba(109, 182, 255, 0.65);
  background: rgba(109, 182, 255, 0.18);
  color: rgba(234, 246, 255, 0.95);
  box-shadow: 0 0 12px rgba(68, 224, 255, 0.18);
}

.contractsCheckRow {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  align-items: center;
}

.contractsCheckRow label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.contractsCheckRow input[type="checkbox"] {
  accent-color: var(--accent);
}

.contractsPriceRange {
  display: flex;
  align-items: center;
  gap: 4px;
}

.contractsRangeSep {
  font-size: 11px;
  color: var(--muted);
}

.contractsAdvancedOptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contractsToggleAdvanced {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
}

.contractsToggleAdvanced:hover {
  color: var(--text);
}

.contractsToggleArrow {
  font-size: 9px;
}

.contractsSearchBtn {
  width: 100%;
  padding: 7px 0;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(12, 18, 30, 0.6);
  color: var(--text);
  border-radius: 2px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 150ms ease, border-color 150ms ease;
}

.contractsSearchBtn:hover {
  background: rgba(32, 58, 86, 0.4);
  border-color: var(--accent);
}

.contractsSearchStatus {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 4px 0;
}

/* ── Search results ─────────────────────────────────────── */

.contractsSearchResults {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contractsSearchResultsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 8px;
}

.contractsResultsViewToggle {
  display: flex;
  gap: 2px;
}

.contractsViewBtn {
  background: rgba(12, 18, 30, 0.6);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  width: 28px;
  height: 26px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contractsViewBtn.active {
  border-color: var(--border);
  color: var(--text);
  background: rgba(32, 58, 86, 0.35);
}

.contractsSortBy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.contractsSearchPrompt {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 60px 0;
}

.contractsSearchRow {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text);
}

.contractsSearchRow:hover {
  background: rgba(89, 185, 230, 0.06);
}

/* ── Contract Search: Eve Online-style spreadsheet table ── */

.contractsSearchResults {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contractsSearchResultsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 6px;
}

.csrhLeft {
  font-size: 11px;
  color: var(--muted);
}

.csrhRight {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.csrhSortLabel {
  white-space: nowrap;
}

.contractsSelectSmall {
  font-size: 11px;
  padding: 2px 6px;
  max-width: 180px;
}

/* Column header row */
.csTableHeader {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(12, 18, 30, 0.65);
  font-size: 11px;
  color: var(--muted);
  user-select: none;
}

.csTableHeader .csCol {
  cursor: pointer;
}

.csTableHeader .csCol:hover {
  color: var(--text);
}

/* Table body */
.csTableBody {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 150px;
  background: rgba(8, 13, 24, 0.45);
}

/* Spreadsheet row */
.csRow {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background 80ms ease;
}

.csRow:hover {
  background: rgba(89, 185, 230, 0.07);
}

.csRow:nth-child(even) {
  background: rgba(20, 30, 48, 0.25);
}

.csRow:nth-child(even):hover {
  background: rgba(89, 185, 230, 0.07);
}

/* Column layout — matches Eve Online proportions */
.csCol {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}

.csColContract {
  flex: 1 1 230px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.csColLocation {
  width: 165px;
}

.csColPrice {
  width: 120px;
  text-align: right;
  color: #74d8c0;
  padding-right: 16px;
}

.csColTimeLeft {
  width: 100px;
}

.csColCreated {
  width: 130px;
  color: var(--muted);
  font-size: 11px;
}

.csColIssuer {
  flex: 1 1 120px;
  min-width: 80px;
  color: var(--muted);
  font-size: 11px;
}

/* Item icon in Contract column */
.csItemIcon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 30, 48, 0.6);
  object-fit: contain;
  image-rendering: auto;
}

.csItemIconMulti {
  display: flex;
  align-items: center;
  justify-content: center;
}

.csItemIconMulti svg {
  opacity: 0.65;
}

.csItemIconBlank {
  display: inline-block;
  background: rgba(40, 55, 80, 0.5);
}

.csContractLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csMultiLabel {
  color: var(--muted);
  font-style: italic;
}

/* Table footer */
.csTableFooter {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border-soft);
  background: rgba(12, 18, 30, 0.35);
}

/* ── Contract Detail Modal (Eve Online-style) ──────────── */

.cdOverlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cdWindow {
  width: 520px;
  max-width: 95vw;
  max-height: 90vh;
  background: linear-gradient(180deg, #1a2235 0%, #0f1520 100%);
  border: 1px solid #3a4a5c;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cdScrollBody {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.cdTitleBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #2a3548 0%, #1e2a3a 100%);
  border-bottom: 1px solid #3a4a5c;
  user-select: none;
}

.cdTitleIcon {
  flex: 0 0 18px;
}

.cdTitleText {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  flex: 1;
}

.cdTitleActions {
  display: flex;
  gap: 4px;
}

.cdCloseBtn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.cdCloseBtn:hover {
  background: rgba(200, 60, 60, 0.35);
  color: #ff6666;
}

.cdHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}

.cdHeaderIcon {
  flex: 0 0 auto;
}

.cdHeaderImg {
  width: 42px;
  height: 42px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cdHeaderIconBlank {
  width: 42px;
  height: 42px;
  border-radius: 3px;
  background: rgba(40, 55, 80, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cdHeaderText {
  font-size: 14px;
  color: var(--text);
  line-height: 1.3;
}

.cdDivider {
  height: 1px;
  background: #3a4a5c;
  margin: 0 12px;
}

/* Info section — label/value rows */
.cdInfoSection {
  padding: 10px 16px;
}

.cdInfoRow {
  display: flex;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.6;
}

.cdInfoLabel {
  width: 130px;
  flex: 0 0 130px;
  color: var(--text);
  font-weight: 600;
  font-size: 11px;
}

.cdInfoValue {
  flex: 1;
  color: #b0bcc8;
}

.cdValGreen {
  color: #44dd44;
  font-weight: 500;
}

.cdValRed {
  color: #dd4444;
  font-weight: 500;
}

.cdValYellow {
  color: #ddb844;
}

/* Details section */
.cdDetailsSection {
  padding: 10px 16px;
}

/* Items table */
.cdItemsSection {
  padding: 0 0 8px;
}

.cdItemsHeader {
  padding: 8px 16px 4px;
  font-size: 12px;
  color: #dd4444;
  font-weight: 600;
}

.cdItemsTableHeader {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cdItemRow {
  display: flex;
  align-items: center;
  padding: 3px 16px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.cdItemRow:hover {
  background: rgba(89, 185, 230, 0.06);
}

.cdItemCol {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}

.cdItemName {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cdItemQty {
  width: 60px;
  text-align: right;
}

.cdItemType {
  width: 120px;
  color: var(--muted);
}

.cdItemRowIcon {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  flex: 0 0 22px;
}

/* Bid section */
.cdBidSection {
  padding: 10px 16px;
}

.cdBidRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text);
}

.cdBidLabel {
  width: 80px;
  font-weight: 600;
  font-size: 11px;
}

.cdBidInput {
  flex: 1;
  max-width: 220px;
  background: rgba(12, 18, 30, 0.4);
  border: 1px solid rgba(60, 75, 95, 0.5);
  color: var(--text);
  padding: 7px 10px;
  font-size: 14px;
  border-radius: 3px;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.cdBidInput:focus {
  border-color: rgba(89, 185, 230, 0.4);
  outline: none;
  background: rgba(12, 18, 30, 0.55);
}

.cdBidBuyoutLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  padding-left: 80px;
}

.cdBidBuyoutLabel input[type="checkbox"] {
  accent-color: var(--accent);
}

/* Footer */
.cdFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid #3a4a5c;
  background: rgba(12, 18, 30, 0.4);
}

.cdFooterLeft {
  display: flex;
  gap: 6px;
}

.cdMenuBtn {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cdMenuBtn:hover {
  border-color: var(--border);
  color: var(--text);
}

.cdFooterRight {
  display: flex;
  gap: 8px;
}

.cdBtn {
  padding: 6px 20px;
  font-size: 12px;
  border: 1px solid;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  transition: background 100ms ease;
}

.cdBtnClose {
  background: rgba(60, 75, 95, 0.5);
  border-color: #4a5a6c;
  color: var(--text);
}

.cdBtnClose:hover {
  background: rgba(80, 95, 115, 0.6);
}

.cdBtnAccept {
  background: rgba(48, 140, 70, 0.45);
  border-color: #3a8a4a;
  color: #66ee88;
}

.cdBtnAccept:hover {
  background: rgba(48, 140, 70, 0.65);
}

.cdBtnBid {
  background: rgba(48, 100, 160, 0.45);
  border-color: #3a6aaa;
  color: #77bbff;
}

.cdBtnBid:hover {
  background: rgba(48, 100, 160, 0.65);
}

.cdBtnComplete {
  background: rgba(180, 130, 30, 0.45);
  border-color: #b08a20;
  color: #eecc44;
}

.cdBtnComplete:hover {
  background: rgba(180, 130, 30, 0.65);
}

/* ── My Contracts table (Eve Online-style columns) ───── */

.contractsTableHeader {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  user-select: none;
  background: rgba(12, 18, 30, 0.5);
}

.contractsTableBody {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.contractsMyRow {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.contractsMyRow:hover {
  background: rgba(89, 185, 230, 0.06);
}

.ctCol { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.ctColContract { flex: 1 1 180px; min-width: 120px; }
.ctColType     { width: 100px; }
.ctColFrom     { width: 140px; }
.ctColTo       { width: 100px; }
.ctColDate     { width: 130px; }
.ctColTime     { width: 130px; }
.ctColInfo     { flex: 1 1 100px; min-width: 80px; color: var(--muted); font-size: 11px; }

.contractsTableHeader .ctCol { cursor: pointer; }
.contractsTableHeader .ctCol:hover { color: var(--text); }

/* Legacy row spans (search tab) */
.contractRowType {
  min-width: 100px;
}

.contractRowStatus {
  min-width: 80px;
  color: var(--muted);
}

.contractRowPrice {
  min-width: 80px;
  text-align: right;
  color: #74d8c0;
}

.contractRowDate {
  min-width: 100px;
  color: var(--muted);
  font-size: 11px;
}

.contractRowAction {
  margin-left: auto;
}

.contractsSearchPager {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.contractsExpandArrow {
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

/* ── Create Contract Wizard ──────────────────────────── */

.ccWizardOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.65);
  align-items: center;
  justify-content: center;
}

.ccWizard {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  width: 640px;
  max-width: 96vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.ccWizardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.ccWizardClose {
  cursor: pointer;
  font-size: 18px;
  color: var(--muted);
  background: none;
  border: none;
  line-height: 1;
}

.ccWizardClose:hover {
  color: var(--text);
}

.ccWizardBody {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

.ccWizardFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
}

.ccWizardFooter button {
  padding: 6px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  background: var(--bg-muted);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}

.ccWizardFooter button:hover {
  background: rgba(89, 185, 230, 0.15);
}

.ccWizardFooter button.btnAccent {
  background: rgba(89, 185, 230, 0.2);
  border-color: rgba(89, 185, 230, 0.4);
}

.ccWizardFooter button.btnAccent:hover {
  background: rgba(89, 185, 230, 0.35);
}

/* Step content */

.ccStep { display: none; }

.ccStep h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: var(--text);
}

.ccStep label {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.ccStep label input[type="radio"],
.ccStep label input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
}

.ccStep select,
.ccStep input[type="text"],
.ccStep input[type="number"],
.ccStep textarea {
  background: rgba(12, 18, 30, 0.4);
  color: var(--text);
  border: 1px solid rgba(60, 75, 95, 0.5);
  border-radius: 3px;
  padding: 7px 10px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.ccStep select:focus,
.ccStep input[type="text"]:focus,
.ccStep input[type="number"]:focus,
.ccStep textarea:focus {
  border-color: rgba(89, 185, 230, 0.4);
  outline: none;
  background: rgba(12, 18, 30, 0.55);
}

.ccStep textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
}

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

.ccStep .ccFieldLabel {
  min-width: 120px;
  font-size: 12px;
  color: var(--muted);
}

/* Step 2: Item table */

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

.ccItemHeader select {
  flex: 1;
}

#ccItemList {
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-deep);
}

.ccItemRow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}

.ccItemRow:last-child { border-bottom: none; }

.ccItemRow:hover {
  background: rgba(89, 185, 230, 0.06);
}

.ccItemCheck {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.ccItemColType {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ccItemColQty { width: 70px; text-align: right; }
.ccItemColVol { width: 70px; text-align: right; color: var(--muted); }
.ccItemColDetail { flex: 1; color: var(--muted); font-size: 11px; }

.ccQtyInput {
  width: 70px;
  text-align: right;
  padding: 4px 6px;
  font-size: 13px;
  background: rgba(12, 18, 30, 0.4);
  border: 1px solid rgba(60, 75, 95, 0.5);
  color: var(--text);
  border-radius: 3px;
  font-family: inherit;
}

.ccQtyInput:focus {
  border-color: rgba(89, 185, 230, 0.4);
  outline: none;
  background: rgba(12, 18, 30, 0.55);
}

.ccItemIcon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ccItemIcon--resource { background: #3a7a4e; }
.ccItemIcon--part { background: #4a6a8a; }

.ccItemEmpty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.ccItemSummary {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.ccOutstandingInfo {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* Step 4: Confirm table */

.ccConfirmTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ccConfirmTable td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-soft);
}

.ccConfirmTable td:first-child {
  color: var(--muted);
  width: 140px;
  white-space: nowrap;
}

.ccConfirmTable td:last-child {
  color: var(--text);
}

/* Private availability fields */

#ccPrivateFields {
  display: none;
  margin-left: 20px;
  margin-top: 4px;
}

#ccPrivateFields input {
  width: 200px;
}

.ccStepSplit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.ccCreateBtn {
  padding: 8px 24px;
  font-size: 13px;
}

/* ── Contract Create: Step 2 mode bar ──────────────────── */

.ccItemModeBar {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
}

.ccModeBtn {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: var(--bg-deep);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ccModeBtn + .ccModeBtn {
  border-left: 1px solid var(--border-soft);
}

.ccModeBtn.active {
  background: rgba(89, 185, 230, 0.18);
  color: var(--text);
  font-weight: 600;
}

.ccModeBtn:hover:not(.active) {
  background: rgba(89, 185, 230, 0.08);
}

/* ── Contract Create: Catalog / barter search bar ──────── */

.ccCatalogSearch {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.ccCatalogSearch .ccInput {
  flex: 1;
}

.ccCatalogSearch .ccSelect {
  width: 180px;
}

.ccCatCat {
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
}

/* ── Contract Create: Options blocks ───────────────────── */

.ccOptsBlock {
  margin-bottom: 8px;
}

.ccFieldGroup {
  margin-bottom: 12px;
}

.ccLabel {
  display: block;
  font-size: 12px;
  color: var(--gold-text, #c8a85c);
  margin-bottom: 4px;
  font-weight: 600;
}

.ccLabelInline {
  min-width: 180px;
  flex-shrink: 0;
}

.ccRadio {
  display: block;
  padding: 3px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.ccInput, .ccInputNum {
  background: rgba(12, 18, 30, 0.4);
  color: var(--text);
  border: 1px solid rgba(60, 75, 95, 0.5);
  border-radius: 3px;
  padding: 7px 10px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.ccInput:focus, .ccInputNum:focus {
  border-color: rgba(89, 185, 230, 0.4);
  outline: none;
  background: rgba(12, 18, 30, 0.55);
}

.ccInputNum {
  width: 150px;
  text-align: right;
}

.ccSelect {
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}

.ccTextarea {
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 12px;
  width: 100%;
  min-height: 60px;
  resize: vertical;
  font-family: inherit;
}

.ccItemListShort {
  max-height: 180px;
}

.ccSelectedSummary {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Contract Create: Confirm step ─────────────────────── */

.ccConfirmDivider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 8px 0;
}

.ccConfirmDesc {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
}

/* ── Contract Create: Location select ──────────────────── */

.ccLocationSelect {
  width: 100%;
  margin-bottom: 8px;
}

.ccStepFooterInfo {
  font-size: 12px;
  color: var(--muted);
}

.ccPrivateFields {
  margin-left: 20px;
  margin-top: 4px;
}

.ccWizardIcon {
  margin-right: 8px;
  vertical-align: middle;
}

.ccWizardTitle {
  flex: 1;
}

.ccWizardHeaderActions {
  display: flex;
  gap: 4px;
}

.ccWizardHeaderBtn {
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 2px 6px;
  line-height: 1;
}

.ccWizardHeaderBtn:hover {
  color: var(--text);
}

.ccStepTitle {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: var(--text);
}

/* ── Suppress native number spinners on remaining number inputs ── */
.ccQtyInput::-webkit-outer-spin-button,
.ccQtyInput::-webkit-inner-spin-button,
.cdBidInput::-webkit-outer-spin-button,
.cdBidInput::-webkit-inner-spin-button,
.ccInputNum::-webkit-outer-spin-button,
.ccInputNum::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ccQtyInput[type="number"],
.cdBidInput[type="number"],
.ccInputNum[type="number"] {
  -moz-appearance: textfield;
}


/* ═══════════════════════════════════════════════════════════
   Missions page
   ═══════════════════════════════════════════════════════════ */

.missionsPage .app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.missionsPage .top.panel {
  flex-shrink: 0;
}

/* ── Sub-tabs ──────────────────────────────────────────────── */

.missionsSubTabs {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 0 16px;
  margin-bottom: 0;
}

.missionsSubTabBtn {
  background: rgba(30,44,62,0.6);
  border: 1px solid var(--border-soft);
  border-bottom: none;
  color: var(--muted);
  padding: 8px 20px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.15s;
  border-radius: 4px 4px 0 0;
}

.missionsSubTabBtn:hover {
  color: var(--text);
  background: rgba(40,58,80,0.7);
}

.missionsSubTabBtn.active {
  background: var(--panel);
  color: var(--accent);
  border-color: var(--border);
  border-bottom: 2px solid var(--accent);
}

/* ── Tab pane ──────────────────────────────────────────────── */

.missionsTabPane {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
  padding: 0;
}

/* ── Layout: list + detail ─────────────────────────────────── */

.missionsLayout {
  display: flex;
  height: 100%;
  min-height: 0;
}

.missionsList {
  width: 280px;
  min-width: 240px;
  flex: 0 0 auto;
  border-right: 1px solid var(--border-soft);
  overflow-y: auto;
  padding: 8px 0;
}

.missionsDetail,
.missionsActiveDetail {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 16px 24px;
}

/* ── Mission list rows ─────────────────────────────────────── */

.missionsListRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 80ms ease;
}

.missionsListRow:hover {
  background: rgba(89,185,230,0.06);
}

.missionsListRow.selected {
  background: rgba(89,185,230,0.12);
  border-left: 3px solid var(--accent);
}

.missionsListDest {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missionsListPayout {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Tier badges ───────────────────────────────────────────── */

.missionsTier {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.missionsTier--easy {
  color: #7ec87e;
  background: rgba(126,200,126,0.12);
}

.missionsTier--medium {
  color: #e0c050;
  background: rgba(224,192,80,0.12);
}

.missionsTier--hard {
  color: #e05050;
  background: rgba(224,80,80,0.12);
}

/* ── Status badges ─────────────────────────────────────────── */

.missionsStatus {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.missionsStatus--available { color: var(--accent); background: rgba(89,185,230,0.12); }
.missionsStatus--accepted  { color: #7ec87e; background: rgba(126,200,126,0.12); }
.missionsStatus--delivered { color: #e0c050; background: rgba(224,192,80,0.12); }
.missionsStatus--powered   { color: #c890e0; background: rgba(200,144,224,0.12); }
.missionsStatus--completed { color: #50d050; background: rgba(80,208,80,0.15); }
.missionsStatus--failed    { color: #e05050; background: rgba(224,80,80,0.12); }
.missionsStatus--abandoned { color: var(--muted); background: rgba(128,128,128,0.12); }

/* ── Detail card ───────────────────────────────────────────── */

.missionsDetailEmpty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 60px 0;
}

.missionsDetailCard {
  max-width: 600px;
}

.missionsDetailTier {
  margin-bottom: 8px;
}

.missionsDetailTitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px 0;
}

.missionsDetailMeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.missionsDetailRow {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.missionsDetailLabel {
  color: var(--muted);
  min-width: 140px;
  flex-shrink: 0;
}

.missionsDetailMoney {
  color: #7ec87e;
  font-weight: 600;
}

.missionsDetailDesc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  margin-bottom: 16px;
}

.missionsDetailDesc code {
  color: var(--text);
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 11px;
}

.missionsDetailActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.missionsDetailWarn {
  font-size: 11px;
  color: #e0c050;
}

/* ── Buttons ───────────────────────────────────────────────── */

.missionsBtn {
  padding: 7px 20px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(12,18,30,0.6);
  color: var(--text);
  border-radius: 2px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.missionsBtn:hover:not(:disabled) {
  background: rgba(32,58,86,0.4);
  border-color: var(--accent);
}

.missionsBtn:disabled {
  opacity: 0.35;
  cursor: default;
}

.missionsAcceptBtn {
  border-color: #7ec87e;
  color: #7ec87e;
}

.missionsAcceptBtn:hover:not(:disabled) {
  background: rgba(126,200,126,0.12);
  border-color: #7ec87e;
}

.missionsCompleteBtn {
  border-color: #7ec87e;
  color: #7ec87e;
}

.missionsAbandonBtn {
  border-color: #e05050;
  color: #e05050;
}

.missionsAbandonBtn:hover {
  background: rgba(224,80,80,0.12) !important;
  border-color: #e05050 !important;
}

/* ── Active mission bar ────────────────────────────────────── */

.missionsActiveBar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(20,32,50,0.95);
  border-top: 1px solid var(--border);
}

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

.missionsActiveLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.missionsActiveTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missionsActiveInfo {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  align-items: center;
}

.missionsActiveActions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Empty message ─────────────────────────────────────────── */

.missionsEmptyMsg {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 40px 16px;
}

/* ── History table ─────────────────────────────────────────── */

.missionsHistoryList {
  padding: 16px;
}

.missionsHistoryTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.missionsHistoryTable th {
  text-align: left;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.missionsHistoryTable td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
}

.missionsHistoryRow:hover {
  background: rgba(89,185,230,0.04);
}

/* ── Toast ──────────────────────────────────────────────────── */

.missionsToast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,36,56,0.95);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 9999;
  pointer-events: none;
}

.missionsToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}