:root {
  --panel-bg: rgba(10, 16, 26, 0.74);
  --panel-border: rgba(140, 180, 220, 0.18);
  --panel-radius: 10px;
  --text: #dbe7f3;
  --text-muted: #8fa3b8;
  --accent: #63f0b8;
  --warn: #ffd166;
  --danger: #ff5a4a;
  --material-ceramic: #e9e8df;
  --material-titanium: #aebdc2;
  --light-cyan: #66e6dc;
  --surface-raised: rgba(19, 29, 39, 0.92);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b111a;
  color: var(--text);
  font-family: "Segoe UI", "Trebuchet MS", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
}

input {
  font: inherit;
}

/* ---------------------------------------------------------------- menu */

.menu {
  position: fixed;
  inset: 0;
  display: flex;
  overflow-y: auto;
  padding: 32px 16px;
  background:
    radial-gradient(circle at 22% 18%, rgba(99, 240, 184, 0.08), transparent 46%),
    radial-gradient(circle at 78% 82%, rgba(95, 199, 255, 0.07), transparent 52%),
    #0b111a;
}

.game-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow-y: auto;
  background: #0b111a;
}

.game-settings-overlay .menu {
  position: absolute;
  z-index: auto;
}

.menu-panel {
  width: min(920px, 100%);
  margin: auto;
}

.menu-landing {
  background:
    linear-gradient(90deg, rgba(6, 11, 15, 0.78) 0%, rgba(6, 11, 15, 0.46) 48%, rgba(6, 11, 15, 0.08) 100%),
    linear-gradient(0deg, rgba(5, 10, 15, 0.35), transparent 44%),
    url('/images/desert-colony-title.png') center / cover no-repeat;
}

.menu-landing .menu-panel {
  width: min(1080px, 100%);
  padding: 34px 42px;
  border: 1px solid rgba(227, 239, 242, 0.22);
  border-radius: 18px;
  background: linear-gradient(115deg, rgba(9, 17, 23, 0.8), rgba(9, 17, 23, 0.48));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.menu-landing .landing-kicker { color: #9ce9d6; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.menu-landing .menu-title-hero { text-shadow: 0 3px 22px rgba(0, 0, 0, .75); }
.landing-title-row { display: flex; align-items: baseline; gap: 14px; }
.landing-title-row .menu-title-hero { margin-bottom: 0; }
.menu-version {
  display: inline-block;
  margin: 0 0 2px 10px;
  padding: 4px 8px;
  border: 1px solid rgba(156, 233, 214, 0.42);
  border-radius: 5px;
  color: #b8e9dd;
  background: rgba(8, 18, 24, 0.72);
  font: 600 10px/1.2 "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  vertical-align: middle;
  box-shadow: inset 0 0 12px rgba(102, 230, 220, 0.08);
}
.menu-landing .menu-subtitle { color: #d9e4e8; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.voice-settings-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.voice-settings-actions .settings-hint { flex: 1 1 320px; }
.inspector-recovery-note { margin: 8px 0; padding: 8px 10px; border-left: 2px solid #6eddb7; border-radius: 4px; background: rgba(68, 177, 139, .12); color: #b8f1dd; font-size: 11px; line-height: 1.4; }

@media (max-width: 720px) {
  .menu-landing .menu-panel { padding: 22px 18px; }
  .menu-landing { background-position: 56% center; }
}

.menu-title {
  margin: 0 0 6px;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f2f7fb;
}

.menu-subtitle {
  margin: 0 0 26px;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.5;
}

.menu-classes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.menu-next-mission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(99, 240, 184, 0.52);
  border-radius: var(--panel-radius);
  background: linear-gradient(110deg, rgba(31, 77, 68, 0.7), rgba(15, 29, 40, 0.94));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.menu-next-mission > div:first-child {
  display: grid;
  gap: 4px;
}

.menu-next-mission > div:first-child > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.menu-next-mission > div:first-child > strong {
  color: #fff;
  font-size: 16px;
}

.menu-next-mission > div:first-child > small {
  color: var(--text-muted);
}

.menu-next-mission-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 600px) {
  .menu-next-mission {
    align-items: stretch;
    flex-direction: column;
  }
  .menu-next-mission-actions {
    justify-content: stretch;
  }
  .menu-next-mission-actions > button,
  .menu-next-mission > button {
    flex: 1 1 auto;
  }
}

.menu-class {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  transition: border-color 120ms ease, transform 120ms ease;
}

.menu-class:hover {
  border-color: rgba(99, 240, 184, 0.65);
  transform: translateY(-2px);
}

.menu-class-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.menu-class-tagline {
  color: var(--accent);
  font-size: 13px;
}

.menu-class-operation {
  color: #f4ca78;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu-class-mission {
  color: #edf4f6;
  font-size: 13px;
  font-weight: 600;
}

.menu-class-desc {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.menu-class-hazard {
  margin-top: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warn);
}

.menu-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 22px;
}

.menu-class:disabled { cursor: not-allowed; filter: saturate(.55); opacity: .58; }
.menu-class-locked .menu-class-hazard { color: #8fa0ad; }

.menu-seed {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-muted);
}

.menu-seed input {
  width: 110px;
  padding: 7px 10px;
  background: rgba(10, 16, 26, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.menu-seed input:focus-visible,
.menu-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.menu-select {
  min-width: 128px;
  appearance: none;
  padding: 8px 34px 8px 11px;
  border: 1px solid rgba(140, 180, 220, 0.3);
  border-radius: 7px;
  color: #e5f2fa;
  background-color: rgba(10, 18, 29, 0.94);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2363f0b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.menu-select:hover {
  border-color: rgba(99, 240, 184, 0.62);
  background-color: rgba(14, 27, 38, 0.98);
}

.menu-autonomy {
  gap: 9px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(140, 180, 220, 0.2);
  border-radius: 7px;
  background: rgba(10, 16, 26, 0.52);
  color: #b8c9d8;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.menu-autonomy:hover {
  border-color: rgba(99, 240, 184, 0.45);
  background: rgba(16, 29, 39, 0.88);
  color: var(--text);
}

.menu-autonomy input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.menu-autonomy input[type='checkbox']:disabled {
  cursor: not-allowed;
}

.menu-autonomy:has(input:disabled) {
  opacity: 0.58;
  cursor: not-allowed;
}

.menu-option-hint {
  flex-basis: 100%;
  margin: -5px 0 0 2px;
  color: var(--warn);
  font-size: 11px;
  line-height: 1.4;
}

/* ------------------------------------------------------------- session */

.game-session {
  position: fixed;
  inset: 0;
}

.game-session canvas {
  display: block;
}

.colony-loss-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 10, 16, 0.76);
  backdrop-filter: blur(6px);
}

.colony-loss-card {
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 118, 98, 0.38);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(27, 37, 48, 0.98), rgba(15, 22, 31, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.06);
}

.colony-loss-kicker {
  color: #ff9d8d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.colony-loss-card h1 {
  margin: 8px 0 10px;
  color: #f2f5f8;
  font-size: 28px;
}

.colony-loss-card p {
  margin: 0;
  color: #b8c6d2;
  line-height: 1.6;
}

.colony-loss-report {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(126, 164, 197, 0.22);
  border-radius: 9px;
  background: rgba(11, 19, 28, 0.58);
}

.colony-loss-report strong {
  color: #e6edf4;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.colony-loss-report p {
  color: #aebfcd;
  font-size: 12px;
  line-height: 1.5;
}

.colony-loss-return {
  width: 100%;
  margin-top: 22px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 157, 141, 0.55);
  border-radius: 7px;
  color: #fff4f1;
  background: linear-gradient(110deg, #733f3a, #512f33);
  font-weight: 700;
  cursor: pointer;
}

.colony-loss-return:hover {
  border-color: #ffb1a3;
  background: linear-gradient(110deg, #884e47, #64383d);
}

/* ----------------------------------------------------------------- hud */

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.hud-panel {
  pointer-events: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: 10px 12px;
  backdrop-filter: blur(9px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

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

.hud-button {
  padding: 5px 10px;
  background: rgba(30, 44, 62, 0.85);
  border: 1px solid rgba(140, 180, 220, 0.22);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease;
}

.hud-button:hover {
  border-color: var(--accent);
}

.hud-button-active {
  background: rgba(99, 240, 184, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}

/* context menu */

.context-menu {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.context-menu-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.context-menu-section-title {
  margin: 2px 0 1px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.context-menu-fitting {
  display: grid;
  gap: 4px;
}

.context-menu-cancel-fitting {
  color: var(--text-muted);
  font-size: 11px;
}

.context-menu-item {
  width: 100%;
  padding: 7px 10px;
  background: rgba(30, 44, 62, 0.85);
  border: 1px solid rgba(140, 180, 220, 0.22);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 100ms ease, background 100ms ease;
}

.context-menu-item:hover {
  border-color: var(--accent);
}

.context-menu-danger {
  border-color: rgba(255, 138, 106, 0.55);
  color: #ffb59a;
}

.context-menu-danger:hover {
  border-color: #ff8a6a;
  background: rgba(255, 110, 80, 0.14);
}

.context-menu-note {
  font-size: 11px;
  color: var(--text-muted);
}

.context-menu-blocked {
  font-size: 12px;
  color: #ffb454;
  line-height: 1.35;
}

/* positions */

.hud-top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hud-top > * {
  flex-shrink: 0;
}

.hud-top-center {
  margin-left: auto;
  margin-right: auto;
}

.hud-bottom-center {
  position: absolute;
  bottom: 172px;
  left: 50%;
  transform: translateX(-50%);
}

/* window framework */

.window-frame {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 366px);
}

.window-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.window-head:active {
  cursor: grabbing;
}

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

.window-actions {
  display: flex;
  gap: 4px;
}

.window-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 44, 62, 0.85);
  border: 1px solid rgba(140, 180, 220, 0.22);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}

.window-btn:hover {
  border-color: var(--accent);
}

.window-btn-active {
  border-color: var(--accent);
  color: var(--accent);
}

.window-frame-pinned .window-head {
  cursor: default;
}

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

.window-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 180, 220, 0.35) transparent;
}

.window-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.window-body::-webkit-scrollbar-track {
  background: transparent;
}

.window-body::-webkit-scrollbar-thumb {
  background: rgba(140, 180, 220, 0.24);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.window-body::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 180, 220, 0.5);
  background-clip: padding-box;
}

.window-body::-webkit-scrollbar-corner {
  background: transparent;
}

.window-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: nwse-resize;
  touch-action: none;
}

.campaign-victory-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 10, 16, 0.68);
  backdrop-filter: blur(5px);
}

.campaign-victory-card {
  width: min(480px, 100%);
  padding: 28px;
  border: 1px solid rgba(99, 240, 184, 0.45);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(22, 43, 45, 0.98), rgba(13, 24, 32, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.08);
}

.campaign-victory-kicker { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.campaign-victory-card h1 { margin: 8px 0 10px; color: #f2f7f5; font-size: 28px; }
.campaign-victory-card p { color: #bdcec9; line-height: 1.55; }
.campaign-victory-checklist { display: grid; gap: 6px; max-height: min(45vh, 360px); overflow: auto; margin: 12px 0; padding-left: 20px; color: #d8e7e1; font-size: 13px; }
.campaign-victory-checklist li { padding-left: 3px; line-height: 1.4; }
.campaign-victory-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.campaign-victory-actions .hud-button { flex: 1 1 150px; }

.campaign-briefing-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 10, 16, 0.72);
  backdrop-filter: blur(6px);
}

.campaign-briefing-card {
  width: min(620px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(99, 240, 184, 0.45);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(22, 43, 45, 0.98), rgba(13, 24, 32, 0.99));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.08);
}

.campaign-briefing-kicker { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.campaign-briefing-card h1 { margin: 10px 0 14px; color: #f2f7f5; font-size: clamp(25px, 4vw, 34px); }
.campaign-briefing-card p { color: #bdcec9; line-height: 1.6; }
.campaign-briefing-backstory { padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.campaign-briefing-assignment { color: #e4f4ee !important; font-size: 15px; }
.campaign-briefing-story, .campaign-briefing-objective { display: grid; gap: 7px; margin-top: 15px; padding: 13px 15px; border: 1px solid rgba(156, 233, 214, .2); border-radius: 10px; background: rgba(8, 18, 26, .58); }
.campaign-briefing-story strong, .campaign-briefing-objective strong { color: #9ce9d6; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.campaign-briefing-story p, .campaign-briefing-objective p { margin: 0; }
.campaign-briefing-start { width: 100%; min-height: 46px; margin-top: 20px; font-weight: 700; }

.window-resize::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(140, 180, 220, 0.35);
  border-bottom: 2px solid rgba(140, 180, 220, 0.35);
  border-bottom-right-radius: 3px;
}

.window-resize:hover::after {
  border-color: var(--accent);
}

.window-resize:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.window-placeholder {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* top bar */

.top-bar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 240px;
}

.top-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.top-bar-planet {
  font-weight: 600;
  color: #ffffff;
}

.top-bar-day {
  color: var(--text-muted);
}

.top-bar-audio {
  justify-content: flex-start;
  gap: 4px;
}

.top-bar-audio .audio-channel-button {
  width: 27px;
  height: 24px;
  padding: 3px;
  display: inline-grid;
  place-items: center;
  background: rgba(30, 44, 62, 0.68);
  border: 1px solid rgba(140, 180, 220, 0.2);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
}

.top-bar-audio .voice-mode-button {
  width: auto;
  min-width: 78px;
  height: 26px;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #c8d7e8;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.035em;
  white-space: nowrap;
  border-radius: 999px;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.voice-mode-button::before {
  content: '●';
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  display: inline-grid;
  place-items: center;
  font-size: 8px;
  line-height: 1;
}

.voice-mode-button svg {
  flex: 0 0 15px;
}

.voice-mode-normal {
  border-color: rgba(99, 240, 184, 0.65) !important;
  background: linear-gradient(120deg, rgba(36, 112, 88, 0.48), rgba(19, 61, 54, 0.72)) !important;
  color: #7af0c3 !important;
  box-shadow: inset 0 0 0 1px rgba(99, 240, 184, 0.12), 0 0 10px rgba(38, 209, 150, 0.1);
}

.voice-mode-sparse {
  border-color: rgba(111, 190, 255, 0.76) !important;
  border-style: dashed !important;
  background: linear-gradient(120deg, rgba(44, 86, 130, 0.5), rgba(20, 43, 70, 0.76)) !important;
  color: #93caff !important;
  box-shadow: inset 0 0 0 1px rgba(111, 190, 255, 0.1);
}

.voice-mode-sparse::before {
  content: '◌';
  font-size: 12px;
}

.voice-mode-warnings {
  border-color: rgba(255, 190, 84, 0.88) !important;
  background: linear-gradient(120deg, rgba(133, 82, 27, 0.52), rgba(74, 45, 18, 0.78)) !important;
  color: #ffd080 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 190, 84, 0.12), 0 0 10px rgba(255, 174, 65, 0.12);
}

.voice-mode-warnings::before {
  content: '!';
  width: 10px;
  height: 10px;
  flex-basis: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 7px;
}

.voice-mode-off {
  border-color: rgba(150, 165, 185, 0.3) !important;
  background: rgba(30, 39, 53, 0.62) !important;
  color: #8492a5 !important;
  box-shadow: inset 0 0 0 1px rgba(150, 165, 185, 0.05);
}

.voice-mode-off::before {
  content: '×';
  font-size: 13px;
}

.top-bar-audio .voice-mode-button:not(:disabled):hover {
  filter: brightness(1.16);
  transform: translateY(-1px);
}

.top-bar-audio .voice-mode-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.top-bar-audio .voice-mode-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.58;
}

.audio-channel-button[aria-pressed="true"] {
  color: var(--accent);
  border-color: rgba(99, 240, 184, 0.45);
}

.audio-channel-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-bar-wallet {
  margin-left: auto;
  color: var(--warn);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.top-bar-weather {
  color: var(--text-muted);
  font-size: 12px;
  gap: 12px;
}

.top-bar-research {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 7px;
  background: rgba(24, 36, 52, 0.6);
  border: 1px solid rgba(143, 211, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

.top-bar-research:hover {
  border-color: var(--accent);
}

.top-bar-research-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bar-research-track {
  flex: 0 0 auto;
  width: 72px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.top-bar-research-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #8fd3ff;
  transition: width 160ms linear;
}

.top-bar-research-pct {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.top-bar-research-queue {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}

.top-bar-hazard {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.top-bar-hazard-alert {
  color: var(--danger);
  animation: hazard-pulse 1.1s ease-in-out infinite;
}

@keyframes hazard-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.top-bar-speed {
  justify-content: flex-start;
  gap: 6px;
}

.top-bar-alerts {
  justify-content: flex-start;
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid rgba(140, 180, 220, 0.12);
}

.alert-button {
  flex: 1;
  font-size: 11px;
  padding: 4px 5px;
}

.alert-yellow.hud-button-active {
  color: #211800;
  border-color: #e4b94f;
  background: #e4b94f;
}

.alert-red.hud-button-active {
  color: #fff;
  border-color: #cf4e47;
  background: #a8322d;
}

.top-bar-exit {
  justify-content: flex-start;
  gap: 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(140, 180, 220, 0.12);
}

.top-bar-exit .hud-button {
  flex: 1;
}

.top-bar-windows {
  justify-content: flex-start;
  gap: 5px;
}

.top-bar-windows .hud-button {
  flex: 1;
  font-size: 11px;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.top-bar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: hazard-pulse 1.4s ease-in-out infinite;
}

/* resource bar */

.resource-bar {
  position: relative;
  display: block;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
}

.resource-bar-pinned {
  z-index: 1000;
}

.resource-bar-trigger {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.resource-credit-chip {
  padding: 2px 5px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 6px;
  background: rgba(255, 209, 102, 0.07);
}

.resource-credit-mark {
  color: var(--warn);
  font-size: 16px;
  line-height: 1;
}

.resource-storage-chip { padding: 2px 5px; border: 1px solid rgba(130, 190, 221, 0.3); border-radius: 6px; background: rgba(69, 137, 169, 0.08); white-space: nowrap; }
.resource-storage-chip-full { border-color: rgba(255, 151, 113, 0.62); background: rgba(137, 57, 39, 0.24); }

.resource-detail-popover {
  position: absolute;
  z-index: 1001;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: min(75vh, 560px);
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid rgba(142, 177, 205, 0.35);
  border-radius: 9px;
  background: rgba(12, 19, 28, 0.96);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.resource-detail-pin,
.resource-detail-close {
  width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid rgba(140, 180, 220, 0.25);
  border-radius: 4px;
  color: var(--text-muted);
  background: rgba(30, 44, 62, 0.72);
  cursor: pointer;
  line-height: 1;
}

.resource-detail-pin-active {
  color: var(--accent);
  border-color: var(--accent);
}

.resource-detail-heading,
.resource-detail-row {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 76px 52px 54px;
  align-items: center;
  gap: 8px;
}

.resource-detail-heading {
  padding: 2px 0 8px;
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resource-detail-heading span:last-child { text-align: right; }
.resource-detail-close { margin-left: 8px; border: 0; background: transparent; color: #b9c8d4; font-size: 15px; cursor: pointer; }
.resource-detail-row { min-height: 32px; border-top: 1px solid rgba(255,255,255,0.07); }
.resource-detail-name { display: flex; align-items: center; gap: 7px; color: #e4eaf0; font-size: 11px; }
.resource-detail-name .resource-dot { flex: 0 0 8px; width: 8px; height: 8px; }
.resource-sparkline { display: block; width: 76px; height: 24px; overflow: visible; }
.resource-detail-amount { color: #fff; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.resource-detail-rate { color: #aeb9c5; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
.resource-detail-rate.positive { color: #83d5a3; }
.resource-detail-rate.negative { color: #ff9a87; }
.resource-detail-foot { padding-top: 8px; color: var(--text-muted); font-size: 9px; }
.resource-storage-summary { margin: 0 0 8px; padding: 7px 8px; border: 1px solid rgba(129, 165, 195, 0.2); border-radius: 6px; background: rgba(112, 152, 183, 0.07); }
.resource-storage-label, .resource-storage-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.resource-storage-label { color: var(--text-muted); font-size: 9px; letter-spacing: .06em; }
.resource-storage-label strong { color: #e8f0f6; font-size: 10px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.resource-storage-track { height: 4px; margin: 5px 0; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.09); }
.resource-storage-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60c9c5, #8fd6a1); }
.resource-storage-overflow .resource-storage-track span { background: linear-gradient(90deg, #edbd64, #ec765f); }
.resource-storage-foot { color: var(--text-muted); font-size: 9px; }
.resource-storage-overflow .resource-storage-foot span:last-child { color: #f0ad73; }
.resource-storage-action { flex: 0 0 auto; padding: 2px 6px; border: 1px solid rgba(100, 183, 214, .42); border-radius: 4px; color: #aee7f6; background: rgba(28, 75, 99, .42); font: inherit; font-size: 9px; cursor: pointer; }
.resource-storage-action:hover { border-color: #91d9ef; background: rgba(44, 103, 136, .65); }

.log-tabs { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.log-tab { padding: 5px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 5px 5px 0 0; color: var(--text-muted); background: transparent; font: inherit; font-size: 10px; cursor: pointer; }
.log-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.log-tab-active { color: #9ce9d6; border-color: rgba(142,177,205,.22); background: rgba(142,177,205,.08); }
.log-tab-badge { margin-left: 5px; padding: 0 5px; border-radius: 8px; background: rgba(142,177,205,.18); color: var(--text); font-size: 9px; }
.log-window-content .event-log, .log-window-content .traffic-panel { padding-top: 7px; }

.landing-picker-panel { width: min(900px, calc(100vw - 32px)); }
.landing-picker-kicker { margin: 16px 0 4px; }
.landing-picker-world { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 6px 0 0; color: var(--text-muted); font-size: 14px; }
.landing-picker-world strong { color: var(--text); font-size: 16px; }
.landing-picker-layout { display: grid; grid-template-columns: minmax(260px, 520px) minmax(190px, 1fr); align-items: center; gap: 24px; margin-top: 20px; }
.landing-site-map { display: block; width: 100%; max-height: min(58vh, 520px); aspect-ratio: 1; border: 1px solid rgba(194, 210, 222, .25); border-radius: 8px; cursor: crosshair; }
.landing-site-map:focus-visible { outline: 2px solid #5cf0bd; outline-offset: 3px; }
.landing-site-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--text-muted); font-size: 13px; }
.landing-site-info p { margin: 0 0 6px; }
.landing-map-instructions { font-size: 12px; line-height: 1.45; }
.landing-site-status { color: #70e0b5; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.landing-site-status.blocked { color: #ff9b7a; }
.landing-map-legend { display:flex; flex-wrap:wrap; gap:4px 18px; margin:6px 0 14px; }
.landing-map-key { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; }
.landing-map-key i { width: 8px; height: 8px; border: 1px solid #382514; border-radius: 50%; background: #ffd06e; }
.landing-map-key-ocean i { border-color: #9be9ed; border-radius: 2px; background: #27a5bd; }
.landing-map-key-mine i { border-color:#b8f3ff; background:#17627d; box-shadow:0 0 7px rgba(123,229,255,.55); }
.landing-auto-site { margin-top: 8px; }
@media (max-width: 680px) { .landing-picker-layout { grid-template-columns: 1fr; gap: 14px; } .landing-site-map { max-height: 56vh; } }

.resource-chip {
  display: flex;
  align-items: center;
  gap: 3px;
}

.resource-image {
  display: inline-block;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.56));
  vertical-align: middle;
}

.resource-chip .resource-image { width: 20px; height: 20px; }
.resource-detail-name .resource-image { width: 30px; height: 30px; margin: -4px 0 -4px -5px; }

.resource-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

.resource-amount {
  font-weight: 600;
  color: #ffffff;
  min-width: 20px;
  text-align: right;
}

.resource-short {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.resource-trend {
  display: inline-block;
  min-width: 7px;
  font-size: 8px;
  line-height: 1;
  text-align: left;
}

.resource-trend-up {
  color: var(--accent);
}

.resource-trend-down {
  color: var(--danger);
}

@media (max-width: 1280px) {
  .resource-short {
    display: none;
  }
}

/* meters */

.meters {
  position: relative;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 216px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.meters-dragging {
  cursor: grabbing;
}

.meters-pinned {
  cursor: default;
}

.meters-resizing {
  cursor: nwse-resize;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 190, 220, 0.72) rgba(8, 17, 28, 0.55);
}

.meters::-webkit-scrollbar { width: 7px; height: 0; }
.meters::-webkit-scrollbar-track { background: rgba(8, 17, 28, 0.5); }
.meters::-webkit-scrollbar-thumb { border: 1px solid rgba(10, 16, 26, 0.8); border-radius: 8px; background: rgba(143, 190, 220, 0.72); }

.meters-resize {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(140, 180, 220, 0.72);
  border-radius: 8px 2px 8px 2px;
  background: linear-gradient(135deg, rgba(17, 29, 42, 0.72) 26%, rgba(37, 63, 86, 0.96));
  cursor: nwse-resize;
  touch-action: none;
  color: var(--text-muted);
}

.meters-resize::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-bottom-right-radius: 2px;
}

.meters-resize:hover,
.meters-resize:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(72, 211, 190, 0.14);
}

.meter-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 3px;
}

.meter-tooltip {
  position: fixed;
  z-index: 10000;
  width: 250px;
  max-height: min(240px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid rgba(142, 177, 205, 0.38);
  border-radius: 8px;
  background: rgba(12, 19, 28, 0.97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 100ms ease, transform 100ms ease, visibility 100ms;
}

.meter-tooltip-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.meter-tooltip strong {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
}

.meter-tooltip span {
  display: block;
  color: var(--text-muted);
}

.meter-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
}

.meter-text {
  color: var(--text);
}

.meter-readout {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.meter-alert .meter-text {
  color: var(--danger);
  font-weight: 600;
}

.meter-alert .meter-label {
  color: var(--danger);
}

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

.meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 220ms ease;
}

.meter-flow {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 3px;
  font-size: 9.5px;
  line-height: 1.2;
}

.meter-flow-in {
  color: var(--accent);
}

.meter-flow-out {
  color: var(--warn);
}

.meter-flow-sep,
.meter-flow-unit {
  color: var(--text-muted);
}

.meters-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid rgba(140, 180, 220, 0.14);
  padding: 7px 32px 0 0;
}

.meters-footer-text {
  flex: 1;
  min-width: 0;
}

.meters-bed-count {
  white-space: nowrap;
}

.meters-bed-shortage {
  color: var(--warn);
  font-weight: 700;
}

.meters-pin {
  width: 16px;
  height: 16px;
  opacity: 0.45;
  flex-shrink: 0;
  transition: opacity 100ms ease;
}

.meters:hover .meters-pin,
.meters-pin.window-btn-active {
  opacity: 1;
}

/* inspector */

.inspector-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.inspector-state {
  margin-top: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warn);
}

.inspector-state-ok {
  color: var(--accent);
}

.inspector-blurb {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.inspector-live-activity { display: grid; gap: 4px; margin-top: 10px; padding: 8px 9px; border: 1px solid rgba(112,224,181,.22); border-radius: 6px; background: rgba(38,92,77,.14); color: #d7e7e1; font-size: 11px; line-height: 1.4; }
.inspector-live-label { color: #85ddbd; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.inspector-rows {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inspector-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.inspector-label {
  color: var(--text-muted);
}

.inspector-value {
  color: var(--text);
  text-align: right;
}

.command-water-sources { display: block; margin-top: 3px; color: #9bbaca; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }

/* building detail spec card */

.building-detail {
  padding: 12px 13px;
}

.detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.detail-name {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.detail-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border: 1px solid rgba(140, 180, 220, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.detail-desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.detail-rows {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-rows-sep {
  border-top: 1px solid rgba(140, 180, 220, 0.14);
  padding-top: 8px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.detail-label {
  color: var(--text-muted);
  min-width: 92px;
}

.detail-value {
  color: var(--text);
  text-align: right;
}

.detail-components-title {
  margin-top: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.detail-components {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.detail-chip {
  font-size: 10px;
  color: #cfe3d8;
  background: rgba(99, 240, 184, 0.1);
  border: 1px solid rgba(99, 240, 184, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
}

/* trade panel */

.trade-panel {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(140, 180, 220, 0.14);
  container-type: inline-size;
}

.trade-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.trade-name {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.trade-commission {
  font-size: 11px;
  color: var(--warn);
}

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

.trade-section {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.trade-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.trade-row {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) minmax(22px, auto) 20px 18px 20px 42px;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.trade-export-row {
  grid-template-columns: minmax(104px, 1fr) 26px minmax(58px, auto) 78px;
  gap: 4px;
  font-size: 11px;
}

.trade-export-row .trade-row-name { display: flex; align-items: center; }
.trade-export-row .trade-row-name .resource-image { flex: 0 0 22px; }
.trade-export-row .trade-row-surplus { font-size: 9px; }
.trade-export-row .trade-reserve-control { gap: 3px; font-size: 10px; }
.trade-export-row .trade-reserve-control input { width: 38px; }

.context-menu-upgrade {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(140, 180, 220, 0.2);
}

.context-menu-upgrade-button {
  border-color: rgba(108, 220, 186, 0.5);
  color: #b4f2d8;
}

.context-menu-item:disabled {
  opacity: 0.52;
  cursor: default;
}

.trade-reserve-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.trade-reserve-control input {
  width: 50px;
  min-width: 0;
  padding: 3px 5px;
  color: var(--text);
  background: rgba(30, 44, 62, 0.85);
  border: 1px solid rgba(140, 180, 220, 0.22);
  border-radius: 5px;
}

.trade-row-surplus {
  min-width: 0;
  color: #8fe2b5;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

.trade-row-name {
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-row-name .resource-image { width: 22px; height: 22px; margin: -3px 4px -3px -2px; vertical-align: middle; }

.trade-row-stock {
  color: var(--text-muted);
  font-size: 11px;
  min-width: 20px;
  text-align: right;
}

.trade-step {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--text);
  background: rgba(30, 44, 62, 0.85);
  border: 1px solid rgba(140, 180, 220, 0.22);
  border-radius: 5px;
  cursor: pointer;
}

.trade-step:hover:not(:disabled) {
  border-color: var(--accent);
}

.trade-step:disabled {
  opacity: 0.35;
  cursor: default;
}

.trade-quantity-controls {
  display: grid;
  grid-template-columns: 20px 54px 20px 34px;
  align-items: center;
  gap: 3px;
}

.trade-quantity-input {
  width: 100%;
  min-width: 0;
  height: 24px;
  box-sizing: border-box;
  padding: 2px 3px;
  text-align: center;
  color: #ffffff;
  background: rgba(12, 22, 34, 0.88);
  border: 1px solid rgba(140, 180, 220, 0.32);
  border-radius: 5px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}

.trade-quantity-input::-webkit-inner-spin-button,
.trade-quantity-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.trade-quantity-input:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.trade-quantity-input::placeholder { color: var(--text-muted); opacity: 1; }
.trade-max { width: 34px; font-size: 10px; }

.trade-row-value {
  min-width: 40px;
  text-align: right;
  color: var(--text-muted);
  font-size: 11px;
}

.trade-wallet {
  margin-top: 6px;
  color: var(--warn);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.trade-credit-row {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) auto 137px auto auto;
  gap: 3px;
  font-size: 11px;
}

.trade-credit-row .trade-row-stock {
  min-width: 0;
  white-space: nowrap;
}

.trade-credit-row .resource-image {
  width: 23px;
  height: 23px;
}

@container (max-width: 420px) {
  .trade-credit-row {
    grid-template-columns: minmax(137px, 1fr) minmax(40px, auto) auto;
    grid-template-areas:
      "name stock stock"
      "quantity value action";
    gap: 4px;
    padding: 3px 0;
  }

  .trade-credit-row > :nth-child(1) { grid-area: name; }
  .trade-credit-row > :nth-child(2) { grid-area: stock; white-space: normal; line-height: 1.1; }
  .trade-credit-row > :nth-child(3) { grid-area: quantity; justify-self: start; }
  .trade-credit-row > :nth-child(4) { grid-area: value; }
  .trade-credit-row > :nth-child(5) { grid-area: action; }
}

@container (max-width: 290px) {
  .trade-export-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name stock reserve"
      "surplus surplus surplus";
    align-items: center;
    gap: 2px 4px;
  }

  .trade-export-row > :nth-child(1) { grid-area: name; }
  .trade-export-row > :nth-child(2) { grid-area: stock; }
  .trade-export-row > :nth-child(3) { grid-area: surplus; text-align: left; white-space: normal; }
  .trade-export-row > :nth-child(4) { grid-area: reserve; }
}

.trade-buy-button {
  padding: 2px 6px;
  font-size: 10px;
}

.trade-purchase-message {
  margin-top: 5px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.35;
}

.trade-purchase-message.is-success {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 40%, transparent);
  background: color-mix(in srgb, var(--good) 8%, transparent);
}

.trade-purchase-message.is-error {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}

.trade-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.trade-pause-control { display: flex; align-items: center; gap: 8px; margin: 7px 0; color: var(--text); font-size: 11px; cursor: pointer; }
.trade-pause-control input { accent-color: var(--accent); }

.trade-dismiss {
  flex: 1;
  white-space: nowrap;
}

/* traffic panel */

.traffic-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.traffic-sub {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

.traffic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(30, 44, 62, 0.5);
  border: 1px solid rgba(140, 180, 220, 0.16);
  border-radius: 6px;
}

.traffic-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.traffic-row-name {
  font-size: 12px;
  color: var(--text);
}

.traffic-row-status {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-toggle {
  flex: none;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 5px;
  cursor: pointer;
}

.traffic-toggle-on {
  color: var(--accent);
  background: rgba(99, 240, 184, 0.12);
  border: 1px solid rgba(99, 240, 184, 0.4);
}

.traffic-toggle-on:hover {
  background: rgba(99, 240, 184, 0.22);
}

.traffic-toggle-off {
  color: var(--danger);
  background: rgba(255, 90, 74, 0.1);
  border: 1px solid rgba(255, 90, 74, 0.35);
}

.traffic-toggle-off:hover {
  background: rgba(255, 90, 74, 0.2);
}

/* galaxy panel */

.galaxy-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.galaxy-sub {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

.galaxy-expeditions-locked {
  padding: 8px 9px;
  border: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: 6px;
  background: rgba(255, 209, 102, 0.045);
}

.galaxy-launch-blocked {
  color: var(--warn);
  font-size: 10px;
  line-height: 1.35;
}

.galaxy-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 8px;
  background: rgba(30, 44, 62, 0.5);
  border: 1px solid rgba(140, 180, 220, 0.16);
  border-radius: 6px;
}

.galaxy-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.galaxy-row-name {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galaxy-class-chip {
  flex: none;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #cfe3d8;
  background: rgba(99, 240, 184, 0.1);
  border: 1px solid rgba(99, 240, 184, 0.25);
}

.galaxy-row-distance {
  flex: none;
  font-size: 10px;
  color: var(--text-muted);
}

.galaxy-row-mid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.galaxy-rover-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.galaxy-rover-heading img { width: 70px; height: 54px; object-fit: contain; flex: none; }
.galaxy-cargo-planner { border-top: 1px solid rgba(180, 210, 230, 0.12); margin-top: 8px; padding-top: 6px; }
.galaxy-cargo-planner .galaxy-row-mid { justify-content: flex-start; align-items: center; }
.galaxy-cargo-planner select, .galaxy-cargo-planner input { min-width: 0; height: 27px; padding: 3px 6px; color: var(--text); background: rgba(9, 17, 26, 0.84); border: 1px solid var(--line); border-radius: 5px; }
.galaxy-cargo-planner select { flex: 1; }
.galaxy-cargo-planner input { width: 68px; }
.galaxy-cargo-availability { margin-top: 4px; color: var(--text-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.galaxy-cargo-lines { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--text-muted); font-size: 10px; margin-top: 5px; }
.galaxy-cargo-line { display: inline-flex; align-items: center; gap: 4px; min-height: 21px; padding: 1px 4px 1px 7px; border: 1px solid rgba(140, 180, 220, 0.2); border-radius: 5px; background: rgba(10, 18, 27, 0.42); }
.galaxy-cargo-line-remove { width: 17px; height: 17px; padding: 0; display: inline-grid; place-items: center; border: 1px solid rgba(255, 130, 130, 0.34); border-radius: 4px; color: #f3b7b7; background: rgba(96, 35, 40, 0.42); font: inherit; line-height: 1; cursor: pointer; }
.galaxy-cargo-line-remove:hover { color: #fff; background: rgba(152, 50, 57, 0.7); }

.galaxy-row-yield {
  flex: none;
  font-size: 11px;
  color: var(--text);
}

.galaxy-status-outpost,
.galaxy-status-flight,
.galaxy-status-idle {
  font-size: 10px;
  text-align: right;
  min-width: 0;
}

.galaxy-status-outpost {
  color: var(--accent);
}

.galaxy-status-flight {
  color: var(--warn);
}

.galaxy-status-idle {
  color: var(--text-muted);
}

.galaxy-launch {
  align-self: flex-end;
  padding: 3px 10px;
  font-size: 11px;
}

.galaxy-launch:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.galaxy-launch:disabled:hover {
  border-color: rgba(140, 180, 220, 0.22);
}

.galaxy-error {
  font-size: 11px;
  color: var(--danger);
}

/* bottom command bar */

.command-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 150px;
  z-index: 60;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 8px 10px;
}

.command-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(24px, 1fr);
  gap: 3px;
  width: 256px;
  flex: none;
}

.command-nav-btn {
  position: relative;
  flex: 1;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 4px;
  background: rgba(30, 44, 62, 0.72);
  border: 1px solid rgba(140, 180, 220, 0.2);
  border-radius: 7px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  color: var(--text);
  transition: border-color 100ms ease, background 100ms ease;
}

.command-nav-btn:hover {
  border-color: var(--accent);
}

.command-nav-btn-active {
  background: rgba(99, 240, 184, 0.16);
  border-color: var(--accent);
}

.command-nav-btn-attention {
  border-color: var(--accent);
  animation: hazard-pulse 1.2s ease-in-out infinite;
}

.command-nav-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.command-nav-icon {
  display: inline-block;
  width: 13px !important;
  height: 13px !important;
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
  flex: none;
  overflow: hidden;
  filter: drop-shadow(0 1px 3px rgba(84, 205, 255, 0.26));
}

.topbar-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.topbar-settings img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.topbar-speed-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.topbar-speed-label img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.command-nav-sub {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.command-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.command-nav-track {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 3px;
  border-radius: 2px;
  background: rgba(140, 180, 220, 0.16);
  overflow: hidden;
}

.command-nav-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s linear;
}

.command-build {
  flex: 1.55 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.command-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  flex: none;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.command-tab {
  flex: none;
  padding: 2px 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--text-muted);
  background: rgba(30, 44, 62, 0.72);
  border: 1px solid rgba(140, 180, 220, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
}

.command-tab:hover {
  border-color: var(--accent);
}

.command-tab-active {
  background: rgba(99, 240, 184, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}

.command-tab-placing {
  border-color: var(--warn);
  color: var(--warn);
}

.command-tab-glow {
  color: var(--accent);
  animation: command-tab-glow 1.3s ease-in-out infinite;
}

@keyframes command-tab-glow {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(99, 240, 184, 0.28), 0 0 6px rgba(99, 240, 184, 0.3);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(99, 240, 184, 0.8), 0 0 14px rgba(99, 240, 184, 0.85);
  }
}

.command-icons {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.command-icon {
  position: relative;
  width: 76px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  background: rgba(30, 44, 62, 0.72);
  border: 1px solid rgba(140, 180, 220, 0.2);
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  transition: border-color 100ms ease, background 100ms ease;
}

.command-icon:hover {
  border-color: var(--accent);
}

.command-icon-active {
  background: rgba(99, 240, 184, 0.16);
  border-color: var(--accent);
}

.command-icon-unaffordable {
  opacity: 0.42;
  cursor: not-allowed;
}

.command-icon-locked {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
}

.command-icon-locked .command-icon-cost {
  color: var(--warn);
}

.command-icon-environment-blocked {
  opacity: 0.44;
  cursor: not-allowed;
  border-style: dashed;
  filter: saturate(0.6);
}

.command-icon-environment-blocked .command-icon-cost {
  color: var(--warn);
  font-size: 8px;
}

.building-icon {
  display: block;
  width: 56px !important;
  height: 48px !important;
  max-width: 56px;
  max-height: 48px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
}

.building-icon-wrap {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 50px;
  display: grid;
  place-items: center;
}

.building-icon-fallback {
  display: none;
}

.command-icon-active .building-icon {
  color: var(--accent);
}

.command-icon-name {
  position: relative;
  z-index: 1;
  font-size: 10px;
  line-height: 1.15;
  height: 23px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  padding: 0 4px;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
}

.command-icon-cost {
  position: relative;
  z-index: 1;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.command-icon-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(99, 240, 184, 0.3), rgba(99, 240, 184, 0.12));
  transition: height 0.3s linear;
  pointer-events: none;
}

.command-icon-fill-paused {
  background: linear-gradient(180deg, rgba(255, 180, 84, 0.34), rgba(255, 180, 84, 0.14));
}

.command-icon-pct {
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 2;
  font-size: 9px;
  font-weight: 600;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(10, 16, 26, 0.75);
  color: var(--accent);
}

.command-icon-pct-paused {
  color: var(--warn);
}

.command-queue {
  flex: none;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 1px solid var(--panel-border);
  padding-left: 10px;
}

.command-detail {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 1px solid var(--panel-border);
  padding-left: 10px;
}

.command-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 180, 220, 0.35) transparent;
}

.command-detail-body::-webkit-scrollbar {
  width: 10px;
}

.command-detail-body::-webkit-scrollbar-track {
  background: transparent;
}

.command-detail-body::-webkit-scrollbar-thumb {
  background: rgba(140, 180, 220, 0.24);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.command-detail-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.command-detail-state {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warn);
}

.command-detail-state-ok {
  color: var(--accent);
}

.command-detail-text {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: pre-line;
}

.command-detail-rows,
.command-detail-furnish {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.command-detail-furnish {
  padding-top: 6px;
  border-top: 1px solid var(--panel-border);
}

.command-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
}

.command-detail-label {
  color: var(--text-muted);
}

.command-detail-value {
  color: var(--text);
  text-align: right;
}

.command-detail-row-warn .command-detail-value {
  color: var(--warn);
}

.command-detail-hintline {
  margin-top: 4px;
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
}

.command-detail-idle {
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
}

.command-queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex: none;
}

.command-queue-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.command-queue-paused-count {
  font-size: 10px;
  color: var(--warn);
}

.command-queue-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 5px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 2px;
  padding-right: 2px;
}

.command-icons,
.command-queue-chips {
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 180, 220, 0.35) transparent;
}

.command-icons::-webkit-scrollbar,
.command-queue-chips::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.command-icons::-webkit-scrollbar-track,
.command-queue-chips::-webkit-scrollbar-track {
  background: transparent;
}

.command-icons::-webkit-scrollbar-thumb,
.command-queue-chips::-webkit-scrollbar-thumb {
  background: rgba(140, 180, 220, 0.24);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.command-icons::-webkit-scrollbar-thumb:hover,
.command-queue-chips::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 180, 220, 0.5);
  background-clip: padding-box;
}

.command-queue-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  padding: 12px 0;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}

.queue-chip {
  position: relative;
  display: flex;
  min-width: 0;
  background: rgba(140, 180, 220, 0.06);
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  overflow: hidden;
}

.queue-chip-paused {
  border-color: rgba(255, 180, 84, 0.55);
}

.queue-chip-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 5px 7px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}

.queue-chip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
}

.queue-chip-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-chip-pct {
  flex: none;
  font-size: 10.5px;
  color: var(--text-muted);
}

.queue-chip-paused .queue-chip-pct {
  color: var(--warn);
}

.queue-chip-bar {
  flex: none;
  height: 5px;
  border-radius: 3px;
  background: rgba(140, 180, 220, 0.14);
  overflow: hidden;
}

.queue-chip-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(99, 240, 184, 0.55), var(--accent));
  transition: width 0.3s linear;
}

.queue-chip-fill-paused {
  background: linear-gradient(90deg, rgba(255, 180, 84, 0.5), var(--warn));
}

.queue-chip-repair .queue-chip-fill {
  background: linear-gradient(90deg, rgba(255, 180, 84, 0.5), var(--warn));
}

.queue-chip-fitting .queue-chip-fill {
  background: linear-gradient(90deg, rgba(120, 180, 255, 0.5), #7dc4ff);
}

.queue-chip-foot {
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-chip-actions {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--panel-border);
  flex: none;
}

.queue-chip-btn {
  flex: 1;
  width: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(30, 44, 62, 0.6);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  transition: background 100ms ease, color 100ms ease;
}

.queue-chip-btn:hover {
  color: var(--accent);
  background: rgba(99, 240, 184, 0.12);
}

.queue-chip-btn-stop:hover {
  color: var(--danger);
  background: rgba(255, 90, 90, 0.12);
}

/* hud tooltip */

.hud-tooltip {
  position: fixed;
  z-index: 90;
  transform: translate(-50%, -100%);
  pointer-events: none;
  max-width: 250px;
  width: max-content;
  padding: 6px 9px;
  background: rgba(13, 19, 27, 0.97);
  border: 1px solid rgba(140, 180, 220, 0.32);
  border-radius: 7px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  font-size: 10.5px;
  line-height: 1.5;
  animation: hud-tooltip-in 110ms ease-out;
}

.hud-tooltip-title {
  font-weight: 600;
  color: #ffffff;
}

.hud-tooltip-body {
  margin-top: 2px;
  color: var(--text-muted);
  white-space: pre-line;
}

@keyframes hud-tooltip-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% + 5px));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
}

/* build toast */

.build-toast {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.build-toast-title strong {
  color: var(--accent);
}

.build-toast-help {
  font-size: 12px;
  color: var(--text-muted);
}

.build-toast-error {
  font-size: 12px;
  color: var(--danger);
}

/* event log */

.event-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.event-tick {
  color: var(--text-muted);
  flex: none;
  font-size: 11px;
  padding-top: 1px;
}

.event-message {
  color: var(--text);
}

.event-info .event-message {
  color: #a9c6dd;
}

.event-warning .event-message {
  color: var(--warn);
}

.event-danger .event-message {
  color: var(--danger);
}

/* furnishing controls */

.hud-button-small {
  padding: 2px 8px;
  font-size: 11px;
}

.hud-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(140, 180, 220, 0.14);
}

.inspector-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 8px 0 2px;
}

.inspector-furnishings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.furnishing-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(140, 180, 220, 0.06);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px 8px;
}

.furnishing-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.furnishing-name {
  color: var(--text);
  text-transform: capitalize;
}

.furnishing-count {
  color: var(--text-muted);
}

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

.furnishing-cost {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
}

.furnishing-reason {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* robots window */

.queue-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(140, 180, 220, 0.14);
  overflow: hidden;
}

.queue-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(99, 240, 184, 0.55), var(--accent));
  transition: width 0.3s linear;
}

.queue-bar-fill-low {
  background: linear-gradient(90deg, rgba(255, 90, 74, 0.5), var(--danger));
}

.robots-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.robots-print {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(140, 180, 220, 0.06);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 8px;
}

.robots-print-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.robots-print-title {
  font-size: 12px;
  color: var(--text);
}

.robots-print-count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.robots-print-foot {
  font-size: 11px;
  color: var(--text-muted);
}

.robots-print-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.robots-print-cost {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

.robots-print-reason {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

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

.robots-fleet-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.robots-fleet-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.robots-fleet-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  background: rgba(140, 180, 220, 0.06);
  color: var(--text-muted);
  font-size: 10px;
}

.robots-fleet-kind strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.robots-fleet-queued {
  color: #8fd8ff;
  font-size: 9px;
  white-space: nowrap;
}

.robots-target-help {
  margin: 5px 0 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.robots-fleet-kind input {
  width: 38px;
  padding: 2px 3px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: rgba(5, 10, 16, 0.72);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.robots-empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

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

.robot-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(140, 180, 220, 0.06);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px 8px;
}

.robot-row-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.robot-name {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

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

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

.robot-charge .queue-bar {
  flex: 1;
}

.robot-charge-pct {
  flex: none;
  width: 32px;
  text-align: right;
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

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

.robot-stances {
  display: flex;
  flex: 1;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  overflow: hidden;
}

.robot-stance {
  flex: 1;
  padding: 2px 0;
  font-size: 10.5px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--panel-border);
  color: var(--text-muted);
  cursor: pointer;
}

.robot-stance:last-child {
  border-right: none;
}

.robot-stance:hover {
  color: var(--text);
  background: rgba(140, 180, 220, 0.08);
}

.robot-stance-active {
  background: rgba(99, 240, 184, 0.16);
  color: var(--accent);
}

.robot-scrap {
  flex: none;
}

/* command bar traffic cluster */

.command-traffic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 86px;
  flex: none;
  padding: 4px 0;
}

.command-traffic-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
}

.command-traffic-chips {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.command-chip {
  flex: 1;
  padding: 0 8px;
  font-size: 10.5px;
  background: rgba(30, 44, 62, 0.72);
  border: 1px solid rgba(140, 180, 220, 0.2);
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  transition: border-color 100ms ease, background 100ms ease;
}

.command-chip-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}

.command-chip:hover {
  border-color: var(--accent);
}

.command-chip-on {
  background: rgba(99, 240, 184, 0.14);
  border-color: rgba(99, 240, 184, 0.45);
}

.command-chip-off {
  color: var(--text-muted);
  border-color: rgba(255, 90, 74, 0.3);
}

/* robot kind badges */

.robot-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
}

.robot-badge-constructor {
  color: #d9a03f;
  border-color: rgba(217, 160, 63, 0.5);
  background: rgba(217, 160, 63, 0.12);
}

.robot-badge-carrier {
  color: #5f83ad;
  border-color: rgba(95, 131, 173, 0.5);
  background: rgba(95, 131, 173, 0.12);
}

.robot-badge-miner {
  color: #a85448;
  border-color: rgba(168, 84, 72, 0.5);
  background: rgba(168, 84, 72, 0.12);
}

.robot-badge-maintenance {
  color: #6f9e6f;
  border-color: rgba(111, 158, 111, 0.5);
  background: rgba(111, 158, 111, 0.12);
}

/* robots window per-kind print rows */

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

.robots-print-kind {
  flex: none;
  width: 84px;
  color: var(--text);
}

.robots-print-time {
  flex: none;
  width: 52px;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.robots-print-queue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: var(--text-muted);
}

/* printer inspector print options */

.print-section {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.print-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(140, 180, 220, 0.06);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 5px 7px;
}

.print-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.print-row-name {
  color: var(--text);
}

.print-row-time {
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

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

.print-row-cost {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.print-row-reason {
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: italic;
}

.print-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.print-queue-line {
  font-size: 11px;
  color: var(--text-muted);
}

.print-head {
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.print-fleet {
  font-size: 11px;
  color: var(--text-muted);
}

.inspector-priority {
  margin-top: 4px;
}

/* colony warnings */

.warning-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(310px, calc(100vw - 28px));
  margin: 7px auto 0;
  pointer-events: none;
}

.warning-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  pointer-events: none;
  padding: 7px 10px 7px 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-left: 2px solid var(--text-muted);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 7px 22px rgba(0,0,0,.28);
  animation: warning-comms-in 2.4s cubic-bezier(.18,.72,.22,1) both;
}

.warning-item::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.12) 48%, transparent 72%);
  transform: translateX(-130%);
  animation: warning-scan 650ms ease-out 120ms both;
}

.warning-signal {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  animation: warning-signal-pop 380ms cubic-bezier(.2,1.6,.45,1) both;
}

.warning-title {
  grid-column: 2;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .015em;
  color: #fff;
  line-height: 1.2;
}

.warning-detail {
  grid-column: 2;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-muted);
}

.warning-critical {
  border-left-color: var(--danger);
  background: linear-gradient(105deg, rgba(83,25,24,.94), rgba(21,25,35,.93));
  color: #ff8e7d;
  box-shadow: 0 7px 22px rgba(0,0,0,.3), 0 0 17px rgba(242,89,75,.18);
  animation-duration: 3.6s;
}

.warning-critical .warning-title {
  color: #ffb0a6;
}

.warning-critical .warning-signal {
  background: rgba(228,73,61,.18);
  box-shadow: 0 0 12px rgba(255,104,86,.32);
}

.warning-warning {
  border-left-color: var(--warn);
  background: linear-gradient(105deg, rgba(79,58,20,.93), rgba(20,26,34,.94));
  color: #ffd36f;
}

.warning-warning .warning-title {
  color: #ffe3a3;
}

@keyframes warning-comms-in {
  0% { opacity: 0; transform: translateY(-10px) scale(.96); filter: blur(3px); }
  12% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  74% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-5px) scale(.985); }
}

@keyframes warning-scan {
  to { transform: translateX(130%); }
}

@keyframes warning-signal-pop {
  0% { opacity: .4; transform: scale(.65) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* research */

.research-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.research-active-row .research-sub {
  flex: 1;
  min-width: 0;
}

.research-pause,
.research-cancel {
  flex: none;
  font-size: 11px;
  padding: 3px 8px;
}

.research-pause {
  border-color: var(--accent-border, rgba(88, 190, 170, 0.55));
  color: var(--accent, #80d8c3);
}

.research-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.research-tier {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.research-tier strong {
  color: var(--accent);
  font-weight: 600;
}

.research-branch {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.research-branch-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-top: 4px;
}

.research-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 8px;
  background: rgba(30, 44, 62, 0.45);
  border: 1px solid rgba(140, 180, 220, 0.18);
  border-radius: 7px;
}

.research-item-done {
  opacity: 0.75;
  border-color: rgba(99, 240, 184, 0.35);
}

.research-item-active {
  border-color: var(--accent);
  background: rgba(99, 240, 184, 0.12);
}

.research-item-locked {
  opacity: 0.55;
}

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

.research-item-name {
  flex: 1;
  font-size: 12px;
}

.research-item-cost {
  font-size: 10px;
  color: var(--text-muted);
}

.research-item-reward {
  margin-top: 4px;
  color: #73d7c6;
  font-size: 10px;
  line-height: 1.4;
}

.research-item-note {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
}

.research-note-done {
  color: var(--accent);
}

.research-note-locked {
  color: var(--warn);
}

.research-start {
  font-size: 11px;
  padding: 3px 8px;
  align-self: flex-start;
}

.window-head-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.head-progress-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #cfe3f5;
}

.head-progress-track {
  flex: 0 0 auto;
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.head-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #8fd3ff;
  transition: width 160ms linear;
}

.head-progress-pct {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.research-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.research-queue-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.research-queue-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: rgba(30, 44, 62, 0.45);
  border: 1px solid rgba(255, 209, 102, 0.28);
  border-radius: 6px;
}

.research-queue-pos {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.research-queue-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.research-queue-remove {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 1px 6px;
}

.research-item-queued {
  border-color: rgba(255, 209, 102, 0.35);
  background: rgba(255, 209, 102, 0.06);
}

.research-note-queued {
  color: var(--warn);
}

/* notifications */

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

.notices-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.notices-title-gap {
  margin-top: 6px;
}

.notice-item {
  padding: 5px 8px;
  border: 1px solid rgba(140, 180, 220, 0.18);
  border-left-width: 3px;
  border-radius: 6px;
}

.notice-critical {
  border-left-color: var(--danger);
  background: rgba(64, 21, 18, 0.5);
}

.notice-warning {
  border-left-color: var(--warn);
  background: rgba(58, 46, 16, 0.45);
}

.notice-title {
  font-size: 12px;
  color: #fff;
}

.notice-detail {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.notice-action {
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(116, 194, 255, 0.42);
  border-radius: 4px;
  background: rgba(36, 92, 132, 0.32);
  color: #c9eaff;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.notice-action:hover {
  border-color: rgba(116, 194, 255, 0.8);
  background: rgba(36, 92, 132, 0.58);
}

.notice-empty {
  font-size: 12px;
  color: var(--text-muted);
}

.notice-event {
  display: flex;
  gap: 8px;
  font-size: 11px;
  line-height: 1.35;
}

.notice-tick {
  flex: none;
  color: var(--text-muted);
}

.notice-message {
  color: var(--text);
}

.notice-event.notice-warning .notice-message {
  color: var(--warn);
}

.notice-event.notice-danger .notice-message {
  color: var(--danger);
}

/* ---------------------------------------------------------- persistence */

.menu-back {
  margin-bottom: 16px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.menu-back:hover {
  text-decoration: underline;
}

.menu-session-line {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.menu-note {
  margin: 14px 0 0;
  color: var(--warn);
  font-size: 13px;
}

.menu-profile-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.menu-profile-row input {
  width: 220px;
  padding: 8px 12px;
  background: rgba(10, 16, 26, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}

.menu-profile-row input:focus {
  outline: 1px solid var(--accent);
}

.menu-primary {
  padding: 8px 18px;
  background: rgba(99, 240, 184, 0.14);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.menu-primary:hover:not(:disabled) {
  background: rgba(99, 240, 184, 0.24);
}

.menu-primary:disabled {
  opacity: 0.45;
  cursor: default;
}

.menu-secondary {
  padding: 8px 14px;
  background: rgba(21, 35, 48, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.menu-secondary:hover:not(:disabled) {
  border-color: rgba(166, 205, 226, 0.7);
  color: #fff;
}

.menu-secondary:disabled {
  opacity: 0.45;
  cursor: default;
}

.menu-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.menu-profile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
}

.menu-profile-name {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.menu-profile-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.menu-profile-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.menu-profile-actions button {
  flex: 1;
  padding: 7px 10px;
  background: rgba(30, 44, 62, 0.85);
  border: 1px solid rgba(140, 180, 220, 0.22);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.menu-profile-actions button:hover:not(:disabled) {
  border-color: var(--accent);
}

.menu-profile-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.menu-profile-actions button.danger {
  color: #ff9a8a;
}

.save-chip {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 30;
  padding: 5px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(10, 16, 26, 0.78);
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ------------------------------------------------------- landing page */

.landing-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--accent);
}

.menu-title-hero {
  font-size: 68px;
  letter-spacing: 0.3em;
}

@media (max-width: 760px) {
  .menu-title-hero {
    font-size: clamp(32px, 10vw, 40px);
    letter-spacing: 0.16em;
  }
  .landing-title-row { flex-wrap: wrap; gap: 8px; }
  .menu-version { margin-left: 0; }
}

.menu-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.menu-action {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
  text-align: left;
  cursor: pointer;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  transition: border-color 120ms ease, transform 120ms ease;
}

.menu-action:hover {
  border-color: rgba(99, 240, 184, 0.65);
  transform: translateY(-2px);
}

.menu-action-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.06em;
}

.menu-action-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.landing-section {
  margin: 30px 0 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 600;
}

.landing-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.landing-guide-button { padding: 10px 14px; border: 1px solid rgba(156, 233, 214, 0.48); border-radius: var(--panel-radius); color: var(--text); background: rgba(10, 23, 31, 0.78); cursor: pointer; }
.landing-guide-button:hover { border-color: var(--accent); background: rgba(17, 43, 48, 0.92); }
.landing-guide { margin-top: 16px; padding: 4px 16px 16px; border: 1px solid rgba(156, 233, 214, 0.24); border-radius: var(--panel-radius); background: rgba(8, 18, 26, 0.78); }
.landing-guide-intro { color: var(--text-muted); line-height: 1.55; }
.landing-chapters { display: grid; gap: 10px; padding-left: 22px; }
.landing-chapters li { padding-left: 4px; color: var(--text); }
.landing-chapters strong, .landing-chapters span { display: block; }
.landing-chapters span { margin-top: 3px; color: var(--text-muted); line-height: 1.45; }
.landing-subsection { margin: 18px 0 8px; color: #9ce9d6; font-size: 14px; }
.landing-campaign-worlds { list-style: none; padding: 0; gap: 12px; }
.landing-campaign-worlds > li { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid rgba(156, 233, 214, .2); border-radius: var(--panel-radius); background: linear-gradient(135deg, rgba(18, 35, 43, .72), rgba(8, 18, 26, .72)); }
.landing-campaign-worlds > li > strong { color: #f4ca78; }
.landing-campaign-worlds .landing-campaign-objectives { color: var(--text); }
.landing-campaign-worlds .landing-campaign-objectives > strong { display: inline; color: #9ce9d6; }
.landing-campaign-worlds .landing-campaign-next { margin-top: 2px; padding-top: 6px; border-top: 1px solid rgba(156, 233, 214, .14); color: #9ce9d6; }
.campaign-panel { display: grid; gap: 12px; padding: 10px; color: var(--text); }
.campaign-panel-summary { display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(156, 233, 214, 0.24); border-radius: var(--panel-radius); background: rgba(8, 18, 26, 0.72); }
.campaign-panel-kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.campaign-panel-summary strong { font-size: 13px; }
.campaign-panel-summary > span:last-child { color: var(--text-muted); line-height: 1.4; }
.campaign-operation-card { display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(244, 202, 120, .28); border-radius: var(--panel-radius); background: linear-gradient(135deg, rgba(62, 49, 30, .42), rgba(8, 18, 26, .72)); }
.campaign-operation-card > span { color: #f4ca78; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.campaign-operation-card > strong { color: #fff; font-size: 14px; }
.campaign-operation-card p, .campaign-victory-debrief p { margin: 0; color: var(--text-muted); line-height: 1.5; }
.campaign-operation-card small, .campaign-victory-debrief span { color: #9ce9d6; line-height: 1.45; }
.campaign-victory-debrief { display: grid; gap: 7px; margin: 14px 0; padding: 12px; border: 1px solid rgba(156, 233, 214, .28); border-radius: var(--panel-radius); background: rgba(8, 18, 26, .72); }
.campaign-victory-debrief strong { color: #9ce9d6; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.campaign-victory-goal { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--panel-radius); background: rgba(8, 18, 26, .58); font-size: 11px; }
.campaign-victory-goal strong { color: var(--text); font-size: 12px; }
.campaign-victory-goal span { min-width: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.campaign-victory-goal .is-complete { color: var(--accent); }
.campaign-chapters { display: grid; gap: 8px; }
.campaign-chapter { padding: 10px 11px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--panel-radius); background: rgba(8, 18, 26, 0.58); }
.campaign-chapter > header { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; }
.campaign-chapter > header span { flex: 0 0 auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.campaign-chapter ul { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.campaign-objective { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 7px; align-items: start; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.campaign-objective-complete { color: var(--text); }
.campaign-objective-complete > span:first-child { color: var(--accent); }
.campaign-objective-state { color: var(--text-muted); font-size: 10px; }
.campaign-rover-guidance { display:grid; gap:7px; margin-top:10px; padding:9px; border:1px solid rgba(126,207,239,.25); border-radius:8px; background:rgba(35,93,120,.12); color:var(--text-muted); font-size:11px; line-height:1.4; }
.campaign-rover-guidance .hud-button { justify-self:start; }
.landing-reward-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.landing-reward-group { padding: 12px 14px; border: 1px solid rgba(128, 187, 206, 0.11); border-radius: var(--panel-radius); background: linear-gradient(145deg, rgba(26, 42, 52, 0.86), rgba(15, 27, 36, 0.84)); }
.landing-reward-group h3 { margin: 2px 0 10px; color: #9ce9d6; font-size: 13px; }
.landing-reward-group ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.landing-reward-item { display: grid; gap: 2px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.landing-reward-item strong { color: #dcebf2; font-weight: 650; }
.landing-reward-item span { color: #68d8c6; font-size: 10px; }
.landing-reward-item small { color: #8599a7; font-size: 10px; }
.landing-reward-hero { position: relative; display: flex; align-items: center; min-height: 210px; margin: 12px 0 16px; overflow: hidden; border: 1px solid rgba(112, 200, 210, 0.2); border-radius: var(--panel-radius); isolation: isolate; background: #0b1722; }
.landing-reward-hero > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.landing-reward-hero::after { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(90deg, rgba(6, 15, 23, 0.88), rgba(6, 15, 23, 0.48) 42%, rgba(6, 15, 23, 0.06) 82%), linear-gradient(0deg, rgba(6, 15, 23, 0.42), transparent 62%); }
.landing-reward-hero > div:not(.landing-reward-models) { display: grid; gap: 8px; width: min(42%, 370px); padding: 22px; }
.landing-reward-hero > div > strong { color: #e4f6f5; font-size: clamp(19px, 2.3vw, 30px); letter-spacing: 0.02em; text-shadow: 0 2px 16px #061019; }
.landing-reward-hero > div > span { color: #bfd0d9; font-size: 12px; line-height: 1.55; }
.landing-reward-models { position: absolute; inset: 0 0 0 auto; width: 57%; height: 100%; pointer-events: none; }
.landing-reward-models canvas { width: 100%; height: 100%; }
.landing-reward-models > span { position: absolute; right: 12px; bottom: 8px; color: rgba(192, 230, 235, 0.65); font-size: 8px; letter-spacing: 0.2em; }
@media (max-width: 640px) {
  .landing-reward-hero { min-height: 270px; align-items: flex-start; }
  .landing-reward-hero > div:not(.landing-reward-models) { position: relative; z-index: 1; width: 100%; padding: 16px; }
  .landing-reward-models { right: 0; bottom: 0; top: auto; width: 100%; height: 58%; opacity: 0.76; }
  .landing-reward-item { font-size: 11px; }
}

.landing-saves {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.landing-save {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  text-align: left;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
}

.landing-save-action {
  align-self: flex-start;
  margin-top: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(99, 240, 184, 0.42);
  border-radius: 7px;
  color: #8ef0ca;
  background: rgba(22, 94, 75, 0.28);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.landing-save-action:hover:not(:disabled) {
  border-color: rgba(99, 240, 184, 0.75);
  background: rgba(22, 94, 75, 0.48);
}

.landing-save-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.landing-save-name {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

/* ----------------------------------------------------------- settings */

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
}

.settings-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-label {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.settings-value {
  font-size: 13px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.settings-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.settings-note {
  font-size: 12px;
  color: var(--accent);
  line-height: 1.5;
}

.settings-note-error {
  color: var(--danger);
}

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

.settings-field-label {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-row input[type='url'],
.settings-row input[type='password'],
.settings-row input[type='text'] {
  padding: 7px 10px;
  background: rgba(10, 16, 26, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}

.settings-row input[type='url']:focus,
.settings-row input[type='password']:focus,
.settings-row input[type='text']:focus {
  outline: 1px solid var(--accent);
}

.settings-row input:disabled,
.settings-row select:disabled {
  opacity: 0.55;
}

.settings-row input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
}

.settings-row select {
  padding: 7px 10px;
  background: rgba(10, 16, 26, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}

.settings-row select:focus {
  outline: 1px solid var(--accent);
}

.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.settings-toggle input {
  accent-color: var(--accent);
}

/* ----------------------------------------------------------- crew */

.crew-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crew-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crew-portrait {
  flex: none;
}

.crew-head-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.crew-name {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.crew-role {
  font-size: 12px;
  color: var(--text-muted);
}

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

.crew-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.crew-row-label {
  color: var(--text-muted);
}

.crew-row-value {
  color: var(--text);
  text-align: right;
}

.crew-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 2px;
}

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

.crew-stat {
  display: grid;
  grid-template-columns: 74px 1fr 38px;
  align-items: center;
  gap: 8px;
}

.crew-stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.crew-stat-track {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.crew-stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 220ms linear;
}

.crew-stat-value {
  font-size: 11px;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* JEV console */
.jev-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jev-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jev-mode {
  padding: 3px 6px;
  background: rgba(10, 16, 26, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

.jev-mode:focus {
  outline: 1px solid var(--accent);
}

.jev-mode:disabled {
  opacity: 0.55;
}

.jev-focus-control { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 10px; }
.jev-focus-control select { max-width: 126px; padding: 3px 5px; border: 1px solid var(--panel-border); border-radius: 6px; background: rgba(10, 16, 26, 0.9); color: var(--text); font: inherit; font-size: 10px; }

.jev-tier {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
}

.jev-connection {
  flex: 0 1 auto;
  max-width: 100%;
  text-align: right;
}

.jev-connection-checking {
  color: var(--accent);
}

.jev-connection-connected {
  color: var(--good);
}

.jev-connection-fallback {
  color: var(--warn);
}

.jev-pending {
  font-size: 11px;
  color: var(--warn);
}

.jev-halt {
  border-color: rgba(240, 120, 120, 0.45);
  color: #f29898;
}

.jev-halt:hover {
  border-color: #f29898;
}

.jev-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px 2px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 180, 220, 0.35) transparent;
}

.jev-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.jev-row-operator {
  align-items: flex-end;
}

.jev-bubble {
  max-width: 88%;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(30, 44, 62, 0.85);
  border: 1px solid rgba(140, 180, 220, 0.18);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.jev-bubble-operator {
  background: rgba(99, 240, 184, 0.1);
  border-color: rgba(99, 240, 184, 0.32);
}

.jev-bubble-error {
  border-color: rgba(240, 120, 120, 0.5);
}

.jev-clock {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-muted);
}

.jev-system {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 2px 6px;
  line-height: 1.45;
}

.jev-system-error {
  color: #f29898;
}

.jev-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 92%;
}

.jev-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(30, 44, 62, 0.6);
  border: 1px solid rgba(140, 180, 220, 0.18);
  font-size: 11px;
  line-height: 1.4;
}

.jev-chip-mark {
  width: 12px;
  text-align: center;
  color: var(--text-muted);
}

.jev-chip-desc {
  flex: 1;
}

.jev-chip-note {
  flex-basis: 100%;
  font-size: 10px;
  color: var(--text-muted);
}

.jev-chip-applied .jev-chip-mark {
  color: var(--accent);
}

.jev-chip-applied {
  border-color: rgba(99, 240, 184, 0.3);
}

.jev-chip-failed .jev-chip-mark {
  color: #f29898;
}

.jev-chip-failed {
  border-color: rgba(240, 120, 120, 0.4);
}

.jev-chip-dropped {
  opacity: 0.55;
}

.jev-chip-apply {
  padding: 2px 8px;
  background: rgba(99, 240, 184, 0.16);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.jev-chip-apply:hover {
  background: rgba(99, 240, 184, 0.28);
}

.jev-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 8px 10px;
}

.jev-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: jev-pulse 1.2s ease-in-out infinite;
}

.jev-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.jev-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes jev-pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

.jev-empty {
  padding: 6px 8px;
  border: 1px dashed rgba(140, 180, 220, 0.2);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.jev-policy {
  border-top: 1px solid rgba(140, 180, 220, 0.14);
  padding-top: 6px;
}

.jev-policy-toggle {
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.jev-policy-toggle:hover {
  color: var(--text);
}

.jev-policy-input {
  width: 100%;
  margin-top: 5px;
  padding: 5px 7px;
  background: rgba(18, 28, 40, 0.9);
  border: 1px solid rgba(140, 180, 220, 0.22);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  resize: vertical;
}

.jev-policy-input:focus {
  outline: 1px solid var(--accent);
}

.jev-policy-hint {
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-muted);
}

.jev-composer {
  display: flex;
  gap: 6px;
}

.jev-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  background: rgba(18, 28, 40, 0.9);
  border: 1px solid rgba(140, 180, 220, 0.22);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.jev-input:focus {
  outline: 1px solid var(--accent);
}

.jev-input:disabled {
  opacity: 0.5;
}

.jev-stop {
  border-color: rgba(240, 120, 120, 0.5);
  color: #f29898;
}

.jev-dormant {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 2px;
}

.jev-dormant-title {
  font-size: 12px;
  color: var(--text-muted);
}

.jev-dormant-body {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.jev-note {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 0 2px;
}

/* ------------------------------------------------------------ help panel */

.help-icon {
  flex: none;
  color: var(--warn);
}

.help-layout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.help-nav {
  flex: 0 0 148px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(480px, calc(100vh - 420px));
  overflow-y: auto;
  padding-right: 10px;
  border-right: 1px solid var(--panel-border);
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 180, 220, 0.35) transparent;
}

.help-nav-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.help-nav-topics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-nav-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.help-nav-group {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 8px 2px;
}

.help-nav-btn {
  text-align: left;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 100ms ease, background 100ms ease, border-color 100ms ease;
}

.help-nav-btn:hover {
  color: var(--text);
  background: rgba(30, 44, 62, 0.72);
}

.help-nav-btn-active {
  color: var(--accent);
  background: rgba(99, 240, 184, 0.14);
  border-color: rgba(99, 240, 184, 0.5);
}

.help-content {
  flex: 1 1 auto;
  min-width: 0;
  max-height: min(480px, calc(100vh - 420px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 180, 220, 0.35) transparent;
}

.help-nav::-webkit-scrollbar,
.help-content::-webkit-scrollbar {
  width: 10px;
}

.help-nav::-webkit-scrollbar-track,
.help-content::-webkit-scrollbar-track {
  background: transparent;
}

.help-nav::-webkit-scrollbar-thumb,
.help-content::-webkit-scrollbar-thumb {
  background: rgba(140, 180, 220, 0.24);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.help-nav::-webkit-scrollbar-thumb:hover,
.help-content::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 180, 220, 0.5);
  background-clip: padding-box;
}

.help-nav::-webkit-scrollbar-corner,
.help-content::-webkit-scrollbar-corner {
  background: transparent;
}

.help-h {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  margin: 14px 0 6px;
}

.help-content > .help-h:first-child {
  margin-top: 2px;
}

.help-p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 8px;
}

.help-list {
  margin: 0 0 8px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

.help-key {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid rgba(140, 180, 220, 0.35);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(30, 44, 62, 0.72);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.6;
  color: var(--text);
  white-space: nowrap;
}

.help-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(30, 44, 62, 0.85);
  border: 1px solid rgba(140, 180, 220, 0.22);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: nowrap;
}

.help-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 4px;
}

.help-entry {
  padding: 7px 0 8px;
  border-top: 1px solid rgba(140, 180, 220, 0.1);
}

.help-entry-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.help-entry-detail {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 3px 0 0;
}

.help-cost {
  font-size: 10px;
  font-weight: 400;
  color: var(--warn);
  margin-left: 6px;
}

/* Building management and live trend inspection. */
.building-controls { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:5px 0; font-size:11px; }
.building-controls label { display:flex; align-items:center; gap:3px; white-space:nowrap; }
.building-controls input { accent-color:#6de4c6; }
.building-controls button,.building-controls select,.command-detail-row button { border:1px solid #527b89; border-radius:5px; color:#d8edf2; background:#223744; font:inherit; padding:3px 6px; }
.building-controls button:disabled,.command-detail-row button:disabled { opacity:.45; }
.command-detail { flex:1.4 1 0; }
.command-queue-items { overflow:auto; display:flex; flex-wrap:wrap; gap:5px; }
.command-queue .queue-chip { padding:6px; display:flex; gap:5px; align-items:center; font-size:10px; }
.command-queue button { font:inherit; color:inherit; background:transparent; border:1px solid #3e5361; border-radius:3px; cursor:pointer; }
.resource-detail-popover { width:540px; max-width:calc(100vw - 30px); }
.resource-detail-popover { top:100%; }
.resource-detail-row { grid-template-columns:minmax(140px,1fr) 105px 60px 52px auto; min-height:47px; }
.resource-sparkline { width:120px; height:44px; display:block; }
.resource-detail-row:hover,.resource-detail-row:focus-visible { background:rgba(96,209,226,.08); outline:1px solid #4d7986; }
.resource-chip-help { position:relative; }
.resource-chip-help::after,
.resource-storage-chip::after,
.resource-detail-row[data-tooltip]::after {
  position:absolute;
  z-index:1100;
  width:max-content;
  max-width:min(340px,calc(100vw - 36px));
  padding:7px 9px;
  border:1px solid rgba(117,174,198,.58);
  border-radius:6px;
  color:#edf7fb;
  background:rgba(10,20,30,.98);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  font-size:10px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease,visibility .12s ease;
}
.resource-chip-help::after { top:calc(100% + 5px); left:0; content:attr(data-tooltip); }
.resource-chip-help:nth-of-type(n+7)::after,
.resource-storage-chip::after { top:calc(100% + 5px); right:0; left:auto; content:attr(data-tooltip); }
.resource-chip-help:hover::after,
.resource-storage-chip:hover::after { opacity:1; visibility:visible; }
.resource-detail-row[data-tooltip] { position:relative; }
.resource-detail-row[data-tooltip]::after { bottom:calc(100% + 4px); left:0; content:attr(data-tooltip); }
.resource-detail-row[data-tooltip]:hover::after,
.resource-detail-row[data-tooltip]:focus-visible::after { opacity:1; visibility:visible; }
@media (hover:none), (pointer:coarse) {
  .resource-chip-help::after,
  .resource-storage-chip::after,
  .resource-detail-row[data-tooltip]::after { display:none; }
}
.resource-crate-surplus-button { min-width:54px; padding:4px 6px; border:1px solid #527b89; border-radius:5px; color:#d8edf2; background:#223744; font:inherit; font-size:9px; white-space:nowrap; cursor:pointer; }
.resource-free-storage-button { display:block; margin:6px 0 0 auto; padding:5px 9px; border:1px solid #638ba0; border-radius:6px; color:#e9f5fa; background:linear-gradient(110deg,#204d67,#173448); font:inherit; font-size:10px; font-weight:700; cursor:pointer; }
.resource-free-storage-button:hover { border-color:#91d9ef; background:linear-gradient(110deg,#2c6788,#204762); }
.resource-crate-surplus-button:hover:not(:disabled) { border-color:#79c9d5; background:#2b4c5a; }
.resource-crate-surplus-button:disabled { opacity:.45; cursor:default; }
.command-mobile-tabs { display:none; }
@media (max-width:600px) {
  .hud-top > .resource-bar { position:fixed; top:12px; right:12px; z-index:1002; width:auto; }
  .resource-bar-trigger { width:auto; flex-wrap:nowrap; gap:2px; }
  .resource-bar-trigger .resource-chip:not(.resource-credit-chip) { display:none; }
  .resource-detail-popover { max-height:calc(100vh - 64px); }
  .resource-detail-popover { width:calc(100vw - 20px); max-width:calc(100vw - 20px); right:-8px; }
  .resource-detail-row { grid-template-columns:minmax(88px,1fr) 58px 43px 39px auto; gap:4px; min-height:42px; }
  .resource-sparkline { width:54px; height:24px; }
  .resource-crate-surplus-button { min-width:48px; padding:4px; }
}
@media (max-width:850px) {
  .hud-top { left:8px; right:8px; }
  .hud-top > .top-bar { width:min(270px,calc(100vw - 100px)); min-width:0; padding:8px; gap:5px; }
  .top-bar-wallet { display:none; }
  .top-bar-day { font-size:10px; }
  .top-bar-weather { gap:5px; font-size:10px; }
  .top-bar-hazard { font-size:10px; letter-spacing:.06em; }
  .top-bar-speed { gap:4px; }
  .top-bar-speed .hud-button { flex:1; min-width:0; padding:4px 5px; font-size:11px; }
  .hud-top-center { position:fixed; left:12px; right:12px; bottom:calc(32vh + 22px); margin:0; z-index:35; }
  .hud-top-center .meters { position:relative!important; left:auto!important; top:auto!important; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); align-items:center; gap:4px 8px; width:100%; padding:6px 8px; cursor:default; }
  .hud-top-center .meters { height:auto; overflow:visible; }
  .hud-top-center .meters-resize { right:0; bottom:0; width:24px; height:24px; z-index:2; }
  .hud-top-center .meters-resize::after { right:5px; bottom:5px; width:10px; height:10px; }
  .hud-top-center .meter-head { gap:3px; margin:0; font-size:9px; }
  .hud-top-center .meter-label { font-size:8px; letter-spacing:.05em; }
  .hud-top-center .meter-text { font-size:9px; white-space:nowrap; }
  .hud-top-center .meter-readout { font-size:8px; }
  .hud-top-center .meter-track { height:4px; margin-top:3px; }
  .hud-top-center .meter-flow { gap:2px; margin-top:2px; font-size:8px; }
  .hud-top-center .meters-footer { grid-column:1/-1; padding-top:4px; font-size:9px; }
  .warning-stack { position:absolute; left:0; right:0; bottom:calc(100% + 5px); width:auto; margin:0; }
  .command-bar,
  .command-bar.command-bar-inspecting { left:8px; right:8px; bottom:8px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:28px minmax(0,1fr); align-items:stretch; gap:5px; height:min(260px,32vh); min-height:190px; max-height:260px; padding:6px; }
  .command-mobile-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; min-width:0; }
  .command-mobile-tab { min-width:0; padding:3px 4px; border:1px solid rgba(140,180,220,.2); border-radius:5px; color:var(--text-muted); background:rgba(30,44,62,.72); font-size:10px; white-space:nowrap; }
  .command-mobile-tab-active { color:var(--accent); border-color:var(--accent); background:rgba(99,240,184,.14); }
  .command-bar > .command-build,
  .command-bar > .command-nav,
  .command-bar > .command-detail,
  .command-bar > .command-queue { display:none; width:100%; min-width:0; min-height:0; height:100%; flex:none; overflow:auto; border:0; padding:0; }
  .command-bar.mobile-view-build > .command-build { display:flex; }
  .command-bar.mobile-view-systems > .command-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(24px,1fr)); gap:4px; }
  .command-bar.mobile-view-details > .command-detail { display:flex; }
  .command-bar.mobile-view-work > .command-queue { display:flex; }
  .command-mobile-tabs { grid-row:1; }
  .command-bar > .command-build,
  .command-bar > .command-nav,
  .command-bar > .command-detail,
  .command-bar > .command-queue { grid-row:2; }
  .command-build { gap:4px; }
  .command-tabs { gap:3px; }
  .command-tab { padding:3px 6px; font-size:9px; }
  .command-icons { gap:4px; }
  .command-icon { width:68px; }
  .command-nav-btn { min-height:24px; padding:2px 6px; font-size:10px; }
  .command-nav-icon { width:17px!important; height:17px!important; }
  .command-detail { gap:3px; }
  .command-detail-body { overflow:auto; }
  .command-queue { gap:3px; }
  .command-queue-items { display:flex; flex-direction:column; gap:4px; overflow:auto; }
  .command-bar .work-card { flex:none; min-height:56px; }
}
.crew-stat { position:relative; }
.crew-stat-value { min-width:48px; }
.crew-vital-trend { display:none; position:absolute; top:100%; right:0; background:#142330; border:1px solid #537d8d; border-radius:6px; z-index:10; padding:4px; }
.crew-stat:hover .crew-vital-trend,.crew-stat:focus-visible .crew-vital-trend { display:block; }
.crew-rescue-backdrop { position:fixed; inset:0; z-index:150; }
.crew-rescue-menu { position:absolute; width:265px; padding:14px; font-size:12px; }
.crew-rescue-menu p { color:#aac4d0; }
.crew-rescue-menu button,.tactical-map-overlay button { border:1px solid #548595; background:#203b4b; color:#dceff3; border-radius:6px; padding:7px 12px; cursor:pointer; margin-right:5px; }
.tactical-map-overlay { position:fixed; inset:30px 12% 175px; z-index:100; background:#0c1b27f5; border:1px solid #638f9f; border-radius:16px; display:flex; flex-direction:column; box-shadow:0 20px 100px #000b; animation:overview-in .35s ease-out; }
.tactical-map-overlay header { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; }
.tactical-map-overlay header span { display:block; color:#9ebdcc; font-size:12px; margin-top:5px; }
.tactical-map-overlay svg { min-height:0; flex:1; width:100%; cursor:crosshair; }
.tactical-map-overlay footer { padding:10px; text-align:center; color:#aac6d2; font-size:12px; }
@keyframes overview-in { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@media (max-width:1100px) { .command-queue {width:230px;} .command-nav {width:180px;} .tactical-map-overlay {left:20px;right:20px;} }

.tactical-map-overlay { z-index:5000; }
.resource-detail-heading { display:flex; justify-content:space-between; }
.resource-detail-heading-actions { display:flex; align-items:center; gap:5px; }
.resource-detail-heading-actions > span { color:var(--text-muted); font-size:8px; }
.resource-market-actions { display:flex; gap:6px; margin:0 0 8px; }
.resource-trade-button { padding:4px 8px; border:1px solid rgba(102,190,230,.5); border-radius:5px; color:#d9f2ff; background:linear-gradient(110deg,rgba(30,75,102,.86),rgba(20,48,69,.9)); font:inherit; font-size:10px; font-weight:600; white-space:nowrap; cursor:pointer; }
.resource-trade-button:hover { border-color:#87d5f3; background:linear-gradient(110deg,#2c6788,#204762); }
.resource-sell-surplus-button { padding:3px 6px; border:1px solid #487c75; border-radius:5px; color:#c9f5e8; background:#173a36; font:inherit; font-size:9px; white-space:nowrap; cursor:pointer; }
.resource-sell-surplus-button:hover { border-color:#72c8ac; background:#205047; }
@media (max-width:600px) {
  .resource-detail-heading { gap:6px; }
  .resource-detail-heading-actions { gap:3px; }
  .resource-sell-surplus-button { padding:3px 4px; }
}

/* Surface salvage can fund recovery builds even while warehouse capacity is breached. */
.resource-crate-stock { margin: 6px 0 9px; padding: 7px 8px; border: 1px solid #6b8498; border-radius: 6px; background: linear-gradient(110deg,rgba(117,151,181,.14),rgba(21,37,51,.56)); }
.resource-crate-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; color:#e8f1f7; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.resource-crate-heading span:last-child { color:#8edac5; font-size:8px; font-weight:500; letter-spacing:0; text-transform:none; }
.resource-crate-items { display:flex; flex-wrap:wrap; gap:5px; }
.resource-crate-chip { display:inline-flex; align-items:center; gap:4px; min-height:23px; padding:2px 6px; border:1px solid rgba(155,187,210,.23); border-radius:5px; background:rgba(4,12,19,.4); color:#f0f5f8; font-size:10px; font-variant-numeric:tabular-nums; }
.resource-crate-chip .resource-image { width:15px; height:15px; object-fit:contain; }
.resource-crate-chip small { color:#a9c0cf; font-size:8px; }

/* Illustrated work queue cards share the build-menu artwork. */
.command-queue-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:6px; padding:1px 3px 3px 0; overflow-y:auto; }
.work-card { position:relative; min-width:0; overflow:hidden; background:linear-gradient(135deg,#223647eb,#14232ee8); border:1px solid #426477; border-radius:8px; padding:4px 4px 8px; min-height:70px; }
.work-card-select { display:flex; align-items:center; gap:5px; width:100%; text-align:left; cursor:pointer; border:0 !important; background:transparent !important; padding:0; }
.work-card .building-icon-wrap { width:52px; height:48px; flex:none; }
.work-card .building-icon { width:52px !important; height:46px !important; max-width:52px; max-height:46px; }
.work-card-copy { display:flex; min-width:0; flex-direction:column; gap:3px; padding:2px 0; }
.work-card-copy strong { font-size:11px; color:#edf8fa; line-height:1.15; }
.work-card-copy > span { font-size:9px; color:#8eddd5; line-height:1.2; }
.work-card-copy .work-card-status { color:#a8bac8; font-size:8px; }
.work-card-controls { display:flex; justify-content:flex-end; gap:3px; padding-top:2px; }
.command-queue .work-card-controls button { min-width:23px; height:19px; padding:0; border:1px solid #526e80; border-radius:4px; background:#203441; font-size:11px; }
.work-card-progress { position:absolute; bottom:0; left:0; right:0; height:4px; background:#081722; }
.work-card-progress span { display:block; height:100%; background:linear-gradient(90deg,#408ec4,#75f0c9); box-shadow:0 0 9px #69e9e180; transition:width .2s linear; }
.work-card-paused .work-card-progress span { background:#e6b660; }
.work-card:hover { border-color:#8bc5d4; }
.work-card-robot { border-color:#5a849f; }
.work-queue-repair-summary { flex:none;padding:3px 6px;border:1px solid rgba(228,177,96,.34);border-radius:5px;background:rgba(90,62,28,.18);color:#e8c78f;font-size:9px;line-height:1.15;font-variant-numeric:tabular-nums; }
.work-queue-empty { grid-column:1/-1; padding:15px 8px; font-size:11px; color:#8cabbc; }
@media(max-width:1100px) { .command-queue-items {grid-template-columns:1fr;} }

/* Selected module console: a responsive operations grid. */
.command-bar-inspecting {height:210px;}
.command-bar-inspecting .command-detail {flex:1.7 1 0;}
.command-bar .command-detail-body {padding-right:7px;}
.selected-building-console {display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,.85fr); gap:7px 12px; align-content:start; font-size:11px;}
.facility-production {grid-column:1/-1;display:flex;flex-direction:column;gap:2px;padding:4px 7px;border:1px solid rgba(105,164,190,.32);border-radius:6px;background:linear-gradient(110deg,rgba(19,42,56,.94),rgba(21,35,49,.84));min-width:0;}
.facility-production-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;color:#d7e9f0;font-size:10px;}
.facility-production-heading span {color:#8fabb9;font-size:9px;}
.facility-output-row {display:grid;grid-template-columns:minmax(74px,.8fr) minmax(72px,1fr) 92px;align-items:center;gap:6px;min-height:35px;border-top:1px solid rgba(255,255,255,.055);}
.facility-output-name {display:flex;align-items:center;gap:6px;min-width:0;color:#c5d8e2;font-size:10px;}
.facility-output-name img {width:19px;height:19px;object-fit:contain;flex:0 0 19px;}
.facility-output-name span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.facility-output-water-icon {width:19px;text-align:center;font-size:14px;}
.facility-hourly-chart {display:block;width:100%;height:25px;overflow:visible;}
.facility-output-total {display:grid;justify-items:end;gap:1px;min-width:0;white-space:normal;color:#e8f5fa;font-variant-numeric:tabular-nums;line-height:1.1;text-align:right;}
.facility-output-total strong {font-size:11px;}
.facility-output-total small {color:#91aab7;font-size:8px;}
.facility-output-window-total {max-width:100%;color:#8fa9b7;font-size:8px;line-height:1.15;white-space:normal;}
.facility-production-empty {padding:2px 0;color:#91aab7;font-size:9px;}
.selected-building-heading {display:flex; gap:8px; align-items:center; min-width:0;}
.selected-building-heading .building-icon-wrap {width:38px;height:32px;flex:none;}
.selected-building-heading .building-icon {width:38px !important;height:32px !important;max-width:38px;max-height:32px;}
.selected-building-subtitle {font-size:9px;color:#8faebf;margin-top:3px;text-transform:uppercase;letter-spacing:.08em;}
.selected-building-console .command-detail-state {grid-column:2;align-self:center;font-size:9px;color:#9fbac8;text-transform:none;letter-spacing:0;line-height:1.5;padding:5px 7px;background:#182d3a;border-radius:5px;}
.selected-building-console .building-controls {margin:0;gap:5px;align-content:start;}
.selected-building-console .building-controls label:not(.factory-recipe-control) {padding:5px 7px;background:#1c3342;border:1px solid #426273;border-radius:5px;font-size:10px;cursor:pointer;gap:5px;}
.selected-building-console input[type=checkbox] {width:12px;height:12px;margin:0;accent-color:#68ddc5;}
.selected-building-console button,.selected-building-console select {font:inherit;color:#e2f0f4;background:#203b4c;border:1px solid #50798c;border-radius:5px;min-height:26px;padding:4px 8px;cursor:pointer;}
.selected-building-console button:hover:not(:disabled) {background:#2b5264;border-color:#8bdbdc;}
.selected-building-console button:disabled {opacity:.4;cursor:default;}
.selected-building-console .factory-recipe-control {display:flex;flex-direction:column;align-items:stretch;gap:4px;flex-basis:100%;min-width:0;font-size:9px;color:#a5c2ce;}
.selected-building-console .factory-recipe-control select {width:100%;max-width:100%;font-size:10px;color:#e2f0f4;min-height:28px;color-scheme:dark;}
.selected-building-fittings {padding:6px 8px;border:1px solid #3a5666;border-radius:6px;background:#142a36;display:flex;flex-direction:column;gap:7px;min-width:0;}
.selected-building-fittings:empty {display:none;}
.selected-building-fittings .command-detail-row {display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;font-size:10px;}
.selected-building-console .command-detail-text {grid-column:1/-1;padding:6px 9px;background:#15383188;border-left:2px solid #6bdfc6;color:#b9e2d9;font-size:10px;line-height:1.4;margin:0;}
.command-nav-btn:focus-visible,.work-card-select:focus-visible,.selected-building-console button:focus-visible,.selected-building-console select:focus-visible {outline:2px solid #8ce5e2;outline-offset:1px;}
@media(max-width:1350px) { .selected-building-console {grid-template-columns:1fr;} .selected-building-console .command-detail-state {grid-column:1;} .command-bar-inspecting {height:225px;} .command-queue {width:270px;} .command-nav {width:180px;} }
@media(max-width:1000px) { .command-queue {width:200px;} .command-nav {width:150px;} .command-detail {min-width:230px;} .command-bar-inspecting .command-build {flex:.8 1 0;} }

.command-queue-items {flex:1;min-height:0;grid-auto-rows:max-content;}
.work-card {min-height:86px;}


/* Compact operations console; scoped overrides keep native controls contained. */
.command-bar.command-bar-inspecting { height: 190px; }
.command-bar .command-detail-body { overflow-y: auto; overflow-x: hidden; min-width: 0; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(140, 180, 220, 0.45) rgba(12, 24, 33, 0.28); }
.command-bar .command-detail { min-height:0; overflow:hidden; }
.command-bar .command-detail-body { flex:1 1 0%; max-height:100%; }
.command-bar .command-detail-body:focus-visible { outline:2px solid #8ce5e2; outline-offset:-2px; }
.command-bar .selected-building-console { display:flex; flex-wrap:wrap; align-content:flex-start; gap:5px 8px; font-size:10px; }
.command-bar .selected-building-security { display:flex; flex:1 1 100%; flex-wrap:wrap; gap:2px 8px; min-width:0; padding:4px 6px; border:1px solid #3d6174; border-radius:6px; background:linear-gradient(105deg,rgba(21,46,61,.94),rgba(18,31,43,.92)); }
.command-bar .security-readout-heading { flex:1 1 100%; color:#8bc9e8; font-size:8px; font-weight:800; letter-spacing:.14em; }
.command-bar .selected-building-security .command-detail-row { flex:1 1 165px; min-width:0; font-size:9px; }
.command-bar .selected-building-security .command-detail-value { overflow-wrap:anywhere; }
.command-bar .selected-building-security .command-detail-hintline { flex-basis:100%; margin-top:1px; font-size:8px; }
.command-bar .selected-building-heading { display:flex; flex:1 1 190px; gap:7px; align-items:center; }
.command-bar .selected-building-heading .building-icon { width:32px!important; height:32px!important; flex:0 0 32px; }
.command-bar .command-detail-state { flex:1 1 145px; font-size:9px; align-self:center; }
.command-bar .building-controls { display:flex; flex-wrap:wrap; gap:4px; width:100%; margin:0; }
.command-bar .building-controls label { padding:2px 4px; gap:3px; font-size:10px; }
.command-bar .building-controls button, .command-bar .building-controls select { height:23px; font-size:10px; margin:0; }
.command-bar .factory-recipe-control { flex-direction:row; flex-basis:auto; align-items:center; }
.command-bar .selected-building-fittings { display:flex; flex-wrap:wrap; gap:4px 9px; padding:3px 5px; width:100%; font-size:10px; }
.command-bar .command-detail-row { display:flex; gap:5px; align-items:center; flex:1 1 140px; }
.command-bar .command-detail-row button { font-size:10px; padding:2px 5px; margin-left:auto; }
.command-bar .command-detail-text { width:100%; padding:3px 0; font-size:10px; line-height:1.3; }
.command-bar .command-queue-items { display:flex; flex-direction:column; gap:5px; overflow-y:auto; }
.command-bar .work-card { flex:0 0 auto; min-height:63px; padding:3px 5px 8px; background:linear-gradient(110deg,#273b49,#15232e); border:1px solid #425968; border-radius:7px; }
.command-bar .work-card-select { display:flex; align-items:center; gap:8px; padding:0!important; color:#e6f1f7; text-align:left; background:transparent!important; }
.command-bar .work-card-select .building-icon { width:43px!important; height:43px!important; flex:0 0 43px; object-fit:contain; }
.command-bar .work-card-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.command-bar .work-card-copy strong { font-size:11px; }
.command-bar .work-card-copy span { font-size:9px; }
.command-bar .work-card-controls { position:absolute; right:5px; top:5px; }
.command-bar .work-card-controls button { background:#243948; border:1px solid #577284; border-radius:4px; color:#d8eff8; }
@media (max-width:1350px) { .command-bar.command-bar-inspecting { height:205px; } .command-bar .selected-building-console { gap:3px 6px; } }

.command-bar .building-spec-summary { display:flex; flex-wrap:wrap; gap:3px 9px; font-size:9px; color:#a7c8d8; width:100%; }
.command-bar .selected-building-fittings { flex-direction:row; align-items:center; min-height:0; } .command-bar .command-detail-row { flex:0 1 auto; min-height:0; }
.command-bar .work-card { width:100%; box-sizing:border-box; align-self:stretch; } .command-bar .work-card-copy { flex:1; } .command-bar .work-card-copy strong { padding-right:45px; white-space:normal; } .command-bar .selected-building-fittings:empty { display:none; }

.command-bar .retrofit-cost { font-size:9px; color:#bed9e6; align-self:center; }
.command-bar .building-spec-more { color:#8ca7b7; cursor:help; margin-left:auto; }
.command-bar .command-detail-name { font-size:12px; }
.command-bar .selected-building-subtitle { text-transform:none; font-size:9px; letter-spacing:0; }
.command-bar .building-controls { align-items:center; }
.command-bar .crew-assignment-summary { color:#a9c5d2; font-size:9px; line-height:1; white-space:nowrap; padding:4px 6px; border:1px solid #395a6c; border-radius:5px; background:#142a36; }
.command-bar .crew-assignment-panel { display:flex; flex:1 1 100%; flex-wrap:wrap; align-items:center; gap:3px 7px; min-width:0; padding:3px 6px; border:1px solid #345466; border-radius:6px; background:linear-gradient(100deg,#142936,#182c39); }
.command-bar .crew-assignment-heading { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.command-bar .crew-assignment-heading strong { color:#c7dce7; font-size:9px; font-weight:600; white-space:nowrap; }
.command-bar .crew-assignment-panel > label { color:#a9c5d2; font-size:9px; }
.command-bar .crew-assignment-controls { width:auto; flex:1 1 200px; }
.command-bar .crew-assignment-empty { color:#e3c58a; font-size:9px; }
.population-panel { display:flex; flex-direction:column; gap:8px; min-height:0; color:#d5e4ed; }
.population-summary { display:flex; gap:8px; flex-wrap:wrap; }
.population-summary span { padding:4px 8px; border:1px solid #345466; border-radius:999px; background:rgba(20,42,54,.84); color:#a9c5d2; font-size:11px; }
.population-summary strong { color:#e9f4f9; font-size:12px; }
.population-coverage-shortcut { padding:4px 8px; border:1px solid rgba(230,178,86,.52); border-radius:999px; background:rgba(69,49,27,.62); color:#ffe0a0; font:inherit; font-size:10px; white-space:nowrap; cursor:pointer; }
.population-coverage-shortcut:hover,.population-coverage-shortcut:focus-visible { border-color:#ffd27a; background:rgba(93,64,31,.85); outline:none; }
.population-balance-button { padding:4px 8px; border:1px solid #3e6e89; border-radius:999px; color:#c3e6f7; background:rgba(28,67,88,.72); font-size:10px; cursor:pointer; }
.population-balance-button:hover { border-color:#70c8ff; color:#fff; background:rgba(34,91,120,.86); }
.population-help { margin:0; color:#a9bfcb; font-size:11px; line-height:1.45; }
.population-shift-warnings { display:grid; gap:5px; }
.population-shift-warning { display:grid; gap:2px; padding:7px 9px; border:1px solid rgba(238,184,88,.4); border-left:3px solid #e6b256; border-radius:6px; color:#d8c59d; background:rgba(69,49,27,.46); font-size:10px; line-height:1.4; }
.population-shift-warning strong { color:#ffe0a0; font-size:10px; }
.population-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; overflow:auto; min-height:0; padding:1px 4px 2px 1px; }
.population-card { display:flex; flex-direction:column; gap:6px; min-width:0; padding:8px; border:1px solid rgba(125,166,190,.24); border-radius:8px; background:linear-gradient(135deg,rgba(26,44,57,.95),rgba(18,31,42,.96)); }
.population-person { display:flex; align-items:center; gap:7px; min-width:0; }
.population-avatar { display:grid; place-items:center; width:27px; height:27px; flex:none; border:1px solid #4d82a0; border-radius:50%; color:#d7f1ff; background:linear-gradient(145deg,#315c77,#172a3a); font-size:12px; font-weight:700; }
.population-person-copy { display:flex; flex-direction:column; min-width:0; gap:2px; }
.population-person-copy strong { overflow:hidden; color:#edf5f8; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.population-person-copy span { overflow:hidden; color:#9eb5c1; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.population-person-copy .population-shift-label { color:#70c8ff; font-size:9px; font-weight:700; letter-spacing:.02em; }
.population-shift-assignment { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:6px; color:#9eb5c1; font-size:9px; }
.population-shift-assignment select { min-width:0; width:100%; padding:5px 6px; border:1px solid #375568; border-radius:5px; color:#e5eff4; background:#152633; font-size:10px; }
.population-assignment { display:flex; flex-direction:column; gap:3px; color:#9eb5c1; font-size:9px; }
.population-assignment select { min-width:0; width:100%; padding:5px 6px; border:1px solid #375568; border-radius:5px; color:#e5eff4; background:#152633; font-size:10px; }
.population-assignment-mode { align-self:flex-end; padding:3px 7px; border:1px solid rgba(102,210,182,.45); border-radius:5px; color:#9be2ce; background:rgba(28,94,82,.2); font-size:9px; line-height:1.2; cursor:pointer; }
.population-assignment-mode:hover:not(:disabled) { border-color:#75e0c0; background:rgba(42,125,107,.35); color:#dcfff4; }
.population-assignment-mode[aria-pressed="true"] { border-color:rgba(125,166,190,.35); color:#b8c9d3; background:rgba(75,96,108,.2); }
.population-assignment-mode:disabled { opacity:.45; cursor:not-allowed; }
.population-empty { padding:18px 8px; color:#a9bfcb; text-align:center; font-size:12px; }
@media(max-width:700px) {
  .window-frame[data-window-id='population'] .window-body { display:block; overflow-y:auto; }
  .population-panel { height:auto; overflow:visible; }
  .population-help { display:none; }
  .population-role-group { grid-template-columns:minmax(0,1fr); gap:3px; }
  .population-role-heading { padding-top:0; }
  .population-list { grid-template-columns:1fr; overflow:visible; }
}
.command-bar .building-controls select { max-width:100%; min-width:0; }
.command-bar .factory-recipe-control { flex:1 1 220px; min-width:0; }
.command-bar .factory-recipe-control select { flex:1; width:0; }
.command-bar .selected-building-fittings { gap:3px 9px; }
.command-bar .command-detail-text { margin:0; }
.command-bar .selected-building-console { gap:3px 6px; } .command-bar .selected-building-heading .building-icon { width:28px!important; height:28px!important; flex-basis:28px; } .command-bar .building-controls button, .command-bar .building-controls select { height:21px; font-size:9px; } .command-bar .building-controls label { font-size:9px; padding:1px 4px; } .command-bar .selected-building-fittings { padding:2px 4px; } .command-bar .command-detail-text { padding:2px 0; }
.command-bar .selected-building-console { gap:2px 6px; } .command-bar .command-detail-text { padding:0; }

.command-bar .selected-building-machine-actions { display:flex; flex:1 1 100%; flex-wrap:wrap; align-items:center; gap:3px 7px; min-width:0; padding:3px 6px; border:1px solid #41657a; border-left:3px solid #65b9e5; border-radius:6px; background:linear-gradient(100deg,#18364a,#172d3b); }
.command-bar .selected-building-console.has-machine-actions > .building-controls { width:auto; flex:0 1 auto; gap:3px; }
.command-bar .selected-building-console.has-machine-actions > .selected-building-machine-actions { flex:0 1 auto; flex-wrap:nowrap; width:auto; padding:1px 4px; }
.command-bar .selected-building-machine-actions .command-detail-row { display:flex; flex:0 1 auto; align-items:center; gap:4px; min-width:0; color:#abc5d2; font-size:9px; }
.command-bar .selected-building-machine-actions .command-detail-row button { margin-left:auto; border-color:#4e88a9; background:linear-gradient(110deg,#245777,#1a435c); font-weight:700; }
.command-bar .command-detail { min-height:0; overflow:hidden; }
.command-bar .command-detail-scroll-area { position:relative; display:flex; flex:1 1 0%; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.command-bar .command-detail-body { flex:1 1 0%; width:100%; height:auto; min-width:0; min-height:0; box-sizing:border-box; padding:0 19px 4px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.command-bar .command-detail-body::-webkit-scrollbar { display:none; }
.command-bar .command-detail-body:focus-visible { outline:2px solid #8ce5e2; outline-offset:-2px; }

/* Keep selected-building controls dense while making overflow easy to spot and scroll. */
.command-bar .command-section-title { line-height:1.15; }
.command-bar .selected-building-console { gap:2px 5px; line-height:1.25; }
.command-bar .selected-building-console .building-controls { gap:3px; }
.command-bar .selected-building-console .crew-assignment-panel { gap:2px 5px; padding:2px 4px; }
.command-bar .selected-building-console .crew-assignment-controls { gap:2px 4px; }
.command-bar .selected-building-heading,
.command-bar .building-detail .detail-head { position:sticky; top:0; z-index:2; background:linear-gradient(90deg,#1b2934 88%,rgba(27,41,52,.94)); }
.command-bar .selected-building-heading { padding:2px 0; }
.command-bar .building-detail .detail-head { padding:3px 0 5px; }
.command-bar .command-detail { height:100%; min-height:0; }
.command-bar .command-detail-scroll-area { flex:1 1 0%; height:0; min-height:0; }
.command-bar .command-detail-body { flex:1 1 0%; height:0; min-height:0; max-height:none; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(157,209,233,.72) rgba(9,25,37,.55); }
.command-bar .command-detail-body::-webkit-scrollbar { display:block; width:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-track { background:rgba(9,25,37,.55); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#b3eaff,#58a9d7); border:2px solid rgba(9,25,37,.55); border-radius:8px; }
.command-bar .crew-assignment-panel { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:rgba(120,172,198,.55) transparent; }
.command-bar .crew-assignment-controls { flex:0 0 auto; flex-wrap:nowrap; width:max-content; }
.command-bar .crew-assignment-controls button { flex:0 0 auto; white-space:nowrap; }
.population-role-counts { display:grid; gap:6px; }
.population-role-group { display:grid; grid-template-columns:78px minmax(0,1fr); align-items:start; gap:5px; min-width:0; }
.population-role-heading { padding-top:4px; color:#86a6b7; font-size:10px; font-weight:700; }
.population-role-items { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; }
.population-role-chip { display:flex; align-items:center; gap:5px; min-width:0; padding:3px 6px; border:1px solid rgba(88,131,153,.42); border-radius:7px; color:#a9c5d2; background:rgba(19,38,50,.78); font-size:10px; white-space:nowrap; }
.population-role-chip strong { color:#e4f3fa; font-size:11px; }
.population-demand { display:grid; gap:6px; padding:8px; border:1px solid rgba(81,137,159,.34); border-radius:8px; background:linear-gradient(110deg,rgba(21,44,57,.82),rgba(19,34,45,.88)); }
.population-demand-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px; }
.population-demand-heading strong { color:#dff3fb; font-size:11px; }
.population-demand-heading span,.population-demand > p { margin:0; color:#9eb5c1; font-size:9px; line-height:1.35; }
.population-demand-roles { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:5px; }
.population-demand-role { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; padding:4px 6px; border:1px solid rgba(88,131,153,.3); border-radius:6px; background:rgba(12,29,40,.52); color:#c5d9e2; font-size:10px; }
.population-demand-role > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.population-demand-role small { color:#809ba9; font-size:9px; }
.population-demand-input { display:flex; align-items:center; gap:4px; flex:none; color:#829dab; font-size:9px; }
.population-demand-input input { width:42px; min-width:0; padding:3px 4px; border:1px solid #3d6578; border-radius:4px; color:#e7f5fb; background:#102533; font:inherit; font-size:10px; text-align:center; }
.population-demand-input input:focus-visible { outline:2px solid #70c8ff; outline-offset:1px; }

.music-playlist { padding: 16px; border: 1px solid #3a526b; border-radius: 10px; background: #142332; display: grid; gap: 12px; }
.music-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.music-track-list { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow: auto; }
.music-track-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #304052; }
.music-track-list li > button:first-child { flex: 1; min-width: 0; border: 0; background: transparent; color: #d7e5f5; padding: 10px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.music-track-list li > button:first-child span { color: #859bb3; margin-right: 12px; }
.music-track-current { background: #203c58; border-radius: 5px; }
.music-track-list button:focus-visible { outline: 2px solid #77b5ed; }

.settings-page { background: radial-gradient(ellipse at top right, #233d58, #0b1420 65%); padding: 32px 20px; align-items: flex-start; overflow-y: auto; }
.settings-page .settings-shell { width: min(1100px, 100%); max-width: 1100px; padding: 28px; background: #101d2beF; border: 1px solid #344b65; border-radius: 18px; box-shadow: 0 24px 70px #0006; }
.settings-page .menu-title { font-size: 32px; margin: 14px 0 8px; }
.settings-navigation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.settings-navigation button { display: grid; gap: 5px; text-align: left; padding: 16px; border: 1px solid #354a60; border-radius: 10px; background: #182738; color: #e0ebf8; cursor: pointer; }
.settings-navigation button span { color: #95abc2; font-size: 12px; }
.settings-navigation button[aria-pressed='true'] { border-color: #6ca3d6; background: #24425f; box-shadow: inset 0 3px #82b9ed; }
.settings-category { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-category[hidden] { display: none; }
.settings-section-heading { grid-column: 1 / -1; margin-bottom: 4px; }
.settings-section-heading h2 { margin: 0 0 6px; font-size: 20px; color: #eef5ff; }
.settings-section-heading p { margin: 0; color: #9bb1c9; font-size: 13px; }
.settings-performance-preset { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid rgba(121,184,238,.3); border-radius: 10px; background: rgba(45,76,103,.38); }
.settings-performance-preset > div { display: grid; gap: 4px; }
.settings-performance-preset strong { color: #eaf4ff; font-size: 13px; }
.settings-performance-preset span { color: #a2b5cb; font-size: 12px; line-height: 1.45; }
.settings-page .settings-row { background: #172637; border: 1px solid #30465e; padding: 18px; border-radius: 10px; }
.settings-page .settings-label { font-size: 15px; color: #edf4fe; }
.settings-page .settings-hint { color: #a2b5cb; line-height: 1.5; }
.settings-page input[type='range'] { accent-color: #79b8ee; width: 100%; }
.settings-page select, .settings-page input[type='url'], .settings-page input[type='password'] { width: 100%; box-sizing: border-box; min-height: 36px; background: #0f1b29; color: #e2edf9; border: 1px solid #42607d; border-radius: 6px; padding: 7px 10px; }
.settings-page .music-playlist { align-self: start; }
.settings-page .hud-button { background: #21394f; border-color: #486882; padding: 7px 12px; }
@media (max-width: 700px) { .settings-page .settings-shell { padding: 16px; } .settings-navigation { grid-template-columns: 1fr; } .settings-category { grid-template-columns: 1fr; } .settings-performance-preset { align-items: flex-start; flex-direction: column; } }

.resource-bar-free-storage { position:absolute; top:calc(100% + 5px); right:0; z-index:1002; display:flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid rgba(255,173,111,.62); border-radius:6px; color:#fff3e8; background:linear-gradient(110deg,rgba(105,49,31,.97),rgba(76,38,30,.97)); box-shadow:0 5px 14px rgba(0,0,0,.32); font:inherit; font-size:10px; font-weight:700; cursor:pointer; white-space:nowrap; }
.resource-bar-free-storage:hover { border-color:#ffd29c; background:linear-gradient(110deg,#894829,#673624); }
.resource-storage-recovery-hint { margin: 6px 0 0; padding: 6px 8px; border-left: 2px solid #79c9eb; color: #c3dce9; background: rgba(61, 112, 141, 0.12); font-size: 10px; line-height: 1.35; }
.storage-recovery-note { flex-basis: 100%; padding: 4px 7px; border-left: 2px solid #79c9eb; color: #b8d2df; background: rgba(61, 112, 141, 0.1); font-size: 9px; line-height: 1.35; }

@media (max-width: 850px) {
  .hud-top-center {
    top: 198px;
    bottom: auto;
  }

  .window-frame[data-window-id='population'] {
    height: clamp(120px, calc(100vh - max(190px, 32vh) - 330px), 260px);
  }
}

@media (min-width: 700px) and (max-width: 850px) and (max-height: 600px) {
  .resource-bar-trigger .resource-chip:not(.resource-credit-chip) { display:none; }
  .resource-bar-trigger { flex-wrap:nowrap; }
  .hud-top-center { top:52px; right:12px; bottom:auto; left:290px; width:auto; }
  .hud-top-center .meters { height:auto; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .window-frame[data-window-id='feed'] { display:none!important; }
}

/* Final HUD override: keep the native detail scrollbar visible and usable. */
.command-bar .command-detail-scroll-area { display:flex; flex:1 1 0%; height:0; min-width:0; min-height:0; overflow:hidden; }
.command-bar .command-detail-body { display:block; flex:1 1 0%; width:100%; height:100%; min-width:0; min-height:0; max-height:none; box-sizing:border-box; padding:0 10px 8px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:auto; scrollbar-color:rgba(173,220,244,.9) rgba(9,25,37,.72); }
.command-bar .command-detail-body::-webkit-scrollbar { display:block; width:12px; }
.command-bar .command-detail-body::-webkit-scrollbar-track { background:rgba(9,25,37,.58); border:1px solid rgba(128,174,198,.34); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#c5edff,#62b8e9 55%,#397fb9); border:2px solid rgba(9,25,37,.58); border-radius:8px; }

/* Keep Details within the command bar height and make long building panels scroll. */
.command-bar > .command-detail { display:flex; flex:1.7 1 0%; flex-direction:column; height:100%; min-width:0; min-height:0; overflow:hidden; }
.command-bar > .command-detail > .command-detail-scroll-area { display:flex; flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; overflow:hidden; }
.command-bar .command-detail-body { display:block; flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; max-height:none; box-sizing:border-box; padding:0 12px 6px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:auto; scrollbar-color:#9bdcff rgba(9,25,37,.88); }
.command-bar .command-detail-body::-webkit-scrollbar { display:block; width:12px; }
.command-bar .command-detail-body::-webkit-scrollbar-track { background:rgba(8,21,31,.88); border:1px solid rgba(123,177,207,.55); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#dcf5ff,#74c8f3 55%,#4c97cf); border:2px solid rgba(8,21,31,.75); border-radius:8px; }

/* Keep facility worker assignments visible without requiring a horizontal swipe. */
.command-bar .selected-building-console .crew-assignment-panel { flex-wrap:wrap; overflow:visible; align-items:flex-start; }
.command-bar .selected-building-console .crew-assignment-controls { flex:1 1 100%; flex-wrap:wrap; width:100%; max-width:100%; overflow:visible; }
.command-bar .selected-building-console .crew-assignment-controls button { flex:0 1 auto; white-space:nowrap; }

.command-bar .depot-logistics-status { display:flex; flex:1 1 100%; flex-wrap:wrap; align-items:center; gap:2px 10px; min-width:0; padding:3px 6px; border:1px solid #3d6677; border-radius:5px; background:linear-gradient(100deg,rgba(20,49,63,.9),rgba(19,35,48,.88)); color:#9bb9c6; font-size:9px; line-height:1.3; }
.command-bar .depot-logistics-status strong { color:#d7e9ef; font-weight:650; }
.command-bar .depot-logistics-status.depot-logistics-exposed { border-color:#9a754d; background:linear-gradient(100deg,rgba(76,51,31,.74),rgba(30,39,47,.9)); }
.command-bar .depot-logistics-status.depot-logistics-exposed strong { color:#f1c786; }

/* Keep startup warnings out of the colony's center on desktop layouts. */
@media (min-width: 851px) {
  .hud-top-center .warning-stack {
    position: fixed;
    top: 220px;
    left: 12px;
    right: auto;
    bottom: auto;
    width: min(310px, calc(100vw - 24px));
  }
}

/* Keep the selected-building console compact; long facility controls scroll inside Details. */
.command-bar.command-bar-inspecting .selected-building-console { gap:2px 5px; line-height:1.15; }
.command-bar.command-bar-inspecting .selected-building-heading { flex:0 1 auto; min-width:min(170px,100%); gap:5px; }
.command-bar.command-bar-inspecting .command-detail-state { flex:0 1 auto; width:max-content; max-width:100%; padding:2px 6px; line-height:1.2; }
.command-bar.command-bar-inspecting .building-controls { gap:2px 4px; }
.command-bar.command-bar-inspecting .selected-building-machine-actions,
.command-bar.command-bar-inspecting .crew-assignment-panel { gap:2px 4px; padding:2px 4px; }
.command-bar.command-bar-inspecting .crew-assignment-controls button { min-height:20px; padding:2px 5px; }
.command-bar.command-bar-inspecting .selected-building-fittings { gap:2px 6px; padding:2px 4px; }
.command-bar.command-bar-inspecting .command-detail-text { padding:1px 0; line-height:1.2; }
.command-bar.command-bar-inspecting .building-spec-summary { gap:2px 7px; }
.command-bar .command-detail-scroll-area { flex:1 1 0%; min-height:0; }
.command-bar .command-detail-body { flex:1 1 0%; min-height:0; overflow-y:auto; scrollbar-gutter:stable; scrollbar-width:thin; }
.command-bar .command-detail-body::-webkit-scrollbar { width:9px; }

/* Keep selected-building details inside their pane and use one visible scrollbar. */
.command-bar .command-detail { display:flex; flex:1.7 1 0%; flex-direction:column; height:100%; min-height:0; overflow:hidden; }
.command-bar .command-detail-scroll-area { display:flex; flex:1 1 auto; height:auto; min-width:0; min-height:0; overflow:hidden; }
.command-bar .command-detail-body { flex:1 1 auto; width:100%; height:auto; min-width:0; min-height:0; max-height:none; box-sizing:border-box; padding:0 7px 6px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:auto; scrollbar-color:rgba(190,229,248,.9) rgba(9,25,37,.7); }
.command-bar .command-detail-body::-webkit-scrollbar { display:block; width:12px; }
.command-bar .command-detail-body::-webkit-scrollbar-track { background:rgba(9,25,37,.62); border:1px solid rgba(128,174,198,.42); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#c5edff,#62b8e9 55%,#397fb9); border:2px solid rgba(9,25,37,.62); border-radius:8px; }
.command-bar .command-detail-body:focus-visible { outline:2px solid #8ce5e2; outline-offset:-2px; }

/* Constrain Details to its column so long management panels scroll inside it. */
.command-bar .command-detail-scroll-area { flex:1 1 0%; height:0; min-height:0; }
.command-bar .command-detail-body { flex:1 1 0%; height:100%; min-height:0; overflow-x:hidden; overflow-y:auto; }
.command-bar.command-bar-inspecting .selected-building-console { gap:2px 4px; }
.command-bar.command-bar-inspecting .crew-assignment-panel { gap:2px 4px; padding:2px 4px; }
.command-bar.command-bar-inspecting .crew-assignment-summary { padding:3px 5px; }

/* Make the Details column the sole vertical scroll container, including on compact screens. */
.command-bar .command-detail { display:flex; flex:1.7 1 0%; flex-direction:column; min-width:0; min-height:0; height:100%; overflow:hidden; }
.command-bar .command-detail-scroll-area { display:flex; flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; overflow:hidden; }
.command-bar .command-detail-body { display:block; flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; max-height:none; box-sizing:border-box; padding:0 12px 6px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(190,229,248,.9) rgba(9,25,37,.7); }
.command-bar .command-detail-body::-webkit-scrollbar { display:block; width:10px; }
.command-bar .command-detail-body::-webkit-scrollbar-track { background:rgba(9,25,37,.62); border:1px solid rgba(128,174,198,.42); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#c5edff,#62b8e9 55%,#397fb9); border:2px solid rgba(9,25,37,.62); border-radius:8px; }
@media (max-width:850px) {
  .command-bar > .command-detail { overflow:hidden; }
}

/* Compact selected-building controls and make overflow obvious at a glance. */
.command-bar.command-bar-inspecting .selected-building-console { gap:1px 4px; font-size:9px; line-height:1.1; }
.command-bar.command-bar-inspecting .selected-building-heading { gap:4px; padding:1px 0; }
.command-bar.command-bar-inspecting .selected-building-heading .building-icon { width:26px!important; height:26px!important; flex-basis:26px; }
.command-bar.command-bar-inspecting .command-detail-state { padding:1px 5px; font-size:8px; line-height:1.15; }
.command-bar.command-bar-inspecting .building-controls { gap:2px 3px; }
.command-bar.command-bar-inspecting .building-controls label { padding:1px 3px; font-size:9px; line-height:1.1; }
.command-bar.command-bar-inspecting .building-controls button,
.command-bar.command-bar-inspecting .building-controls select { min-height:19px; height:19px; padding:1px 5px; font-size:9px; }
.command-bar.command-bar-inspecting .selected-building-machine-actions,
.command-bar.command-bar-inspecting .crew-assignment-panel,
.command-bar.command-bar-inspecting .selected-building-fittings { gap:1px 4px; padding:2px 3px; }
.command-bar.command-bar-inspecting .crew-assignment-summary { padding:2px 4px; font-size:8px; }
.command-bar.command-bar-inspecting .crew-assignment-controls button { min-height:18px; padding:1px 4px; font-size:9px; }
.command-bar.command-bar-inspecting .command-detail-text { font-size:9px; line-height:1.15; }
.command-bar .command-detail-body { scrollbar-width:auto; scrollbar-color:#9bdcff rgba(9,25,37,.88); }
.command-bar .command-detail-body::-webkit-scrollbar { width:13px; }
.command-bar .command-detail-body::-webkit-scrollbar-track { background:rgba(8,21,31,.9); border:1px solid rgba(123,177,207,.58); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#dcf5ff,#74c8f3 55%,#4c97cf); border:2px solid rgba(8,21,31,.75); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#f0fbff,#9addff 55%,#6db6e9); }

/* Keep building identity visible while the full management console scrolls within Details. */
.command-bar.command-bar-inspecting > .command-detail { display:flex; flex:1.7 1 0%; flex-direction:column; min-width:0; min-height:0; height:100%; overflow:hidden; }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area { display:flex; flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; overflow:hidden; }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body { display:block; flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; max-height:none; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:auto; scrollbar-color:#9bdcff rgba(9,25,37,.88); }
.command-bar.command-bar-inspecting .selected-building-console { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 5px; align-content:start; min-width:0; font-size:9px; line-height:1.2; }
.command-bar.command-bar-inspecting .selected-building-heading { grid-column:1; min-width:0; gap:4px; }
.command-bar.command-bar-inspecting .command-detail-state { grid-column:2; align-self:center; max-width:100%; padding:2px 6px; font-size:8px; line-height:1.2; }
.command-bar.command-bar-inspecting .selected-building-machine-actions,
.command-bar.command-bar-inspecting .selected-building-console > .building-controls,
.command-bar.command-bar-inspecting .crew-assignment-panel,
.command-bar.command-bar-inspecting .selected-building-fittings,
.command-bar.command-bar-inspecting .command-detail-text,
.command-bar.command-bar-inspecting .building-spec-summary { grid-column:1 / -1; min-width:0; }
.command-bar.command-bar-inspecting .selected-building-console .building-controls { gap:2px 4px; }
.command-bar.command-bar-inspecting .selected-building-console .building-controls button,
.command-bar.command-bar-inspecting .selected-building-console .building-controls select { min-height:19px; height:19px; padding:1px 5px; font-size:9px; }
.command-bar.command-bar-inspecting .selected-building-console .building-controls label { padding:1px 3px; font-size:9px; line-height:1.1; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-panel { flex-wrap:wrap; overflow:visible; gap:2px 4px; padding:2px 4px; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-controls { flex:1 1 100%; flex-wrap:wrap; width:100%; max-width:100%; overflow:visible; gap:2px 4px; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-controls button { flex:0 1 auto; min-height:18px; padding:1px 4px; font-size:9px; white-space:nowrap; }
.command-bar.command-bar-inspecting .selected-building-console .command-detail-text { padding:1px 0; font-size:9px; line-height:1.2; }
.command-bar.command-bar-inspecting .command-detail-body::-webkit-scrollbar { display:block; width:11px; }
.command-bar.command-bar-inspecting .command-detail-body::-webkit-scrollbar-track { background:rgba(8,21,31,.9); border:1px solid rgba(123,177,207,.58); border-radius:8px; }
.command-bar.command-bar-inspecting .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#dcf5ff,#74c8f3 55%,#4c97cf); border:2px solid rgba(8,21,31,.75); border-radius:8px; }

/* Let the Details body own overflow inside the fixed-height command bar. */
.command-bar .command-detail { flex:1.7 1 0%; display:flex; flex-direction:column; min-width:0; min-height:0; height:auto; overflow:hidden; }
.command-bar .command-detail-scroll-area { display:flex; flex:1 1 0%; width:100%; height:auto; min-width:0; min-height:0; overflow:hidden; }
.command-bar .command-detail-body { display:block; flex:1 1 0%; width:100%; height:auto; min-width:0; min-height:0; max-height:none; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }

/* Final layout contract for selected-building Details: the body owns overflow. */
.command-bar > .command-detail { flex:1.7 1 0%; height:100%; min-width:0; min-height:0; overflow:hidden; }
.command-bar > .command-detail > .command-detail-scroll-area { flex:1 1 0%; height:0; min-width:0; min-height:0; overflow:hidden; }
.command-bar > .command-detail > .command-detail-scroll-area > .command-detail-body { flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; max-height:none; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:auto; scrollbar-color:#9bdcff rgba(9,25,37,.88); }
.command-bar .command-detail-body::-webkit-scrollbar { display:block; width:12px; }
.command-bar .command-detail-body::-webkit-scrollbar-track { background:rgba(8,21,31,.88); border:1px solid rgba(123,177,207,.55); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#dcf5ff,#74c8f3 55%,#4c97cf); border:2px solid rgba(8,21,31,.75); border-radius:8px; }

/* Keep long building panels compact and scroll only their Details column. */
.command-bar > .command-detail { flex:2 1 0%; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.command-bar > .command-detail > .command-detail-scroll-area { display:flex; flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; overflow:hidden; }
.command-bar > .command-detail > .command-detail-scroll-area > .command-detail-body { flex:1 1 0%; width:100%; height:0; min-width:0; min-height:0; max-height:none; box-sizing:border-box; padding:0 9px 5px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#9bdcff rgba(9,25,37,.88); }
.command-bar .command-detail-body::-webkit-scrollbar { width:9px; }
.command-bar .command-detail-body::-webkit-scrollbar-track { background:rgba(8,21,31,.88); border:1px solid rgba(123,177,207,.55); border-radius:8px; }
.command-bar .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#dcf5ff,#74c8f3 55%,#4c97cf); border:2px solid rgba(8,21,31,.75); border-radius:8px; }
.command-bar.command-bar-inspecting .selected-building-console { gap:2px 4px; line-height:1.15; }
.command-bar.command-bar-inspecting .selected-building-heading,
.command-bar.command-bar-inspecting .command-detail-state { position:sticky; top:0; z-index:3; background:#172530; box-shadow:0 2px 4px rgba(0,0,0,.24); }
.command-bar.command-bar-inspecting .selected-building-heading { padding:2px 3px; border-radius:4px 0 0 4px; }
.command-bar.command-bar-inspecting .command-detail-state { padding:2px 5px; border-radius:0 4px 4px 0; }
.command-bar.command-bar-inspecting .selected-building-console .building-controls { gap:2px 3px; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-panel { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:2px 4px; padding:2px 4px; scrollbar-width:thin; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-controls { flex:0 0 auto; flex-wrap:nowrap; width:max-content; max-width:none; overflow:visible; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-controls button { min-height:18px; padding:1px 4px; font-size:9px; white-space:nowrap; }
.command-bar.command-bar-inspecting .selected-building-heading,
.command-bar.command-bar-inspecting .command-detail-state { position:static; background:transparent; box-shadow:none; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-panel { flex-wrap:wrap; overflow:visible; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-controls { flex:1 1 100%; flex-wrap:wrap; width:100%; max-width:100%; overflow:visible; }

/* Keep the selected building console compact, with a clear scroll track for long panels. */
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area { flex:1 1 0%; height:0; min-height:0; overflow:hidden; }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body { flex:1 1 0%; height:0; min-height:0; padding-right:8px; overflow-x:hidden; overflow-y:scroll; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#9bdcff rgba(8,21,31,.9); }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body::-webkit-scrollbar { display:block; width:10px; }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body::-webkit-scrollbar-track { background:rgba(8,21,31,.9); border:1px solid rgba(123,177,207,.58); border-radius:8px; }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#dcf5ff,#74c8f3 55%,#4c97cf); border:2px solid rgba(8,21,31,.75); border-radius:8px; }

/* Details should stay compact and only show a scrollbar when content overflows. */
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body { padding:0 6px 4px 0; overflow-y:auto; scrollbar-gutter:auto; scrollbar-width:thin; scrollbar-color:rgba(145,199,228,.72) rgba(8,21,31,.34); }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body::-webkit-scrollbar { width:6px; }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body::-webkit-scrollbar-track { background:rgba(8,21,31,.34); border:0; border-radius:6px; }
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body::-webkit-scrollbar-thumb { background:rgba(145,199,228,.72); border:1px solid rgba(8,21,31,.5); border-radius:6px; }
.command-bar.command-bar-inspecting .selected-building-console { gap:1px 4px; line-height:1.12; }
.command-bar.command-bar-inspecting .selected-building-console .crew-assignment-panel { gap:2px 4px; padding:2px 3px; }

/* Keep depot routing visible as a compact, full-width control in facility details. */
.command-bar .selected-building-console > .supply-depot-control {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:3px 6px;
  border:1px solid rgba(100,160,191,.34);
  border-radius:5px;
  background:linear-gradient(100deg,rgba(16,39,53,.84),rgba(24,49,64,.62));
  color:#b9d5e3;
  font-size:9px;
  line-height:1.2;
}
.command-bar .selected-building-console > .supply-depot-control > span { flex:0 0 auto; color:#8eafc0; font-weight:700; letter-spacing:.035em; }
.command-bar .selected-building-console > .supply-depot-control > select {
  flex:1 1 auto;
  width:0;
  min-width:0;
  height:21px;
  padding:1px 5px;
  border:1px solid rgba(104,170,205,.48);
  border-radius:4px;
  background:#142a38;
  color:#e3f3fa;
  font:inherit;
}
.command-bar .selected-building-console > .depot-transfer-control {
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
  min-width:0;
  padding:4px 6px;
  border:1px solid rgba(96,155,183,.3);
  border-radius:5px;
  background:linear-gradient(100deg,rgba(15,35,48,.8),rgba(23,46,61,.55));
  color:#b9d5e3;
  font-size:9px;
  line-height:1.2;
}
.command-bar .depot-transfer-control > strong { flex:0 0 auto; color:#8eafc0; letter-spacing:.035em; }
.command-bar .depot-transfer-control > select { flex:1 1 110px; min-width:70px; height:21px; padding:1px 4px; }
.command-bar .depot-transfer-control > input { width:42px; min-width:42px; height:21px; padding:1px 3px; }
.command-bar .depot-transfer-control > .depot-route-target { display:flex; align-items:center; gap:4px; white-space:nowrap; color:#91b2c1; }
.command-bar .depot-transfer-control > .depot-route-target input { width:48px; min-width:48px; height:21px; padding:1px 3px; }
.command-bar .depot-transfer-control > button { flex:0 0 auto; min-height:21px; padding:2px 6px; }
.command-bar .depot-transfer-message,
.command-bar .depot-transfer-queue,
.command-bar .depot-route-message,
.command-bar .depot-route-list { flex:1 1 100%; min-width:0; color:#92b5c6; }
.command-bar .depot-transfer-queue { display:flex; flex-direction:column; gap:2px; }
.command-bar .depot-transfer-queue-row { display:flex; align-items:center; gap:4px; min-width:0; }
.command-bar .depot-transfer-queue-row > span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.command-bar .depot-transfer-queue-row > button { flex:0 0 auto; min-height:19px; padding:1px 5px; }
.command-bar .depot-route-list { display:flex; flex-direction:column; gap:3px; }
.command-bar .depot-route-row { display:flex; align-items:center; gap:4px; min-width:0; }
.command-bar .depot-route-row > span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.command-bar .depot-route-row > button { flex:0 0 auto; min-height:19px; padding:1px 5px; }

/* Give building details a single bounded scroll viewport inside the fixed command bar. */
.command-bar > .command-detail {
  display:flex;
  flex:2 1 0%;
  flex-direction:column;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
}
.command-bar > .command-detail > .command-detail-scroll-area,
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area {
  display:block;
  flex:1 1 0%;
  width:100%;
  height:0;
  min-width:0;
  min-height:0;
  padding:0 5px 4px 0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(145,199,228,.72) rgba(8,21,31,.34);
}
.command-bar > .command-detail > .command-detail-scroll-area::-webkit-scrollbar,
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area::-webkit-scrollbar { width:7px; }
.command-bar > .command-detail > .command-detail-scroll-area::-webkit-scrollbar-track,
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area::-webkit-scrollbar-track { background:rgba(8,21,31,.34); border-radius:6px; }
.command-bar > .command-detail > .command-detail-scroll-area::-webkit-scrollbar-thumb,
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area::-webkit-scrollbar-thumb { background:rgba(145,199,228,.72); border:1px solid rgba(8,21,31,.5); border-radius:6px; }
.command-bar > .command-detail > .command-detail-scroll-area > .command-detail-body,
.command-bar.command-bar-inspecting > .command-detail > .command-detail-scroll-area > .command-detail-body {
  display:block;
  flex:none;
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  max-height:none;
  box-sizing:border-box;
  padding:0;
  overflow:visible;
}

/* Landing pad traffic filters live with the selected pad's bottom-bar controls. */
.command-bar .landing-traffic-filters { flex:1 0 100%; display:grid; gap:4px; width:100%; min-width:0; padding:5px 7px; border:1px solid rgba(117,174,198,.3); border-radius:6px; background:rgba(19,42,55,.72); }
.landing-traffic-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#c7dce5; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.landing-traffic-heading span { color:#86a6b6; font-size:8px; letter-spacing:0; text-transform:none; }
.command-bar .landing-traffic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; min-width:0; }
.command-bar .landing-traffic-grid .traffic-toggle { display:flex; align-items:center; justify-content:space-between; gap:5px; width:100%; min-width:0; min-height:25px; padding:3px 6px; font-size:9px; text-align:left; }
.command-bar .landing-traffic-grid .traffic-toggle-on { color:#a4f0d2; border-color:rgba(105,224,182,.55); background:rgba(40,115,89,.3); }
.command-bar .landing-traffic-grid .traffic-toggle-off { color:#f3b5a5; border-color:rgba(223,130,106,.5); background:rgba(109,52,43,.3); }
.landing-traffic-state { white-space:nowrap; color:inherit; font-size:8px; opacity:.9; }

/* Keep the bottom work queue readable in its narrow dock: show compact jobs vertically. */
.command-bar .command-queue-items {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 199, 228, 0.72) rgba(8, 21, 31, 0.34);
}

.command-bar .work-card {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 54px;
  padding: 3px 5px 7px;
}

.command-bar .work-card-select .building-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;
}

.command-bar .command-queue-items::-webkit-scrollbar { width: 6px; height: 6px; }
.command-bar .command-queue-items::-webkit-scrollbar-track { background: rgba(8, 21, 31, 0.34); border-radius: 6px; }
.command-bar .command-queue-items::-webkit-scrollbar-thumb { background: rgba(145, 199, 228, 0.72); border: 1px solid rgba(8, 21, 31, 0.5); border-radius: 6px; }

.research-complete-toast {
  position: fixed;
  z-index: 120;
  top: 60px;
  right: 12px;
  left: auto;
  bottom: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  width: min(420px, calc(100vw - 24px));
  padding: 12px 14px;
  transform: none;
  border: 1px solid rgba(118, 218, 199, 0.75);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(11, 36, 42, 0.97), rgba(15, 27, 40, 0.97));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42), 0 0 26px rgba(66, 200, 174, 0.16);
  color: #e5f6f1;
  pointer-events: auto;
  animation: research-comms-in 3.6s cubic-bezier(.18,.72,.22,1) both;
}

@keyframes research-comms-in {
  0% { opacity: 0; transform: translateX(16px) scale(.98); filter: blur(3px); }
  10% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  74% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(10px) scale(.99); }
}

.help-search-label {
  padding: 0 2px;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.help-search {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: rgba(5, 10, 16, 0.72);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.help-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.help-search-count {
  padding: 0 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.help-no-results {
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.research-complete-kicker {
  color: #77e0c4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.research-complete-message {
  grid-column: 1;
  font-size: 13px;
  line-height: 1.4;
}

.research-complete-toast button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  border: 0;
  background: transparent;
  color: #b8d5d2;
  font-size: 20px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .warning-item,
  .warning-item::after,
  .warning-signal,
  .research-complete-toast {
    animation: none;
  }
}

/* Apply mobile panel selection after the desktop console overrides. */
@media (max-width: 850px) {
  .research-complete-toast {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(min(260px, 32vh) + 12px);
    width: min(520px, calc(100vw - 28px));
    transform: translateX(-50%);
  }
  .hud-bottom-center {
    bottom: calc(max(190px, min(260px, 32vh)) + 16px);
    z-index: 61;
    max-width: calc(100vw - 16px);
  }
  .build-toast { max-width: 100%; }
  .command-bar,
  .command-bar.command-bar-inspecting {
    grid-template-columns: minmax(0, 1fr);
    height: min(260px, 32vh);
  }
  .command-bar .command-mobile-tabs { grid-column: 1; }
  .command-bar > .command-build,
  .command-bar > .command-nav,
  .command-bar > .command-detail,
  .command-bar > .command-queue {
    grid-column: 1;
    width: 100%;
    min-width: 0;
  }
  .command-bar.mobile-view-build > .command-detail,
  .command-bar.mobile-view-systems > .command-detail,
  .command-bar.mobile-view-work > .command-detail { display: none; }
  .hud-top-center .warning-stack {
    position: relative;
    top: auto;
    bottom: auto;
    gap: 4px;
    margin-top: 0;
    max-height: max(60px, min(160px, calc(68vh - 330px)));
    overflow-y: auto;
    pointer-events: auto;
    overscroll-behavior: contain;
  }
  .warning-item {
    padding: 6px 8px;
  }
  .hud-top-center:has(.warning-stack) {
    z-index: 95;
  }
}

/* Keep the build catalogue wide enough to browse while shifting system shortcuts right. */
@media (min-width: 1351px) {
  .command-bar > .command-build {
    flex: 0 0 650px;
    max-width: 650px;
  }
  .command-bar > .command-detail {
    flex: 1 1 0%;
    min-width: 0;
  }
}

@media (min-width: 1001px) and (max-width: 1350px) {
  .command-bar > .command-build {
    flex: 1.6 1 0%;
  }
  .command-bar > .command-detail {
    flex: 0.8 1 0%;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .help-layout {
    flex-direction: column;
    gap: 8px;
  }

  .help-nav {
    flex: 0 0 auto;
    width: 100%;
    max-height: 124px;
    min-width: 0;
    gap: 6px;
    overflow: hidden;
    padding: 0 0 6px;
    border-right: 0;
    border-bottom: 1px solid var(--panel-border);
  }

  .help-nav-tools {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 8px;
  }

  .help-nav-tools .help-search {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .help-nav-topics {
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .help-nav-section {
    display: contents;
  }

  .help-nav-group,
  .help-nav-btn {
    flex: 0 0 auto;
  }

  .help-nav-group {
    padding: 0 4px;
  }

  .help-nav-btn {
    min-height: 30px;
    max-width: 132px;
    white-space: nowrap;
  }

  .help-content {
    width: 100%;
    max-height: min(185px, calc(100vh - 620px));
    min-height: 110px;
    overflow-x: hidden;
  }

  .help-content p,
  .help-content li {
    overflow-wrap: anywhere;
  }

  .help-chip {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .top-bar-speed .hud-button {
    padding-inline: 2px;
    font-size: 10px;
  }

  .top-bar-speed .topbar-speed-label {
    gap: 0;
    white-space: nowrap;
  }

  .top-bar-speed .topbar-speed-label img {
    display: none;
  }
}

@media (max-width: 360px) and (max-height: 700px) {
  .hud-top-center .meters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .hud-top-center .meter-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .hud-top-center .meter-label,
  .hud-top-center .meter-text {
    font-size: 8px;
    letter-spacing: 0;
  }

  .hud-top-center .meter-readout {
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hud-top-center .meter-flow {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1px 2px;
    font-size: 7px;
  }

  .hud-top-center .warning-stack {
    max-height: min(88px, max(28px, calc(100vh - 540px)));
  }

  .hud-top-center .warning-item {
    flex: 0 0 auto;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 4px;
    padding: 3px 5px;
  }

  .hud-top-center .warning-signal {
    width: 15px;
    height: 15px;
    font-size: 10px;
  }

  .hud-top-center .warning-title {
    font-size: 9px;
  }

  .hud-top-center .warning-detail {
    display: none;
  }
}