:root {
  --bg: #020308;
  --panel: #05070d;
  --panel-blue: #233f6b;
  --panel-deep: #07111e;
  --line: #f1f5ff;
  --line-soft: #586a8a;
  --text: #ffffff;
  --muted: #c8d2e4;
  --yellow: #ffd600;
  --blue: #153c9b;
  --blue-bright: #6cb2ff;
  --red: #ed1c24;
  --red-soft: #d56a7d;
  --green: #21a967;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Arial Black", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  background: #03050a;
}

th,
td {
  border: 1px solid var(--line);
  padding: 0.34rem 0.5rem;
  text-align: left;
  vertical-align: middle;
}

th {
  background: #07152a;
  color: var(--blue-bright);
  font-size: 0.79rem;
  text-transform: uppercase;
}

td {
  color: var(--text);
  font-family: Arial, sans-serif;
  font-weight: 700;
}

tbody tr:nth-child(odd) {
  background: #120f08;
}

tbody tr:nth-child(even) {
  background: #10091a;
}

input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #020308;
  color: var(--text);
  padding: 0.43rem;
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 1.5rem;
}

.login-panel {
  width: min(40rem, 100%);
  border: 1px solid var(--line);
  border-left: 8px solid var(--red);
  background: #020308;
  padding: 1.5rem;
}

.command-shell {
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem 1.5rem;
}

.top-board {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--red);
  padding: 0.65rem 0.75rem 0.85rem;
}

.brand-lockup {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.brand-lockup strong {
  display: block;
  font-size: 1.25rem;
}

.core-mark {
  display: flex;
  flex-direction: column;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: var(--blue);
  color: var(--text);
  font-weight: 900;
  gap: 0;
}

.core-mark span {
  display: block;
  font-size: 0.72rem;
  line-height: 0.75;
}

.core-mark small {
  display: block;
  color: var(--yellow);
  font-size: 1.05rem;
  line-height: 0.9;
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.nav-button,
.filter,
.action {
  display: inline-flex;
  min-height: 2.1rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #020308;
  color: var(--text);
  padding: 0.4rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.nav-button.active,
.filter.active,
.action.primary {
  border-color: var(--red);
  background: var(--red);
  color: var(--text);
}

.sound-toggle.muted {
  border-color: var(--red);
  color: var(--red-soft);
}

.sound-volume {
  display: inline-grid;
  width: 5.5rem;
  gap: 0.08rem;
  align-items: center;
}

.sound-volume span {
  color: var(--blue-bright);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.sound-volume input {
  height: 1.1rem;
  padding: 0;
  accent-color: var(--yellow);
}

.action.compact {
  min-height: 1.85rem;
  padding: 0.28rem 0.45rem;
  font-size: 0.68rem;
}

.action img {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}

.filter.lawful {
  background: var(--blue);
}

.filter.hostile {
  background: #25060a;
  color: var(--red-soft);
}

.command-header {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-left: 8px solid var(--red);
  margin: 0.75rem 0;
  padding: 0.85rem 0.95rem;
  background: #020308;
}

.sector-heading {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
}

.star-visual {
  --star-state-color: rgb(255 255 255 / 28%);
  --star-state-filter: none;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 50%;
  isolation: isolate;
}

.star-visual.current {
  width: 5.2rem;
  height: 5.2rem;
}

.star-visual.route-star {
  width: 3.1rem;
  height: 3.1rem;
}

.star-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--star-state-filter) drop-shadow(0 0 0.6rem var(--star-state-color));
}

.star-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.star-overlay.flare {
  filter: drop-shadow(0 0 0.35rem rgb(255 70 35 / 42%));
}

.star-overlay.asteroids {
  opacity: 0.92;
  filter: drop-shadow(0 0 0.16rem rgb(255 220 130 / 22%));
}

.star-overlay.planets {
  opacity: 0.9;
  filter: drop-shadow(0 0 0.18rem rgb(120 190 255 / 24%));
}

.star-overlay.port {
  filter: drop-shadow(0 0 0.24rem rgb(110 190 255 / 35%));
}

.star-visual.size-dwarf .star-image {
  transform: scale(0.76);
}

.star-visual.size-giant .star-image {
  transform: scale(1.12);
}

.star-visual::after {
  content: "";
  position: absolute;
  inset: 9%;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.star-visual.state-flare {
  --star-state-color: rgb(255 68 68 / 58%);
  --star-state-filter: saturate(1.22) contrast(1.12);
}

.star-visual.state-flare::after {
  opacity: 1;
  border: 2px solid rgb(255 56 56 / 52%);
  box-shadow:
    0 -0.25rem 0.7rem rgb(255 110 28 / 48%),
    0.28rem 0.18rem 0.85rem rgb(255 28 28 / 36%);
  clip-path: polygon(50% 0, 61% 28%, 100% 18%, 70% 50%, 100% 83%, 58% 72%, 50% 100%, 42% 72%, 0 83%, 30% 50%, 0 18%, 39% 28%);
}

.star-visual.state-volatile {
  --star-state-color: rgb(255 210 60 / 50%);
  --star-state-filter: saturate(1.35) contrast(1.18);
}

.star-visual.state-volatile::after {
  opacity: 1;
  border: 2px dashed rgb(255 220 90 / 50%);
  box-shadow: 0 0 0.9rem rgb(255 130 24 / 28%);
}

.star-visual.state-irradiated {
  --star-state-color: rgb(128 255 220 / 45%);
  --star-state-filter: saturate(1.15) hue-rotate(18deg) contrast(1.08);
}

.star-visual.state-irradiated::after {
  opacity: 1;
  border: 1px solid rgb(128 255 220 / 55%);
  background: repeating-radial-gradient(circle, transparent 0 42%, rgb(128 255 220 / 18%) 43% 45%, transparent 46% 100%);
}

.star-visual.state-aging {
  --star-state-color: rgb(215 190 150 / 36%);
  --star-state-filter: saturate(0.72) brightness(0.86) sepia(0.18);
}

.star-visual.state-aging::after {
  opacity: 1;
  border: 1px solid rgb(215 190 150 / 42%);
  box-shadow: inset 0 0 1rem rgb(0 0 0 / 35%);
}

.sector-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
}

.sector-tag,
.route-trait {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: #07111e;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 0.22rem 0.35rem;
  text-transform: uppercase;
}

.sector-tag.lawful,
.route-trait.lawful {
  border-color: var(--blue-bright);
  color: var(--blue-bright);
}

.sector-tag.hostile,
.route-trait.hostile {
  border-color: var(--red-soft);
  color: var(--red-soft);
}

.sector-tag.industrial,
.route-trait.industrial {
  border-color: #ff9e4a;
  color: #ffcf7a;
}

.sector-tag.relay,
.route-trait.relay {
  border-color: #a8d6ff;
  color: #cdeaff;
}

.command-header h1,
.login-panel h1 {
  margin: 0.15rem 0 0.35rem;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.95;
  text-shadow: 2px 2px 0 #123562;
}

.eyebrow {
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-weight: 500;
}

.focus {
  color: var(--yellow);
  font-weight: 900;
}

.filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  border: 1px solid var(--line);
  margin-bottom: 0.75rem;
  padding: 0.5rem;
}

.filter-strip strong {
  padding: 0.35rem 0.1rem;
  color: var(--text);
  font-size: 0.78rem;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.panel,
.stat-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.panel {
  padding: 0.6rem;
}

.panel.wide {
  grid-column: span 2;
}

.system-panel {
  grid-column: span 2;
}

.actions-panel {
  grid-column: span 3;
}

.panel h2 {
  margin: -0.6rem -0.6rem 0.65rem;
  background: var(--panel-blue);
  color: var(--text);
  padding: 0.32rem 0.5rem;
  font-size: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.stat-card {
  border-top: 2px solid var(--blue);
  padding: 0.75rem;
}

.stat-card span {
  display: block;
  color: var(--blue-bright);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.stat-card .stat-label {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.stat-icon {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.action-stat-card,
.finance-card,
.active-timer-card {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  border-top-color: var(--yellow);
}

.cargo-stat-card {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  border-top-color: var(--blue-bright);
}

.active-timer-card {
  border-top-color: var(--yellow);
}

.action-stat-icon {
  display: block;
  width: 4.75rem;
  height: 4.75rem;
  object-fit: contain;
}

.action-stat-body {
  min-width: 0;
}

.stat-card strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--text);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 0.95;
  text-shadow: 2px 2px 0 #123562;
}

.finance-card {
  position: relative;
}

.mini-action {
  min-height: 1.55rem;
  border: 1px solid var(--line);
  background: #020308;
  color: var(--text);
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.12rem 0.35rem;
  text-transform: uppercase;
}

.mini-action:disabled {
  border-color: var(--red);
  color: var(--red-soft);
  cursor: not-allowed;
  opacity: 0.65;
}

.currency-popover {
  position: absolute;
  z-index: 8;
  top: calc(100% + 0.35rem);
  left: 0;
  width: min(19rem, 90vw);
  border: 1px solid var(--yellow);
  background: #020308;
  box-shadow: 0 0.9rem 2rem rgb(0 0 0 / 58%);
  padding: 0.5rem;
}

.popover-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.popover-head strong {
  margin: 0;
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.currency-mini-list {
  display: grid;
  gap: 0.25rem;
}

.currency-mini-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: #07111e;
  padding: 0.25rem;
}

.currency-mini-item img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.currency-mini-item span,
.currency-mini-item strong {
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
}

.currency-mini-item strong {
  color: var(--yellow);
}

.finance-meter,
.active-timer-meter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4.5rem, 1fr) auto;
  min-height: 2.35rem;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--yellow);
  background: #020308;
  margin-top: 0.3rem;
}

.finance-meter strong,
.active-timer-meter strong,
.active-timer-meter em {
  position: relative;
  z-index: 1;
}

.finance-meter strong,
.active-timer-meter strong {
  display: block;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0 0.45rem;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-meter {
  border-color: var(--blue-bright);
}

.finance-meter::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, rgb(54 137 255 / 28%), rgb(255 214 0 / 10%));
  content: "";
}

.finance-meter .mini-action {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-width: 4.5rem;
  border-width: 0 0 0 1px;
  border-color: var(--blue-bright);
}

.active-timer-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--timer-progress, 0%);
  background: linear-gradient(90deg, rgb(232 201 107 / 56%), rgb(33 169 103 / 36%));
}

.active-timer-meter.idle {
  border-color: var(--line);
}

.active-timer-meter.idle i {
  width: 100%;
  background: rgb(54 137 255 / 12%);
}

.active-timer-meter em {
  display: grid;
  min-width: 4.5rem;
  align-self: stretch;
  place-items: center;
  border-left: 1px solid var(--yellow);
  background: rgb(2 3 8 / 38%);
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.active-timer-card small {
  overflow-wrap: anywhere;
}

.action-effort-meter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4.5rem, 1fr) auto;
  min-height: 2.35rem;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--yellow);
  background: #020308;
  margin-top: 0.3rem;
}

.cargo-hold-meter {
  position: relative;
  display: grid;
  min-height: 2.35rem;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--blue-bright);
  background: #020308;
  margin-top: 0.3rem;
}

.cargo-hold-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgb(54 137 255 / 60%), rgb(255 214 0 / 32%));
}

.action-effort-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgb(255 214 0 / 65%), rgb(33 169 103 / 55%));
}

.action-effort-meter strong,
.action-effort-meter em,
.cargo-hold-meter strong {
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 0 #020308;
}

.action-effort-meter strong,
.cargo-hold-meter strong {
  display: block;
  margin: 0;
  padding: 0 0.45rem;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.action-effort-meter em {
  display: grid;
  min-width: 4.5rem;
  align-self: stretch;
  place-items: center;
  border-left: 1px solid var(--yellow);
  background: rgb(2 3 8 / 38%);
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.action-effort-meter em span {
  display: block;
  color: var(--blue-bright);
  font-size: 0.58rem;
}

.stat-card small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.readout {
  display: grid;
  grid-template-columns: minmax(6.5rem, 42%) 1fr;
  gap: 0.35rem 0.55rem;
  margin: 0;
}

.readout dt {
  color: var(--blue-bright);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.readout dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: Arial, sans-serif;
  font-weight: 800;
}

.readout-link {
  border: 0;
  background: transparent;
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-transform: uppercase;
}

.system-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 0.9fr) minmax(16rem, 1.15fr);
  gap: 0.65rem;
  align-items: start;
}

.action-row,
.market-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.market-actions {
  margin-top: 0;
}

.market-actions form {
  display: grid;
  grid-template-columns: 4rem auto;
  gap: 0.25rem;
}

.action {
  cursor: pointer;
}

.action.ghost {
  background: #020308;
}

.route-list {
  display: grid;
  gap: 0.4rem;
}

.route-list.compact {
  gap: 0.35rem;
}

.mining-options {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.mining-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.55rem;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--blue);
  background: #05101e;
  padding: 0.45rem;
}

.mining-card.deep {
  border-left-color: var(--red);
}

.mining-card strong {
  color: var(--text);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.mining-card small {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.mining-card .action {
  grid-row: span 2;
}

.action-dashboard {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.actions-panel .action-dashboard {
  grid-template-columns: minmax(24rem, 1fr) minmax(32rem, 1.35fr);
  align-items: start;
  margin-top: 0;
}

.action-console {
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--line-soft);
  background: #03050a;
  padding: 0.5rem;
}

.action-console h3 {
  margin: 0;
  color: var(--blue-bright);
  font-size: 1rem;
  text-transform: uppercase;
}

.action-banner {
  display: grid;
  grid-template-columns: 192px 1fr;
  gap: 0.75rem;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  min-height: 8rem;
  padding-bottom: 0.45rem;
}

.action-banner img {
  display: block;
  width: 192px;
  height: 192px;
  object-fit: contain;
}

.action-console h4 {
  margin: 0.3rem 0 0;
  color: var(--blue-bright);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.scanner-console {
  border-left: 4px solid var(--yellow);
}

.action-job {
  display: grid;
  grid-template-columns: 2.4rem minmax(8rem, 1fr) auto 5.1rem;
  gap: 0.45rem;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: #05101e;
  padding: 0.45rem;
}

.actions-panel .action-job {
  grid-template-columns: 3rem minmax(10rem, 1fr) minmax(13.4rem, auto);
}

.scanner-console .action-job {
  grid-template-columns: minmax(10rem, 1fr) minmax(13.4rem, auto);
}

.action-art {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.action-job.unavailable {
  opacity: 0.68;
}

.action-job strong {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.action-job small {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
}

.action-costs,
.action-controls {
  display: flex;
  gap: 0.22rem;
}

.action-controls {
  align-items: center;
  justify-content: flex-end;
  min-width: 13.4rem;
}

.action-help {
  width: 1rem;
  height: 1rem;
  font-size: 0.64rem;
}

.action-command {
  position: relative;
  display: inline-grid;
  width: 2.45rem;
  height: 2.45rem;
  min-height: 2.45rem;
  place-items: center;
  overflow: hidden;
  border: 2px solid #1dbf73;
  background: #020308;
  color: #b9ffd8;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.action-command img {
  position: relative;
  z-index: 1;
  width: 1.8rem;
  height: 1.8rem;
  object-fit: contain;
  filter: drop-shadow(0 0 0.28rem rgb(74 255 168 / 26%));
}

.action-select {
  width: 100%;
  margin-top: 0.2rem;
  border: 1px solid var(--line);
  background: #020308;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem;
}

.merge-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 4.8rem 3.2rem;
  gap: 0.25rem;
  margin-top: 0.2rem;
}

.merge-grid .action-select {
  margin-top: 0;
}

.merge-qty {
  text-align: right;
}

.merge-all {
  min-height: 0;
  margin-top: 0;
  padding: 0.25rem 0.35rem;
}

.merge-form {
  display: grid;
  gap: 0.75rem;
}

.merge-form .action.primary {
  justify-self: end;
}

.action-command:disabled {
  border-color: var(--red);
  color: var(--red-soft);
  cursor: not-allowed;
  opacity: 0.72;
}

.action-command.primary:disabled {
  border-color: var(--red);
  color: var(--red-soft);
}

.action-command:disabled img {
  filter: grayscale(0.75) opacity(0.58) drop-shadow(0 0 0.2rem rgb(255 45 45 / 24%));
}

.action-command.primary {
  border-color: #1dbf73;
  color: #b9ffd8;
}

.action-command.active {
  border-color: var(--yellow);
  color: var(--yellow);
}

.action-command.active::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--timer-progress, 0%);
  background: linear-gradient(90deg, rgb(232 201 107 / 34%), rgb(232 201 107 / 10%));
  content: "";
}

.action-command.active img {
  width: 1.8rem;
  height: 1.8rem;
  filter: drop-shadow(0 0 0.28rem rgb(255 215 70 / 32%));
}

.action-command .countdown {
  display: none;
}

.action-help-modal {
  width: min(30rem, 100%);
}

.asteroid-scan-modal {
  width: min(44rem, 100%);
}

.route {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.55rem;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--blue);
  background: #05101e;
  padding: 0.5rem;
}

.route-sector-art {
  position: relative;
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
}

.star-g {
  color: var(--yellow);
}

.star-k {
  color: #ff9e4a;
}

.star-f,
.star-a {
  color: var(--blue-bright);
}

.star-m {
  color: var(--red-soft);
}

.route strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}

.route span {
  display: block;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
}

.route-trait {
  margin-top: 0.28rem;
  font-size: 0.62rem;
  padding: 0.18rem 0.3rem;
}

.timer,
.event-card {
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--red-soft);
  background: linear-gradient(90deg, #07111e 0%, #070b14 72%, #23070d 100%);
  padding: 0.75rem;
}

.event-card {
  border-left: 2px solid var(--yellow);
}

.event-card h3 {
  margin: 0;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.card-kicker {
  margin: 0;
  color: var(--yellow);
  font-size: 0.74rem;
  font-weight: 900;
}

.research-contribution {
  display: grid;
  gap: 0.45rem;
  align-items: end;
  margin-top: 0.65rem;
}

.research-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.research-cost,
.trace-assist span {
  display: inline-flex;
  min-width: 4.6rem;
  height: 2.45rem;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--line-soft);
  background: #020308;
  color: var(--text);
  padding: 0.12rem 0.35rem;
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
}

.research-cost img,
.trace-assist img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.trace-assist {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.trace-assist input {
  width: 1.15rem;
  height: 1.15rem;
}

.research-contribution small {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-weight: 800;
}

.countdown {
  color: var(--yellow);
  font-size: 1.45rem;
  font-weight: 900;
}

.log-list {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.65rem;
}

.log-item {
  display: grid;
  gap: 0.1rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.35rem;
}

.log-item small {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.alert {
  border: 1px solid var(--line);
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.75rem;
  font-weight: 900;
}

.alert.good {
  border-color: var(--green);
  color: var(--green);
}

.alert.danger {
  border-color: var(--red);
  color: var(--red-soft);
}

.alignment-meter {
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
}

.alignment-end {
  font-size: 0.68rem;
  font-weight: 900;
}

.alignment-end.lawful {
  color: var(--blue-bright);
}

.alignment-end.hostile {
  color: var(--red-soft);
}

.alignment-track {
  position: relative;
  height: 0.8rem;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--blue) 0%, #05070d 48%, #05070d 52%, var(--red) 100%);
  margin-bottom: 1rem;
}

.alignment-zero {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  left: 50%;
  width: 2px;
  background: var(--yellow);
  transform: translateX(-50%);
}

.alignment-marker {
  position: absolute;
  top: 50%;
  width: 0.72rem;
  height: 1.25rem;
  border: 2px solid var(--line);
  background: var(--yellow);
  transform: translate(-50%, -50%);
}

.alignment-value {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 50%;
  color: var(--yellow);
  font-size: 0.68rem;
  font-weight: 900;
  transform: translateX(-50%);
}

.progress-shell {
  height: 0.8rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #020308;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
}

.resource-icon {
  display: block;
  object-fit: contain;
}

.resource-icon.small {
  width: 32px;
  height: 32px;
}

.resource-icon.unknown {
  filter: grayscale(0.9) brightness(0.72);
  opacity: 0.72;
}

.resource-icon.large {
  width: 4.5rem;
  height: 4.5rem;
}

.icon-heading,
.cargo-icon-cell {
  width: 34px;
  min-width: 34px;
  padding: 0;
  text-align: center;
}

.cargo-card-list {
  display: grid;
  gap: 0.45rem;
}

.cargo-card {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--blue-bright);
  background: #05101e;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 0.45rem 0.5rem;
  text-align: left;
}

.cargo-card:hover,
.cargo-card:focus {
  border-color: var(--yellow);
  border-left-color: var(--yellow);
  outline: none;
}

.cargo-card-main,
.cargo-card-meta {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.cargo-card-main strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.cargo-card-main small,
.cargo-card-meta em {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.cargo-card-meta {
  justify-items: end;
  text-align: right;
}

.cargo-card-meta strong {
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

.cargo-icon-cell .resource-icon {
  margin: 0 auto;
}

.cargo-row {
  cursor: pointer;
}

.cargo-row:hover,
.cargo-row:focus {
  outline: 1px solid var(--yellow);
  outline-offset: -2px;
}

.cargo-item-name {
  overflow-wrap: anywhere;
}

.cargo-modal-backdrop {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(2 3 8 / 78%);
  padding: 1rem;
}

.cargo-modal-backdrop[hidden] {
  display: none;
}

.cargo-modal {
  position: relative;
  width: min(42rem, 100%);
  max-height: min(44rem, calc(100vh - 2rem));
  overflow: auto;
  border: 1px solid var(--line);
  border-left: 8px solid var(--yellow);
  background: #03050a;
  box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 62%);
  padding: 0.9rem;
}

.modal-close,
.help-toggle {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--line);
  background: #020308;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 900;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.modal-close.text-close {
  width: auto;
  min-width: 6.5rem;
  padding: 0 0.65rem;
  text-transform: uppercase;
}

.cargo-modal-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  padding-right: 2.3rem;
}

.cargo-modal-head h2 {
  margin: 0.15rem 0;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.cargo-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0.9rem 0;
  border: 1px solid var(--line-soft);
}

.cargo-detail-grid dt,
.cargo-detail-grid dd {
  margin: 0;
  border-right: 1px solid var(--line-soft);
  padding: 0.45rem 0.55rem;
}

.cargo-detail-grid dt {
  background: #07152a;
  color: var(--blue-bright);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.cargo-detail-grid dd {
  grid-row: 2;
  font-family: Arial, sans-serif;
  font-weight: 800;
}

.cargo-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.7rem;
}

.asteroid-report-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.asteroid-report-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: #04101d;
  padding: 0.55rem 0.65rem;
}

.asteroid-report-row > span {
  color: var(--blue-bright);
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.asteroid-report-row > strong {
  min-width: 0;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
}

.asteroid-size-readout {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.asteroid-size-bar {
  position: relative;
  overflow: hidden;
  min-height: 1.55rem;
  border: 1px solid var(--line);
  background: #01050d;
}

.asteroid-size-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--green), var(--yellow));
}

.asteroid-size-bar strong {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
}

.asteroid-size-readout small {
  color: var(--muted);
  font-weight: 800;
}

.cargo-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.cargo-stat {
  position: relative;
  display: grid;
  min-height: 5.2rem;
  align-content: start;
  gap: 0.15rem;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #05101e;
  padding: 0.45rem;
}

.cargo-stat span,
.cargo-stat small {
  color: var(--blue-bright);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cargo-stat strong {
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.cargo-stat i {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.25rem;
  background: var(--yellow);
}

.cargo-stat.unknown {
  opacity: 0.72;
}

.cargo-stat.unknown i {
  width: 0 !important;
}

.cargo-stat-help {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.7rem;
  border: 1px solid var(--line-soft);
  background: #07111e;
  padding: 0.65rem;
}

.cargo-stat-help[hidden] {
  display: none;
}

.cargo-stat-help p {
  margin: 0;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.port-market-list {
  display: grid;
  gap: 0.45rem;
}

.port-head {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--blue);
  background: #020308;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.facility-card {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr) auto;
  align-items: center;
}

.port-facility-frame {
  display: grid;
  width: 6.75rem;
  height: 6.75rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #05101e;
}

.port-facility-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal-facility-icon {
  width: 7.5rem;
  height: 7.5rem;
  flex: 0 0 auto;
}

.port-head h3 {
  margin: 0.1rem 0 0;
  color: var(--text);
  font-size: 1rem;
  text-transform: uppercase;
}

.port-title {
  min-width: 0;
}

.port-title small {
  display: inline-flex;
  margin-top: 0.25rem;
  border: 1px solid var(--yellow);
  background: #141005;
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.18rem 0.32rem;
  text-transform: uppercase;
}

.port-class {
  border: 1px solid var(--yellow);
  background: #141005;
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.28rem 0.4rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.port-summary {
  display: grid;
  gap: 0.25rem;
  justify-items: end;
}

.dock-button {
  width: 100%;
}

.port-bank {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
}

.port-bank img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}

.port-market-card {
  display: grid;
  gap: 0.4rem;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--green);
  background: #05101e;
  padding: 0.5rem;
}

.port-good-line,
.port-price-line {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}

.port-good-title {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.1rem;
}

.port-good-title strong {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.port-good-title span,
.port-price-line span {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
}

.port-price-line span:first-child {
  color: var(--red-soft);
}

.port-price-line span:last-child {
  color: var(--green);
}

.market-trade {
  display: grid;
  grid-template-columns: minmax(6.2rem, 1fr) minmax(4.8rem, 0.62fr) minmax(6.2rem, 1fr);
  gap: 0.3rem;
  align-items: center;
}

.port-dock-modal {
  width: min(66rem, calc(100vw - 2rem));
}

.port-dock-bank {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid var(--line-soft);
  background: #07111e;
  margin: 0.8rem 0;
  padding: 0.45rem 0.55rem;
}

.port-dock-bank span {
  color: var(--blue-bright);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.port-dock-bank strong {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
}

.port-dock-bank img {
  width: 1.25rem;
  height: 1.25rem;
}

.port-dock-modal .cargo-modal-head {
  grid-template-columns: auto minmax(0, 1fr) minmax(15rem, 0.72fr);
  padding-right: 6.2rem;
  align-items: stretch;
}

.port-cargo-status {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  align-self: end;
  justify-self: start;
  width: min(100%, 18rem);
  border: 1px solid var(--line-soft);
  background: #05101e;
  padding: 0.45rem;
}

.port-cargo-status > img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
}

.port-cargo-status span,
.port-cargo-status small {
  display: block;
  color: var(--blue-bright);
  font-family: Arial, sans-serif;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.port-cargo-status small {
  margin-top: 0.22rem;
  color: var(--muted);
}

.cargo-hold-meter.compact {
  min-height: 1.45rem;
  margin-top: 0.18rem;
}

.cargo-hold-meter.compact strong {
  font-size: 0.78rem;
  text-align: center;
}

.dock-market-list {
  grid-template-columns: 1fr;
}

.dock-market-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.92fr);
  gap: 0.7rem;
  align-content: start;
  align-items: stretch;
  border-left-width: 4px;
  padding: 0.5rem;
}

.market-item-main {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.42rem;
  min-width: 0;
}

.dock-market-card .port-good-line {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: start;
}

.market-row-icon.resource-icon.small {
  width: 4.6rem;
  height: 4.6rem;
  align-self: start;
  justify-self: center;
  object-fit: contain;
}

.dock-market-card .port-good-title {
  align-self: start;
  gap: 0.16rem;
  padding-top: 0.1rem;
}

.dock-market-card .port-good-title strong {
  font-size: 1.02rem;
  line-height: 1;
}

.dock-market-card .port-good-title span,
.dock-market-card .port-good-title small {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.12;
}

.dock-market-card .port-good-line .inline-help {
  margin-top: 0.15rem;
}

.port-dock-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: 0.75rem;
  align-items: start;
}

.dock-column {
  display: grid;
  gap: 0.5rem;
}

.dock-column h3 {
  margin: 0;
  color: var(--blue-bright);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.market-fill {
  position: relative;
  display: grid;
  min-height: 1.35rem;
  margin-left: 5.55rem;
  overflow: hidden;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: #020308;
}

.market-fill i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgb(66 182 255 / 22%);
}

.market-fill strong {
  position: relative;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

.dock-trade {
  grid-template-columns: 1fr;
  align-content: center;
  gap: 0.28rem;
}

.quantity-command-group {
  display: grid;
  align-content: start;
  gap: 0.32rem;
  align-items: center;
}

.quantity-command-group > span {
  display: block;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.dock-trade .quantity-command-group {
  grid-template-columns: minmax(5.7rem, 0.55fr) minmax(7.2rem, 1fr);
  gap: 0.38rem;
}

.dock-trade .quantity-command-group > span {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon price";
  column-gap: 0.32rem;
  align-items: center;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.dock-trade .quantity-command-group img {
  grid-area: icon;
  width: 2.15rem;
  height: 2.15rem;
}

.trade-price-label b {
  grid-area: label;
  color: var(--text);
}

.trade-price-label em {
  grid-area: price;
  color: var(--yellow);
  font-style: normal;
}

.quantity-command-group div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.18rem;
}

.quantity-command-group .action {
  min-height: 1.65rem;
  padding: 0.12rem 0.22rem;
}

.market-quantity {
  display: grid;
  gap: 0.12rem;
}

.market-quantity span {
  color: var(--blue-bright);
  font-family: Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.market-trade input {
  min-height: 1.65rem;
  text-align: center;
}

.action.buy {
  border-color: var(--red);
  background: #24070b;
  color: var(--red-soft);
}

.action.sell {
  border-color: var(--green);
  background: #06180f;
  color: var(--green);
}

.market-trade .action {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

.market-trade .action img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.market-trade .action span {
  color: inherit;
  font-size: 0.68rem;
}

.mission-list {
  display: grid;
  gap: 0.5rem;
}

.mission-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.64fr);
  grid-template-areas:
    "head reward"
    "body status"
    "body actions";
  gap: 0.34rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--yellow);
  background: #100d05;
  padding: 0.5rem;
}

.mission-card.empty {
  border-left-color: var(--muted);
  background: #06080d;
}

.mission-head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: start;
}

.mission-head strong,
.mission-head span,
.mission-card small {
  display: block;
}

.mission-head strong {
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.mission-head span,
.mission-card small,
.mission-card p {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.mission-card p {
  grid-area: body;
  margin: 0;
  line-height: 1.25;
}

.mission-card small {
  display: inline-flex;
  gap: 0.18rem;
  align-items: center;
  text-transform: uppercase;
}

.mission-card small img {
  width: 1rem;
  height: 1rem;
}

.mission-control-row {
  display: contents;
}

.mission-reward {
  grid-area: reward;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon per";
  column-gap: 0.35rem;
  align-items: center;
  justify-self: stretch;
}

.mission-reward img {
  grid-area: icon;
  width: 2.1rem;
  height: 2.1rem;
}

.mission-reward span,
.mission-reward em {
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.mission-reward span {
  grid-area: label;
}

.mission-reward strong {
  grid-area: value;
  color: var(--yellow);
  font-size: 1.05rem;
  line-height: 1;
}

.mission-reward em {
  grid-area: per;
  color: var(--blue-bright);
}

.mission-status {
  grid-area: status;
}

.mission-fill i {
  background: rgb(83 231 161 / 22%);
}

.mission-actions {
  grid-area: actions;
  grid-template-columns: auto minmax(7rem, 1fr);
  gap: 0.35rem;
  align-items: center;
  margin-top: 0;
}

.mission-actions > span {
  color: var(--text);
  font-size: 0.76rem;
  text-align: right;
}

.mission-actions .action {
  min-height: 1.85rem;
  font-size: 0.78rem;
}

.cargo-stat-help strong {
  color: var(--text);
}

.ship-modal-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  padding-right: 2.3rem;
}

.ship-modal {
  width: min(52rem, calc(100vw - 2rem));
}

.shipyard-modal {
  width: min(64rem, calc(100vw - 2rem));
}

.shipyard-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.85rem 0;
}

.shipyard-slot {
  position: relative;
  min-height: 4.2rem;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #05101e;
  padding: 0.5rem;
}

.shipyard-slot.timer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--timer-progress, 0%);
  background: rgb(255 214 0 / 16%);
  pointer-events: none;
}

.shipyard-slot.empty {
  border-color: var(--green);
  background: #06180f;
}

.shipyard-slot strong,
.shipyard-slot small {
  position: relative;
  display: block;
}

.shipyard-slot strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.shipyard-slot small {
  margin-top: 0.28rem;
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.shipyard-recipes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.shipyard-ready-list {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.shipyard-ready-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid var(--yellow);
  background: #141005;
  padding: 0.5rem;
}

.shipyard-ready-job strong,
.shipyard-ready-job small {
  display: block;
}

.shipyard-ready-job strong {
  color: var(--yellow);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.shipyard-ready-job small {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
}

.shipyard-recipe {
  display: grid;
  gap: 0.45rem;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--blue-bright);
  background: #05101e;
  padding: 0.55rem;
}

.shipyard-recipe-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
}

.shipyard-recipe-head strong,
.shipyard-recipe-head span {
  display: block;
}

.shipyard-recipe-head strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.shipyard-recipe-head span,
.shipyard-recipe-head small,
.recipe-time {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.shipyard-recipe-head small {
  margin-top: 0.18rem;
  color: var(--blue-bright);
  text-transform: uppercase;
}

.blueprint-detail {
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 1px solid var(--line-soft);
  background: #020308;
  cursor: pointer;
  padding: 0;
}

.blueprint-detail:hover,
.blueprint-detail:focus-visible {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 2px rgb(66 182 255 / 18%);
  outline: none;
}

.blueprint-detail .resource-icon.small {
  width: 2rem;
  height: 2rem;
}

.shipyard-recipe-head .inline-help {
  width: 1.65rem;
  height: 1.65rem;
  justify-self: center;
}

.shipyard-recipe-head .action {
  gap: 0.2rem;
  min-width: 4.9rem;
  color: var(--yellow);
}

.recipe-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.recipe-input {
  border: 1px solid var(--line-soft);
  background: #020308;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  padding: 0.22rem 0.32rem;
}

.recipe-input.met {
  border-color: var(--green);
  color: var(--green);
}

.recipe-input.missing {
  border-color: var(--red);
  color: var(--red-soft);
}

.ship-portrait {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
}

.ship-modal h2,
.ship-modal h3 {
  margin: 0;
  text-transform: uppercase;
}

.ship-modal h2 {
  font-size: 1.35rem;
}

.ship-modal h3 {
  border-bottom: 1px solid var(--line-soft);
  color: var(--blue-bright);
  font-size: 0.8rem;
  padding-bottom: 0.25rem;
}

.ship-budget-grid,
.ship-section-grid {
  display: grid;
  gap: 0.5rem;
}

.ship-budget-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.9rem;
}

.ship-budget-grid div {
  border: 1px solid var(--line-soft);
  background: #05101e;
  padding: 0.55rem;
}

.ship-budget-grid span,
.ship-budget-grid small {
  display: block;
  color: var(--blue-bright);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ship-budget-grid strong {
  display: block;
  margin: 0.18rem 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1;
}

.ship-meter span {
  color: var(--blue-bright);
}

.ship-meter.mass span,
.ship-meter.mass small,
.metric.mass {
  color: #ff6b6b;
}

.ship-meter.volume span,
.ship-meter.volume small,
.metric.volume {
  color: var(--blue-bright);
}

.ship-meter.power span,
.ship-meter.power small,
.metric.power {
  color: var(--yellow);
}

.metric.action-energy {
  color: var(--yellow);
}

.metric.time {
  color: var(--blue-bright);
}

.ship-meter.cargo span,
.ship-meter.cargo small,
.metric.cargo {
  color: var(--green);
}

.ship-bar {
  position: relative;
  height: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #020308;
  margin: 0.32rem 0;
}

.ship-bar i {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 100%;
  background: currentColor;
  opacity: 0.82;
  vertical-align: top;
}

.ship-bar .installed {
  background: #ff6b6b;
}

.ship-bar .cargo {
  background: var(--green);
}

.ship-meter.volume .ship-bar i {
  color: var(--blue-bright);
}

.ship-meter.power .ship-bar i {
  color: var(--yellow);
}

.ship-meter.cargo .ship-bar i {
  color: var(--green);
}

.ship-bar strong {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  line-height: 1;
  text-shadow: 1px 1px 0 #020308;
}

.ship-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.ship-section-grid section {
  border: 1px solid var(--line-soft);
  background: #03050a;
  padding: 0.55rem;
}

.ship-section-grid section:has(.metric.power) {
  border-left: 4px solid var(--yellow);
}

.ship-section-grid section:has(.metric.cargo) {
  border-left: 4px solid var(--green);
}

.ship-fit-list {
  display: grid;
  grid-template-columns: minmax(6rem, 30%) minmax(16rem, 1fr);
  gap: 0.32rem 0.55rem;
  margin: 0.5rem 0 0;
}

.ship-fit-list dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  color: var(--text);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.fit-slot {
  display: grid;
  gap: 0.15rem;
}

.fit-slot small {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.inline-help {
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #071426;
  color: var(--blue-bright);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.inline-help:hover,
.inline-help:focus-visible {
  border-color: currentColor;
  color: var(--yellow);
}

.ship-fit-list dd {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
}

.ship-fit-list dd {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.22rem;
  align-items: center;
  align-self: stretch;
  min-width: 0;
}

.fit-metrics {
  justify-content: flex-start;
}

.metric {
  display: inline-flex;
  width: 4rem;
  min-width: 4rem;
  height: 2.45rem;
  align-items: center;
  gap: 0.18rem;
  justify-content: flex-start;
  border: 1px solid currentColor;
  background: #020308;
  padding: 0.12rem 0.2rem 0.12rem 0.12rem;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.action-controls .metric {
  width: 5.25rem;
  min-width: 5.25rem;
}

.metric.spacer {
  visibility: hidden;
}

.metric::before {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

.metric.mass::before {
  background-image: url("/assets/resources/ship-mass.png");
}

.metric.volume::before {
  background-image: url("/assets/resources/ship-space.png");
}

.metric.power::before {
  background-image: url("/assets/resources/ship-power.png");
}

.metric.cargo::before {
  background-image: url("/assets/resources/ship-cargo.png");
}

.metric.action-energy::before {
  background-image: url("/assets/resources/action-energy.png");
}

.metric.time::before {
  background-image: url("/assets/resources/ship-time.png");
}

.ship-meter.mass .ship-bar::after,
.ship-meter.volume .ship-bar::after,
.ship-meter.power .ship-bar::after,
.ship-meter.cargo .ship-bar::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 10% 100%;
}

.stack {
  display: grid;
  gap: 0.7rem;
}

@media (max-width: 1100px) {
  .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .actions-panel,
  .system-panel {
    grid-column: span 2;
  }

  .actions-panel .action-dashboard {
    grid-template-columns: 1fr;
  }

  .actions-panel .action-job {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(16.2rem, auto);
  }

  .scanner-console .action-job {
    grid-template-columns: minmax(0, 1fr) minmax(16.2rem, auto);
  }

  .action-banner {
    grid-template-columns: 192px 1fr;
  }

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

  .nav-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .command-shell {
    padding: 0 0.6rem 0.8rem;
  }

  .command-header,
  .route,
  .action-job,
  .market-actions form {
    grid-template-columns: 1fr;
  }

  .action-art {
    width: 40px;
    height: 40px;
  }

  .action-command {
    width: 100%;
  }

  .actions-panel .action-job {
    grid-template-columns: 1fr;
  }

  .action-controls {
    flex-wrap: wrap;
  }

  .action-banner {
    grid-template-columns: 1fr;
  }

  .command-header {
    display: grid;
  }

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

  .panel.wide,
  .system-panel,
  .actions-panel {
    grid-column: auto;
  }

  .system-layout {
    grid-template-columns: 1fr;
  }

  th,
  td {
    padding: 0.45rem;
  }

  .cargo-detail-grid,
  .cargo-stat-grid,
  .asteroid-report-row,
  .ship-budget-grid,
  .ship-section-grid,
  .ship-fit-list {
    grid-template-columns: 1fr;
  }

  .cargo-detail-grid dd {
    grid-row: auto;
  }

  .cargo-detail-grid dt,
  .cargo-detail-grid dd {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .cargo-card {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .cargo-card-meta {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .market-trade {
    grid-template-columns: 1fr;
  }

  .port-head {
    align-items: stretch;
    flex-direction: column;
  }

  .port-summary {
    justify-items: start;
  }
}