:root {
  --bg:
    #07111f;

  --panel:
    #0d1c2f;

  --panel-soft:
    #12263d;

  --panel-border:
    rgb(148 163 184 / 25%);

  --text:
    #e5edf7;

  --muted:
    #9fb0c6;

  --accent:
    #66d9ff;

  --ok:
    #68d391;

  --warning:
    #f6c453;

  --danger:
    #ff7b7b;

  --commissioning:
    #8bb8ff;

  --unknown:
    #94a3b8;

  --shadow:
    0 18px 45px
    rgb(0 0 0 / 28%);
}


* {
  box-sizing:
    border-box;
}


body {
  min-height:
    100vh;

  margin:
    0;

  color:
    var(--text);

  background:
    radial-gradient(
      circle at top left,
      rgb(102 217 255 / 16%),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #07111f 0%,
      #081525 100%
    );

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


button,
input,
a {
  font:
    inherit;
}


.page-shell {
  width:
    min(
      1240px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  padding:
    28px 0 44px;
}


.hero-panel,
.constellation-section,
.toolbar,
.source-note {
  border:
    1px solid
    var(--panel-border);

  border-radius:
    22px;

  background:
    rgb(13 28 47 / 88%);

  box-shadow:
    var(--shadow);
}


.hero-panel {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    26px;
}


.eyebrow {
  margin:
    0 0 6px;

  color:
    var(--accent);

  font-size:
    0.78rem;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


h1,
h2,
h3,
p {
  margin-top:
    0;
}


h1 {
  margin-bottom:
    10px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.2rem
    );

  line-height:
    1.05;
}


h2 {
  margin-bottom:
    0;

  font-size:
    1.35rem;
}


.hero-text {
  max-width:
    860px;

  margin-bottom:
    0;

  color:
    var(--muted);

  line-height:
    1.55;
}


.hero-meta {
  display:
    grid;

  align-content:
    start;

  gap:
    8px;

  min-width:
    260px;

  color:
    var(--muted);

  font-size:
    0.92rem;
}


.summary-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    14px;

  margin:
    18px 0;
}


.summary-card {
  padding:
    18px;

  border:
    1px solid
    var(--panel-border);

  border-radius:
    18px;

  background:
    rgb(18 38 61 / 82%);
}


.summary-card strong {
  display:
    block;

  margin:
    2px 0;

  font-size:
    2.2rem;

  line-height:
    1;
}


.summary-label,
.summary-card span:last-child {
  color:
    var(--muted);

  font-size:
    0.88rem;
}


.summary-card.warning strong,
.summary-card.planned strong {
  color:
    var(--warning);
}


.summary-card.danger strong {
  color:
    var(--danger);
}


.toolbar {
  display:
    grid;

  grid-template-columns:
    1fr auto auto;

  align-items:
    center;

  gap:
    16px;

  margin-bottom:
    12px;

  padding:
    16px;
}


.filter-group,
.view-group {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.filter-button,
.view-button {
  padding:
    9px 13px;

  border:
    1px solid
    var(--panel-border);

  border-radius:
    999px;

  color:
    var(--text);

  background:
    rgb(255 255 255 / 4%);

  cursor:
    pointer;
}


.filter-button.active,
.filter-button:hover,
.filter-button:focus-visible,
.view-button.active,
.view-button:hover,
.view-button:focus-visible {
  border-color:
    rgb(102 217 255 / 55%);

  background:
    rgb(102 217 255 / 12%);
}


.search-label {
  display:
    grid;

  gap:
    5px;

  color:
    var(--muted);

  font-size:
    0.84rem;
}


.search-label input {
  width:
    min(
      360px,
      70vw
    );

  padding:
    10px 12px;

  border:
    1px solid
    var(--panel-border);

  border-radius:
    12px;

  color:
    var(--text);

  background:
    #081525;
}


.status-legend {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin:
    0 0 18px;

  color:
    var(--muted);

  font-size:
    0.88rem;
}


.status-legend span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;
}


.legend-dot {
  display:
    inline-block;

  width:
    10px;

  height:
    10px;

  border-radius:
    999px;
}


.legend-dot.usable {
  background:
    var(--ok);
}


.legend-dot.warning {
  background:
    var(--warning);
}


.legend-dot.danger {
  background:
    var(--danger);
}


.legend-dot.commissioning {
  background:
    var(--commissioning);
}


.legend-dot.unknown {
  background:
    var(--unknown);
}


.constellation-section {
  margin-bottom:
    18px;

  padding:
    20px;
}


.section-heading-row {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

  margin-bottom:
    16px;
}


.section-heading-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    16px;
}


.section-note {
  max-width:
    560px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.9rem;

  text-align:
    right;
}


.detail-page-link {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  flex:
    0 0 auto;

  min-height:
    42px;

  padding:
    9px 15px;

  border:
    1px solid
    rgb(102 217 255 / 45%);

  border-radius:
    999px;

  color:
    var(--accent);

  background:
    rgb(102 217 255 / 8%);

  font-size:
    0.9rem;

  font-weight:
    700;

  text-decoration:
    none;
}


.detail-page-link:hover,
.detail-page-link:focus-visible {
  border-color:
    var(--accent);

  background:
    rgb(102 217 255 / 16%);
}


.detail-page-link:focus-visible {
  outline:
    3px solid
    rgb(102 217 255 / 25%);

  outline-offset:
    3px;
}


.plane-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    14px;
}


.plane-column {
  padding:
    14px;

  border:
    1px solid
    rgb(148 163 184 / 18%);

  border-radius:
    18px;

  background:
    rgb(7 17 31 / 55%);
}


.plane-title {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  margin:
    0 0 12px;

  color:
    var(--muted);

  font-size:
    0.92rem;
}


.satellite-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(235px, 1fr)
    );

  gap:
    12px;
}


.satellite-list {
  display:
    grid;

  gap:
    10px;
}


.satellite-card {
  position:
    relative;

  overflow:
    hidden;

  padding:
    13px;

  border:
    1px solid
    rgb(148 163 184 / 20%);

  border-radius:
    16px;

  background:
    rgb(18 38 61 / 78%);
}


.satellite-card::before {
  position:
    absolute;

  inset:
    0 auto 0 0;

  width:
    5px;

  background:
    var(--unknown);

  content:
    "";
}


.satellite-card.status-usable::before {
  background:
    var(--ok);
}


.satellite-card.status-warning::before {
  background:
    var(--warning);
}


.satellite-card.status-not-usable::before {
  background:
    var(--danger);
}


.satellite-card.status-commissioning::before {
  background:
    var(--commissioning);
}


.satellite-card.status-unknown::before {
  background:
    var(--unknown);
}


.satellite-topline {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    8px;
}


.satellite-name {
  font-size:
    1.04rem;

  font-weight:
    800;
}


.satellite-id {
  color:
    var(--muted);

  font-size:
    0.88rem;
}


.badge {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    4px 8px;

  border:
    1px solid
    rgb(255 255 255 / 18%);

  border-radius:
    999px;

  font-size:
    0.72rem;

  font-weight:
    700;

  white-space:
    nowrap;
}


.badge.usable {
  color:
    var(--ok);

  background:
    rgb(104 211 145 / 12%);
}


.badge.warning {
  color:
    var(--warning);

  background:
    rgb(246 196 83 / 12%);
}


.badge.not-usable {
  color:
    var(--danger);

  background:
    rgb(255 123 123 / 12%);
}


.badge.commissioning {
  color:
    var(--commissioning);

  background:
    rgb(139 184 255 / 12%);
}


.badge.unknown {
  color:
    var(--unknown);

  background:
    rgb(148 163 184 / 12%);
}


.satellite-details {
  display:
    grid;

  gap:
    5px;

  color:
    var(--muted);

  font-size:
    0.86rem;
}


.notice-line {
  margin-top:
    10px;

  padding-top:
    9px;

  border-top:
    1px solid
    rgb(148 163 184 / 16%);

  color:
    var(--warning);

  font-size:
    0.84rem;

  line-height:
    1.35;
}


.notice-time {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted);
}


.table-wrap {
  overflow-x:
    auto;

  border:
    1px solid
    rgb(148 163 184 / 18%);

  border-radius:
    16px;

  background:
    rgb(7 17 31 / 42%);
}


.status-table {
  width:
    100%;

  min-width:
    840px;

  border-collapse:
    collapse;
}


.status-table th,
.status-table td {
  padding:
    11px 12px;

  border-bottom:
    1px solid
    rgb(148 163 184 / 14%);

  text-align:
    left;

  vertical-align:
    top;
}


.status-table th {
  color:
    var(--muted);

  background:
    rgb(18 38 61 / 72%);

  font-size:
    0.78rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.status-table td {
  color:
    var(--text);

  font-size:
    0.9rem;
}


.status-table tr:last-child td {
  border-bottom:
    0;
}


.status-table .muted {
  color:
    var(--muted);
}


.empty-state {
  padding:
    18px;

  color:
    var(--muted);
}


.hidden {
  display:
    none !important;
}


.source-note {
  padding:
    16px 20px;

  color:
    var(--muted);

  line-height:
    1.5;
}


.source-note p {
  margin:
    0;
}


@media (
  max-width: 1050px
) {
  .summary-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .toolbar {
    grid-template-columns:
      1fr;
  }


  .section-heading-actions {
    align-items:
      flex-end;

    flex-direction:
      column;
  }
}


@media (
  max-width: 900px
) {
  .hero-panel,
  .section-heading-row {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .section-heading-actions {
    align-items:
      flex-start;
  }


  .section-note {
    text-align:
      left;
  }


  .plane-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (
  max-width: 620px
) {
  .page-shell {
    width:
      min(
        100% - 18px,
        1240px
      );

    padding-top:
      12px;
  }


  .summary-grid,
  .plane-grid,
  .satellite-grid {
    grid-template-columns:
      1fr;
  }


  .detail-page-link {
    width:
      100%;
  }
}