:root{
  --bg:#061327;
  --card:rgba(10,47,107,.78);
  --card2:rgba(255,255,255,.08);
  --text:#eef4ff;
  --muted:#bfd1f5;
  --accent:#7db3ff;
  --border:rgba(255,255,255,.14);
  --success:#15c97a;
  --warn:#ffcf5a;
  --shadow:0 22px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(125,179,255,.18), transparent 25%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.10), transparent 20%),
    linear-gradient(140deg, #061327 0%, #0a2f6b 40%, #123f8e 100%);
  color:var(--text);
}
.backdrop{
  position:fixed; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(255,255,255,.03) 120px 121px),
    repeating-linear-gradient(0deg, transparent 0 120px, rgba(255,255,255,.03) 120px 121px);
  pointer-events:none;
  opacity:.25;
}
.shell{
  width:min(1100px, calc(100% - 32px));
  margin:32px auto;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  backdrop-filter: blur(12px);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.hero{padding:28px}
.eyebrow{
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
h1{
  margin:.35rem 0 .25rem;
  font-size:clamp(2rem, 5vw, 3.8rem);
  line-height:1.02;
}
.tagline{
  margin:.2rem 0 0;
  font-style:italic;
  color:#dbe7ff;
  opacity:.95;
}
.lede{color:var(--muted); max-width:60ch}
.status-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin:24px 0 12px;
}
.label{
  color:var(--muted);
  font-size:.84rem;
  margin-bottom:6px;
}
.metric{
  font-size:1.1rem;
  font-weight:700;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  background:rgba(21,201,122,.15);
  border:1px solid rgba(21,201,122,.38);
  color:#d8ffe9;
}
.badge.done{
  background:rgba(255,207,90,.14);
  border-color:rgba(255,207,90,.4);
  color:#fff2c5;
}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:14px; padding:12px 16px; font-weight:800;
}
.btn.primary{background:#eef4ff; color:#0a2f6b}
.btn.ghost{background:transparent; color:#eef4ff; border:1px solid var(--border)}
.grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  margin-top:18px;
}
.grid .card{padding:22px}
.full{grid-column:1/-1}
.telemetry{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.tile{
  padding:16px;
  border-radius:18px;
  background:var(--card2);
  border:1px solid var(--border);
}
.tile strong{font-size:1.2rem}
.bulletin{
  margin:0; padding-left:20px;
}
.bulletin li{margin:.7rem 0; color:#edf3ff}
pre{
  margin:0; padding:16px;
  white-space:pre-wrap;
  background:#04101f;
  border-radius:18px;
  border:1px solid var(--border);
  color:#d8e6ff;
  overflow:auto;
}
.footer{
  display:flex; justify-content:space-between; gap:12px;
  color:var(--muted);
  padding:16px 8px 6px;
  font-size:.92rem;
}
@media (max-width: 760px){
  .status-row,.telemetry,.grid{grid-template-columns:1fr}
  .footer{flex-direction:column}
}