.space-sim-page {
  min-height: 100vh;
  background: #050914;
  color: #eaf2ff;
}

.sim-header {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 max(1.4rem, calc((100vw - 1500px) / 2));
  border-bottom: 1px solid rgba(157, 189, 231, 0.12);
  background: rgba(5, 9, 20, 0.9);
}

.sim-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #eaf4ff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.sim-brand span {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid #68c9f4;
  border-radius: 50%;
  color: #9be3ff;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
}

.sim-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.65rem, 2vw, 1.8rem);
}

.sim-header nav a {
  color: #91a2bb;
  font-size: 0.72rem;
  text-decoration: none;
}

.sim-header nav a:hover,
.sim-header nav a[aria-current="page"] {
  color: #9de4ff;
}

.sim-header-status,
.sim-topline,
.sim-bottom-hint,
.sim-statusbar,
.sim-list-heading,
.sim-distance-result > span {
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sim-header-status {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  color: #91a9c4;
  white-space: nowrap;
}

.sim-header-status i,
.sim-live-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #60e6b2;
  box-shadow: 0 0 12px rgba(96, 230, 178, 0.8);
}

.sim-shell {
  width: min(1500px, calc(100% - 2.8rem));
  margin: 0 auto;
  padding: 1.7rem 0 2rem;
}

.sim-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.05rem;
}

.sim-eyebrow,
.sim-section-heading > div > p,
.sim-list-heading p {
  margin: 0 0 0.42rem;
  color: #83cff2;
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.sim-eyebrow span {
  color: #657792;
}

.sim-heading h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.15rem);
  letter-spacing: -0.065em;
  line-height: 1.06;
}

.sim-heading h1 em {
  color: #9edcf4;
  font-style: normal;
  font-weight: 500;
}

.sim-heading > div > p:last-child {
  margin: 0.55rem 0 0;
  color: #98a9bf;
  font-size: 0.79rem;
}

.sim-reset {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(157, 189, 231, 0.15);
  border-radius: 8px;
  background: #0a1220;
  color: #b5c6dc;
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.sim-reset:hover {
  border-color: rgba(116, 205, 246, 0.48);
  color: #eaf7ff;
}

.sim-workspace {
  display: grid;
  min-height: min(70vh, 720px);
  grid-template-columns: minmax(0, 1fr) 340px;
  overflow: hidden;
  border: 1px solid rgba(149, 181, 224, 0.15);
  border-radius: 14px;
  background: #080e1b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.sim-view-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid rgba(149, 181, 224, 0.12);
}

.sim-viewport {
  position: relative;
  min-height: 450px;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 51% 45%, rgba(38, 63, 101, 0.14), transparent 57%),
    #030712;
  touch-action: none;
}

.sim-viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: none;
}

.sim-topline,
.sim-bottom-hint {
  position: absolute;
  z-index: 2;
  right: 1rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: #8294ac;
  pointer-events: none;
}

.sim-topline {
  top: 1rem;
}

.sim-time-control {
  position: absolute;
  z-index: 3;
  top: 2.8rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid rgba(142, 183, 220, 0.16);
  border-radius: 6px;
  background: rgba(5, 12, 24, 0.72);
  color: #7890ac;
  font-size: 0.51rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  backdrop-filter: blur(10px);
}

.sim-time-control button {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 1px solid rgba(140, 185, 220, 0.18);
  border-radius: 4px;
  background: rgba(32, 64, 91, 0.38);
  color: #b5e8ff;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.sim-time-control button:hover {
  border-color: rgba(118, 208, 249, 0.6);
  background: rgba(48, 111, 150, 0.42);
}

.sim-time-control strong {
  min-width: 3.4rem;
  color: #c8d8eb;
  font-size: 0.52rem;
  text-align: center;
  letter-spacing: 0;
}

.sim-time-control > span:last-child {
  padding-left: 0.4rem;
  border-left: 1px solid rgba(142, 183, 220, 0.16);
  color: #96cde7;
}

.sim-topline > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #9fd8c6;
}

.sim-live-dot {
  width: 0.36rem;
  height: 0.36rem;
}

.sim-bottom-hint {
  bottom: 0.9rem;
}

.sim-bottom-hint kbd {
  display: inline-grid;
  min-width: 1rem;
  height: 1rem;
  margin-right: 0.15rem;
  place-items: center;
  border: 1px solid rgba(165, 190, 223, 0.24);
  border-radius: 3px;
  color: #d6e3f4;
  font: inherit;
  font-size: 0.55rem;
}

.sim-bottom-hint b {
  color: #536985;
}

.sim-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.65;
}

.sim-crosshair::before,
.sim-crosshair::after,
.sim-crosshair i,
.sim-crosshair b {
  position: absolute;
  display: block;
  background: #c4e9ff;
  content: "";
}

.sim-crosshair::before,
.sim-crosshair::after {
  top: 8px;
  width: 5px;
  height: 1px;
}

.sim-crosshair::before { left: 0; }
.sim-crosshair::after { right: 0; }
.sim-crosshair i,
.sim-crosshair b {
  left: 8px;
  width: 1px;
  height: 5px;
}
.sim-crosshair i { top: 0; }
.sim-crosshair b { bottom: 0; }

.sim-label-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sim-planet-label {
  position: absolute;
  padding: 0.28rem 0.45rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(166, 203, 237, 0.28);
  border-radius: 4px;
  background: rgba(5, 12, 25, 0.78);
  color: #dfedff;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.sim-planet-label:hover,
.sim-planet-label.is-selected {
  border-color: #88d9ff;
  color: #aeeaff;
  box-shadow: 0 0 18px rgba(76, 181, 241, 0.25);
}

.sim-planet-label.is-hidden {
  visibility: hidden;
}

.sim-system-label {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  color: #9bb2cb;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 8px #030712, 0 1px 2px #030712;
}

.sim-sun-label {
  color: #ffd28b;
}

.sim-belt-label {
  color: #b9a88d;
}

.sim-loading {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background: radial-gradient(ellipse, rgba(14, 28, 52, 0.94), #030712 68%);
  color: #dcecff;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.sim-loading.is-ready {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.sim-loader-orbit {
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0.45rem;
  border: 1px solid rgba(113, 205, 248, 0.2);
  border-top-color: #79d9ff;
  border-radius: 50%;
  animation: sim-spin 0.9s linear infinite;
}

@keyframes sim-spin { to { transform: rotate(360deg); } }

.sim-loading strong {
  font-size: 0.84rem;
}

.sim-loading small {
  color: #8fa5c2;
  font-size: 0.66rem;
}

.sim-statusbar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  border-top: 1px solid rgba(149, 181, 224, 0.1);
  color: #71829b;
}

.sim-statusbar strong {
  margin-left: 0.3rem;
  color: #c5d7ec;
  font-size: 0.58rem;
}

.sim-panel {
  display: flex;
  flex-direction: column;
}

.sim-panel-section {
  padding: 1rem;
  border-bottom: 1px solid rgba(149, 181, 224, 0.1);
}

.sim-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.sim-section-heading > div > p,
.sim-list-heading p {
  margin-bottom: 0.35rem;
  color: #6c88a8;
  font-size: 0.53rem;
}

.sim-section-heading h2 {
  margin: 0;
  color: #e8f3ff;
  font-size: 0.88rem;
  letter-spacing: -0.02em;
}

.sim-target-icon,
.sim-ruler-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(120, 201, 245, 0.2);
  border-radius: 8px;
  color: #9ce0ff;
  font-size: 1rem;
}

.sim-planet-description {
  min-height: 2rem;
  margin: 0.75rem 0;
  color: #91a3bc;
  font-size: 0.67rem;
  line-height: 1.55;
}

.sim-facts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.sim-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.63rem;
}

.sim-facts dt {
  color: #7488a3;
}

.sim-facts dd {
  margin: 0;
  color: #d4e2f2;
  font-weight: 700;
  text-align: right;
}

.sim-fly-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.8rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(106, 197, 241, 0.35);
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(29, 97, 133, 0.28), rgba(17, 49, 78, 0.3));
  color: #b9ebff;
  font: inherit;
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.sim-fly-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.sim-fly-button:not(:disabled):hover {
  background: rgba(40, 128, 171, 0.32);
}

.sim-select-label {
  display: block;
  margin: 0.68rem 0 0.28rem;
  color: #7187a4;
  font-size: 0.58rem;
}

.sim-distance-panel select {
  width: 100%;
  padding: 0.52rem 0.6rem;
  border: 1px solid rgba(142, 176, 217, 0.16);
  border-radius: 5px;
  outline: none;
  background: #0a1424;
  color: #d8e8fa;
  font: inherit;
  font-size: 0.67rem;
}

.sim-distance-panel select:focus {
  border-color: #63c4f2;
}

.sim-distance-result {
  margin-top: 0.72rem;
  padding: 0.7rem;
  border: 1px solid rgba(103, 192, 238, 0.12);
  border-radius: 7px;
  background: rgba(26, 76, 107, 0.12);
}

.sim-distance-result > span {
  color: #7793af;
  font-size: 0.49rem;
  letter-spacing: 0.09em;
}

.sim-distance-result > strong {
  display: block;
  margin-top: 0.3rem;
  color: #a7e4ff;
  font-size: 1.34rem;
  letter-spacing: -0.04em;
}

.sim-distance-result > strong small {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

.sim-distance-result p {
  margin: 0.12rem 0 0;
  color: #91a6be;
  font-size: 0.62rem;
}

.sim-distance-divider {
  height: 1px;
  margin: 0.55rem 0;
  background: rgba(132, 174, 210, 0.15);
}

.sim-distance-result #sim-distance-live {
  color: #a7e4ff;
  font-size: 1.34rem;
}

.sim-distance-result #sim-distance-au {
  color: #bac9db;
  font-size: 0.98rem;
}

.sim-planet-list-section {
  flex: 1;
  border-bottom: 0;
}

.sim-list-heading {
  display: flex;
  justify-content: space-between;
  color: #7187a4;
}

.sim-list-heading p {
  margin: 0;
}

.sim-list-heading > span {
  font-size: 0.48rem;
}

.sim-planet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
  margin-top: 0.65rem;
}

.sim-planet-option {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
  padding: 0.43rem;
  border: 1px solid rgba(140, 172, 212, 0.12);
  border-radius: 5px;
  background: rgba(16, 27, 44, 0.62);
  color: #aabbd1;
  font: inherit;
  font-size: 0.61rem;
  text-align: left;
  cursor: pointer;
}

.sim-planet-option:hover,
.sim-planet-option.is-selected {
  border-color: rgba(112, 201, 243, 0.48);
  background: rgba(33, 82, 111, 0.3);
  color: #e1f4ff;
}

.sim-planet-dot {
  width: 0.58rem;
  height: 0.58rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--planet-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--planet-color) 65%, transparent);
}

.sim-footnote {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
  color: #71829a;
  font-size: 0.63rem;
  line-height: 1.55;
}

.sim-footnote > span {
  color: #80c9ef;
}

.sim-footnote p {
  max-width: 1050px;
  margin: 0;
}

.sim-mobile-controls {
  display: none;
}

@media (max-width: 1050px) {
  .sim-workspace {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .sim-header-status {
    display: none;
  }
}

@media (max-width: 760px) {
  .sim-header {
    min-height: 58px;
    padding: 0 1rem;
  }

  .sim-header nav {
    gap: 0.75rem;
  }

  .sim-header nav a {
    font-size: 0.63rem;
  }

  .sim-shell {
    width: min(100% - 1.2rem, 620px);
    padding-top: 1.25rem;
  }

  .sim-heading {
    align-items: flex-start;
  }

  .sim-heading > div > p:last-child {
    max-width: 29rem;
    line-height: 1.5;
  }

  .sim-reset {
    padding: 0.58rem;
    font-size: 0.9rem;
  }

  .sim-reset span {
    display: none;
  }

  .sim-workspace {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .sim-view-column {
    min-height: 58vh;
    border-right: 0;
    border-bottom: 1px solid rgba(149, 181, 224, 0.12);
  }

  .sim-viewport {
    min-height: 410px;
  }

  .sim-statusbar {
    min-height: 39px;
    padding: 0 0.65rem;
    font-size: 0.47rem;
  }

  .sim-statusbar strong {
    font-size: 0.48rem;
  }

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

  .sim-panel-section {
    padding: 0.85rem;
  }

  .sim-target-panel {
    border-right: 1px solid rgba(149, 181, 224, 0.1);
  }

  .sim-planet-list-section {
    grid-column: 1 / -1;
  }

  .sim-mobile-controls {
    position: absolute;
    z-index: 3;
    right: 0.75rem;
    bottom: 2.5rem;
    left: 0.75rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    pointer-events: none;
  }

  .sim-dpad {
    display: grid;
    grid-template-columns: repeat(3, 2.15rem);
    grid-template-rows: repeat(2, 2.15rem);
    gap: 0.22rem;
    pointer-events: auto;
  }

  .sim-dpad button,
  .sim-altitude button {
    border: 1px solid rgba(167, 206, 241, 0.35);
    border-radius: 8px;
    background: rgba(6, 14, 28, 0.72);
    color: #d8f3ff;
    font: inherit;
    font-size: 0.75rem;
    touch-action: none;
    backdrop-filter: blur(8px);
  }

  .sim-dpad button:first-child {
    grid-column: 2;
  }

  .sim-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
  .sim-dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
  .sim-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }

  .sim-altitude {
    display: grid;
    gap: 0.3rem;
    pointer-events: auto;
  }

  .sim-altitude button {
    width: 2.45rem;
    height: 2.45rem;
    font-size: 1rem;
  }

  .sim-bottom-hint {
    bottom: 0.55rem;
    font-size: 0.44rem;
  }

  .sim-bottom-hint > span:first-child {
    display: none;
  }
}

@media (max-width: 480px) {
  .sim-header {
    align-items: center;
  }

  .sim-brand {
    gap: 0.38rem;
    font-size: 0.63rem;
  }

  .sim-brand span {
    width: 1.6rem;
    height: 1.6rem;
  }

  .sim-header nav {
    gap: 0.55rem;
  }

  .sim-header nav a {
    font-size: 0.55rem;
  }

  .sim-heading h1 {
    font-size: 1.75rem;
  }

  .sim-heading > div > p:last-child {
    max-width: 18rem;
    font-size: 0.68rem;
  }

  .sim-viewport {
    min-height: 390px;
  }

  .sim-topline {
    right: 0.65rem;
    left: 0.65rem;
    font-size: 0.48rem;
  }

  .sim-time-control {
    top: 2.4rem;
    left: 0.65rem;
    gap: 0.32rem;
    padding: 0.32rem 0.4rem;
    font-size: 0.46rem;
  }

  .sim-time-control button {
    width: 1.15rem;
    height: 1.15rem;
  }

  .sim-time-control > span:first-child {
    display: none;
  }

  .sim-time-control > span:last-child {
    font-size: 0.44rem;
  }

  .sim-system-label {
    font-size: 0.4rem;
  }

  .sim-statusbar {
    gap: 0.35rem;
    font-size: 0.4rem;
    letter-spacing: 0.07em;
  }

  .sim-statusbar strong {
    margin-left: 0.12rem;
    font-size: 0.42rem;
  }

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

  .sim-target-panel {
    border-right: 0;
  }

  .sim-planet-list-section {
    grid-column: auto;
  }

  .sim-planet-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sim-planet-option {
    justify-content: center;
    padding: 0.42rem 0.2rem;
    font-size: 0.54rem;
  }

  .sim-planet-dot {
    width: 0.48rem;
    height: 0.48rem;
  }

  .sim-bottom-hint > span:nth-child(2) {
    margin-left: auto;
  }

  .sim-footnote {
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sim-loader-orbit {
    animation-duration: 3s;
  }
}