:root {
  color-scheme: dark;
  --background: #080e18;
  --surface: #101b2bdd;
  --surface-raised: #162337;
  --border: #263449;
  --accent: #76e4df;
  --accent-blue: #75b9ee;
  --text: #e4edf8;
  --muted: #8a9db6;
  --common: #bdc9d9;
  --uncommon: #88dba5;
  --rare: #77b7ff;
  --epic: #c89af3;
  --legendary: #f0c67d;
  --radius: 14px;
  --space: 20px;
  --header-height: 88px;
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 56% 4%, #16293f66, transparent 55%),
    var(--background);
  font-size: 14px;
  line-height: 1.5;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
button,
input,
select,
a {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid #91e7de66;
  border-radius: 8px;
  background: linear-gradient(135deg, #80e6df, #55bfc7);
  color: #08252d;
  padding: 10px 16px;
  font-weight: 650;
  font-size: 12px;
  transition:
    background 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
button:hover:enabled {
  box-shadow: 0 0 22px #70dce023;
  filter: brightness(1.08);
}
button:active:enabled {
  transform: translateY(1px);
}
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-button {
  width: 44px;
  padding: 10px;
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.icon-button:hover:enabled {
  color: var(--accent);
  background: #192b3b;
}
.secondary {
  color: #bacee2;
  background: #172539;
  border-color: #30435a;
}
.text-button {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 11px;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0 0;
  min-height: 40px;
}
.text-button .icon {
  width: 16px;
}
.danger {
  background: #422a34;
  border-color: #835060;
  color: #f0b6bb;
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px #76e4df66;
  flex-shrink: 0;
}
.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 13% 22%, #abc6d999, transparent),
    radial-gradient(1px 1px at 40% 64%, #abc6d988, transparent),
    radial-gradient(1px 1px at 80% 38%, #abc6d955, transparent),
    radial-gradient(1px 1px at 63% 93%, #abc6d944, transparent);
  background-size:
    290px 270px,
    410px 370px,
    560px 480px,
    380px 360px;
  opacity: 0.5;
  z-index: -1;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -1.8px;
}
h2 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.3px;
}
h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
small {
  font-size: 10px;
  color: var(--muted);
}
.muted {
  color: var(--muted);
  font-size: 11px;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 650;
  color: var(--accent);
  display: block;
}
.tier-pill {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid #5f9fa653;
  background: #315f641f;
  color: #a9d9de;
  line-height: 1;
  letter-spacing: 1px;
  font-size: 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(140deg, #152237e6, #0e1929e6);
  padding: 24px;
}
.topbar {
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 30px;
  background: #0a121fef;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.top-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 750;
  font-size: 18px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.brand-accent {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 2px;
}
.brand-symbol {
  color: var(--accent);
}
.brand-symbol .icon {
  width: 30px;
  height: 30px;
}
.brand small {
  display: block;
  letter-spacing: 2px;
  font-size: 8px;
  margin-top: 3px;
  color: #6a86a0;
}
.top-xp {
  display: flex;
  gap: 50px;
  max-width: 490px;
  flex: 1;
}
.xp-block {
  min-width: 0;
}
.top-xp .xp-block {
  flex: 1;
  max-width: 190px;
}
.xp-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: #9eb1c8;
}
.xp-label b {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
}
progress {
  appearance: none;
  display: block;
  border: 0;
  border-radius: 8px;
  background: #23344b;
  overflow: hidden;
  width: 100%;
  height: 4px;
  margin: 8px 0 5px;
}
progress::-webkit-progress-bar {
  background: #23344b;
}
progress::-webkit-progress-value {
  background: linear-gradient(90deg, #408baf, var(--accent));
  transition: width 0.12s linear;
}
progress::-moz-progress-bar {
  background: var(--accent);
}
.top-xp small {
  font-size: 8px;
  color: #607d99;
}
.top-tools {
  display: flex;
  align-items: center;
  gap: 25px;
}
.wallet {
  text-align: right;
  min-width: 80px;
}
.wallet > span {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  color: #8c9db6;
}
.wallet strong {
  color: #eac991;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.mobile-menu {
  display: none;
}
.app-shell {
  max-width: 1800px;
  margin: auto;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 288px;
  gap: 26px;
  padding: 0 26px 0 0;
}
.sidebar {
  border-right: 1px solid var(--border);
  padding: 30px 18px;
  position: sticky;
  top: var(--header-height);
  height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
  background: #0b1320a0;
  min-width: 0;
}
.sidebar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
  color: #667f9a;
  letter-spacing: 1.5px;
  margin: 5px 10px 16px;
}
.sidebar-label span {
  font-size: 8px;
  letter-spacing: 0;
  color: #465c73;
}
.planet-nav {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  text-align: left;
  justify-content: flex-start;
  padding: 13px 10px;
  margin-bottom: 9px;
  min-height: 67px;
  box-shadow: none !important;
}
.planet-nav > span:nth-child(2) {
  flex: 1;
}
.planet-nav strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.planet-nav small {
  display: block;
  font-size: 9px;
  margin-top: 4px;
}
.planet-nav.active {
  border-color: #427282;
  background: linear-gradient(100deg, #17354588, #14253555);
}
.planet-nav.locked {
  opacity: 0.45;
  border-color: #25334750;
  background: #101a2870;
}
.planet-nav.locked .icon {
  width: 13px;
}
.mini-planet {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(
    circle at 28% 25%,
    #8cd2c9,
    #3f7a90 45%,
    #142d41 74%,
    #080f1d
  );
  box-shadow:
    0 0 15px #4b999722,
    inset -3px -2px 6px #0008;
}
.ice {
  background: radial-gradient(
    circle at 25% 25%,
    #a7c2df,
    #54769b 45%,
    #192e4b 75%
  );
}
.lava {
  background: radial-gradient(
    circle at 25% 25%,
    #d1a087,
    #9e6155 45%,
    #371f31 75%
  );
}
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 10px 24px;
}
.desktop-navigation {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav-button {
  display: flex;
  justify-content: flex-start;
  gap: 13px;
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #859bb5;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  min-height: 45px;
  box-shadow: none !important;
}
.nav-button .icon {
  width: 18px;
}
.nav-button.active {
  background: #19344370;
  color: var(--accent);
  border-color: #2b505e50;
}
.nav-button:hover:enabled {
  background: #17273a;
  color: #d3e6f4;
}
.nav-badge {
  margin-left: auto;
  font-size: 8px;
  color: #8cb0b9;
  background: #23394466;
  border-radius: 3px;
  padding: 2px 5px;
}
.sidebar-bottom {
  margin: auto 10px 0;
  padding-top: 30px;
}
.sidebar-bottom > div {
  color: #66939a;
  letter-spacing: 1.2px;
  font-size: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.sidebar-bottom p {
  color: #71879f;
  margin-top: 17px;
  font-size: 13px;
  line-height: 1.8;
}
.sidebar-bottom > span {
  font-size: 7px;
  letter-spacing: 1px;
  color: #43596e;
  display: block;
  margin-top: 18px;
}
.drawer-title,
.drawer-settings {
  display: none;
}
.main-content {
  min-width: 0;
  padding: 28px 0 20px;
}
.breadcrumb {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 8px;
  color: #6d859f;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}
.connection {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #688f96;
  letter-spacing: 1px;
  font-size: 7px;
}
.planet-hero {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  height: 300px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 25%, #214a6155, transparent 65%),
    linear-gradient(130deg, #132339, #101b2b);
  padding: 32px;
}
.planet-copy {
  position: relative;
  z-index: 2;
}
.planet-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}
.planet-copy h1 {
  margin-top: 21px;
  font-size: 52px;
  letter-spacing: -2px;
}
.planet-copy p {
  margin-top: 15px;
  font-size: 12px;
  line-height: 1.8;
  color: #94a9c1;
}
.planet-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 23px;
  flex-wrap: wrap;
}
.planet-tags span {
  font-size: 8px;
  color: #a7bfca;
  border-radius: 5px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid #46606c50;
  background: #0b202866;
}
.planet-coordinates {
  font-family: ui-monospace, monospace;
  letter-spacing: 1px;
  font-size: 7px;
  color: #526f87;
  margin-top: 23px;
}
.planet-coordinates span {
  margin-left: 20px;
  color: #3f596e;
}
.planet-scene {
  position: absolute;
  right: 0;
  top: 0;
  width: 48%;
  height: 100%;
  display: grid;
  place-items: center;
}
.hero-planet {
  position: relative;
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 22% 20%,
    #addcc9 0,
    #6ba4a6 18%,
    #396b86 42%,
    #203d56 62%,
    #090f1f 84%
  );
  box-shadow:
    inset -24px -18px 28px #020813cc,
    0 0 50px #5db7c11a,
    inset 2px 2px 8px #c4dcd044;
  transform: rotate(-18deg);
  z-index: 1;
}
.hero-planet:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 25% 29%, #53745f99 0 12%, transparent 15%),
    radial-gradient(ellipse at 35% 45%, #57827090 0 16%, transparent 18%),
    radial-gradient(ellipse at 63% 65%, #46747580 0 12%, transparent 15%),
    repeating-linear-gradient(
      14deg,
      transparent 0 15px,
      #b5d2ba15 18px 24px,
      transparent 28px 37px
    );
  box-shadow: inset -20px -10px 45px #030b1cc0;
}
.planet-orbit {
  position: absolute;
  border: 1px solid #70aeb32b;
  border-radius: 50%;
  width: 290px;
  height: 118px;
  transform: rotate(-28deg);
}
.orbit-two {
  width: 250px;
  height: 250px;
  border-color: #71a6b018;
  transform: none;
}
.orbit-two:after {
  content: "";
  position: absolute;
  left: 20px;
  top: 40px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #79c9cd;
  box-shadow: 0 0 8px #84e9e7;
}
.planet-crosshair {
  position: absolute;
  width: 290px;
  height: 1px;
  border-top: 1px dashed #63899020;
  transform: rotate(30deg);
}
.planet-marker {
  position: absolute;
  bottom: 27px;
  right: 30px;
  letter-spacing: 4px;
  color: #557889;
  font-size: 7px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.section-heading h2 {
  margin-top: 5px;
}
.section-note {
  font-size: 9px;
  color: #6e859e;
  white-space: nowrap;
}
.planet-hero + .section-heading {
  margin: 28px 0 18px;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.resource-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  background: linear-gradient(130deg, #132239dc, #0d192bdc);
  min-width: 0;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.resource-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  margin-bottom: 15px;
}
.material-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid #758dad30;
  background: #829ec014;
  border-radius: 10px;
  color: #b7cadb;
}
.material-icon .icon {
  width: 24px;
  height: 24px;
}
.material-icon.copper {
  color: #d8b296;
  background: #9a603a1f;
  border-color: #a97e5540;
}
.material-icon.uranium {
  color: #b1d98c;
  background: #718d3b1c;
  border-color: #9aab5740;
}
.resource-status {
  font-size: 6px;
  letter-spacing: 1px;
  color: #536e87;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.resource-card.is-mining {
  border-color: #4e8c9d;
  background: linear-gradient(145deg, #183644c0, #102337c0);
  box-shadow: 0 0 25px #61d6dd0b;
}
.is-mining .resource-status {
  color: var(--accent);
}
.is-mining .status-dot {
  animation: soft-pulse 3s ease-in-out infinite;
}
.resource-card h3 {
  font-size: 16px;
  letter-spacing: -0.4px;
}
.resource-card > p {
  font-size: 10px;
  min-height: 36px;
  margin-top: 6px;
  line-height: 1.6;
  color: #7e94ac;
}
.resource-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid #2d405850;
  border-bottom: 1px solid #2d405850;
}
.resource-stats > span {
  font-size: 8px;
  color: #738ca6;
}
.resource-stats b {
  display: block;
  margin-top: 3px;
  font-weight: 550;
  font-size: 16px;
  color: #c8d7e9;
}
.resource-stats small {
  font-weight: 400;
  font-size: 9px;
}
.resource-card .xp-label {
  font-size: 9px;
}
.resource-card .xp-label b {
  font-size: 8px;
}
.resource-card .xp-block small {
  font-size: 8px;
}
.resource-card > button {
  margin-top: 17px;
  width: 100%;
  font-size: 11px;
  min-height: 41px;
  padding: 9px;
}
.resource-card > button .icon {
  width: 15px;
}
.resource-card > button:disabled {
  opacity: 1;
  border-color: #37748566;
  color: #a1d7dd;
  background: #25485844;
}
.activity-panel {
  margin-top: 22px;
  background: linear-gradient(120deg, #1632436b, #142136dc);
  border-color: #315361;
  padding: 22px 24px;
}
.activity-header {
  display: flex;
  align-items: center;
  gap: 13px;
}
.activity-header .eyebrow {
  font-size: 8px;
}
.activity-header h2 {
  font-size: 18px;
  margin-top: 4px;
}
.activity-icon {
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid #58859144;
  background: #3a829216;
  color: var(--accent);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.live-badge {
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid #35485c;
  color: #70859f;
  font-size: 7px;
  letter-spacing: 1px;
  border-radius: 4px;
}
.live-badge.running {
  border-color: #599c9344;
  color: var(--accent);
  background: #52b6a512;
}
.activity-progress-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
}
.activity-progress-row progress {
  height: 7px;
  margin: 0;
}
.activity-progress-row > span {
  white-space: nowrap;
  width: 64px;
  text-align: right;
  color: #b8dce3;
  font-family: ui-monospace, monospace;
  font-size: 13px;
}
.activity-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 13px;
}
.activity-bottom p {
  font-size: 10px;
}
.activity-bottom button {
  font-size: 10px;
  min-height: 36px;
  padding: 7px 12px;
}
.activity-bottom .icon {
  width: 13px;
}
.activity-rewards {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  border-top: 1px solid #34556950;
  padding-top: 14px;
  margin-top: 17px;
  font-size: 9px;
  color: #7fadb9;
}
.activity-rewards span:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #5da9b2;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.guide-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 19px 22px;
  border-color: #42534477;
  background: #16312733;
}
.guide-icon {
  display: grid;
  place-items: center;
  border: 1px solid #51644f55;
  border-radius: 50%;
  color: #a7c59b;
  width: 33px;
  height: 33px;
  flex-shrink: 0;
}
.guide-icon .icon {
  width: 16px;
}
.guide-panel .eyebrow {
  color: #90b294;
  font-size: 7px;
  letter-spacing: 1.4px;
}
.guide-panel h2 {
  font-size: 14px;
  margin-top: 3px;
}
.guide-panel p {
  font-size: 10px;
  margin-top: 4px;
  line-height: 1.7;
}
.guide-panel > div {
  flex: 1;
}
.guide-panel .icon-button {
  background: transparent;
  border-color: #41544955;
  color: #a5cbb2;
  width: 33px;
  min-height: 33px;
  padding: 7px;
}
.guide-panel .icon-button .icon {
  width: 14px;
}
.main-footer {
  font-size: 7px;
  letter-spacing: 0.6px;
  color: #536e85;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 22px;
  padding: 8px 0 10px;
}
.main-footer i {
  font-style: normal;
  margin: 0 6px;
}
.right-panel {
  position: sticky;
  top: var(--header-height);
  height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  padding: 28px 0 20px;
  scrollbar-width: thin;
  scrollbar-color: #263c51 transparent;
}
.right-panel .panel {
  padding: 20px;
  margin-bottom: 17px;
  background: linear-gradient(120deg, #132035d9, #0d1828d9);
}
.right-panel h2 {
  font-size: 13px;
}
.right-panel .section-heading {
  margin-bottom: 18px;
}
.right-panel .section-heading > span {
  font-size: 8px;
  color: #738aa3;
}
.quick-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
  border-bottom: 1px solid #2a3b4f66;
}
.quick-item-icon {
  color: var(--quality, var(--common));
  background: color-mix(in srgb, var(--quality, var(--common)) 8%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--quality, var(--common)) 20%, transparent);
  display: grid;
  place-items: center;
  border-radius: 7px;
  width: 31px;
  height: 31px;
  flex-shrink: 0;
}
.quick-item .icon {
  width: 16px;
}
.quick-item > div {
  min-width: 0;
  flex: 1;
}
.quick-item strong {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--quality, var(--common));
}
.quick-item small {
  font-size: 8px;
  color: var(--quality, var(--muted));
  opacity: 0.75;
}
.quick-item > b {
  font-size: 12px;
  color: #c3d5e4;
  font-weight: 550;
}
.empty-quick {
  font-size: 10px;
  color: #637e96;
  line-height: 1.9;
  padding: 16px 0;
}
.quick-ship .eyebrow {
  font-size: 7px;
  color: #6c8a9c;
  margin-bottom: 15px;
}
#quick-laser,
.ship-equipped {
  display: flex;
  gap: 10px;
  align-items: center;
}
#quick-laser .material-icon {
  width: 34px;
  height: 34px;
}
#quick-laser .material-icon .icon {
  width: 19px;
}
#quick-laser strong {
  display: block;
  font-size: 10px;
  font-weight: 500;
}
#quick-laser small {
  font-size: 8px;
  display: block;
  margin-top: 3px;
}
.drop-log {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drop-log li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  font-size: 10px;
  color: var(--quality, #7e95ae);
  border-bottom: 1px solid #293b5155;
  animation: drop-enter 0.3s ease-out;
}
.drop-log li:last-child {
  border: 0;
}
.log-marker {
  color: var(--quality, #58788f);
  flex-shrink: 0;
  padding-top: 1px;
}
.log-marker .icon {
  width: 12px;
  height: 12px;
}
.drop-log li:nth-child(n + 5) {
  opacity: 0.55;
}
.feed-dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px #79e7d866;
}
.afk-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 25px;
  padding: 15px;
  opacity: 0.75;
}
.afk-note > .icon,
.afk-note > span {
  color: #638a9d;
  margin-bottom: 12px;
}
.afk-note p {
  font-size: 11px;
  color: #6f8ba3;
}
.afk-note strong {
  color: #9ab5c6;
  font-weight: 500;
}
.afk-note small {
  font-size: 8px;
  margin-top: 11px;
  color: #546e88;
}
.page-heading {
  padding: 14px 0 28px;
}
.page-heading h1 {
  font-size: 36px;
  letter-spacing: -1.2px;
  margin: 14px 0;
}
.page-heading p {
  font-size: 12px;
}
.tab-row {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0d1826;
  margin-bottom: 20px;
  max-width: 420px;
}
.tab {
  flex: 1;
  color: #849bb6;
  background: transparent;
  border-color: transparent;
  font-size: 12px;
}
.tab.active {
  background: #1b3a48;
  color: var(--accent);
  border-color: #3e6b7566;
}
.processing-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.processing-intro h2 {
  font-size: 17px;
}
.processing-intro p {
  font-size: 11px;
  margin-top: 6px;
}
.quality-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 9px;
  color: var(--muted);
  min-width: 130px;
}
select {
  padding: 10px 12px;
  min-height: 44px;
  color: var(--text);
  background: #0a1624;
  border: 1px solid #355068;
  border-radius: 7px;
  width: 100%;
  font-size: 12px;
}
.processing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.recipe-card {
  border: 1px solid
    color-mix(in srgb, var(--quality, var(--border)) 25%, var(--border));
  background: var(--surface);
  border-radius: 12px;
  padding: 18px;
  min-width: 0;
}
.recipe-card.is-processing {
  border-color: var(--accent);
  box-shadow: 0 0 15px #76e4df10;
}
.recipe-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin-bottom: 16px;
}
.recipe-card h3 {
  color: var(--quality, var(--text));
  font-size: 14px;
}
.conversion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 10px;
  color: #809cb4;
}
.conversion .icon {
  width: 15px;
  height: 15px;
  color: #568999;
  transform: rotate(90deg);
}
.conversion strong {
  color: #bacddd;
  font-weight: 500;
}
.recipe-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 9px;
  margin: 18px 0;
  color: #7c94ad;
}
.recipe-card button {
  width: 100%;
  font-size: 10px;
}
.recipe-card button .icon {
  width: 15px;
}
.quality {
  display: inline-flex;
  align-items: center;
  border: 1px solid
    color-mix(in srgb, var(--quality, var(--common)) 35%, transparent);
  background: color-mix(in srgb, var(--quality, var(--common)) 7%, transparent);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 8px;
  line-height: 1.4;
  color: var(--quality, var(--common));
  width: fit-content;
}
.Common {
  --quality: var(--common);
  color: var(--common);
}
.Uncommon {
  --quality: var(--uncommon);
  color: var(--uncommon);
}
.Rare {
  --quality: var(--rare);
  color: var(--rare);
}
.Epic {
  --quality: var(--epic);
  color: var(--epic);
}
.Legendary {
  --quality: var(--legendary);
  color: var(--legendary);
}
.available {
  color: var(--uncommon);
}
.missing {
  color: #ba8e95;
}
.laser-comparison {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}
.laser-card {
  border: 1px solid color-mix(in srgb, var(--quality) 33%, transparent);
  background: color-mix(in srgb, var(--quality) 5%, transparent);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.laser-card .material-icon {
  width: 64px;
  height: 64px;
  border-color: color-mix(in srgb, var(--quality) 30%, transparent);
  color: var(--quality);
  background: color-mix(in srgb, var(--quality) 7%, transparent);
  margin-bottom: 17px;
}
.laser-card .material-icon .icon {
  width: 35px;
  height: 35px;
}
.laser-card > small {
  font-size: 7px;
  letter-spacing: 1.2px;
  color: var(--quality);
  opacity: 0.7;
}
.laser-card h3 {
  margin-top: 9px;
  font-size: 19px;
  color: var(--quality);
}
.laser-card p {
  font-size: 10px;
  margin-top: 3px;
}
.laser-card strong {
  font-size: 21px;
  font-weight: 500;
  color: var(--quality);
  margin-top: 16px;
}
.laser-card strong small {
  font-size: 9px;
  color: var(--quality);
}
.upgrade-arrow {
  text-align: center;
  color: #5b8d9b;
}
.ingredients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.ingredient {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #3e53664d;
  background: #0d1c2c;
  border-radius: 7px;
  font-size: 11px;
}
.ingredient .icon {
  width: 17px;
}
.ingredient strong {
  margin-left: auto;
  white-space: nowrap;
  font-size: 10px;
}
.upgrade-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.upgrade-footer p {
  font-size: 11px;
  color: #8facb7;
}
.inventory-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.filter {
  min-height: 40px;
  background: #101f30;
  color: #8b9eb6;
  border-color: var(--border);
  font-size: 11px;
  padding: 8px 13px;
  font-weight: 500;
}
.filter.active {
  background: #21414b55;
  border-color: #487888;
  color: var(--accent);
}
.inventory-toolbar > .secondary {
  font-size: 11px;
  min-height: 40px;
}
.inventory-toolbar .icon {
  width: 16px;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.item-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid
    color-mix(in srgb, var(--quality, var(--common)) 25%, var(--border));
  border-radius: 11px;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--quality, var(--common)) 6%, #101b2b),
    #101b2b
  );
  padding: 18px;
  min-width: 0;
  box-shadow: 0 0 17px
    color-mix(in srgb, var(--quality, var(--common)) 3%, transparent);
}
.item-card .material-icon {
  color: var(--quality);
  border-color: color-mix(in srgb, var(--quality) 25%, transparent);
  background: color-mix(in srgb, var(--quality) 7%, transparent);
}
.item-card h3 {
  font-size: 12px;
  margin-top: 8px;
  color: var(--quality);
}
.item-count {
  font-size: 22px;
  font-weight: 500;
  margin-top: auto;
  color: #d3e2ee;
}
.item-count small {
  font-size: 10px;
}
.empty-state {
  grid-column: 1/-1;
  padding: 65px 20px;
  border: 1px dashed #30465b;
  border-radius: 12px;
  text-align: center;
  color: #6c8aa2;
  background: #0e1a2999;
}
.empty-state > .icon,
.empty-state > span > .icon {
  width: 36px;
  height: 36px;
  color: #587b94;
  margin-bottom: 18px;
}
.empty-state h3 {
  color: #a4b6cc;
  font-size: 16px;
}
.empty-state p {
  font-size: 12px;
  margin: 10px 0;
}
.empty-state button {
  margin-top: 16px;
}
.trader-banner {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
.trader-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: #61809a1c;
  border: 1px solid #55728b55;
  border-radius: 12px;
  color: #94b5c9;
  flex-shrink: 0;
}
.trader-avatar .icon {
  width: 26px;
  height: 26px;
}
.trader-banner h2 {
  font-size: 17px;
}
.trader-banner p {
  font-size: 10px;
  margin-top: 6px;
}
.open-badge {
  font-size: 7px;
  letter-spacing: 1px;
  color: #8fcbb4;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  margin-left: auto;
}
.trader-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.trader-card {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--quality) 18%, var(--border));
  background: var(--surface);
  border-radius: 12px;
}
.trader-item {
  display: flex;
  gap: 11px;
  align-items: center;
}
.trader-item .material-icon {
  color: var(--quality);
  width: 40px;
  height: 40px;
}
.trader-item h3 {
  font-size: 12px;
  margin-top: 6px;
  color: var(--quality);
}
.trader-item small {
  font-size: 9px;
  display: block;
  margin-top: 4px;
}
.trader-price > small {
  font-size: 6px;
  letter-spacing: 0.5px;
}
.trader-price strong {
  display: block;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
  color: #e6c78d;
}
.trader-price strong span {
  font-size: 13px;
}
.demand {
  display: block;
  font-size: 8px;
  color: #8aabb2;
}
.sell-controls label {
  font-size: 8px;
  display: block;
  margin-bottom: 5px;
  color: #7d9eb4;
}
.sell-controls > div {
  display: flex;
  gap: 5px;
}
.sell-controls input {
  width: 55px;
  min-width: 0;
  flex: 1;
  min-height: 40px;
  padding: 8px;
  color: #d2e1ee;
  border: 1px solid #37556b;
  border-radius: 6px;
  background: #0c1725;
  font-size: 12px;
}
.sell-controls button {
  padding: 8px 10px;
  font-size: 9px;
  min-height: 40px;
}
.sell-controls > small {
  font-size: 8px;
  display: block;
  margin-top: 6px;
}
.sell-controls input[aria-invalid="true"] {
  border-color: #b56976;
}
.coming-soon {
  text-align: center;
  padding: 60px 25px 45px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coming-orbit {
  display: grid;
  place-items: center;
  width: 115px;
  height: 115px;
  border: 1px dashed #496e8055;
  border-radius: 50%;
  background: radial-gradient(circle, #1e4a5b33, transparent);
  margin-bottom: 30px;
}
.coming-orbit .icon {
  width: 45px;
  height: 45px;
  color: #7da9bf;
}
.coming-soon .eyebrow {
  font-size: 8px;
  color: #607f97;
}
.coming-soon h2 {
  font-size: 25px;
  margin-top: 15px;
}
.coming-soon p {
  font-size: 12px;
  margin: 15px 0 25px;
}
.coming-soon .icon {
  width: 17px;
}
.locked-caption {
  margin-top: 28px;
  color: #577187;
}
.ship-panel {
  padding-bottom: 25px;
}
.ship-blueprint {
  display: block;
  max-width: 570px;
  width: 100%;
  margin: 10px auto 15px;
}
.ship-equipped {
  border: 1px solid #4b675555;
  background: #37594017;
  border-radius: 9px;
  padding: 18px;
}
.ship-equipped strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.ship-equipped small {
  display: block;
  font-size: 10px;
  margin-top: 4px;
}
.equipped-badge {
  margin-left: auto;
  font-size: 7px;
  letter-spacing: 0.8px;
  color: #7bb293;
}
.ship-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 15px 0 18px;
}
.locked-slot {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  padding: 16px 8px;
  border: 1px dashed #38495c80;
  border-radius: 8px;
  background: #0b172766;
  color: #60748c;
}
.locked-slot > .icon {
  width: 15px;
  height: 15px;
  color: #50637b;
}
.locked-slot span {
  font-size: 11px;
}
.locked-slot small {
  font-size: 6px;
  letter-spacing: 0.6px;
  color: #4a6078;
}
.mobile-log {
  display: none;
}
.bottom-navigation {
  display: none;
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: #020712b3;
  backdrop-filter: blur(3px);
  z-index: 49;
}
.drop-toast {
  position: fixed;
  right: 30px;
  bottom: 25px;
  z-index: 70;
  border: 1px solid color-mix(in srgb, var(--quality) 55%, transparent);
  background: #122134f5;
  border-radius: 10px;
  padding: 17px 24px;
  color: var(--quality);
  box-shadow: 0 0 30px color-mix(in srgb, var(--quality) 12%, transparent);
  font-size: 13px;
  animation: drop-enter 0.3s ease-out;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}
.settings-dialog {
  width: 460px;
  max-width: calc(100vw - 30px);
  max-height: calc(100dvh - 45px);
  overflow-y: auto;
  border: 1px solid #3c5368;
  border-radius: 16px;
  background: linear-gradient(135deg, #18273c, #0e192a);
  color: var(--text);
  padding: 25px;
  box-shadow: 0 30px 90px #0006;
}
.settings-dialog::backdrop {
  background: #030813b3;
  backdrop-filter: blur(5px);
}
.settings-dialog > .section-heading {
  margin-bottom: 25px;
}
.settings-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px;
}
.settings-option strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.settings-option small {
  display: block;
  font-size: 10px;
  margin-top: 5px;
}
.settings-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}
.settings-info {
  margin: 25px 0;
}
.settings-info h3,
.reset-section h3 {
  font-size: 13px;
}
.settings-info p,
.reset-section p {
  font-size: 11px;
  margin-top: 8px;
}
.reset-section {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-bottom: 25px;
}
.reset-section button {
  margin-top: 15px;
  font-size: 11px;
}
.settings-dialog > small {
  font-size: 8px;
  color: #526f88;
  letter-spacing: 1px;
}
.drawer-visible {
  overflow: hidden;
}
[hidden] {
  display: none !important;
}
@keyframes soft-pulse {
  50% {
    opacity: 0.45;
  }
}
@keyframes drop-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1600px) {
  .app-shell {
    grid-template-columns: 250px minmax(0, 1fr) 310px;
    gap: 30px;
  }
  .planet-hero {
    height: 340px;
  }
  .hero-planet {
    width: 235px;
    height: 235px;
  }
  .orbit-one {
    width: 350px;
    height: 145px;
  }
  .orbit-two {
    width: 295px;
    height: 295px;
  }
  .resource-card {
    padding: 24px;
  }
  .resource-card > p {
    min-height: 20px;
  }
  .resource-status {
    font-size: 8px;
  }
  .planet-copy h1 {
    font-size: 62px;
  }
}
@media (min-width: 1101px) and (max-width: 1300px) {
  .app-shell {
    grid-template-columns: 202px minmax(0, 1fr) 244px;
    gap: 18px;
    padding-right: 18px;
  }
  .sidebar {
    padding: 25px 12px;
  }
  .planet-hero {
    padding: 24px;
    height: 275px;
  }
  .planet-copy h1 {
    font-size: 44px;
  }
  .planet-scene {
    right: -20px;
    width: 43%;
  }
  .hero-planet {
    width: 153px;
    height: 153px;
  }
  .orbit-one {
    width: 235px;
    height: 110px;
  }
  .orbit-two {
    width: 205px;
    height: 205px;
  }
  .planet-coordinates span {
    display: none;
  }
  .planet-tags {
    gap: 6px;
  }
  .resource-grid,
  .processing-grid {
    gap: 9px;
  }
  .resource-card,
  .recipe-card {
    padding: 14px 12px;
  }
  .resource-card h3 {
    font-size: 14px;
  }
  .resource-status {
    font-size: 5px;
    letter-spacing: 0.6px;
  }
  .resource-heading .material-icon {
    width: 32px;
    height: 32px;
  }
  .top-xp {
    gap: 30px;
  }
  .right-panel .panel {
    padding: 16px;
  }
  .trader-card {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .sell-controls {
    grid-column: 1/-1;
  }
  .sell-controls > div {
    max-width: 300px;
  }
  .resource-card > p {
    min-height: 34px;
  }
}
@media (max-width: 1100px) {
  :root {
    --header-height: 80px;
  }
  .topbar {
    padding: 0 24px;
    gap: 20px;
  }
  .top-brand {
    min-width: 190px;
  }
  .brand {
    font-size: 16px;
  }
  .brand small {
    font-size: 7px;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .top-xp {
    gap: 25px;
    max-width: 350px;
  }
  .top-tools {
    gap: 15px;
  }
  .app-shell {
    display: block;
    padding: 0 28px;
    max-width: 920px;
  }
  .main-content {
    padding-top: 24px;
    padding-bottom: 85px;
  }
  .right-panel {
    display: none;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 280px;
    height: 100dvh;
    padding: 25px 18px;
    background: #0b1525fa;
    backdrop-filter: blur(16px);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform 0.25s ease,
      visibility 0.25s;
  }
  .sidebar.drawer-open {
    transform: translateX(0);
    visibility: visible;
  }
  .drawer-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
  }
  .drawer-title .eyebrow {
    color: #6b97a6;
    font-size: 9px;
  }
  .drawer-title .icon-button {
    border: 0;
  }
  .drawer-settings {
    display: flex;
  }
  .drawer-visible .topbar {
    z-index: 30;
  }
  .planet-hero {
    height: 300px;
  }
  .hero-planet {
    width: 210px;
    height: 210px;
  }
  .planet-copy h1 {
    font-size: 50px;
  }
  .resource-grid {
    gap: 16px;
  }
  .resource-card {
    padding: 22px;
  }
  .resource-status {
    font-size: 7px;
  }
  .bottom-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px max(18px, env(safe-area-inset-left))
      calc(8px + env(safe-area-inset-bottom));
    background: #0b1625f5;
    border-top: 1px solid #2e4257;
    backdrop-filter: blur(16px);
  }
  .bottom-navigation .nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 50px;
    border-radius: 8px;
    padding: 6px;
    color: #7e96b1;
    font-size: 9px;
    text-align: center;
  }
  .bottom-navigation .nav-button.active {
    color: var(--accent);
    background: #21495740;
    border-color: transparent;
  }
  .bottom-navigation .nav-button .icon {
    width: 20px;
    height: 20px;
  }
  .mobile-log {
    display: block;
    margin-top: 17px;
  }
  .mobile-log .section-heading h2 {
    font-size: 13px;
  }
  .mobile-log .drop-log {
    max-height: 150px;
    overflow: auto;
    scrollbar-width: thin;
  }
  .mobile-log .drop-log li {
    font-size: 11px;
  }
  .drop-toast {
    bottom: calc(95px + env(safe-area-inset-bottom));
    right: 20px;
  }
  .main-footer {
    font-size: 8px;
  }
  .trader-card {
    grid-template-columns: 1.1fr 0.8fr 1fr;
  }
  .trader-price > small {
    font-size: 7px;
  }
  .inventory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 699px) {
  :root {
    --header-height: 116px;
  }
  .topbar {
    height: var(--header-height);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 62px 43px;
    padding: 4px 16px 7px;
    gap: 0 10px;
  }
  .top-brand {
    min-width: 0;
    gap: 9px;
  }
  .top-brand .icon-button {
    width: 36px;
    min-height: 36px;
    padding: 7px;
    border: 0;
  }
  .brand {
    font-size: 13px;
    letter-spacing: 1.3px;
    gap: 7px;
  }
  .brand-accent {
    letter-spacing: 1.3px;
  }
  .brand small {
    font-size: 5px;
    letter-spacing: 1.1px;
    margin-top: 2px;
  }
  .brand-symbol .icon {
    width: 22px;
    height: 22px;
  }
  .top-tools {
    gap: 9px;
  }
  .top-tools .icon-button {
    width: 34px;
    min-height: 34px;
    padding: 7px;
    border: 0;
  }
  .top-tools .icon-button .icon {
    width: 17px;
    height: 17px;
  }
  .wallet {
    min-width: 55px;
  }
  .wallet > span {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .wallet strong {
    font-size: 17px;
  }
  .top-xp {
    grid-row: 2;
    grid-column: 1/-1;
    max-width: none;
    width: 100%;
    gap: 30px;
    align-self: center;
    padding: 0 4px;
  }
  .top-xp .xp-block {
    max-width: none;
  }
  .top-xp .xp-label {
    font-size: 8px;
  }
  .top-xp .xp-label b {
    font-size: 8px;
  }
  .top-xp progress {
    height: 3px;
    margin: 5px 0 0;
  }
  .top-xp small {
    display: none;
  }
  .app-shell {
    padding: 0 16px;
  }
  .main-content {
    padding-top: 17px;
    padding-bottom: calc(95px + env(safe-area-inset-bottom));
  }
  .breadcrumb {
    font-size: 6px;
    letter-spacing: 1.1px;
    margin-bottom: 15px;
  }
  .connection {
    font-size: 5px;
    letter-spacing: 0.5px;
  }
  .connection .status-dot {
    width: 3px;
    height: 3px;
  }
  .panel {
    padding: 20px;
    border-radius: 12px;
  }
  .planet-hero {
    height: 259px;
    padding: 24px 21px;
    align-items: center;
  }
  .planet-copy .eyebrow {
    font-size: 7px;
    gap: 10px;
    letter-spacing: 1.1px;
  }
  .tier-pill {
    font-size: 7px;
    padding: 4px 6px;
  }
  .planet-copy h1 {
    font-size: 43px;
    margin-top: 19px;
    letter-spacing: -1.7px;
  }
  .planet-copy p {
    font-size: 11px;
    line-height: 1.8;
    max-width: 200px;
    margin-top: 12px;
  }
  .planet-scene {
    right: -48px;
    top: -7px;
    width: 220px;
    opacity: 0.7;
    pointer-events: none;
  }
  .hero-planet {
    width: 140px;
    height: 140px;
  }
  .orbit-one {
    width: 200px;
    height: 100px;
  }
  .orbit-two {
    width: 185px;
    height: 185px;
  }
  .planet-marker {
    right: 52px;
    bottom: 22px;
    font-size: 5px;
    letter-spacing: 3px;
  }
  .planet-tags {
    gap: 6px;
    margin-top: 21px;
    max-width: 255px;
  }
  .planet-tags span {
    font-size: 6px;
    padding: 4px 6px;
    gap: 4px;
    background: #08182ec0;
  }
  .planet-coordinates {
    font-size: 5px;
    letter-spacing: 1px;
    margin-top: 17px;
  }
  .planet-coordinates span {
    display: none;
  }
  .planet-hero + .section-heading {
    margin: 24px 0 14px;
  }
  .section-heading {
    gap: 10px;
  }
  .section-heading .eyebrow {
    font-size: 7px;
    letter-spacing: 1.5px;
  }
  .section-heading h2 {
    font-size: 17px;
  }
  .section-note {
    font-size: 7px;
  }
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .resource-card {
    padding: 16px 13px;
  }
  .resource-heading {
    gap: 4px;
    margin-bottom: 13px;
  }
  .material-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }
  .material-icon .icon {
    width: 22px;
    height: 22px;
  }
  .resource-status {
    font-size: 5px;
    letter-spacing: 0.5px;
  }
  .resource-status .status-dot {
    width: 3px;
    height: 3px;
  }
  .resource-card h3 {
    font-size: 14px;
  }
  .resource-card > p {
    font-size: 9px;
    min-height: 32px;
    line-height: 1.7;
  }
  .resource-stats {
    margin: 14px 0;
    padding: 10px 0;
  }
  .resource-stats > span {
    font-size: 7px;
  }
  .resource-stats b {
    font-size: 15px;
  }
  .resource-card .xp-label {
    font-size: 8px;
    gap: 4px;
  }
  .resource-card .xp-label b {
    font-size: 7px;
  }
  .resource-card .xp-block small {
    font-size: 7px;
  }
  .resource-card > button {
    font-size: 10px;
    min-height: 44px;
    padding: 8px 5px;
    gap: 5px;
  }
  .resource-card > button .icon {
    width: 13px;
  }
  .resource-card.uranium {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 3px;
    padding: 17px;
  }
  .resource-card.uranium .resource-heading {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 10px;
    justify-content: flex-start;
    gap: 12px;
  }
  .resource-card.uranium h3 {
    grid-column: 1;
    grid-row: 2;
  }
  .resource-card.uranium > p {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
  }
  .resource-card.uranium .resource-stats {
    grid-column: 2;
    grid-row: 1/3;
    margin: 0;
    padding: 7px 0;
    border-top: 0;
    border-bottom: 0;
  }
  .resource-card.uranium .xp-block {
    grid-column: 1;
    grid-row: 4;
    margin-top: 10px;
  }
  .resource-card.uranium > button {
    grid-column: 2;
    grid-row: 3/5;
    margin: 10px 0 0;
    align-self: end;
  }
  .activity-panel {
    margin-top: 18px;
    padding: 20px;
  }
  .activity-header {
    gap: 10px;
  }
  .activity-header h2 {
    font-size: 15px;
    letter-spacing: -0.3px;
    line-height: 1.5;
  }
  .activity-header .eyebrow {
    font-size: 6px;
    letter-spacing: 1.4px;
  }
  .activity-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  .activity-icon .icon {
    width: 17px;
  }
  .live-badge {
    font-size: 5px;
    letter-spacing: 0.6px;
    padding: 4px;
    margin-left: auto;
  }
  .activity-progress-row {
    margin-top: 20px;
    gap: 14px;
  }
  .activity-progress-row > span {
    font-size: 12px;
    width: 55px;
  }
  .activity-bottom {
    margin-top: 15px;
  }
  .activity-bottom p {
    font-size: 9px;
  }
  .activity-bottom button {
    min-height: 44px;
    font-size: 9px;
    white-space: nowrap;
    padding: 8px 10px;
  }
  .activity-rewards {
    font-size: 8px;
    gap: 7px 12px;
    padding-top: 14px;
    margin-top: 14px;
  }
  .guide-panel {
    padding: 17px;
    gap: 12px;
    margin-top: 14px;
  }
  .guide-icon {
    width: 28px;
    height: 28px;
  }
  .guide-panel h2 {
    font-size: 13px;
  }
  .guide-panel p {
    font-size: 9px;
  }
  .guide-panel .eyebrow {
    font-size: 6px;
  }
  .guide-panel .icon-button {
    width: 30px;
    min-height: 44px;
    border: 0;
  }
  .mobile-log {
    padding: 19px;
    margin-top: 14px;
  }
  .mobile-log .section-heading {
    margin-bottom: 10px;
  }
  .mobile-log .drop-log {
    max-height: 140px;
  }
  .mobile-log .drop-log li {
    font-size: 10px;
    padding: 9px 0;
  }
  .main-footer {
    flex-direction: column;
    gap: 6px;
    align-items: center;
    font-size: 7px;
    padding-bottom: 4px;
    margin-top: 20px;
  }
  .bottom-navigation {
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
    gap: 2px;
  }
  .bottom-navigation .nav-button {
    font-size: 8px;
    min-height: 50px;
    gap: 5px;
  }
  .bottom-navigation .nav-button .icon {
    width: 19px;
    height: 19px;
  }
  .page-heading {
    padding: 8px 0 24px;
  }
  .page-heading .eyebrow {
    font-size: 7px;
    letter-spacing: 1.6px;
  }
  .page-heading h1 {
    font-size: 29px;
    letter-spacing: -1px;
    margin: 12px 0;
  }
  .page-heading p {
    font-size: 11px;
  }
  .processing-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .processing-intro h2 {
    font-size: 16px;
  }
  .processing-intro p {
    font-size: 10px;
  }
  .quality-select {
    font-size: 9px;
  }
  .quality-select select {
    font-size: 13px;
    padding: 10px 12px;
  }
  .processing-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .recipe-card {
    padding: 20px;
  }
  .recipe-heading {
    margin-bottom: 12px;
  }
  .recipe-card h3 {
    font-size: 16px;
  }
  .conversion {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
  }
  .conversion .icon {
    transform: none;
    flex-shrink: 0;
  }
  .conversion span,
  .conversion strong {
    max-width: 43%;
  }
  .recipe-meta {
    flex-direction: row;
    justify-content: space-between;
    font-size: 9px;
    margin: 16px 0;
  }
  .recipe-card button {
    min-height: 44px;
    font-size: 12px;
  }
  .tab-row {
    max-width: none;
  }
  .tab {
    min-height: 44px;
    font-size: 11px;
  }
  .laser-comparison {
    grid-template-columns: 1fr 16px 1fr;
    gap: 8px;
    margin: 20px 0;
  }
  .laser-card {
    padding: 17px 8px;
  }
  .laser-card .material-icon {
    width: 49px;
    height: 49px;
    margin-bottom: 13px;
  }
  .laser-card .material-icon .icon {
    width: 28px;
  }
  .laser-card > small {
    font-size: 5px;
    letter-spacing: 0.6px;
  }
  .laser-card h3 {
    font-size: 14px;
    margin-top: 7px;
  }
  .laser-card p {
    font-size: 9px;
  }
  .laser-card strong {
    font-size: 18px;
    margin-top: 14px;
  }
  .laser-card strong small {
    font-size: 7px;
    display: block;
  }
  .upgrade-arrow .icon {
    width: 16px;
  }
  .ingredients {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .ingredient {
    min-height: 44px;
    padding: 12px;
    font-size: 11px;
  }
  .upgrade-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
  }
  .upgrade-footer p {
    font-size: 10px;
  }
  .upgrade-footer button {
    min-height: 46px;
  }
  .inventory-toolbar {
    gap: 12px;
  }
  .filter-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .filter {
    padding: 8px 5px;
    font-size: 10px;
    min-height: 44px;
  }
  .inventory-toolbar > .secondary {
    margin-left: auto;
    min-height: 44px;
  }
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .item-card {
    padding: 16px;
    gap: 12px;
  }
  .item-card h3 {
    font-size: 12px;
  }
  .item-count {
    font-size: 20px;
  }
  .trader-banner {
    padding: 18px;
    gap: 13px;
    align-items: flex-start;
    position: relative;
  }
  .trader-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .trader-avatar .icon {
    width: 21px;
  }
  .trader-banner h2 {
    font-size: 15px;
  }
  .trader-banner p {
    font-size: 10px;
  }
  .open-badge {
    display: none;
  }
  .trader-card {
    grid-template-columns: 1fr auto;
    padding: 19px;
    gap: 17px 12px;
  }
  .trader-item h3 {
    font-size: 12px;
  }
  .trader-price > small {
    font-size: 5px;
  }
  .trader-price strong {
    font-size: 19px;
  }
  .demand {
    font-size: 7px;
  }
  .sell-controls {
    grid-column: 1/-1;
    padding-top: 14px;
    border-top: 1px solid #2c3f5466;
  }
  .sell-controls > div {
    gap: 8px;
  }
  .sell-controls input {
    min-height: 44px;
    font-size: 16px;
    max-width: none;
  }
  .sell-controls button {
    min-height: 44px;
    font-size: 11px;
    padding: 8px 14px;
  }
  .sell-controls > small {
    font-size: 9px;
    margin-top: 8px;
  }
  .ship-equipped {
    flex-wrap: wrap;
    padding: 15px;
    gap: 10px;
  }
  .ship-equipped strong {
    font-size: 11px;
  }
  .ship-equipped small {
    font-size: 9px;
  }
  .equipped-badge {
    font-size: 6px;
  }
  .ship-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .locked-slot {
    padding: 16px 8px;
  }
  .ship-blueprint {
    margin: 5px 0 20px;
  }
  .coming-soon {
    padding: 45px 20px;
  }
  .coming-soon h2 {
    font-size: 23px;
  }
  .coming-soon p {
    font-size: 11px;
  }
  .coming-soon button {
    font-size: 11px;
    width: 100%;
  }
  .empty-state {
    padding: 45px 20px;
  }
  .empty-state h3 {
    font-size: 14px;
  }
  .empty-state p {
    font-size: 11px;
  }
  .settings-dialog {
    padding: 21px;
  }
  .settings-option strong {
    font-size: 12px;
  }
  .settings-option small {
    font-size: 9px;
  }
  .settings-dialog .icon-button {
    min-height: 44px;
  }
  .drop-toast {
    font-size: 11px;
    padding: 15px;
    left: 16px;
    right: 16px;
    max-width: none;
    bottom: calc(85px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 360px) {
  .topbar {
    padding-left: 10px;
    padding-right: 10px;
  }
  .brand {
    font-size: 11px;
  }
  .brand small {
    font-size: 4px;
  }
  .brand-symbol .icon {
    width: 18px;
  }
  .top-tools {
    gap: 3px;
  }
  .app-shell {
    padding: 0 12px;
  }
  .resource-card {
    padding: 14px 10px;
  }
  .resource-card h3 {
    font-size: 13px;
  }
  .resource-status {
    font-size: 4px;
  }
  .activity-panel {
    padding: 17px;
  }
  .activity-header h2 {
    font-size: 13px;
  }
  .trader-card {
    padding: 15px;
  }
  .trader-item .material-icon {
    width: 31px;
    height: 31px;
  }
  .trader-item {
    gap: 7px;
  }
  .trader-price strong {
    font-size: 17px;
  }
  .planet-hero {
    padding: 22px 18px;
  }
  .planet-scene {
    right: -70px;
    opacity: 0.55;
  }
  .section-note {
    font-size: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.reduce-motion *,
.reduce-motion *:before,
.reduce-motion *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
/* Keep active work visible in the persistent top bar, even on another screen. */
.brand small.is-active {
  color: #8bcad2;
  letter-spacing: 1px;
}
@media (max-width: 699px) {
  .brand small {
    font-size: 6px;
    letter-spacing: 0.6px;
  }
  .brand small.is-active {
    font-size: 6px;
    letter-spacing: 0.3px;
  }
  .resource-card > p {
    font-size: 11px;
    min-height: 38px;
  }
  .resource-stats > span {
    font-size: 9px;
  }
  .resource-stats b {
    font-size: 17px;
  }
  .resource-card .xp-label {
    font-size: 9px;
  }
  .resource-card .xp-block small {
    font-size: 8px;
  }
  .resource-card > button {
    font-size: 11px;
  }
  .resource-status {
    font-size: 6px;
    letter-spacing: 0.3px;
  }
  .quality {
    font-size: 9px;
  }
  .bottom-navigation .nav-button {
    font-size: 10px;
  }
  .activity-detail,
  .activity-bottom p {
    font-size: 11px;
  }
  .activity-rewards {
    font-size: 9px;
  }
  .guide-panel p {
    font-size: 11px;
  }
  .guide-panel h2 {
    font-size: 14px;
  }
  .breadcrumb {
    font-size: 7px;
  }
  .connection {
    font-size: 6px;
  }
  .planet-tags span {
    font-size: 8px;
  }
  .main-footer {
    font-size: 8px;
  }
  .mobile-log .drop-log li {
    font-size: 11px;
  }
  .resource-card.uranium > p {
    min-height: 0;
  }
  .settings-option small {
    font-size: 11px;
  }
}
.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #273b50 transparent;
}
@media (max-width: 1100px) {
  .sidebar-bottom {
    padding-top: 25px;
    padding-bottom: 10px;
  }
  .sidebar {
    overscroll-behavior: contain;
  }
}
@media (max-width: 699px) {
  .top-brand .icon-button,
  .top-tools .icon-button {
    width: 44px;
    min-height: 44px;
  }
  .guide-panel .icon-button {
    width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
}
/* Compact activity rows: consistent on phones and desktop. */
.resource-grid,
.processing-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.resource-grid .resource-card.resource-row {
  display: block;
  padding: 13px 16px;
  grid-column: auto;
}
.resource-row-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.resource-row-top h3 {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  margin: 0;
}
.resource-row-top .material-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}
.resource-row-top .material-icon .icon {
  width: 20px;
  height: 20px;
}
.resource-row-top .cycle-button {
  flex-shrink: 0;
  min-width: 96px;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  font-size: 11px;
}
.resource-row-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 9px;
}
.cycle-time {
  width: 32px;
  flex-shrink: 0;
  font-size: 10px;
  color: #91adc4;
  text-align: center;
  white-space: nowrap;
}
.quality-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.quality-count {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--quality) 18%, transparent);
  background: color-mix(in srgb, var(--quality) 5%, transparent);
  border-radius: 4px;
  min-width: 0;
}
.quality-count small {
  font-size: 8px;
  color: var(--quality);
  opacity: 0.8;
}
.quality-count b {
  font-size: 12px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-mastery {
  margin: 9px 0 0 46px;
}
.row-mastery .xp-block {
  display: flex;
  align-items: center;
  gap: 10px;
}
.row-mastery .xp-label {
  font-size: 8px;
  min-width: 108px;
}
.row-mastery progress {
  flex: 1;
  margin: 0;
  height: 3px;
}
.row-mastery .xp-block > small {
  font-size: 8px;
  min-width: 80px;
  text-align: right;
}
.processing-grid .recipe-card.recipe-row {
  padding: 13px 16px;
}
.recipe-row .recipe-row-details {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 9px 0 0 44px;
  font-size: 10px;
  color: #7898b2;
  flex-wrap: wrap;
}
.recipe-row-details span:last-child {
  margin-left: auto;
}
.recipe-row .resource-row-top h3 {
  color: var(--quality);
}
.cycle-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --cycle-progress: 0%;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.cycle-button > span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.cycle-button .icon {
  width: 14px;
  height: 14px;
}
.cycle-button:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cycle-progress);
  background: linear-gradient(90deg, #32738c77, #70ddcf77);
  transition: width 0.1s linear;
  z-index: 0;
}
.cycle-button.running {
  background: #183443;
  color: #bcf4ef;
  border-color: #58949d;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 1px #7ac2c51a;
}
.cycle-drop {
  position: absolute;
  right: 110px;
  top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--quality) 40%, transparent);
  border-radius: 5px;
  background: #142336;
  z-index: 3;
  pointer-events: none;
  animation: cycle-loot 1.4s ease-out forwards;
}
.cycle-drop .icon {
  width: 17px;
  height: 17px;
}
.cycle-drop b {
  font-size: 10px;
  font-weight: 500;
}
@keyframes cycle-loot {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  15%,
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}
#ship-upgrade {
  margin-top: 18px;
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 9px;
}
.inventory-grid .item-card {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 6px 8px;
  padding: 10px;
  border-radius: 8px;
  align-items: center;
}
.item-card .material-icon {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  grid-row: 1/3;
}
.item-card .material-icon .icon {
  width: 17px;
  height: 17px;
}
.item-card h3 {
  font-size: 10px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.item-card .quality {
  font-size: 7px;
  padding: 1px 4px;
}
.item-card .item-count {
  grid-column: 2;
  font-size: 15px;
  line-height: 1;
  justify-self: end;
}
.item-card small {
  font-size: 8px;
}
@media (max-width: 699px) {
  .resource-grid .resource-card.resource-row,
  .processing-grid .recipe-card.recipe-row {
    padding: 12px;
  }
  .resource-row-top {
    gap: 9px;
  }
  .resource-row-top h3 {
    font-size: 13px;
  }
  .resource-row-top .material-icon {
    width: 28px;
    height: 28px;
  }
  .resource-row-top .cycle-button {
    min-width: 77px;
    min-height: 44px;
    padding: 7px 9px;
    font-size: 10px;
  }
  .resource-row-bottom {
    gap: 9px;
    margin-top: 7px;
  }
  .cycle-time {
    width: 28px;
    font-size: 9px;
  }
  .quality-counts {
    gap: 5px;
  }
  .quality-count {
    padding: 3px 4px;
    gap: 4px;
  }
  .quality-count small {
    font-size: 7px;
  }
  .quality-count b {
    font-size: 11px;
  }
  .row-mastery {
    margin-left: 37px;
    margin-top: 8px;
  }
  .row-mastery .xp-block {
    gap: 7px;
  }
  .row-mastery .xp-label {
    font-size: 7px;
    min-width: 93px;
  }
  .row-mastery .xp-block > small {
    display: none;
  }
  .recipe-row .resource-row-top .quality {
    font-size: 7px;
    padding: 2px 4px;
  }
  .recipe-row .resource-row-details {
    margin-left: 37px;
    font-size: 9px;
    gap: 6px 10px;
  }
  .recipe-row-details span:first-child {
    flex-basis: 100%;
  }
  .recipe-row-details span:last-child {
    margin-left: auto;
  }
  .cycle-drop {
    right: 85px;
    padding: 5px;
    top: 4px;
  }
  .inventory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .inventory-grid .item-card {
    grid-template-columns: 1fr;
    padding: 9px;
    gap: 5px;
  }
  .item-card .material-icon {
    grid-row: auto;
  }
  .item-card .item-count {
    grid-column: 1;
    font-size: 14px;
  }
  .item-card h3 {
    font-size: 10px;
  }
  .item-card .quality {
    font-size: 7px;
  }
  .item-card > div > small {
    font-size: 7px;
  }
}
@media (max-width: 360px) {
  .quality-count {
    gap: 3px;
    padding: 3px;
  }
  .quality-count b {
    font-size: 10px;
  }
  .resource-row-top h3 {
    font-size: 12px;
  }
  .recipe-row .resource-row-top {
    gap: 6px;
  }
  .recipe-row .resource-row-top h3 {
    font-size: 11px;
  }
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Recipe actions keep their own width within the compact flex row. */
.recipe-row .resource-row-top .cycle-button {
  width: auto;
}
.quality-count {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.quality-count small {
  white-space: nowrap;
}
@media (max-width: 699px) {
  .quality-count small {
    font-size: 6px;
    letter-spacing: -0.1px;
  }
  .quality-count b {
    font-size: 12px;
  }
}