[hidden] { display:none !important; }
#studioHud { top:16px; left:16px; right:16px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:10px 14px; }
#studioHud h1 { margin:0; font-size:14px; letter-spacing:.1em; }
#studioHud .sub { color:var(--dim); font-size:11px; flex:1; min-width:200px; }
#steps { display:flex; gap:6px; align-items:center; }
#steps button b { display:inline-block; width:18px; height:18px; line-height:18px; border-radius:50%; background:rgba(255,255,255,.12); text-align:center; margin-right:4px; font-size:11px; }
#steps button.on b { background:#001224; color:var(--accent); }
#steps a { margin-left:8px; font-size:12px; text-decoration:none; }
#serverNote { width:100%; color:var(--mid); font-size:12px; }

.scol { top:84px; bottom:16px; width:370px; overflow:auto; }
#left1, #left3 { left:16px; }
#right1, #right2, #right3 { right:16px; }
.scol h2, #bottom2 h2 { margin:0 0 8px; font-size:12px; letter-spacing:.08em; display:flex; justify-content:space-between; gap:8px; }
.mt { margin-top:14px !important; }
.small { font-size:11.5px; }
.model { color:var(--accent); font-size:10px; margin-left:4px; }
.card { margin-top:8px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.03); font-size:12px; }
.card .row { display:flex; justify-content:space-between; gap:10px; }
.tabs { display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap; }
.tabs button { flex:1; font-size:11.5px; padding:6px 6px; }
select, input, textarea { font:inherit; }
.scol select { width:100%; }
input, textarea { background:rgba(0,0,0,.35); color:var(--text); border:1px solid var(--line); border-radius:7px; padding:5px 7px; width:100%; }
textarea { resize:vertical; }
input:disabled { opacity:.6; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; margin-top:8px; }
.grid2 label, label.full { display:block; font-size:11.5px; color:var(--dim); }
.grid2 label > input, .grid2 label > select, label.full > select { display:block; margin-top:3px; }
label.full { margin-top:8px; }
.grid2 .full { grid-column:1 / -1; }
label.chk { display:flex; gap:6px; align-items:center; margin-top:8px; font-size:12px; }
label.chk input { width:auto; }
button.big { padding:9px 16px; font-size:14px; width:100%; }
.drop { display:block; border:1.5px dashed var(--line); border-radius:12px; padding:22px 12px; text-align:center; cursor:pointer; margin-bottom:6px; }
.drop.over { border-color:var(--accent); background:rgba(90,176,255,.08); }

.prov { display:inline-block; font-size:9.5px; padding:0 5px; border-radius:99px; margin-left:3px; vertical-align:1px; white-space:nowrap; }
.prov.published, .prov.read { background:rgba(79,227,161,.18); color:var(--ok); }
.prov.derived { background:rgba(90,176,255,.2); color:var(--accent); }
.prov.assumed { background:rgba(255,200,87,.16); color:var(--mid); }
.prov.edited { background:rgba(200,140,255,.2); color:#d3a6ff; }
.prov.missing { background:rgba(255,107,87,.2); color:var(--warn); }

.stage { border:1px solid var(--line); border-radius:10px; padding:7px 8px; margin-top:8px; }
.stage .hd { display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:12px; }
.stage .f { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px 8px; margin-top:5px; }
.stage .f label { font-size:10.5px; color:var(--dim); display:flex; flex-direction:column; gap:2px; }
.stage .f input { padding:3px 5px; font-size:12px; }
.slid { display:grid; grid-template-columns:86px 1fr 52px; gap:6px; align-items:center; font-size:11px; color:var(--dim); margin-top:4px; }
.slid input[type=range] { padding:0; border:0; background:none; }
.slid b { color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }

#verdict .big { font-size:20px; font-weight:700; margin:2px 0 4px; }
#verdict .ok { color:var(--ok); } #verdict .bad { color:var(--warn); } #verdict .mid { color:var(--mid); }
#verdict .kv { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font-size:12px; margin-top:6px; }
#verdict .kv span { color:var(--dim); }
table.t { width:100%; border-collapse:collapse; font-size:11.5px; font-variant-numeric:tabular-nums; }
table.t th, table.t td { padding:3px 4px; text-align:right; border-bottom:1px solid rgba(255,255,255,.06); }
table.t th:first-child, table.t td:first-child { text-align:left; }
table.t th { color:var(--dim); font-weight:500; }
details { margin-top:10px; } summary { cursor:pointer; font-size:12px; color:var(--dim); letter-spacing:.04em; }
.ev { display:flex; gap:10px; font-size:11.5px; padding:2px 0; } .ev b { width:62px; flex:none; font-variant-numeric:tabular-nums; color:var(--accent); }
.fix { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:6px 8px; border:1px solid rgba(79,227,161,.35); border-radius:9px; margin-top:6px; font-size:12px; }
.fix button { flex:none; }
.explain { font-size:12px; margin-top:8px; }
.explain .h { font-weight:600; }

#bottom2 { left:16px; right:402px; bottom:16px; max-height:52vh; overflow:auto; }
#heat { font-size:10.5px; }
.hrow { display:grid; grid-template-columns:150px 1fr; gap:8px; align-items:center; margin:2px 0; }
.hrow .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.hrow .nm small { color:var(--dim); }
.cells { display:grid; grid-template-columns:repeat(168, 1fr); gap:1px; height:16px; }
.cells i { display:block; border-radius:1px; cursor:pointer; }
.cells i:hover { outline:1px solid #fff; }
.cells i.sel { outline:2px solid #fff; z-index:1; }
.go { background:rgba(79,227,161,.75); } .caution { background:rgba(255,200,87,.75); } .nogo { background:rgba(255,107,87,.7); }
.na { background:rgba(255,255,255,.07); }
.cells i.hold { background:repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 2px, rgba(255,255,255,.06) 2px 4px); }
.days { display:grid; grid-template-columns:150px 1fr; gap:8px; color:var(--dim); margin-bottom:3px; }
.days div { display:grid; grid-template-columns:repeat(7, 1fr); } .days span { border-left:1px solid var(--line); padding-left:3px; }
.unreach { color:var(--dim); font-style:italic; }
#lcolaBox { margin-top:12px; }
.strip { display:grid; grid-template-columns:repeat(60, 1fr); gap:2px; height:30px; margin-top:6px; }
.strip i { display:block; border-radius:2px; cursor:pointer; position:relative; }
.strip i.pick { outline:2px solid #fff; }
.strip i.lab::after { content:attr(data-l); position:absolute; top:32px; left:-6px; font-style:normal; font-size:9.5px; color:var(--dim); }
.lcmsg { font-size:12px; margin-top:22px; }
.board { margin-top:10px; }
.win { border:1px solid var(--line); border-radius:10px; padding:7px 9px; margin-top:8px; font-size:11.5px; }
.win .hd { display:flex; justify-content:space-between; font-weight:600; font-size:12.5px; }
.vote { display:grid; grid-template-columns:64px 52px 1fr; gap:6px; margin-top:4px; align-items:start; }
.vote .tag { align-self:start; text-align:center; }
.vote .r { color:var(--dim); }
.brief { border:1px solid rgba(79,227,161,.5); background:rgba(79,227,161,.07); border-radius:12px; padding:10px; margin-top:12px; font-size:12.5px; }
.brief.hold { border-color:rgba(255,107,87,.5); background:rgba(255,107,87,.07); }
.brief .big { font-size:18px; font-weight:700; }
.chips .tag { cursor:pointer; }

.pass, .enc { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:11.5px; font-variant-numeric:tabular-nums; }
.enc { align-items:center; }
pre.tle { font-size:10px; background:rgba(0,0,0,.35); padding:6px; border-radius:7px; overflow:auto; white-space:pre; }
.stream { font-size:11.5px; margin-top:8px; }
.stream div { padding:1px 0; } .stream .k { color:var(--accent); width:20px; display:inline-block; }
.decision { border:1px solid var(--line); border-radius:12px; padding:10px; margin-top:10px; font-size:12.5px; }
.decision .big { font-size:18px; font-weight:700; }

#tip { position:fixed; z-index:20; pointer-events:none; background:rgba(4,8,18,.95); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:11px; max-width:280px; }
#busy { position:fixed; left:50%; top:96px; transform:translateX(-50%); z-index:30; display:flex; gap:10px; align-items:center; background:rgba(4,8,18,.92); border:1px solid var(--line); border-radius:99px; padding:8px 16px; font-size:12.5px; }
.spin { width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sp 0.8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.lbl { position:fixed; z-index:5; pointer-events:none; font-size:11px; color:#fff; text-shadow:0 0 4px #000, 0 0 2px #000; white-space:nowrap; transform:translate(8px, -50%); }
.lbl.site { color:var(--accent); } .lbl.imp { color:var(--warn); } .lbl.me { color:var(--ok); font-weight:700; }

@media (max-width: 900px) {
  html, body { overflow:auto; }
  .scol, #bottom2 { position:relative; inset:auto; width:auto; margin:10px 16px; max-height:none; }
  #studioHud { position:relative; inset:auto; margin:16px; }
  canvas { position:fixed; z-index:-1; }
}

/* ---------- close-up stage (hangar, launch, deploy) ---------- */
#close { position:fixed; inset:0; opacity:0; pointer-events:none; transition:opacity .9s ease; }
#close.on { opacity:1; pointer-events:auto; }
#close canvas { position:absolute; inset:0; }
.cv-lbl { position:fixed; z-index:2; transform:translate(-50%, -100%); pointer-events:none; text-align:center; font-size:11.5px; color:var(--dim);
  background:rgba(4,8,18,.6); border:1px solid var(--line); border-radius:8px; padding:3px 8px; white-space:nowrap; }
.cv-lbl b { display:block; color:var(--text); font-size:12.5px; } .cv-lbl span { font-variant-numeric:tabular-nums; }
.cv-lbl.sel { border-color:var(--accent); background:rgba(90,176,255,.18); } .cv-lbl.sel b { color:#fff; }
.cv-bay .cv-baybar { position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:2; display:flex; gap:16px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:7px 16px; font-size:12px; }
.cv-baybar label { display:flex; gap:6px; align-items:center; cursor:pointer; } .cv-baybar input { width:auto; }
.cv-legend { color:var(--dim); font-size:11px; } .cv-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 3px 0 8px; vertical-align:-1px; }
.cv-hud { position:absolute; inset:0; pointer-events:none; font-family:'Chakra Petch', -apple-system, sans-serif; }
.cv-top { position:absolute; top:calc(var(--hudh, 64px) + 20px); left:24px; }
.cv-live b { color:#ff5a4f; letter-spacing:.12em; font-size:13px; } .cv-live b::before { content:'● '; animation:pulse 1.2s infinite; }
.cv-live span { color:#fff; font-size:15px; margin-left:6px; text-shadow:0 1px 4px #000; }
.cv-note { color:rgba(219,230,255,.7); font-size:11px; margin-top:3px; text-shadow:0 1px 3px #000; font-family:-apple-system, sans-serif; }
.cv-toast { position:absolute; top:150px; left:50%; transform:translateX(-50%); font-size:24px; letter-spacing:.18em; color:#fff; opacity:0;
  background:rgba(4,8,18,.55); padding:6px 22px; border-radius:99px;
  text-shadow:0 0 18px rgba(90,176,255,.8), 0 2px 6px #000; white-space:nowrap; }
.cv-toast.show { animation:toast 3.2s ease forwards; }
@keyframes toast { 0% { opacity:0; transform:translate(-50%, 8px); } 12% { opacity:1; transform:translate(-50%, 0); } 80% { opacity:1; } 100% { opacity:0; } }
.cv-cams { position:absolute; top:calc(var(--hudh, 64px) + 20px); right:24px; display:flex; gap:4px; pointer-events:auto; }
.cv-cams button { font-size:11px; padding:4px 9px; background:rgba(4,8,18,.6); }
.cv-bottom { position:absolute; left:0; right:0; bottom:0; height:120px; display:grid; grid-template-columns:1fr 1.6fr 1fr; align-items:end; gap:24px;
  padding:0 34px 22px; background:linear-gradient(transparent, rgba(0,0,0,.72)); }
.cv-l, .cv-r { display:flex; gap:28px; } .cv-r { justify-content:flex-end; }
.cv-l div, .cv-r div { display:flex; flex-direction:column; }
.cv-bottom span { font-size:10.5px; letter-spacing:.16em; color:rgba(219,230,255,.75); }
.cv-bottom b { font-size:30px; color:#fff; font-variant-numeric:tabular-nums; line-height:1.1; }
.cv-bottom i { font-style:normal; font-size:11px; color:rgba(219,230,255,.7); }
.cv-c { text-align:center; }
.cv-clock { font-size:34px; color:#fff; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.cv-tl { position:relative; height:4px; background:rgba(255,255,255,.22); border-radius:2px; margin:10px 0 22px; }
.cv-prog { position:absolute; left:0; top:0; bottom:0; background:#fff; border-radius:2px; }
.cv-mk { position:absolute; top:-4px; } .cv-mk i { display:block; width:2px; height:12px; background:#5ab0ff; }
.cv-mk span { position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:9.5px; color:rgba(219,230,255,.75); white-space:nowrap; letter-spacing:.06em; }
.cv-stage { font-size:11px; letter-spacing:.14em; color:#5ab0ff; }
#viewSw { position:fixed; top:84px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:4px; background:var(--panel);
  border:1px solid var(--line); border-radius:99px; padding:4px; }
#viewSw button { border-radius:99px; font-size:11.5px; padding:4px 12px; }
body.flying .scol, body.flying #viewSw, body.flying #serverNote { display:none !important; }

.pcmove { margin:6px 0; padding:6px 9px; border-radius:8px; background:rgba(90,176,255,.1); font-size:12.5px; }

.cv-side { position:absolute; right:24px; top:calc(var(--hudh, 64px) + 58px); width:240px; display:flex; flex-direction:column; gap:6px; }
.cv-side canvas { width:240px; border-radius:8px; border:1px solid rgba(255,255,255,.18); }
.cv-legend2 { font-size:10px; color:rgba(219,230,255,.8); text-shadow:0 1px 3px #000; font-family:-apple-system, sans-serif; }
.cv-legend2 i { display:inline-block; width:10px; height:3px; margin:0 4px 2px 6px; vertical-align:middle; }
.cv-stack { position:absolute; left:24px; bottom:140px; width:54px; height:200px; display:flex; flex-direction:column; gap:3px; }
.cv-stack div { border-radius:4px; background:rgba(219,230,255,.25); position:relative; min-height:8px; transition:background .3s, opacity .6s; }
.cv-stack .fair { border-radius:27px 27px 4px 4px; }
.cv-stack .st span { position:absolute; left:62px; top:50%; transform:translateY(-50%); font-size:10px; letter-spacing:.08em; color:rgba(219,230,255,.8); white-space:nowrap; text-shadow:0 1px 3px #000; }
.cv-stack .on { background:#ffb347; box-shadow:0 0 14px rgba(255,179,71,.8); }
.cv-stack .gone { opacity:.18; }
a { color:var(--accent); }
#studioHud { z-index:3; }
.cv-mk.alt span { top:-16px; }

.cells i.lt { box-shadow:inset 0 0 0 1.5px #fff; }
.cells i.ltoff { opacity:.35; }
.ltdn { color:var(--dim); white-space:nowrap; } .ltdn input { width:52px; padding:1px 4px; display:inline; }
.top3 { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px; }
.top3 button { font-size:11.5px; padding:4px 9px; border-color:rgba(255,255,255,.5); }

.pass { cursor:pointer; border-radius:6px; padding:4px 6px; }
.pass:hover, .pass.on { background:rgba(90,176,255,.12); }
.pass.img b { color:var(--ok); }
#skyPlot { width:210px; height:210px; display:block; margin:8px auto 0; }

abbr.g { text-decoration:underline dotted rgba(90,176,255,.7); text-underline-offset:2px; cursor:help; }
#tour { position:fixed; z-index:40; max-width:320px; background:rgba(6,12,26,.97); border:1px solid var(--accent); border-radius:12px;
  padding:12px 14px; font-size:13px; box-shadow:0 8px 30px rgba(0,0,0,.6); }
#tour b { display:block; margin-bottom:4px; color:#fff; } #tour .ctl { margin-top:10px; justify-content:space-between; }
.tour-hi { outline:2px solid var(--accent) !important; outline-offset:3px; border-radius:10px; }
@media (max-width: 900px) {
  .cv-side, .cv-stack, .cv-note, .cv-mk span { display:none; }
  .cv-bottom { grid-template-columns:1fr; height:auto; padding:0 16px 14px; gap:8px; }
  .cv-l, .cv-r { justify-content:space-between; gap:10px; } .cv-bottom b { font-size:20px; } .cv-clock { font-size:24px; }
  .cv-cams { top:auto; bottom:150px; right:16px; flex-wrap:wrap; justify-content:flex-end; }
  .cv-top { left:16px; } .cv-toast { font-size:16px; top:120px; }
  .cv-bay .cv-baybar { flex-wrap:wrap; border-radius:12px; left:16px; right:16px; transform:none; }
  #viewSw { top:auto; bottom:80px; }
  #tour { left:16px !important; right:16px; max-width:none; }
}
.whatif { display:inline-flex; align-items:center; gap:4px; font-size:12px; } .whatif input { width:44px; padding:4px; }

#close.enc .cv-bottom .cv-l, #close.enc .cv-bottom .cv-r, #close.enc .cv-tl, #close.enc .cv-stage, #close.enc .cv-side, #close.enc .cv-stack, #close.enc .cv-cams button:not(#cvSkip) { visibility:hidden; }
.cv-lbl.enc { transform:translate(-50%, -100%); background:rgba(4,8,18,.7); }
.cv-lbl.enc.me b { color:var(--ok); } .cv-lbl.enc.miss { transform:translate(-50%, -50%); color:#fff; font-size:14px; font-weight:700; border-color:#fff; }
.cv-lbl.enc.miss:empty { display:none; }

/* mission control */
.fuel { margin:8px 0 6px; font-size:12px; }
.fuel .bar { height:8px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:4px; }
.fuel .bar i { display:block; height:100%; background:var(--ok); transition:width .6s; }
.goals { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; } .goals button { font-size:11.5px; }
.burn { border:1px solid var(--line); border-radius:12px; padding:10px; margin-top:10px; font-size:12.5px; }
.burn .big { font-size:17px; font-weight:700; }
.burn[data-v="go"] .big { color:var(--ok); } .burn[data-v="caution"] .big { color:var(--mid); } .burn[data-v="no-go"] .big { color:var(--warn); }
.burn table { width:100%; font-variant-numeric:tabular-nums; } .burn td { padding:1px 4px; } .burn td:first-child { color:var(--dim, #8b97ab); }
.burn .alt { margin-top:8px; padding:8px; border-radius:8px; background:rgba(79,227,161,.08); }
.cmd { padding:4px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.cmd b.approve { color:var(--ok); } .cmd b.reject { color:var(--warn); }
#clockBar { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; width:min(560px, calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-size:12px; font-variant-numeric:tabular-nums; }
#clockBar .row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
#clockBar .rates { display:flex; gap:3px; } #clockBar .rates button { font-size:11px; padding:2px 8px; border-radius:99px; }
#clockBar .rates button.on { background:var(--accent); color:#04101f; }
#clockBar input { width:100%; margin:6px 0 2px; }
#clockNext span { margin-right:12px; } #clockNext .soon { color:var(--mid); font-weight:600; }
body.flying #clockBar { display:none !important; }
#clockBar .row { flex-wrap:wrap; } #clockT { white-space:nowrap; }
#shareBtn { font-size:11.5px; padding:4px 10px; border-radius:99px; }
#toast { position:fixed; top:84px; right:16px; z-index:6; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:12px; max-width:360px; }
#toast a { margin-left:8px; }
#busy .pbar { position:absolute; left:18px; right:18px; bottom:3px; height:2px; overflow:hidden; border-radius:2px; }
#busy .pbar i { display:block; height:100%; width:0; background:var(--accent); transition:width .5s linear; }
#steps button.stale { outline:1px dashed var(--mid); }
#steps button.stale::after { content:' ⟳'; color:var(--mid); }
#life { margin:2px 0 6px; } .lifeRow.ok { color:var(--ok); } .lifeRow.mid { color:var(--mid); }