:root {
    --void: #020807;
    --panel: #07110f;
    --panel-2: #0a1714;
    --cyan: #28e2c2;
    --cyan-soft: rgba(40, 226, 194, .12);
    --amber: #ffad5c;
    --text: #e5f4ef;
    --muted: #71847e;
    --line: rgba(151, 194, 181, .14);
    --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --sans: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--void); color: var(--text); }
body { font-family: var(--sans); overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--cyan); color: var(--void); }

.app-shell { min-height: 100vh; display: grid; grid-template-rows: 72px minmax(0,1fr) 34px; }
.topbar { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1.4rem; border-bottom: 1px solid var(--line); background: rgba(2,8,7,.94); backdrop-filter: blur(14px); }
.lab-brand { width: max-content; display: flex; align-items: center; gap: .8rem; color: var(--text); text-decoration: none; }
.lab-brand > span:last-child { display: grid; line-height: 1.05; }
.lab-brand strong { font: 700 .78rem var(--mono); letter-spacing: .18em; }
.lab-brand small { margin-top: .25rem; color: var(--cyan); font: .52rem var(--mono); letter-spacing: .2em; }
.brand-mark { position: relative; width: 32px; height: 32px; border: 1px solid var(--cyan); transform: rotate(45deg); }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; background:var(--cyan); }
.brand-mark::before { width: 14px; height: 1px; top: 14px; left: 8px; }
.brand-mark::after { width: 5px; height: 5px; border-radius: 50%; top: 12px; left: 13px; box-shadow: 8px -8px 0 -1px var(--cyan),-8px 8px 0 -1px var(--cyan); }
.mission-status { display: flex; align-items: center; gap: .65rem; color: #9bada7; font: .58rem var(--mono); letter-spacing: .14em; }
.mission-status b { margin-left: .4rem; padding: .28rem .45rem; color: var(--cyan); border: 1px solid rgba(40,226,194,.35); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(40,226,194,.08),0 0 14px var(--cyan); animation: pulse 2s ease-in-out infinite; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: .8rem; }
.icon-button,.exit-link { height: 36px; border: 1px solid var(--line); background: transparent; color: #94a69f; }
.icon-button { width: 38px; cursor: pointer; }
.icon-button:hover,.exit-link:hover { color: var(--cyan); border-color: rgba(40,226,194,.45); }
.exit-link { display: inline-flex; align-items: center; gap: .7rem; padding: 0 .9rem; text-decoration: none; font: .62rem var(--mono); text-transform: uppercase; letter-spacing: .12em; }

.lab-grid { min-height: 0; display: grid; grid-template-columns: 248px minmax(380px,1fr) 300px; }
.control-panel,.inspector { position: relative; z-index: 5; min-height: 0; padding: 1.2rem; overflow-y: auto; background: linear-gradient(180deg,rgba(9,21,18,.98),rgba(4,12,10,.98)); scrollbar-width: thin; scrollbar-color: #1b3932 transparent; }
.control-panel { border-right: 1px solid var(--line); }
.inspector { border-left: 1px solid var(--line); }
.panel-heading { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.panel-heading > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; color: var(--cyan); border: 1px solid rgba(40,226,194,.32); font: .6rem var(--mono); }
.panel-heading small { color: var(--muted); font: .52rem var(--mono); text-transform: uppercase; letter-spacing: .15em; }
.panel-heading h1,.panel-heading h2 { margin: .12rem 0 0; font-size: .95rem; letter-spacing: -.02em; }
.search-field { height: 40px; display: flex; align-items: center; gap: .6rem; margin: 1rem 0; padding: 0 .75rem; border: 1px solid var(--line); background: #030a08; color: var(--muted); }
.search-field:focus-within { border-color: rgba(40,226,194,.55); box-shadow: 0 0 0 2px rgba(40,226,194,.06); }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: .68rem var(--mono); }
.search-field input::placeholder { color: #52615c; }
.planet-list { display: grid; gap: 3px; }
.planet-button { width: 100%; height: 39px; display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: .55rem; padding: 0 .7rem; border: 1px solid transparent; background: transparent; color: #81938d; text-align: left; cursor: pointer; transition: .2s ease; }
.planet-button:hover { color: var(--text); background: rgba(255,255,255,.025); }
.planet-button.active { color: var(--text); border-color: rgba(40,226,194,.28); background: var(--cyan-soft); }
.planet-button .planet-dot { width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--planet-color); box-shadow: 0 0 10px color-mix(in srgb,var(--planet-color),transparent 35%); }
.planet-button strong { font-size: .68rem; font-weight: 600; }
.planet-button small { color: #4f625b; font: .52rem var(--mono); }
.planet-button.active small { color: var(--cyan); }
.control-block { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.control-title,.range-labels { display: flex; justify-content: space-between; }
.control-title { align-items: center; color: #a6b5b0; font-size: .64rem; }
.control-title output { color: var(--cyan); font: .58rem var(--mono); }
.range-labels { margin-top: .3rem; color: #465852; font: .48rem var(--mono); text-transform: uppercase; }
input[type="range"] { width: 100%; height: 2px; margin: 1rem 0 .35rem; appearance: none; background: #1a302a; accent-color: var(--cyan); }
input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; appearance: none; border: 2px solid var(--void); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 1px var(--cyan),0 0 12px rgba(40,226,194,.5); cursor: pointer; }
.toggle-grid { margin-top: 1.15rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.switch-row { min-height: 37px; display: flex; align-items: center; justify-content: space-between; color: #7f918b; font-size: .62rem; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { position: relative; width: 28px; height: 14px; border: 1px solid #294139; transition: .2s; }
.switch-row i::after { content:""; position:absolute; width: 8px; height: 8px; left: 2px; top: 2px; background:#476159; transition:.2s; }
.switch-row input:checked+i { border-color: rgba(40,226,194,.55); background: rgba(40,226,194,.08); }
.switch-row input:checked+i::after { left: 16px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--void); }
#space-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.viewport-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 100px rgba(0,0,0,.55); }
.coordinates { position: absolute; left: 1rem; top: 1rem; display: grid; gap: .25rem; color: #41524d; font: .5rem var(--mono); letter-spacing: .12em; pointer-events: none; }
.coordinates b { color: #6d827a; font-weight: 400; }
.sim-clock { position: absolute; right: 1rem; top: 1rem; display: grid; justify-items: end; padding: .7rem .85rem; border-right: 2px solid var(--cyan); background: rgba(2,8,7,.66); backdrop-filter: blur(8px); pointer-events: none; }
.sim-clock small { color: #53675f; font: .47rem var(--mono); letter-spacing: .14em; }
.sim-clock strong { margin: .15rem 0; font: .75rem var(--mono); letter-spacing: .07em; }
.sim-clock span { color: var(--cyan); font: .48rem var(--mono); }
.pause-button { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem; height: 40px; padding: 0 1rem; border: 1px solid rgba(40,226,194,.3); background: rgba(3,12,10,.84); color: var(--cyan); backdrop-filter: blur(8px); cursor: pointer; }
.pause-button:hover { background: rgba(40,226,194,.12); }
.pause-button span { font: .75rem var(--mono); }
.pause-button b { color: #b7c5c0; font: 500 .57rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.canvas-hint { position: absolute; left: 1rem; bottom: 1rem; color: #40524c; font: .48rem var(--mono); text-transform: uppercase; letter-spacing: .1em; pointer-events: none; }

.planet-visual { position: relative; height: 190px; display: grid; place-items: center; margin: 1rem 0; overflow: hidden; background: radial-gradient(circle,rgba(40,226,194,.09),transparent 60%),repeating-linear-gradient(0deg,transparent 0 16px,rgba(255,255,255,.018) 17px); border: 1px solid var(--line); }
.planet-visual::before { content:""; position:absolute; width:145px; height:145px; border:1px solid rgba(40,226,194,.13); border-radius:50%; box-shadow:0 0 0 22px rgba(40,226,194,.025),0 0 0 44px rgba(40,226,194,.018); }
.planet-visual img { position: relative; z-index: 2; width: 145px; height: 145px; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)); transition: opacity .2s,transform .4s; animation: planet-float 6s ease-in-out infinite; }
.scan-line { position: absolute; z-index: 3; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow: 0 0 12px var(--cyan); opacity:.45; animation: scan 4s linear infinite; }
.target-corner { position:absolute; z-index:4; width:12px; height:12px; border-color:rgba(40,226,194,.5); }
.top-left { left:9px; top:9px; border-left:1px solid; border-top:1px solid; }.top-right { right:9px; top:9px; border-right:1px solid; border-top:1px solid; }
.bottom-left { left:9px; bottom:9px; border-left:1px solid; border-bottom:1px solid; }.bottom-right { right:9px; bottom:9px; border-right:1px solid; border-bottom:1px solid; }
.visual-label { position:absolute; z-index:4; left:.65rem; bottom:.5rem; color:#53675f; font:.45rem var(--mono); letter-spacing:.1em; }
.visual-label b { color:var(--cyan); }
.planet-header { display:flex; align-items:end; justify-content:space-between; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.planet-header p { margin:0 0 .2rem; color:var(--cyan); font:.48rem var(--mono); letter-spacing:.12em; }
.planet-header h2 { margin:0; font-size:2rem; line-height:1; letter-spacing:-.05em; }
.planet-header>span { color:#344a43; font:2.1rem/1 var(--mono); }
.planet-description { min-height: 58px; color:#84968f; font-size:.68rem; line-height:1.6; }
.telemetry { margin:0; }
.telemetry>div { display:flex; justify-content:space-between; gap:1rem; padding:.58rem 0; border-top:1px solid rgba(151,194,181,.08); }
.telemetry dt { color:#596c65; font-size:.56rem; font-weight:400; }
.telemetry dd { margin:0; color:#bbc9c4; font:.56rem var(--mono); text-align:right; }
.signal { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); color:#53675f; font:.45rem var(--mono); }
.signal>div { height:3px; background:#13241f; }.signal i { display:block; width:99.8%; height:100%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }.signal b { color:var(--cyan); }
.lab-footer { display:flex; align-items:center; justify-content:space-between; padding:0 1.4rem; border-top:1px solid var(--line); color:#344a43; background:#020706; font:.46rem var(--mono); letter-spacing:.09em; }
.lab-footer a { color:#647a72; text-decoration:none; }.lab-footer a:hover { color:var(--cyan); }
noscript { position:fixed; inset:auto 1rem 1rem; z-index:50; padding:1rem; background:#411; color:#fff; }

@keyframes pulse { 50% { opacity:.45; box-shadow:0 0 0 8px rgba(40,226,194,.02),0 0 6px var(--cyan); } }
@keyframes scan { from { top:12%; } to { top:88%; } }
@keyframes planet-float { 50% { transform:translateY(-5px) rotate(2deg); } }

@media (max-width: 1050px) {
    body { overflow:auto; }
    .app-shell { min-height:100vh; grid-template-rows:64px auto 34px; }
    .lab-grid { grid-template-columns:220px minmax(420px,1fr); grid-template-rows:minmax(620px,calc(100vh - 98px)) auto; }
    .inspector { grid-column:1/-1; display:grid; grid-template-columns:220px 1fr 1fr; gap:1.2rem; border-left:0; border-top:1px solid var(--line); }
    .inspector .panel-heading { grid-column:1/-1; }
    .planet-visual { grid-row:2/5; margin:0; }
    .planet-description { margin-top:0; }
}

@media (max-width: 720px) {
    .topbar { grid-template-columns:1fr auto; padding:0 .8rem; }.mission-status { display:none; }.exit-link { display:none; }
    .lab-grid { display:flex; flex-direction:column; }
    .control-panel { order:2; overflow:visible; border-right:0; border-top:1px solid var(--line); }
    .viewport { order:1; min-height:68svh; }
    .inspector { order:3; display:block; overflow:visible; }
    .planet-list { grid-template-columns:repeat(3,1fr); }
    .planet-button { grid-template-columns:18px 1fr; padding:0 .35rem; }.planet-button small { display:none; }
    .planet-visual { height:230px; }
    .lab-footer { display:none; }
    .app-shell { grid-template-rows:64px auto; }
    .canvas-hint { display:none; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}