/* ============================================================
   NEXUS COMMAND — Sci-Fi Terminal UI
   ============================================================ */
:root {
  --bg-deep:      #05080d;
  --bg-panel:     #0a111a;
  --bg-raised:    #0e1826;
  --bg-card:      #0b1420;
  --line:         #16283c;
  --sgc-blue:     #4fb6ff;
  --sgc-blue-dim: #1e5c8a;
  --green:        #46e08c;
  --amber:        #ffb84d;
  --red:          #ff5c5c;
  --text:         #d7e6f2;
  --text-dim:     #6d8399;
  --glow-blue:    0 0 8px rgba(79,182,255,.55), 0 0 24px rgba(79,182,255,.18);
  --glow-green:   0 0 8px rgba(70,224,140,.5);
  --font-term:    'Share Tech Mono', 'Courier New', monospace;
  --font-data:    'JetBrains Mono', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* Scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.015) 0px,
    rgba(255,255,255,.015) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 9999;
}

/* ============================================================
   Grundlayout
   ============================================================ */
.app {
  display: grid;
  grid-template-rows: 52px 1fr;
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  height: 100vh;
}

/* ---------------- Topbar ---------------- */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
}
.logo {
  font-family: var(--font-term);
  font-size: 17px;
  letter-spacing: 3px;
  color: var(--sgc-blue);
  text-shadow: var(--glow-blue);
  white-space: nowrap;
}
.logo span { color: var(--text-dim); text-shadow: none; }

.sys-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--green);
  letter-spacing: 1px;
}
.sys-status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: var(--glow-green);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

.topbar .spacer { flex: 1; }

.res-strip {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
}
.res-strip b { color: var(--text); font-weight: 400; }
.res-strip .u { color: var(--sgc-blue); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--sgc-blue);
  font-family: var(--font-term);
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
}

/* ---------------- Sidebar ---------------- */
.sidebar {
  grid-area: sidebar;
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sgc-blue-dim) transparent;
}
.sidebar-label {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  padding: 14px 16px 6px;
  border-bottom: 1px solid var(--line);
}
.nav-list { list-style: none; flex: 1; padding: 6px 0; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-data);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.nav-btn .idx {
  font-family: var(--font-term);
  font-size: 10px;
  color: var(--sgc-blue-dim);
  min-width: 26px;
}
.nav-btn:hover { background: var(--bg-raised); color: var(--text); }
.nav-btn.active {
  background: linear-gradient(90deg, rgba(79,182,255,.10), transparent 70%);
  border-left-color: var(--sgc-blue);
  color: var(--sgc-blue);
  text-shadow: 0 0 6px rgba(79,182,255,.45);
}
.nav-btn.active .idx { color: var(--sgc-blue); }

.nav-sep { border-top: 1px solid var(--line); margin: 6px 0; }

.nav-btn.admin { color: var(--amber); }
.nav-btn.admin .idx { color: rgba(255,184,77,.5); }
.nav-btn.admin.active {
  border-left-color: var(--amber);
  color: var(--amber);
  background: linear-gradient(90deg, rgba(255,184,77,.08), transparent 70%);
  text-shadow: 0 0 6px rgba(255,184,77,.4);
}
.nav-btn.logout { color: var(--red); }
.nav-btn.logout .idx { color: rgba(255,92,92,.5); }
.nav-btn.logout:hover { background: rgba(255,92,92,.07); }

/* ---------------- Content ---------------- */
.content {
  grid-area: content;
  overflow-y: auto;
  padding: 22px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(79,182,255,.05), transparent 60%),
    var(--bg-deep);
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(10,17,26,.75);
  padding: 26px 28px;
  min-height: 60vh;
}
.panel::before, .panel::after,
.panel .corner::before, .panel .corner::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--sgc-blue);
  border-style: solid;
}
.panel::before         { top: -1px; left: -1px;   border-width: 2px 0 0 2px; }
.panel::after          { top: -1px; right: -1px;  border-width: 2px 2px 0 0; }
.panel .corner::before { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.panel .corner::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.breadcrumb {
  font-family: var(--font-term);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.breadcrumb .sep { color: var(--sgc-blue-dim); }

.page-title {
  font-family: var(--font-term);
  font-size: 26px;
  letter-spacing: 4px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.page-title .cursor {
  display: inline-block;
  width: 12px;
  color: var(--sgc-blue);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.page-desc { color: var(--text-dim); max-width: 640px; margin-bottom: 24px; }

.placeholder {
  border: 1px dashed var(--line);
  padding: 40px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.placeholder .code {
  font-family: var(--font-term);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--sgc-blue);
  display: block;
  margin-bottom: 10px;
}

/* ============================================================
   Wiederverwendbare Karten- und Tabellen-Bausteine
   ============================================================ */
.ov-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}

.card {
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 16px 18px;
}
.card-head {
  font-family: var(--font-term);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--sgc-blue);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}
.card-head .tag { color: var(--text-dim); }

/* Planetenkarte */
.planet-card { display: flex; gap: 20px; align-items: center; }

.planet-visual {
  flex-shrink: 0;
  width: 120px; height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #3a7ab0 0%, #1d4a72 35%, #0c2038 70%, #05101d 100%);
  box-shadow:
    inset -14px -10px 30px rgba(0,0,0,.75),
    0 0 24px rgba(79,182,255,.28),
    0 0 60px rgba(79,182,255,.10);
  position: relative;
}
.planet-visual::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(79,182,255,.25);
}

.data-list { list-style: none; font-size: 12.5px; width: 100%; }
.data-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(22,40,60,.8);
}
.data-list li:last-child { border-bottom: none; }
.data-list .k { color: var(--text-dim); }
.data-list .v { color: var(--text); text-align: right; }
.data-list .v.hl { color: var(--sgc-blue); }
.data-list .v.ok { color: var(--green); }

/* Datentabellen */
.prod-table, .ev-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.prod-table th, .ev-table th {
  text-align: left;
  font-weight: 400;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
}
.prod-table td, .ev-table td { padding: 6px; border-bottom: 1px dotted rgba(22,40,60,.8); }
.prod-table tr:last-child td, .ev-table tr:last-child td { border-bottom: none; }
.prod-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.prod-table .plus { color: var(--green); }
.prod-table .cap  { color: var(--text-dim); }

.store-bar {
  height: 4px;
  background: var(--bg-raised);
  margin-top: 3px;
  overflow: hidden;
}
.store-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sgc-blue-dim), var(--sgc-blue));
}
.store-bar i.warn { background: linear-gradient(90deg, #8a6a1e, var(--amber)); }

/* Auftrags-Reihe */
.queue-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.queue-item .q-name { font-size: 13px; color: var(--text); }
.queue-item .q-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin: 4px 0 6px;
}
.q-bar {
  height: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  overflow: hidden;
}
.q-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sgc-blue-dim), var(--sgc-blue));
  box-shadow: 0 0 8px rgba(79,182,255,.5);
}
.q-idle {
  font-size: 12px;
  color: var(--text-dim);
  border: 1px dashed var(--line);
  padding: 12px;
  text-align: center;
}

/* Ereignis-Typen */
.ev-type { font-family: var(--font-term); font-size: 11px; letter-spacing: 1px; }
.ev-type.out    { color: var(--sgc-blue); }
.ev-type.in     { color: var(--green); }
.ev-type.hostil { color: var(--red); text-shadow: 0 0 6px rgba(255,92,92,.4); }
.ev-eta { font-variant-numeric: tabular-nums; color: var(--text); }
.coords { color: var(--sgc-blue); }
a.coords { text-decoration: none; cursor: pointer; }
a.coords:hover { text-decoration: underline; text-shadow: 0 0 8px rgba(79,182,255,.5); }

/* Log-Feed */
.log-feed { list-style: none; font-size: 12.5px; }
.log-feed li {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(22,40,60,.8);
}
.log-feed li:last-child { border-bottom: none; }
.log-time { font-family: var(--font-term); font-size: 11px; color: var(--text-dim); min-width: 78px; }
.log-msg  { color: var(--text); }
.log-msg .sys { color: var(--text-dim); }
.log-msg .good { color: var(--green); }
.log-msg .warn { color: var(--amber); }

.span-2 { grid-column: 1 / -1; }
.mt { margin-top: 16px; }

/* ---------------- Responsiv ---------------- */
@media (max-width: 1080px) {
  .ov-grid { grid-template-columns: 1fr; }
  .queue-row { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .nav-toggle { display: block; }
  .res-strip { display: none; }
  .sidebar {
    position: fixed;
    top: 52px; left: 0; bottom: 0;
    width: 260px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,.6);
  }
  .sidebar.open { transform: translateX(0); }
  .planet-card { flex-direction: column; }
  .panel { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.nav-btn:focus-visible, .nav-toggle:focus-visible {
  outline: 1px solid var(--sgc-blue);
  outline-offset: -1px;
}

/* ============================================================
   AUTH-SEITEN (Login / Registrierung)
   ============================================================ */
body.auth-body {
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 14px;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(79,182,255,.07), transparent 60%),
    radial-gradient(700px 500px at 85% 90%, rgba(70,224,140,.05), transparent 60%),
    var(--bg-deep);
}

/* Sternenfeld */
.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(215,230,242,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 74%, rgba(215,230,242,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(79,182,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 48%, rgba(215,230,242,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 82%, rgba(215,230,242,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 92%, rgba(79,182,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 58%, rgba(215,230,242,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 28%, rgba(215,230,242,.6) 50%, transparent 51%);
}

.auth-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--line);
  background: rgba(10,17,26,.92);
  padding: 30px 32px 26px;
}
.auth-panel::before, .auth-panel::after,
.auth-panel .corner::before, .auth-panel .corner::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--sgc-blue);
  border-style: solid;
}
.auth-panel::before         { top: -1px; left: -1px;   border-width: 2px 0 0 2px; }
.auth-panel::after          { top: -1px; right: -1px;  border-width: 2px 2px 0 0; }
.auth-panel .corner::before { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.auth-panel .corner::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.auth-logo {
  font-family: var(--font-term);
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--sgc-blue);
  text-shadow: var(--glow-blue);
  text-align: center;
  margin-bottom: 2px;
}
.auth-logo span { color: var(--text-dim); text-shadow: none; }

.auth-sub {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 24px;
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.field input, .field select {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field input::placeholder { color: rgba(109,131,153,.6); }
.field input:focus, .field select:focus {
  border-color: var(--sgc-blue);
  box-shadow: 0 0 0 1px rgba(79,182,255,.35), 0 0 12px rgba(79,182,255,.15);
}
.field .hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--text-dim);
  margin: 4px 0 18px;
}
.check-row input { margin-top: 3px; accent-color: var(--sgc-blue); }
.check-row a { color: var(--sgc-blue); text-decoration: none; }
.check-row a:hover { text-decoration: underline; }

.btn-primary {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, rgba(79,182,255,.18), rgba(79,182,255,.08));
  border: 1px solid var(--sgc-blue);
  color: var(--sgc-blue);
  font-family: var(--font-term);
  font-size: 13px;
  letter-spacing: 3px;
  padding: 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .12s, box-shadow .12s, color .12s;
}
.btn-primary:hover {
  background: rgba(79,182,255,.25);
  box-shadow: 0 0 16px rgba(79,182,255,.35);
  color: #eaf6ff;
}
.btn-primary:focus-visible { outline: 1px solid var(--sgc-blue); outline-offset: 2px; }

.auth-alt {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.auth-alt a { color: var(--sgc-blue); text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.auth-notice {
  font-size: 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  background: rgba(255,184,77,.06);
  color: var(--amber);
  padding: 10px 12px;
  margin-bottom: 18px;
}
.auth-notice.ok {
  border-left-color: var(--green);
  background: rgba(70,224,140,.06);
  color: var(--green);
}

.auth-footer {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(109,131,153,.55);
}

/* ============================================================
   KONSTRUKTE — Gebäudeliste
   ============================================================ */
.b-list { display: flex; flex-direction: column; gap: 14px; }

.b-card {
  display: grid;
  grid-template-columns: 84px 1fr 250px;
  gap: 18px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 16px 18px;
  transition: border-color .12s;
}
.b-card:hover { border-color: var(--sgc-blue-dim); }
.b-card.building { border-color: var(--sgc-blue-dim); }
.b-card.locked { opacity: .55; }

/* Glyph-Kachel mit Stufen-Badge */
.b-glyph {
  position: relative;
  width: 84px; height: 84px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(79,182,255,.10), transparent 55%),
    var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-term);
  font-size: 26px;
  color: var(--sgc-blue);
  text-shadow: 0 0 10px rgba(79,182,255,.5);
}
.b-glyph .lvl {
  position: absolute;
  bottom: -1px; right: -1px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--bg-deep);
  background: var(--sgc-blue);
  padding: 1px 6px;
  text-shadow: none;
}
.b-card.locked .b-glyph { color: var(--text-dim); text-shadow: none; }
.b-card.locked .b-glyph .lvl { background: var(--text-dim); }

/* Infospalte */
.b-name {
  font-size: 14.5px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.b-name .b-cat {
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  padding: 1px 6px;
}
.b-desc { font-size: 12px; color: var(--text-dim); margin: 4px 0 8px; max-width: 560px; }

.b-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.b-stats .k { color: var(--text-dim); }
.b-stats .v { color: var(--text); }
.b-stats .v.plus { color: var(--green); }
.b-stats .arrow { color: var(--sgc-blue); }

/* Bau-Fortschritt innerhalb der Karte */
.b-progress { margin-top: 10px; max-width: 560px; }
.b-progress .q-meta { margin-top: 0; }

/* Aktionsspalte (Kosten + Button) */
.b-action {
  border-left: 1px solid var(--line);
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.cost-list { list-style: none; font-size: 12px; }
.cost-list li {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.cost-list .ck { color: var(--text-dim); }
.cost-list .cv { color: var(--text); font-variant-numeric: tabular-nums; }
.cost-list .cv.miss { color: var(--red); }
.cost-list .ct { color: var(--sgc-blue); }

.btn-build {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, rgba(70,224,140,.16), rgba(70,224,140,.06));
  border: 1px solid var(--green);
  color: var(--green);
  font-family: var(--font-term);
  font-size: 11px;
  letter-spacing: 2px;
  padding: 9px 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .12s, box-shadow .12s;
}
.btn-build:hover {
  background: rgba(70,224,140,.22);
  box-shadow: 0 0 12px rgba(70,224,140,.3);
}
.btn-build:disabled {
  border-color: var(--line);
  color: var(--text-dim);
  background: var(--bg-raised);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-build.busy {
  border-color: var(--sgc-blue-dim);
  color: var(--sgc-blue);
  background: rgba(79,182,255,.08);
  cursor: default;
}

/* Responsiv: Karte stapelt */
@media (max-width: 900px) {
  .b-card { grid-template-columns: 64px 1fr; }
  .b-glyph { width: 64px; height: 64px; font-size: 20px; }
  .b-action {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 12px;
  }
}

/* ============================================================
   KONSTRUKTE — Feste Bauplätze (Raster) + Detailpanel
   ============================================================ */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 18px 10px 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .12s, background .12s, transform .12s;
}
.slot:hover { border-color: var(--sgc-blue-dim); background: var(--bg-raised); }

.slot .slot-no {
  position: absolute;
  top: -1px; left: -1px;
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 1px 6px;
}

.slot .s-glyph {
  font-family: var(--font-term);
  font-size: 30px;
  color: var(--sgc-blue);
  text-shadow: 0 0 10px rgba(79,182,255,.5);
  line-height: 1.2;
}
.slot .s-name {
  font-size: 11.5px;
  text-align: center;
  color: var(--text);
  line-height: 1.3;
}
.slot .s-lvl {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.slot .s-state {
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 1px;
}
.slot .s-state.build { color: var(--sgc-blue); animation: pulse 1.6s ease-in-out infinite; }
.slot .s-state.lock  { color: var(--text-dim); }

/* Ausgewählter Bauplatz */
.slot.sel {
  border-color: var(--sgc-blue);
  background: linear-gradient(180deg, rgba(79,182,255,.10), var(--bg-card));
  box-shadow: 0 0 14px rgba(79,182,255,.22), inset 0 0 20px rgba(79,182,255,.05);
}
.slot.sel .slot-no { color: var(--sgc-blue); border-color: var(--sgc-blue); }

/* Zustände */
.slot.building { border-color: var(--sgc-blue-dim); }
.slot.locked { opacity: .5; }
.slot.locked .s-glyph { color: var(--text-dim); text-shadow: none; }

/* Verbindungslinie Raster -> Detailpanel */
.slot-connector {
  height: 14px;
  width: 1px;
  background: var(--sgc-blue);
  margin: -16px auto 2px;
  box-shadow: 0 0 6px rgba(79,182,255,.5);
}

@media (max-width: 1100px) { .slot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .slot-grid { grid-template-columns: repeat(2, 1fr); } }

/* Konstrukte: Reihen-Beschriftung + 6-spaltige Produktionsreihe */
.slot-label {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin: 4px 0 8px;
}
.slot-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1250px) { .slot-grid.cols-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .slot-grid.cols-6 { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   KONSTRUKTE — Detailansicht mit Bild + Stufen-Analyse
   ============================================================ */
.b-card.detail { grid-template-columns: 180px 1fr 250px; }

.b-img {
  position: relative;
  width: 180px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(79,182,255,.08), transparent 60%),
    var(--bg-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.b-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.b-img.placeholder { border-style: dashed; }
.b-img .ph-glyph {
  font-family: var(--font-term);
  font-size: 44px;
  color: var(--sgc-blue);
  text-shadow: 0 0 14px rgba(79,182,255,.5);
  line-height: 1;
}
.b-img .ph-text {
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.b-img .lvl {
  position: absolute;
  bottom: -1px; right: -1px;
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--bg-deep);
  background: var(--sgc-blue);
  padding: 1px 7px;
}

/* Lore-Text unterhalb der Kurzbeschreibung */
.b-lore {
  font-size: 12px;
  color: var(--text-dim);
  border-left: 2px solid var(--sgc-blue-dim);
  padding: 6px 10px;
  margin: 8px 0 10px;
  max-width: 560px;
  font-style: italic;
}

/* Stufen-Analyse: Aktuell vs. Nächste Stufe */
.cmp-title {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--sgc-blue);
  margin: 12px 0 6px;
}
.cmp-table { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 12.5px; }
.cmp-table th {
  text-align: right;
  font-weight: 400;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
}
.cmp-table th:first-child { text-align: left; }
.cmp-table td {
  padding: 5px 8px;
  border-bottom: 1px dotted rgba(22,40,60,.8);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cmp-table td:first-child { text-align: left; color: var(--text-dim); }
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table .cur  { color: var(--text); }
.cmp-table .nxt  { color: var(--sgc-blue); }
.cmp-table .diff.up   { color: var(--green); }
.cmp-table .diff.down { color: var(--amber); }

@media (max-width: 900px) {
  .b-card.detail { grid-template-columns: 1fr; }
  .b-img { width: 100%; max-width: 280px; margin: 0 auto; }
}

/* ============================================================
   SLOT-KACHELN v2: Bild links, Infos rechts
   (überschreibt das ältere zentrierte Layout)
   ============================================================ */
.slot {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 12px 12px;
  text-align: left;
}

.slot-img {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(79,182,255,.10), transparent 60%),
    var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.slot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slot-img .g {
  font-family: var(--font-term);
  font-size: 24px;
  color: var(--sgc-blue);
  text-shadow: 0 0 10px rgba(79,182,255,.5);
}
.slot.locked .slot-img .g { color: var(--text-dim); text-shadow: none; }
.slot.sel .slot-img { border-color: var(--sgc-blue); }

.slot-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.slot-info .s-name { text-align: left; }

@media (max-width: 700px) {
  .slot { grid-template-columns: 48px 1fr; gap: 8px; }
  .slot-img { width: 48px; height: 48px; }
  .slot-img .g { font-size: 18px; }
}

/* Stückzahl-Eingabe (Orbital-Schmiede / Defensiv-Raster) */
.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-row label {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.qty-row input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
}
.qty-row input:focus {
  border-color: var(--sgc-blue);
  box-shadow: 0 0 0 1px rgba(79,182,255,.35);
}

/* ============================================================
   STERNEN-AETHER — Galaxieansicht
   ============================================================ */
.gal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.gal-nav .lbl {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.gal-nav .val {
  font-family: var(--font-term);
  font-size: 15px;
  color: var(--sgc-blue);
  text-shadow: 0 0 8px rgba(79,182,255,.4);
  min-width: 44px;
  text-align: center;
}
.gal-btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--sgc-blue);
  font-family: var(--font-term);
  font-size: 12px;
  padding: 5px 11px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.gal-btn:hover { background: rgba(79,182,255,.12); border-color: var(--sgc-blue-dim); }
.gal-nav .sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.gal-nav .home { margin-left: auto; }

/* Systemtabelle */
.gal-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gal-table th {
  text-align: left;
  font-weight: 400;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.gal-table td {
  padding: 7px 8px;
  border-bottom: 1px dotted rgba(22,40,60,.8);
  vertical-align: middle;
}
.gal-table tr:hover td { background: rgba(79,182,255,.04); }
.gal-table tr.own td { background: rgba(79,182,255,.07); }
.gal-table tr:last-child td { border-bottom: none; }

.pos-no {
  font-family: var(--font-term);
  font-size: 11px;
  color: var(--text-dim);
}

/* Planeten-Punkt + Name */
.pl { display: flex; align-items: center; gap: 9px; }
.pl .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #3a7ab0, #10304d 70%);
  box-shadow: 0 0 8px rgba(79,182,255,.35);
}
.pl.own .dot    { background: radial-gradient(circle at 35% 30%, #6fc6ff, #1e5c8a 70%); box-shadow: 0 0 10px rgba(79,182,255,.7); }
.pl.ally .dot   { background: radial-gradient(circle at 35% 30%, #6fe0a8, #14532d 70%); box-shadow: 0 0 8px rgba(70,224,140,.5); }
.pl.enemy .dot  { background: radial-gradient(circle at 35% 30%, #ff8a8a, #6b1d1d 70%); box-shadow: 0 0 8px rgba(255,92,92,.5); }
.pl.inactive .dot { background: radial-gradient(circle at 35% 30%, #5a6a78, #202b34 70%); box-shadow: none; }
.pl .p-name { color: var(--text); }
.pl.own .p-name { color: var(--sgc-blue); }
.pl.empty .p-name { color: var(--text-dim); font-style: italic; }

.p-tag {
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.p-tag.own   { color: var(--sgc-blue); border-color: var(--sgc-blue-dim); }
.p-tag.ally  { color: var(--green); border-color: rgba(70,224,140,.4); }
.p-tag.enemy { color: var(--red); border-color: rgba(255,92,92,.4); }

.gal-syn { color: var(--sgc-blue); }
.gal-syn.ally { color: var(--green); }
.gal-dim { color: var(--text-dim); }
.moon-ico { color: var(--text); font-size: 13px; }
.debris { color: var(--amber); font-size: 11px; white-space: nowrap; }

/* Aktions-Buttons je Zeile */
.act-row { display: flex; gap: 6px; }
.act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: none;
  transition: color .12s, border-color .12s, background .12s;
}
.act-btn:hover { color: var(--sgc-blue); border-color: var(--sgc-blue-dim); background: rgba(79,182,255,.1); }
.act-btn.atk:hover { color: var(--red); border-color: rgba(255,92,92,.5); background: rgba(255,92,92,.08); }
.act-btn.col:hover { color: var(--green); border-color: rgba(70,224,140,.5); background: rgba(70,224,140,.08); }

/* Legende */
.gal-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-dim);
}
.gal-legend .pl { gap: 6px; }
.gal-legend .dot { width: 10px; height: 10px; }

@media (max-width: 820px) {
  .gal-table .hide-m { display: none; }
}

/* ============================================================
   STERNEN-AETHER v2 — luftiger Sektor-Scan mit Planeten-Visuals
   (überschreibt die kompakte Erstfassung)
   ============================================================ */
.gal-table td { padding: 12px 10px; }
.gal-table th { padding: 8px 10px; }

/* Planeten-Kugel (CSS) — wird durch img/planeten/<typ>.png ersetzt, falls vorhanden */
.pv {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset -8px -6px 14px rgba(0,0,0,.7), 0 0 10px rgba(79,182,255,.15);
  overflow: hidden;
}
.pv img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.pv.terra  { background: radial-gradient(circle at 35% 30%, #55b07a 0%, #2c6e8f 45%, #123049 80%); }
.pv.eis    { background: radial-gradient(circle at 35% 30%, #cfeaff 0%, #7db9d8 45%, #2a5a78 85%); }
.pv.wueste { background: radial-gradient(circle at 35% 30%, #e0b06a 0%, #a3672f 50%, #4d2c14 85%); }
.pv.gas    { background: radial-gradient(circle at 35% 30%, #b48ae0 0%, #6a4a9e 50%, #2b1d4d 85%); }
.pv.lava   { background: radial-gradient(circle at 35% 30%, #ff9a5c 0%, #c2452a 50%, #4d130a 85%); }
.pv.grau   { background: radial-gradient(circle at 35% 30%, #8a97a3 0%, #4c5964 50%, #1e262e 85%); box-shadow: inset -8px -6px 14px rgba(0,0,0,.7); }

/* Eigene Welt: leuchtender Orbitring */
.pv.own::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(79,182,255,.7);
  box-shadow: 0 0 10px rgba(79,182,255,.5);
}
.pv.own { overflow: visible; }
.pv.own img, .pv.own { border-radius: 50%; }

/* Leerer Orbit (unbesiedelt) */
.pv.empty {
  background: none;
  border: 1px dashed var(--line);
  box-shadow: none;
}

/* Mond-Kugel */
.mv {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background: radial-gradient(circle at 35% 30%, #cfd6dc 0%, #7d8a94 50%, #39434b 85%);
  box-shadow: inset -4px -3px 7px rgba(0,0,0,.6);
  overflow: hidden;
}
.mv img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Planeten-Zelle: Kugel + zweizeiliger Text */
.pcell { display: flex; align-items: center; gap: 12px; }
.pcell .p-name { font-size: 13px; }
.pcell .p-sub {
  display: block;
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-top: 2px;
}
.pcell.own .p-name { color: var(--sgc-blue); }
.pcell.own .p-sub  { color: var(--sgc-blue-dim); }
.pcell.empty .p-name { color: var(--text-dim); font-style: italic; font-size: 12px; }

/* Trümmerfeld-Zelle */
.debris-cell { display: flex; align-items: center; gap: 8px; }
.debris-ico {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,184,77,.4);
  border-radius: 50%;
  color: var(--amber);
  font-size: 12px;
  background: rgba(255,184,77,.06);
}
.debris-amt { color: var(--amber); font-size: 11.5px; line-height: 1.3; }

/* Aktions-Buttons v2: Pill mit Icon + Beschriftung */
.act-row { gap: 8px; flex-wrap: wrap; }
.act-btn {
  width: auto; height: auto;
  gap: 6px;
  padding: 6px 11px;
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--sgc-blue);
  border-color: var(--sgc-blue-dim);
  background: rgba(79,182,255,.06);
}
.act-btn:hover { background: rgba(79,182,255,.16); color: #eaf6ff; border-color: var(--sgc-blue); box-shadow: 0 0 10px rgba(79,182,255,.25); }
.act-btn.atk { color: var(--red); border-color: rgba(255,92,92,.45); background: rgba(255,92,92,.05); }
.act-btn.atk:hover { background: rgba(255,92,92,.15); color: #ffd9d9; border-color: var(--red); box-shadow: 0 0 10px rgba(255,92,92,.25); }
.act-btn.col { color: var(--green); border-color: rgba(70,224,140,.45); background: rgba(70,224,140,.05); }
.act-btn.col:hover { background: rgba(70,224,140,.15); color: #d9ffe9; border-color: var(--green); box-shadow: 0 0 10px rgba(70,224,140,.25); }
.act-btn .ico { font-size: 12px; }

@media (max-width: 1100px) {
  .act-btn span.txt { display: none; }
  .act-btn { padding: 6px 9px; }
}

/* ============================================================
   VANGUARD-DIVISION — Flottenkommando
   ============================================================ */
.van-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1080px) { .van-grid { grid-template-columns: 1fr; } }

/* Schiffsliste */
.fleet-list { display: flex; flex-direction: column; }
.fleet-row {
  display: grid;
  grid-template-columns: 44px 1fr 110px 140px;
  gap: 12px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px dotted rgba(22,40,60,.8);
}
.fleet-row:last-child { border-bottom: none; }
.fleet-row.none { opacity: .45; }

.f-ico {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(79,182,255,.10), transparent 60%), var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-term);
  font-size: 18px;
  color: var(--sgc-blue);
  overflow: hidden;
}
.f-ico img { width: 100%; height: 100%; object-fit: cover; }

.f-name { font-size: 13px; color: var(--text); }
.f-avail {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-align: right;
}
.f-qty { display: flex; gap: 6px; align-items: center; }
.f-qty input {
  width: 100%;
  min-width: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 13px;
  padding: 7px 9px;
  outline: none;
  text-align: right;
}
.f-qty input:focus { border-color: var(--sgc-blue); box-shadow: 0 0 0 1px rgba(79,182,255,.35); }
.max-link {
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--sgc-blue);
  border: 1px solid var(--sgc-blue-dim);
  padding: 5px 7px;
  cursor: pointer;
  background: rgba(79,182,255,.06);
  user-select: none;
}
.max-link:hover { background: rgba(79,182,255,.16); }

/* Ziel & Mission */
.coord-row { display: flex; gap: 10px; }
.coord-row .field { flex: 1; margin-bottom: 0; }
.coord-row input { text-align: center; }

.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 6px 0 4px;
}
.mission-opt input { display: none; }
.mission-opt span {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-dim);
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 9px 11px;
  cursor: pointer;
  transition: all .12s;
}
.mission-opt input:checked + span {
  border-color: var(--sgc-blue);
  color: var(--sgc-blue);
  background: rgba(79,182,255,.10);
  box-shadow: 0 0 10px rgba(79,182,255,.2);
}
.mission-opt span:hover { color: var(--text); }

/* Geschwindigkeit */
.speed-row { display: flex; gap: 6px; flex-wrap: wrap; }
.speed-row .mission-opt { flex: 1; }
.speed-row .mission-opt span { justify-content: center; padding: 7px 4px; }

/* Missions-Zusammenfassung */
.mission-sum { margin-top: 4px; }
.mission-sum .data-list { font-size: 12px; }

.launch-note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--green);
  background: rgba(70,224,140,.06);
  color: var(--green);
  font-size: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

/* ============================================================
   VANGUARD v2 — Schiffsauswahl als Bild-Kacheln, mehr Luft
   ============================================================ */
.ship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.ship-card {
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .12s;
}
.ship-card:hover { border-color: var(--sgc-blue-dim); }
.ship-card.none { opacity: .45; }
.ship-card.chosen { border-color: var(--sgc-blue); box-shadow: 0 0 12px rgba(79,182,255,.18); }

/* Bildfläche der Schiffskachel */
.sc-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(79,182,255,.10), transparent 60%),
    var(--bg-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-img .g {
  font-family: var(--font-term);
  font-size: 34px;
  color: var(--sgc-blue);
  text-shadow: 0 0 12px rgba(79,182,255,.5);
  line-height: 1;
}
.sc-img .ph {
  font-family: var(--font-term);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
}
.ship-card.none .sc-img .g { color: var(--text-dim); text-shadow: none; }

.sc-name { font-size: 13px; color: var(--text); line-height: 1.3; }

.sc-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
}
.sc-meta b { color: var(--sgc-blue); font-weight: 400; font-size: 12px; }
.ship-card.none .sc-meta b { color: var(--text-dim); }

.sc-qty { display: flex; gap: 6px; }
.sc-qty input {
  flex: 1;
  min-width: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 13px;
  padding: 8px 10px;
  text-align: right;
  outline: none;
}
.sc-qty input:focus { border-color: var(--sgc-blue); box-shadow: 0 0 0 1px rgba(79,182,255,.35); }

/* ============================================================
   VANGUARD v3 — Schiffskacheln im Slot-Stil, fest 4 je Reihe
   (überschreibt die v2-Kachel-Styles)
   ============================================================ */
.ship-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1250px) { .ship-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .ship-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ship-grid { grid-template-columns: 1fr; } }

.ship-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px 12px;
  align-items: center;
  padding: 14px 12px 12px;
}

/* Bildbox exakt wie bei den Gebäude-Slots */
.ship-card .slot-img { width: 64px; height: 64px; }

.sc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-name { font-size: 12.5px; }
.sc-meta { font-size: 9px; }

.sc-qty { grid-column: 1 / -1; }

/* ============================================================
   ADMIN-PORTAL
   ============================================================ */
.admin-denied {
  border: 1px solid var(--red);
  border-left: 3px solid var(--red);
  background: rgba(255,92,92,.06);
  color: var(--red);
  padding: 18px 20px;
  font-size: 13px;
}

.admin-search {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.admin-search input {
  flex: 1;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
}
.admin-search input:focus { border-color: var(--sgc-blue); box-shadow: 0 0 0 1px rgba(79,182,255,.35); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-table th {
  text-align: left; font-weight: 400; color: var(--text-dim);
  font-size: 10px; letter-spacing: 1px; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.admin-table td { padding: 9px 10px; border-bottom: 1px dotted rgba(22,40,60,.8); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(79,182,255,.04); }
.admin-table tr.sel td { background: rgba(79,182,255,.08); }

.role-tag {
  font-family: var(--font-term); font-size: 9px; letter-spacing: 1px;
  padding: 2px 7px; border: 1px solid var(--line); color: var(--text-dim);
}
.role-tag.admin { color: var(--amber); border-color: rgba(255,184,77,.4); }
.role-tag.banned { color: var(--red); border-color: rgba(255,92,92,.4); }

.admin-action-btn {
  font-family: var(--font-term); font-size: 9px; letter-spacing: 1px;
  padding: 4px 9px; border: 1px solid var(--line); background: var(--bg-raised);
  color: var(--sgc-blue); cursor: pointer; text-decoration: none; display: inline-block;
}
.admin-action-btn:hover { background: rgba(79,182,255,.12); border-color: var(--sgc-blue-dim); }
.admin-action-btn.danger { color: var(--red); }
.admin-action-btn.danger:hover { background: rgba(255,92,92,.1); border-color: var(--red); }

.admin-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
@media (max-width: 800px) { .admin-edit-grid { grid-template-columns: 1fr; } }

.admin-section-title {
  font-family: var(--font-term); font-size: 10px; letter-spacing: 2px;
  color: var(--sgc-blue); margin: 14px 0 8px; grid-column: 1 / -1;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}

/* Topbar: Kommandant + Logout (echte Session) */
.commander-tag {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-term); font-size: 11px; letter-spacing: 1.5px;
  padding-right: 16px; margin-right: 4px; border-right: 1px solid var(--line);
}
.commander-tag .c-name { color: var(--sgc-blue); }
.commander-tag .c-logout { color: var(--text-dim); text-decoration: none; font-size: 14px; transition: color .12s; }
.commander-tag .c-logout:hover { color: var(--red); }

/* ============================================================
   TOPBAR v2 — Ressourcen mittig, Hover-Popups mit Produktionsdetails
   ============================================================ */

/* Zwei gleich große Spacer links/rechts der Ressourcenleiste
   zentrieren sie unabhängig von der Breite von Logo/Kommandant. */
.topbar .spacer { flex: 1 1 0; }

.res-strip {
  display: flex;
  gap: 22px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.res-strip b { color: var(--text); font-weight: 400; }
.res-strip .u { color: var(--sgc-blue); }

.res-item {
  position: relative;
  cursor: default;
  padding: 4px 2px;
}

/* Hover-Popup mit Produktions-/Kapazitätsdetails */
/* display:none statt nur opacity/visibility — dadurch nimmt das
   Popup NULL Platz im Layout ein, solange nicht gehovert wird.
   Robuster gegen Layout-Kollisionen als die reine Opacity-Lösung. */
.res-strip { flex-wrap: nowrap; }
.res-pop {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--sgc-blue-dim);
  box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(79,182,255,.08);
  padding: 10px 12px;
  font-size: 11.5px;
  text-align: left;
  white-space: normal;
  z-index: 200;
}
.res-item:hover .res-pop {
  display: block;
}
.res-pop-title {
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--sgc-blue);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.res-pop-row { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; color: var(--text); }
.res-pop-row .ok   { color: var(--green); }
.res-pop-row .warn { color: var(--amber); }
.res-pop-hint {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dotted rgba(22,40,60,.8);
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 1.4;
}

/* kleine Pfeilspitze am Popup, zeigt nach oben auf die Ressource */
.res-pop::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--sgc-blue-dim);
}

@media (max-width: 900px) {
  .res-strip { display: none; } /* Mobil: Popups wären ohnehin unbrauchbar ohne Hover */
}

/* Energie-Mangel: Wert in der Topbar bernsteinfarben statt blau */
.res-strip b.u.warn { color: var(--amber); }

/* ============================================================
   SYNDIKAT — Allianzen
   ============================================================ */
.syn-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px 14px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 14px;
  margin-bottom: 12px;
}
.syn-card.own { border-left: 2px solid var(--sgc-blue); }

.syn-emblem {
  width: 64px; height: 64px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(79,182,255,.12), transparent 60%), var(--bg-raised);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-term); font-size: 15px; letter-spacing: .5px;
  color: var(--sgc-blue); text-shadow: 0 0 8px rgba(79,182,255,.4);
  overflow: hidden; text-align: center; line-height: 1.15;
}
.syn-emblem img { width: 100%; height: 100%; object-fit: cover; }

.syn-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.syn-tag { color: var(--sgc-blue); font-family: var(--font-term); font-size: 13px; }
.syn-name { font-size: 14px; color: var(--text); }
.syn-desc { font-size: 12px; color: var(--text-dim); margin: 4px 0 8px; max-width: 620px; }

.syn-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px; }
.syn-stats .k { color: var(--text-dim); }
.syn-stats .v { color: var(--text); }

.syn-foot { grid-column: 1 / -1; margin-top: 8px; display: flex; justify-content: flex-end; gap: 8px; }

.mem-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mem-table th {
  text-align: left; font-weight: 400; color: var(--text-dim);
  font-size: 10px; letter-spacing: 1px; padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.mem-table td { padding: 7px 8px; border-bottom: 1px dotted rgba(22,40,60,.8); }
.mem-table tr:last-child td { border-bottom: none; }
.mem-table tr.me td { background: rgba(79,182,255,.05); }
.rank-tag {
  font-family: var(--font-term); font-size: 9px; letter-spacing: 1px;
  color: var(--sgc-blue); border: 1px solid var(--sgc-blue-dim); padding: 1px 6px;
}
.rank-tag.leader { color: var(--amber); border-color: rgba(255,184,77,.4); }

/* ============================================================
   KOMMANDO-ZUWEISUNG — Offiziere (nutzt .slot/.slot-img/.b-card
   aus dem Bau-Muster, hier nur die Ergänzungen)
   ============================================================ */
.off-active-badge {
  position: absolute; top: -1px; right: -1px;
  font-family: var(--font-term); font-size: 8px; letter-spacing: 1px;
  color: var(--bg-deep); background: var(--green); padding: 1px 6px;
}
.off-perks { list-style: none; font-size: 12.5px; margin: 10px 0; }
.off-perks li { padding: 4px 0; display: flex; gap: 8px; }
.off-perks li::before { content: "▸"; color: var(--sgc-blue); }

.duration-row { display: flex; gap: 8px; margin: 10px 0; }
.duration-row .mission-opt { flex: 1; }
.duration-row .mission-opt span { flex-direction: column; gap: 2px; text-align: center; padding: 10px 6px; }
.duration-row .mission-opt .d-price { color: var(--sgc-blue); font-size: 11px; }

/* ============================================================
   DEPOT-TERMINAL — Kommando-Kredits aufladen
   ============================================================ */
.krc-balance {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--sgc-blue-dim);
  background: linear-gradient(135deg, rgba(79,182,255,.08), transparent 60%), var(--bg-card);
  padding: 18px 22px; margin-bottom: 18px;
}
.krc-balance .big-num { font-family: var(--font-term); font-size: 34px; color: var(--sgc-blue); text-shadow: var(--glow-blue); }
.krc-balance .lbl { font-family: var(--font-term); font-size: 10px; letter-spacing: 2px; color: var(--text-dim); }

.pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .pay-grid { grid-template-columns: repeat(2, 1fr); } }
.pay-opt input { display: none; }
.pay-opt span {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--bg-raised);
  color: var(--text-dim); font-family: var(--font-term); font-size: 11px;
  letter-spacing: 1px; padding: 14px 8px; cursor: pointer; transition: all .12s;
}
.pay-opt .pay-ico { font-size: 20px; }
.pay-opt input:checked + span {
  border-color: var(--sgc-blue); color: var(--sgc-blue);
  background: rgba(79,182,255,.10); box-shadow: 0 0 10px rgba(79,182,255,.2);
}

.tx-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tx-table th {
  text-align: left; font-weight: 400; color: var(--text-dim);
  font-size: 10px; letter-spacing: 1px; padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.tx-table td { padding: 7px 8px; border-bottom: 1px dotted rgba(22,40,60,.8); }
.tx-table tr:last-child td { border-bottom: none; }

/* ============================================================
   MACHT-INDEX — Rangliste (nutzt .gal-table aus Sternen-Aether)
   ============================================================ */
.rank-pos { font-family: var(--font-term); font-size: 13px; color: var(--text-dim); width: 40px; }
.rank-pos.top1 { color: #ffd75e; text-shadow: 0 0 8px rgba(255,215,94,.5); }
.rank-pos.top2 { color: #d7dee6; text-shadow: 0 0 8px rgba(215,222,230,.4); }
.rank-pos.top3 { color: #e0a468; text-shadow: 0 0 8px rgba(224,164,104,.4); }

.rank-name { display: flex; align-items: center; gap: 10px; }
.rank-name .r-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--sgc-blue-dim); }
.rank-name.me .r-dot { background: var(--sgc-blue); box-shadow: 0 0 6px rgba(79,182,255,.6); }
.rank-name .r-nm { color: var(--text); }
.rank-name.me .r-nm { color: var(--sgc-blue); }

.gal-table tr.sep td { padding: 6px; text-align: center; color: var(--text-dim); letter-spacing: 4px; border-bottom: none; }
.gal-table th.num, .gal-table td.num { text-align: right; }

/* ============================================================
   DEBRIEFING — Feedback
   ============================================================ */
.cat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 700px) { .cat-row { grid-template-columns: repeat(2, 1fr); } }
.cat-tile { display: none; }
.cat-tile-label {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--bg-raised);
  color: var(--text-dim); font-family: var(--font-term); font-size: 11px; letter-spacing: 1px;
  padding: 16px 8px; cursor: pointer; transition: all .12s;
}
.cat-tile-label .ico { font-size: 20px; }
.cat-tile:checked + .cat-tile-label {
  border-color: var(--sgc-blue); color: var(--sgc-blue);
  background: rgba(79,182,255,.10); box-shadow: 0 0 10px rgba(79,182,255,.2);
}

.star-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 6px 0 14px; }
.star-row input { display: none; }
.star-row label {
  font-size: 26px; color: var(--line); cursor: pointer; transition: color .1s; line-height: 1;
}
.star-row input:checked ~ label,
.star-row label:hover,
.star-row label:hover ~ label { color: var(--amber); }
.star-nums { display: flex; flex-direction: row; gap: 22px; margin-top: -10px; margin-bottom: 14px; font-size: 10px; color: var(--text-dim); }

.fb-history-item {
  border: 1px solid var(--line); background: var(--bg-card);
  padding: 12px 14px; margin-bottom: 10px;
}
.fb-history-item .fb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.fb-history-item .fb-cat { font-family: var(--font-term); font-size: 10px; letter-spacing: 1px; color: var(--sgc-blue); }
.fb-history-item .fb-date { font-size: 10.5px; color: var(--text-dim); }
.fb-history-item .fb-msg { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.fb-status {
  font-family: var(--font-term); font-size: 9px; letter-spacing: 1px; padding: 2px 7px;
  border: 1px solid var(--line); color: var(--text-dim);
}
.fb-status.open { color: var(--amber); border-color: rgba(255,184,77,.4); }
.fb-status.progress { color: var(--sgc-blue); border-color: var(--sgc-blue-dim); }
.fb-status.done { color: var(--green); border-color: rgba(107,224,107,.4); }

/* ============================================================
   BÖRSEN-TERMINAL — Rohstoffhandel
   ============================================================ */
.item-slot {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); background: var(--bg-card);
  padding: 12px 14px; margin-bottom: 10px;
}
.item-slot .i-glyph {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg-raised);
  font-size: 22px; color: var(--sgc-blue);
}
.item-slot .i-info .i-title { font-size: 13.5px; color: var(--text); margin-bottom: 3px; }
.item-slot .i-info .i-meta { font-size: 11px; color: var(--text-dim); }
.item-slot .i-meta .price { color: var(--sgc-blue); }
.item-slot .i-action { display: flex; align-items: center; gap: 8px; }
.item-slot .i-action .seller { font-size: 10.5px; color: var(--text-dim); }

.offer-form .field-row { display: flex; gap: 14px; margin-bottom: 12px; }
.offer-form .field-row .field { flex: 1; }
.trade-badge {
  font-family: var(--font-term); font-size: 9px; letter-spacing: 1px; padding: 2px 7px;
  border: 1px solid var(--line); color: var(--text-dim);
}
.trade-badge.active   { color: var(--green); border-color: rgba(107,224,107,.4); }
.trade-badge.sold     { color: var(--sgc-blue); border-color: var(--sgc-blue-dim); }
.trade-badge.cancelled{ color: var(--text-dim); }

/* ============================================================
   PLANETEN-UMSCHALTER (Topbar)
   ============================================================ */
.planet-switch { position: relative; margin-right: 4px; }
.ps-current {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--line);
  color: var(--text); font-family: var(--font-term); font-size: 11px;
  padding: 6px 12px; cursor: pointer; transition: border-color .12s;
}
.ps-current:hover { border-color: var(--sgc-blue-dim); }
.ps-current .coords { color: var(--sgc-blue); font-size: 10px; }
.ps-current .ps-arrow { color: var(--text-dim); font-size: 9px; }

.ps-menu {
  display: none;
  position: absolute; top: 100%; left: 0;
  margin-top: 6px; min-width: 220px;
  background: var(--bg-card); border: 1px solid var(--sgc-blue-dim);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  z-index: 210;
}
.ps-menu.open { display: block; }
.ps-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 14px; text-decoration: none;
  border-bottom: 1px dotted rgba(22,40,60,.8);
  color: var(--text); font-size: 12px;
}
.ps-item:last-child { border-bottom: none; }
.ps-item:hover { background: rgba(79,182,255,.08); }
.ps-item.active { color: var(--sgc-blue); }
.ps-item .coords { font-size: 10px; color: var(--text-dim); }
.ps-item em { font-style: normal; color: var(--text-dim); font-size: 10.5px; }

@media (max-width: 900px) { .planet-switch { display: none; } }

/* ============================================================
   ADMIN-PORTAL — Kompaktes Bestands-Grid (Gebäude/Forschung/
   Schiffe/Verteidigung) für die vollständige Spielerbearbeitung
   ============================================================ */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 14px;
  margin-bottom: 14px;
}
@media (max-width: 900px) { .admin-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.asg-item { display: flex; flex-direction: column; gap: 4px; }
.asg-item label { font-size: 10px; color: var(--text-dim); letter-spacing: .5px; }
.asg-item input {
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--text);
  padding: 6px 8px; font-family: var(--font-body); font-size: 12.5px;
}
.asg-item input:focus { outline: none; border-color: var(--sgc-blue-dim); }

/* ============================================================
   ENTWICKLUNGSPFAD — Kampf/Entwicklung/Erkundung
   ============================================================ */
.dp-balance {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--sgc-blue-dim);
  background: linear-gradient(135deg, rgba(79,182,255,.08), transparent 60%), var(--bg-card);
  padding: 18px 22px; margin-bottom: 18px;
}
.dp-balance .big-num { font-family: var(--font-term); font-size: 34px; color: var(--sgc-blue); text-shadow: var(--glow-blue); }
.dp-balance .lbl { font-family: var(--font-term); font-size: 10px; letter-spacing: 2px; color: var(--text-dim); }

.dp-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .dp-path-grid { grid-template-columns: 1fr; } }
.dp-path-card {
  border: 1px solid var(--line); background: var(--bg-card);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.dp-path-head {
  font-family: var(--font-term); font-size: 15px; color: var(--sgc-blue);
  display: flex; align-items: center; gap: 10px;
}
.dp-glyph { font-size: 22px; }
.dp-path-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; flex-grow: 1; }

.dp-perk-card {
  border: 1px solid var(--line); background: var(--bg-raised);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.dp-perk-name { font-size: 13px; color: var(--text); }
.dp-perk-desc { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; flex-grow: 1; }
.dp-perk-note { font-size: 10.5px; color: var(--amber); }

/* ============================================================
   ENTWICKLUNGSPFAD — Skill-Tree-Visualisierung
   ============================================================ */
.dp-tree-wrap {
  width: 100%; overflow: visible; margin-bottom: 18px;
  border: 1px solid var(--line); background: var(--bg-deep);
  padding: 10px;
}
.dp-tree { width: 100%; height: auto; display: block; }

.dp-root-circle { fill: var(--bg-raised); stroke: var(--sgc-blue); stroke-width: 2; }
.dp-root-glyph { fill: var(--sgc-blue); font-size: 24px; font-family: var(--font-term); }

.dp-branch-line { stroke: var(--line); stroke-width: 2; fill: none; }
.dp-branch-line.lit { stroke: var(--sgc-blue-dim); }

.dp-pip { fill: var(--bg-raised); stroke: var(--line); stroke-width: 1.5; }
.dp-pip.filled { fill: var(--sgc-blue); stroke: var(--sgc-blue); }

.dp-hex { fill: var(--bg-raised); stroke: var(--line); stroke-width: 2; }
.dp-hex.active { stroke: var(--sgc-blue); }
.dp-hex.done { fill: rgba(70,224,140,.12); stroke: var(--green); }

.dp-end-lvl { fill: var(--text); font-size: 12px; font-family: var(--font-term); }
.dp-end-label { fill: var(--text-dim); font-size: 11px; font-family: var(--font-body); }

/* ============================================================
   ENTWICKLUNGSPFAD v2 — 20-Knoten-Kette mit Sperrzustand
   ============================================================ */
.dp-node-num { fill: var(--text); font-size: 13px; font-family: var(--font-term); }
.dp-node-lvl { fill: var(--text-dim); font-size: 8px; font-family: var(--font-body); }

.dp-hex.locked { fill: var(--bg-raised); stroke: var(--line); opacity: .55; }
.dp-hex.locked + .dp-node-num { fill: var(--text-dim); }

.dp-legend { display: flex; gap: 18px; margin: 4px 0 16px; font-size: 11px; color: var(--text-dim); }
.dp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dp-dot.done { background: var(--green); }
.dp-dot.active { background: var(--sgc-blue); }
.dp-dot.locked { background: var(--line); }

.dp-perk-card.locked { opacity: .5; }
.dp-perk-card.done { border-color: rgba(70,224,140,.35); }
.dp-perk-type { font-size: 10.5px; color: var(--sgc-blue); margin-top: -2px; }
.dp-perk-nextlevel { font-size: 10.5px; color: var(--text-dim); font-style: italic; }

.dp-level-list { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.dp-level-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; color: var(--text-dim); padding: 2px 0;
}
.dp-level-row.reached { color: var(--text); }
.dp-level-row.next { color: var(--sgc-blue); }
.dp-level-no {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; border: 1px solid var(--line); color: var(--text-dim);
}
.dp-level-row.reached .dp-level-no { background: var(--sgc-blue-dim); border-color: var(--sgc-blue); color: var(--text); }
.dp-level-row.next .dp-level-no { border-color: var(--sgc-blue); color: var(--sgc-blue); }

.dp-hex { stroke-width: 2; stroke-linejoin: round; }
.dp-node-label { fill: var(--text-dim); font-size: 10px; font-family: var(--font-body); }

.dp-node-link { cursor: pointer; }
.dp-hex.sel { stroke: var(--sgc-blue); stroke-width: 3.5; }
.cmp-table tr.reached-row td { color: var(--text-dim); }
.cmp-table tr.next-row td { color: var(--sgc-blue); }

/* ============================================================
   ENTWICKLUNGSPFAD — Hover-Popup direkt am Knoten (echtes
   Formular, Ausbauen ohne zur Detailkarte scrollen zu müssen)
   ============================================================ */
.dp-tree-wrap { position: relative; width: 100%; }
.dp-tree { position: absolute; inset: 0; width: 100%; height: 100%; }

.dp-node-hit {
  position: absolute;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.dp-node-popup {
  display: none;
  position: absolute;
  top: 50%; left: 100%;
  transform: translateY(-50%);
  margin-left: 0;
  width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--sgc-blue-dim);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  padding: 12px 14px 12px 20px;
  z-index: 220;
  text-align: left;
}
.dp-node-hit:hover .dp-node-popup { display: block; }

.dp-pop-title {
  font-family: var(--font-term); font-size: 11px; letter-spacing: .5px;
  color: var(--sgc-blue); border-bottom: 1px solid var(--line);
  padding-bottom: 6px; margin-bottom: 6px;
}
.dp-pop-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin-bottom: 8px; }
.dp-pop-hint { font-size: 11px; color: var(--amber); }
.dp-pop-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; padding: 3px 0; color: var(--text); }
.dp-pop-row .ok { color: var(--green); text-align: right; }
.dp-pop-row .warn { color: var(--amber); }
.dp-pop-btn { width: 100%; margin-top: 8px; padding: 8px; font-size: 11px; }

/* Popups am rechten Bildschirmrand klappen nach links auf, damit
/* ============================================================
   ITEM-LISTE mit dauerhaft sichtbaren Details (Konstrukte/Komplexe/
   Genesis-Zirkel/Orbital-Schmiede/Defensiv-Raster) — zwei Spalten,
   Bild links, komplette Detailansicht (Beschreibung, Kosten,
   Bau-Button) direkt und immer sichtbar rechts daneben. Kein
   Popup mehr nötig.
   ============================================================ */
.item-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .item-list { grid-template-columns: 1fr; } }

.item-row {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 16px;
  align-items: start;
}
.item-row.sel { border-color: var(--sgc-blue); box-shadow: 0 0 14px rgba(79,182,255,.18); }
.item-row.building { border-color: var(--sgc-blue-dim); }
.item-row.locked { opacity: .55; }

.item-row-no {
  position: absolute;
  top: -1px; left: -1px;
  font-family: var(--font-term);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 1px 6px;
  z-index: 1;
}
.item-row-lvl {
  position: absolute;
  top: -1px; right: -1px;
  font-family: var(--font-term);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--sgc-blue);
  background: var(--bg-raised);
  border: 1px solid var(--sgc-blue-dim);
  padding: 3px 10px;
  z-index: 1;
}
.item-row-img-big { display: none; }
.item-row.locked .item-row-lvl { color: var(--text-dim); border-color: var(--line); }
.item-row-img {
  width: 140px; height: 140px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(79,182,255,.10), transparent 60%), var(--bg-raised);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.item-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-row-img .g { font-family: var(--font-term); font-size: 44px; color: var(--sgc-blue); text-shadow: 0 0 10px rgba(79,182,255,.5); }
.item-row.locked .item-row-img .g { color: var(--text-dim); text-shadow: none; }
.item-row.sel .item-row-img { border-color: var(--sgc-blue); }

.item-row-detail { min-width: 0; text-align: left; }
.item-row-detail .pop-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px;
}
.item-row-detail .pop-name { font-size: 17px; color: var(--text); }
.item-row-detail .s-lvl { font-family: var(--font-term); font-size: 11px; letter-spacing: 1px; color: var(--sgc-blue); margin-left: auto; }
.item-row-detail .b-lore { max-width: 640px; }
.item-row-detail .cmp-table { max-width: 640px; }
.item-row-detail .cost-list { margin-top: 10px; }

@media (max-width: 700px) {
  .item-row { grid-template-columns: 90px 1fr; gap: 12px; padding: 12px; }
  .item-row-img { width: 90px; height: 90px; }
  .item-row-img .g { font-size: 30px; }
  .item-row-detail .pop-name { font-size: 15px; }
}

/* Variante "wide" (Konstrukte/Komplexe): nur eine Spalte, dafür
   alles rund doppelt so groß — mehr Platz für die wichtigeren,
   selteneren Bau-Entscheidungen dieser beiden Module. */
.item-list.wide { grid-template-columns: 1fr; }
.item-list.wide .item-row { grid-template-columns: 320px minmax(0, 640px) 1fr; gap: 28px; padding: 22px; }
.item-list.wide .item-row-img-big {
  display: block;
  align-self: stretch;
  min-height: 200px;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.item-list.wide .item-row-img-big img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .85;
}
.item-list.wide .item-row-img-big::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,20,32,.55), transparent 40%);
}
.item-list.wide .item-row-img { width: 320px; height: 320px; }
.item-list.wide .item-row-img .g { font-size: 96px; }
.item-list.wide .item-row-detail .pop-head { margin-bottom: 4px; padding-bottom: 4px; }
.item-list.wide .item-row-detail .pop-name { font-size: 26px; }
.item-list.wide .item-row-detail .s-lvl { font-size: 15px; }
.item-list.wide .item-row-detail .b-desc { font-size: 15px; margin: 2px 0 4px; }
.item-list.wide .item-row-detail .b-lore { font-size: 13px; margin: 4px 0 6px; padding: 4px 10px; }
.item-list.wide .cmp-title { margin: 8px 0 4px; }
.item-list.wide .cmp-table { font-size: 14px; }
.item-list.wide .cmp-table th, .item-list.wide .cmp-table td { padding-top: 4px; padding-bottom: 4px; }
.item-list.wide .cost-list { font-size: 14px; margin-top: 6px; }
.item-list.wide .cost-list li { padding: 2px 0; }
.item-list.wide .btn-build { width: auto; min-width: 220px; padding: 8px 20px; font-size: 11px; margin-top: 8px; }

@media (max-width: 900px) {
  .item-list.wide .item-row { grid-template-columns: 140px 1fr; gap: 16px; padding: 16px; }
  .item-list.wide .item-row-img { width: 140px; height: 140px; }
  .item-list.wide .item-row-img .g { font-size: 44px; }
  .item-list.wide .item-row-detail .pop-name { font-size: 19px; }
  .item-list.wide .item-row-img-big { display: none; }
}

/* Trennzeile innerhalb der Stufen-Analyse-Tabelle, ab der die
   Baukosten als weitere Zeilen derselben Tabelle folgen */
.cmp-table tr.cost-row-sep td {
  font-family: var(--font-term); font-size: 9px; letter-spacing: 1.5px;
  color: var(--text-dim); padding-top: 10px; border-bottom: 1px dashed var(--line);
}