body {
  margin: 0;
  background: #050a16;
  color: #e6f1ff;
  font-family: Arial, sans-serif;
}
.planet-main {
  max-width: 1600px;
  margin: 85px auto 0;
  padding: 18px;
}
.planet-main h1 {
  font-size: clamp(25px, 5vw, 42px);
  letter-spacing: 0.05em;
}
.system-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}
.planet-main button,
.planet-main select,
.planet-main input {
  font: inherit;
  max-width: 100%;
  background: #10223c;
  color: #e6f1ff;
  border: 1px solid #4b6589;
  border-radius: 7px;
  padding: 10px;
  box-sizing: border-box;
}
.planet-main button {
  cursor: pointer;
}
.system-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}
#system-canvas {
  width: 100%;
  height: 65vh;
  min-height: 320px;
  max-height: 800px;
  border: 1px solid #293f60;
  border-radius: 16px;
  touch-action: none;
}
.system-sidebar {
  max-height: 80vh;
  overflow: auto;
  background: #0b1426;
  padding: 18px;
  border-radius: 14px;
}
.planet-main a {
  color: #83dcff;
  display: inline-block;
  margin: 8px;
}
.planet-main dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #233049;
  padding: 8px 0;
}
.planet-main dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
#moon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  margin: 12px 0;
}
#moon-list button {
  font-size: 12px;
}
.moon-photo {
  max-width: 100%;
  border-radius: 8px;
}
.system-disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: #aebed3;
}
#moon-details {
  overflow-wrap: anywhere;
}
.system-toolbar label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
@media (max-width: 800px) {
  .system-layout {
    grid-template-columns: 1fr;
  }
  .system-sidebar {
    max-height: none;
  }
  #system-canvas {
    height: 48vh;
  }
  .planet-main {
    margin-top: 100px;
    padding: 12px;
  }
  .system-toolbar select {
    max-width: 230px;
  }
}

/* Planetary System 3.0 */
.planet-system-3d{position:relative;width:100%;height:65vh;min-height:320px;max-height:800px;overflow:hidden;border:1px solid #293f60;border-radius:16px;background:radial-gradient(circle at 50% 45%,#071329 0,#020611 62%,#000207 100%)}
.planet-system-3d[hidden]{display:none}.planet-system-3d canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.planet-system-3d canvas:active{cursor:grabbing}
.system-view-switch{position:absolute;z-index:12;left:50%;transform:translateX(-50%);margin-top:12px;display:flex;gap:4px;padding:4px;border:1px solid rgba(139,178,230,.24);border-radius:12px;background:rgba(5,12,25,.82);backdrop-filter:blur(12px)}
.system-view-switch button{min-width:58px;padding:7px 13px;border:0;border-radius:8px;background:transparent;color:#aebed3;font-size:12px}
.system-view-switch button.active{background:rgba(101,174,255,.2);color:#eff7ff;box-shadow:inset 0 0 0 1px rgba(126,190,255,.25)}
.system-layout>div:first-child{position:relative}.system-mode-note{font-size:12px;color:#8fa4bf;margin:8px 2px}
@media(max-width:800px){.planet-system-3d{height:48vh}.system-view-switch{margin-top:8px}.system-view-switch button{min-width:48px;padding:6px 10px}}