/* static/css/system_view.css */
.system-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}

.system-title{
  margin:0 0 8px 0;
  font-size:42px;
  letter-spacing:.4px;
}

.system-kicker{
  font-size:15px;
}

.system-sub{
  font-size:14px;
  margin-top:6px;
  line-height:1.45;
}

.system-section-title{
  margin:0 0 12px 0;
}

.system-standard-resource-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin:0 0 12px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(125,211,252,.16);
  background:rgba(125,211,252,.06);
}

.system-standard-resource-note-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(125,211,252,.12);
  border:1px solid rgba(125,211,252,.22);
  color:var(--text);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.system-standard-resource-note-value{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  font-weight:700;
}

.system-planet-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.system-planet-card{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(52,79,156,.54);
  background:linear-gradient(180deg,rgba(12,25,63,.88),rgba(8,16,39,.96));
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.system-planet-card.unowned{
  border-color:rgba(98,139,255,.42);
  background:
    linear-gradient(180deg,rgba(13,28,72,.90),rgba(8,18,46,.96));
  box-shadow:
    0 0 0 1px rgba(125,211,252,.06),
    0 10px 28px rgba(0,0,0,.18);
}

.system-planet-card.owned{
  border-color:rgba(73,104,191,.60);
}

.system-planet-card.current{
  border-color:rgba(87,255,152,.82);
  box-shadow:0 0 0 1px rgba(87,255,152,.16), 0 10px 28px rgba(0,0,0,.18);
}

/* Dezente Typ-Tönung für die Kartenumrandung */
.system-planet-card.system-planet-card-type-rocky{
  border-color:rgba(143,168,196,.42);
}

.system-planet-card.system-planet-card-type-ice{
  border-color:rgba(110,214,255,.44);
}

.system-planet-card.system-planet-card-type-desert{
  border-color:rgba(255,203,107,.44);
}

.system-planet-card.system-planet-card-type-volcanic{
  border-color:rgba(255,107,107,.44);
}

.system-planet-card.system-planet-card-type-gas{
  border-color:rgba(102,255,167,.40);
}

.system-planet-card.system-planet-card-type-terran{
  border-color:rgba(86,234,202,.42);
}

.system-planet-top{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:14px;
  align-items:flex-start;
}

.system-planet-thumb-col{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

.system-planet-thumb-wrap{
  width:64px;
  height:64px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  flex:0 0 64px;
}

.system-planet-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.system-planet-main{
  min-width:0;
}

.system-planet-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:flex-start;
}

.system-planet-name-wrap{
  min-width:0;
}

.system-planet-name-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 8px 0;
}

.system-planet-name{
  font-size:18px;
  font-weight:900;
  line-height:1.1;
  color:var(--text);
}

.system-planet-name-rocky{
  color:#d7e5f5;
}

.system-planet-name-ice{
  color:#aee8ff;
}

.system-planet-name-desert{
  color:#ffe1a1;
}

.system-planet-name-volcanic{
  color:#ffb0b0;
}

.system-planet-name-gas{
  color:#aaffcc;
}

.system-planet-name-terran{
  color:#a9fff1;
}

.system-planet-name-unknown{
  color:#d9f1ff;
}

.system-custom-name-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#dbe8ff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  letter-spacing:.01em;
}

.system-planet-badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}

.system-orbit-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#dce8ff;
  background:rgba(125,211,252,.10);
  border:1px solid rgba(125,211,252,.20);
}

.system-planet-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  min-width:120px;
}

.system-meta-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}

.system-meta-pill.coord{
  color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.system-meta-pill.owner{
  border:1px solid rgba(125,211,252,.20);
}

.system-meta-pill.owner.free{
  color:#b7ffcf;
  background:rgba(24,165,88,.16);
  border-color:rgba(24,165,88,.34);
}

.system-meta-pill.owner.mine{
  color:#6bff9f;
  background:rgba(24,165,88,.16);
  border-color:rgba(24,165,88,.34);
}

.system-meta-pill.owner.claimed{
  color:#b9d9ff;
  background:rgba(80,140,255,.14);
  border-color:rgba(80,140,255,.26);
}

.system-inline-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.system-inline-badge.current{
  background:rgba(24,165,88,.18);
  color:#6bff9f;
  border:1px solid rgba(24,165,88,.45);
}

.system-type-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.system-type-badge.rocky{
  background:rgba(143,168,196,.16);
  border:1px solid rgba(143,168,196,.36);
  color:#d7e5f5;
}

.system-type-badge.ice{
  background:rgba(110,214,255,.16);
  border:1px solid rgba(110,214,255,.36);
  color:#aee8ff;
}

.system-type-badge.desert{
  background:rgba(255,203,107,.16);
  border:1px solid rgba(255,203,107,.36);
  color:#ffe1a1;
}

.system-type-badge.volcanic{
  background:rgba(255,107,107,.16);
  border:1px solid rgba(255,107,107,.36);
  color:#ffb0b0;
}

.system-type-badge.gas{
  background:rgba(102,255,167,.16);
  border:1px solid rgba(102,255,167,.34);
  color:#aaffcc;
}

.system-type-badge.terran{
  background:rgba(86,234,202,.16);
  border:1px solid rgba(86,234,202,.34);
  color:#a9fff1;
}

.system-type-badge.unknown{
  background:rgba(125,211,252,.12);
  border:1px solid rgba(125,211,252,.22);
  color:#d9f1ff;
}

.system-class-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.system-class-badge.common{
  background:rgba(140,160,200,.16);
  border:1px solid rgba(140,160,200,.35);
  color:#dce5ff;
}

.system-class-badge.rare{
  background:rgba(66,170,255,.16);
  border:1px solid rgba(66,170,255,.35);
  color:#8fd4ff;
}

.system-class-badge.epic{
  background:rgba(180,92,255,.16);
  border:1px solid rgba(180,92,255,.35);
  color:#ddb0ff;
}

.system-class-badge.legendary{
  background:rgba(255,176,32,.16);
  border:1px solid rgba(255,176,32,.35);
  color:#ffd98a;
}

.system-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.system-feature-panel{
  min-width:0;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.system-feature-panel.special.has-value{
  border-color:rgba(255,176,32,.20);
  background:linear-gradient(180deg, rgba(255,176,32,.07), rgba(255,255,255,.03));
}

.system-feature-panel.bonus.has-value{
  border-color:rgba(125,211,252,.20);
  background:linear-gradient(180deg, rgba(125,211,252,.07), rgba(255,255,255,.03));
}

.system-feature-panel.is-empty{
  opacity:.96;
}

.system-feature-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.system-feature-title{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}

.system-feature-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.system-feature-badge.active{
  color:var(--text);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.system-feature-badge.muted{
  color:var(--muted);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.system-special-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.system-special-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,176,32,.26);
  background:rgba(255,176,32,.10);
  color:#ffd98a;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.system-bonus-wrap{
  margin-top:0;
}

.system-bonus-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.system-bonus-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.25);
  background:rgba(125,211,252,.08);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  line-height:1.1;
}

.system-empty-text{
  font-size:13px;
  line-height:1.45;
}

.system-action-row{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.system-claim-btn,
.system-open-btn,
.system-release-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:148px;
  padding:10px 15px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}

.system-claim-btn{
  background:linear-gradient(180deg,#1ea85b,#128245);
}

.system-open-btn{
  background:linear-gradient(180deg,#2f60ff,#173fb6);
}

.system-release-btn{
  background:linear-gradient(180deg,#ff6b6b,#c43a3a);
}

.system-open-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:148px;
  padding:10px 15px;
  border-radius:12px;
  border:1px solid rgba(125,211,252,.26);
  background:rgba(125,211,252,.08);
  color:var(--text);
  font-size:13px;
  font-weight:900;
}

@media (max-width: 760px){
  .system-standard-resource-note{
    align-items:flex-start;
  }

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

  .system-planet-thumb-col{
    justify-content:flex-start;
  }

  .system-planet-title-row{
    grid-template-columns:1fr;
  }

  .system-planet-meta{
    align-items:flex-start;
  }

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

  .system-planet-name-row{
    align-items:flex-start;
  }
}