#launch-btn {
  pointer-events:all; height:29px; padding:5px 13px; border-radius:20px; white-space:nowrap;
  border:1px solid rgba(130,160,255,.35);
  background:linear-gradient(135deg,rgba(79,118,255,.24),rgba(132,83,255,.2));
  color:rgba(225,233,255,.92); font-size:12px; cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s;
}
#launch-btn:hover { background:linear-gradient(135deg,rgba(79,118,255,.38),rgba(132,83,255,.3)); border-color:rgba(155,180,255,.58); }
#launch-btn:active { transform:translateY(1px); }

#mission-catalog {
  position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  background:radial-gradient(circle at 50% -10%,rgba(62,91,190,.24),transparent 42%),#020718;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(18px);
  transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s;
}
#mission-catalog.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
#mission-catalog-header,#mission-detail-header {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:max(12px,env(safe-area-inset-top)) 18px 12px; flex-shrink:0;
  border-bottom:1px solid rgba(135,160,255,.14); background:rgba(2,7,24,.91);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.mission-icon-btn {
  min-width:42px; height:36px; padding:0 12px; border-radius:18px;
  border:1px solid rgba(145,170,255,.2); background:rgba(255,255,255,.055);
  color:rgba(225,232,255,.82); font-size:13px; cursor:pointer;
}
.mission-icon-btn:hover { background:rgba(130,155,255,.14); }
#mission-catalog-title { text-align:center; }
#mission-catalog-title strong { display:block; font-size:19px; letter-spacing:-.02em; }
#mission-catalog-title span { display:block; margin-top:2px; font-size:11px; color:rgba(255,255,255,.4); }
#mission-catalog-scroll,#mission-detail-scroll { flex:1; overflow-y:auto; overscroll-behavior:contain; }
#mission-catalog-content { width:min(1180px,100%); margin:0 auto; padding:22px 20px 54px; }
#mission-catalog-intro { max-width:760px; margin-bottom:18px; color:rgba(224,231,255,.62); font-size:13px; line-height:1.6; }
#mission-filters { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 10px; scrollbar-width:none; }
#mission-filters::-webkit-scrollbar { display:none; }
.mission-filter {
  flex:0 0 auto; padding:7px 12px; border-radius:18px; cursor:pointer;
  border:1px solid rgba(135,160,255,.17); background:rgba(255,255,255,.045);
  color:rgba(224,232,255,.62); font-size:12px;
}
.mission-filter[aria-pressed="true"] { color:#eef3ff; border-color:rgba(120,155,255,.56); background:rgba(83,118,225,.26); }
.mission-filter-count { opacity:.58; margin-left:5px; }
#mission-legend { display:flex; flex-wrap:wrap; gap:7px 14px; padding:3px 0 18px; color:rgba(255,255,255,.44); font-size:11px; }
.mission-legend-item { display:inline-flex; align-items:center; gap:6px; }
.mission-legend-dot { width:7px; height:7px; border-radius:50%; background:var(--status-color); }
#mission-list-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
#mission-list-heading strong { font-size:15px; }
#mission-list-count { color:rgba(255,255,255,.38); font-size:11px; }
#mission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mission-card {
  --status-color:rgba(140,165,255,.7); position:relative; min-height:148px; padding:14px;
  display:flex; flex-direction:column; align-items:stretch; overflow:hidden; text-align:left;
  border:1px solid rgba(135,160,255,.13); border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  color:#fff; cursor:pointer; transition:transform .16s,border-color .16s,background .16s;
}
.mission-card::before { content:''; position:absolute; inset:0 auto 0 0; width:2px; background:var(--status-color); }
.mission-card:hover { transform:translateY(-2px); border-color:rgba(145,175,255,.34); background:linear-gradient(145deg,rgba(90,120,220,.13),rgba(255,255,255,.035)); }
.mission-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mission-year { color:rgba(190,205,255,.56); font-size:11px; font-variant-numeric:tabular-nums; }
.mission-status { --status-color:rgba(140,165,255,.8); display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:12px; color:var(--status-color); background:rgba(255,255,255,.045); font-size:10px; }
.mission-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.mission-card-name { margin-top:9px; font-size:17px; font-weight:650; letter-spacing:-.02em; }
.mission-card-summary { flex:1; margin-top:6px; color:rgba(234,239,255,.57); font-size:12px; line-height:1.45; }
.mission-card-route { margin-top:10px; overflow:hidden; color:rgba(160,185,255,.62); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }

#mission-detail {
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  background:#03091c; visibility:hidden; transform:translateX(100%);
  transition:transform .26s ease,visibility 0s linear .26s;
}
#mission-detail.open { visibility:visible; transform:none; transition-delay:0s; }
#mission-detail-header { background:rgba(3,9,28,.95); }
#mission-detail-header-title { text-align:center; color:rgba(255,255,255,.52); font-size:13px; }
#mission-detail-content { width:min(900px,100%); margin:0 auto; padding:24px 20px 60px; }
#mission-detail-kicker { color:rgba(170,190,255,.58); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
#mission-detail-name { margin-top:6px; font-size:clamp(27px,5vw,42px); line-height:1.05; letter-spacing:-.035em; }
#mission-detail-summary { max-width:720px; margin-top:12px; color:rgba(235,240,255,.68); font-size:15px; line-height:1.55; }
#mission-detail-status { width:fit-content; margin-top:14px; }
#mission-meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:22px; }
.mission-meta-box { padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.052); }
.mission-meta-label { color:rgba(255,255,255,.34); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.mission-meta-value { margin-top:5px; color:rgba(245,247,255,.82); font-size:12px; line-height:1.35; }
.mission-detail-section { margin-top:24px; }
.mission-detail-section h3 { margin-bottom:9px; color:rgba(230,236,255,.86); font-size:13px; }
.mission-detail-section p { color:rgba(230,236,255,.58); font-size:13px; line-height:1.65; }
.mission-story-paragraph + .mission-story-paragraph { margin-top:10px; }
#mission-event-list { margin-left:5px; border-left:1px solid rgba(135,160,255,.22); list-style:none; }
.mission-event { position:relative; padding:0 0 14px 16px; }
.mission-event::before { content:''; position:absolute; left:-4px; top:4px; width:7px; height:7px; border-radius:50%; background:#86a7ff; box-shadow:0 0 9px rgba(105,145,255,.6); }
.mission-event-date { color:rgba(160,185,255,.58); font-size:10px; }
.mission-event-title { margin-top:2px; color:rgba(240,244,255,.72); font-size:12px; }
#mission-source-list { display:flex; flex-wrap:wrap; gap:7px; }
.mission-source { padding:7px 10px; border:1px solid rgba(135,160,255,.18); border-radius:10px; background:rgba(95,125,210,.08); color:rgba(175,198,255,.78); font-size:11px; text-decoration:none; }
.mission-source:hover { border-color:rgba(145,175,255,.4); color:#dce6ff; }
#mission-simulate { justify-self:end; min-height:36px; padding:7px 14px; border:1px solid rgba(125,160,255,.38); border-radius:18px; background:rgba(76,112,225,.25); color:#e4ebff; font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer; }
#mission-simulate:disabled { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.045); color:rgba(255,255,255,.38); cursor:not-allowed; }
.status-success { --status-color:#66dc9a; }
.status-partial { --status-color:#f2c96b; }
.status-active { --status-color:#78b9ff; }
.status-lost,.status-failure { --status-color:#ec996f; }
.status-catastrophe { --status-color:#ef7078; }

@media (max-width:840px) {
  #mission-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #mission-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:540px) {
  #now-btn,#launch-btn { padding-left:10px; padding-right:10px; }
  #launch-btn { font-size:11px; }
  #mission-catalog-header,#mission-detail-header { gap:7px; padding-left:10px; padding-right:10px; }
  #mission-detail-header-title { display:none; }
  #mission-simulate { grid-column:3; max-width:148px; overflow:hidden; padding:7px 10px; font-size:11px; text-overflow:ellipsis; }
  #mission-catalog-title strong { font-size:16px; }
  #mission-catalog-content,#mission-detail-content { padding-left:12px; padding-right:12px; }
  #mission-grid { grid-template-columns:1fr; }
  .mission-card { min-height:132px; }
  #mission-detail-summary { font-size:13px; }
}