:root {
  --night: #020713;
  --panel: rgba(4, 19, 38, .76);
  --line: rgba(90, 225, 255, .24);
  --cyan: #64ebff;
  --blue: #4e80ff;
  --violet: #8d6aff;
  --gold: #ffd477;
  --danger: #ff875e;
  --text: #ecfbff;
  --muted: #6e91a8;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--night); color: var(--text); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.app-shell { height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: #020713; }
.boot-screen { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; justify-items: center; background: #020713; transition: opacity .55s ease, visibility .55s; }
.boot-screen.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-screen p { margin: 22px 0 5px; color: #c9f9ff; font-size: 13px; letter-spacing: .18em; }
.boot-screen small { color: #4d7895; font-size: 9px; letter-spacing: .22em; }
.boot-mark { position: relative; width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(100,235,255,.42); border-radius: 50%; color: var(--cyan); box-shadow: 0 0 35px rgba(70,194,255,.14); }
.boot-mark i { position: absolute; inset: 8px; border: 1px dashed rgba(100,235,255,.42); border-radius: 50%; animation: spin 3s linear infinite; }
.boot-mark i:nth-child(2) { inset: -9px; border-style: solid; border-color: transparent var(--violet); animation-direction: reverse; animation-duration: 5s; }
.boot-mark span { font-size: 15px; font-weight: 800; }

.mission-header { min-height: 78px; z-index: 40; display: flex; align-items: center; gap: clamp(15px,2vw,34px); padding: 11px clamp(18px,3vw,52px); border-bottom: 1px solid rgba(94,218,255,.13); background: linear-gradient(180deg,rgba(5,20,39,.98),rgba(3,13,29,.94)); box-shadow: 0 8px 35px rgba(0,0,0,.28); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-emblem { position: relative; width: 48px; height: 48px; border: 1px solid rgba(100,235,255,.34); border-radius: 8px 50% 50% 50%; transform: rotate(45deg); box-shadow: inset 0 0 20px rgba(77,169,255,.14),0 0 16px rgba(69,190,255,.1); }
.brand-emblem::before,.brand-emblem::after,.brand-emblem span { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-45deg); }
.brand-emblem::before { width: 25px; height: 7px; border-radius: 70% 20% 20% 70%; background: linear-gradient(90deg,#eefeff,#65dfff 60%,#5774ff); box-shadow: 0 0 12px var(--cyan); }
.brand-emblem::after { width: 8px; height: 17px; margin-left: -7px; background: #37638a; clip-path: polygon(100% 0,100% 100%,0 70%,0 30%); }
.brand-emblem span { width: 5px; height: 11px; margin-left: 15px; background: #fff6b0; border-radius: 50%; box-shadow: 0 0 14px #ffbc67; }
.brand p,.brand h1 { margin: 0; white-space: nowrap; }
.brand p { color: var(--cyan); font-size: 9px; letter-spacing: .24em; }
.brand h1 { margin-top: 3px; font-size: clamp(20px,1.7vw,29px); letter-spacing: .06em; }
.online-state { display: grid; grid-template-columns: 8px auto; gap: 1px 7px; padding-left: 22px; border-left: 1px solid rgba(100,235,255,.14); }
.online-state i { width: 7px; height: 7px; align-self: center; border-radius: 50%; background: #4dffc0; box-shadow: 0 0 12px #4dffc0; animation: statusPulse 1.8s ease-in-out infinite; }
.online-state span { color: #73e5c3; font-size: 9px; letter-spacing: .12em; }
.online-state small { grid-column: 2; color: #4b718c; font-size: 7px; letter-spacing: .13em; }
.mission-metrics { margin-left: auto; display: flex; gap: clamp(15px,2vw,30px); }
.mission-metrics > div { min-width: 86px; padding-left: 13px; border-left: 1px solid rgba(100,235,255,.12); }
.mission-metrics span,.mission-metrics strong { display: block; }
.mission-metrics span { color: #65869d; font-size: 9px; }
.mission-metrics strong { margin-top: 2px; color: #b9d8e6; font-size: 11px; }
.mission-metrics b { color: var(--cyan); font-size: 23px; line-height: 1; }
.header-actions { display: flex; gap: 7px; }
.hud-button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(100,225,255,.23); border-radius: 5px; color: #bad6e3; background: rgba(15,67,91,.19); cursor: pointer; font-size: 11px; transition: .18s ease; }
.hud-button:hover { color: #fff; border-color: rgba(100,235,255,.58); background: rgba(23,108,139,.27); box-shadow: 0 0 18px rgba(70,204,255,.1); }
.hud-button[aria-pressed="false"] { color: #60788b; }
.hud-button:focus-visible,.panel-button:focus-visible,.mission-button:focus-visible,.result-button:focus-visible { outline: 3px solid rgba(100,235,255,.34); outline-offset: 3px; }

.space-viewport { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle at 52% 47%,rgba(26,77,135,.16),transparent 38%),#020713; isolation: isolate; }
.space-mount,.target-labels,.cinema-vignette,.screen-grid { position: absolute; inset: 0; }
.space-mount canvas { display: block; width: 100%; height: 100%; }
.target-labels { z-index: 8; overflow: hidden; pointer-events: none; }
.cinema-vignette { z-index: 6; pointer-events: none; box-shadow: inset 0 0 160px 45px rgba(0,0,0,.62); }
.screen-grid { z-index: 4; pointer-events: none; opacity: .15; background-image: linear-gradient(rgba(86,200,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(86,200,255,.06) 1px,transparent 1px); background-size: 70px 70px; mask-image: radial-gradient(circle at 50% 48%,#000,transparent 73%); }
.nebula { position: absolute; z-index: 2; width: 48vw; height: 34vh; border-radius: 50%; filter: blur(90px); opacity: .1; pointer-events: none; mix-blend-mode: screen; }
.nebula-a { left: 7%; top: 16%; background: #1e6fff; transform: rotate(-14deg); }
.nebula-b { right: 5%; bottom: 8%; background: #833cff; transform: rotate(23deg); }

.target-node { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 4px 9px 4px 6px; border: 1px solid rgba(100,230,255,.4); border-radius: 3px 999px 999px 3px; color: #effdff; background: linear-gradient(90deg,rgba(3,24,48,.94),rgba(5,51,73,.7)); box-shadow: 0 0 12px rgba(62,201,255,.23),inset 0 0 10px rgba(80,220,255,.07); font-size: 13px; font-weight: 760; letter-spacing: .045em; white-space: nowrap; transform-origin: center; will-change: transform,opacity,filter; transition: opacity .18s linear,border-color .2s,box-shadow .2s; }
.target-node i { position: relative; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #eaffff; box-shadow: 0 0 5px #fff,0 0 12px var(--cyan),0 0 22px var(--blue); animation: beaconPulse 1.8s var(--delay,0s) ease-in-out infinite; }
.target-node i::before,.target-node i::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: linear-gradient(90deg,transparent,#fff,transparent); }
.target-node i::before { width: 21px; height: 1px; }.target-node i::after { width: 1px; height: 21px; background: linear-gradient(180deg,transparent,#fff,transparent); }
.target-node b { font: inherit; text-shadow: 0 1px 2px #000,0 0 8px rgba(120,235,255,.9),0 0 16px rgba(59,111,255,.52); }
.target-node.is-drawn { color: #7894a5; border-color: rgba(92,124,143,.19); box-shadow: none; }
.target-node.is-drawn i { background: #658297; box-shadow: 0 0 7px #557489; animation: none; }
.target-node.is-scanned { animation: signalFlash .4s ease; }
.target-node.is-winner { z-index: 1000 !important; min-height: 40px; padding: 7px 16px 7px 9px; gap: 10px; color: #fff9dd; border-color: var(--gold); background: linear-gradient(90deg,rgba(56,33,8,.96),rgba(40,59,76,.91),rgba(46,22,52,.86)); box-shadow: 0 0 18px rgba(255,205,102,.55),0 0 44px rgba(100,235,255,.42); font-size: 22px; font-weight: 900; }
.target-node.is-winner i { width: 16px; height: 16px; background: #fff5c0; box-shadow: 0 0 7px white,0 0 20px var(--gold),0 0 45px var(--cyan); animation-duration: .65s; }
.target-labels.is-dense .target-node { min-height: 23px; padding: 3px 7px 3px 5px; gap: 5px; font-size: 10px; }
.target-labels.is-dense .target-node i { width: 7px; height: 7px; animation: none; }
.target-labels.is-dense .target-node.is-winner { min-height: 40px; padding: 7px 16px 7px 9px; gap: 10px; font-size: 22px; }
.target-labels.is-dense .target-node.is-winner i { width: 16px; height: 16px; animation: beaconPulse .65s ease-in-out infinite; }

.hud-frame { position: absolute; inset: 18px; z-index: 12; pointer-events: none; }
.hud-frame i { position: absolute; width: 62px; height: 62px; border-style: solid; border-color: rgba(100,235,255,.23); }
.hud-frame i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }.hud-frame i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }.hud-frame i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }.hud-frame i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.scan-sweep { position: absolute; left: 7%; right: 7%; top: -2%; z-index: 11; height: 2px; opacity: 0; pointer-events: none; background: linear-gradient(90deg,transparent,rgba(100,235,255,.84),transparent); box-shadow: 0 0 18px var(--cyan),0 18px 38px rgba(74,186,255,.13); }
.scan-sweep.is-active { opacity: .72; animation: verticalScan 1.45s linear infinite; }

.radar-panel,.mission-panel { position: absolute; z-index: 20; border: 1px solid rgba(100,225,255,.17); background: linear-gradient(145deg,rgba(4,22,43,.78),rgba(3,12,27,.62)); backdrop-filter: blur(12px); box-shadow: 0 16px 45px rgba(0,0,0,.24); }
.radar-panel { left: clamp(16px,2.5vw,42px); top: clamp(18px,3vh,34px); width: 168px; padding: 12px; clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); }
.radar-head { display: flex; justify-content: space-between; align-items: baseline; color: #bceefa; font-size: 10px; }.radar-head small { color: #52768e; font-size: 6px; letter-spacing: .12em; }
.radar { position: relative; width: 112px; height: 112px; margin: 10px auto 7px; overflow: hidden; border: 1px solid rgba(100,235,255,.34); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 17px,rgba(100,235,255,.09) 18px 19px),radial-gradient(circle,rgba(29,141,164,.12),rgba(2,15,31,.58)); box-shadow: inset 0 0 18px rgba(57,191,224,.12),0 0 18px rgba(57,191,224,.08); }
.radar-sweep { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; transform-origin: left top; background: conic-gradient(from 270deg,rgba(100,235,255,.42),transparent 35deg); animation: radarSpin 2.3s linear infinite; }
.radar-axis { position: absolute; left: 50%; top: 50%; background: rgba(100,235,255,.12); transform: translate(-50%,-50%); }.axis-x { width: 100%; height: 1px; }.axis-y { width: 1px; height: 100%; }
.radar-blip { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blip 2s ease-in-out infinite; }.blip-a { left: 27%; top: 35%; }.blip-b { right: 23%; top: 59%; animation-delay: -.7s; }.blip-c { left: 48%; bottom: 16%; animation-delay: -1.2s; }
.radar b { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 12px var(--cyan); }
.radar-panel p { margin: 0; color: #638ba1; text-align: center; font-size: 8px; letter-spacing: .08em; }
.radar-panel.is-searching .radar { border-color: rgba(100,235,255,.7); box-shadow: inset 0 0 24px rgba(57,191,224,.2),0 0 25px rgba(57,191,224,.18); }.radar-panel.is-locked .radar { border-color: var(--gold); box-shadow: inset 0 0 22px rgba(255,192,80,.16),0 0 24px rgba(255,154,80,.22); }.radar-panel.is-locked .radar-sweep { background: conic-gradient(from 270deg,rgba(255,176,89,.6),transparent 35deg); animation-duration: .7s; }.radar-panel.is-locked .radar b { background: #fff1a6; box-shadow: 0 0 16px var(--gold); }

.mission-panel { left: clamp(16px,2.5vw,42px); bottom: 20px; width: 244px; padding: 14px; clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%); }
.panel-title { display: flex; align-items: center; gap: 9px; color: #65c9db; font-size: 8px; letter-spacing: .17em; }.panel-title i { height: 1px; flex: 1; background: linear-gradient(90deg,rgba(100,235,255,.38),transparent); }
.sample-note { margin: 10px 0; color: #e3c778; font-size: 10px; line-height: 1.45; }.sample-note i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.switch-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid rgba(100,225,255,.09); cursor: pointer; }.switch-row > span { flex: 1; }.switch-row b,.switch-row small { display: block; }.switch-row b { font-size: 11px; }.switch-row small { margin-top: 3px; color: #567286; font-size: 8px; }.switch-row input { position: absolute; opacity: 0; }.switch-row > i { position: relative; width: 38px; height: 20px; border-radius: 99px; background: #172d43; transition: .2s; }.switch-row > i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #a7bac5; transition: .2s; }.switch-row input:checked + i { background: #147f9a; box-shadow: 0 0 12px rgba(100,235,255,.24); }.switch-row input:checked + i::after { transform: translateX(18px); background: #fff; }
.panel-button { width: 100%; min-height: 32px; margin-top: 6px; border: 1px solid rgba(100,225,255,.16); border-radius: 3px; color: #8cafbf; background: rgba(15,61,82,.19); cursor: pointer; font-size: 9px; }.panel-button:hover { color: #fff; border-color: rgba(100,235,255,.48); }

.flight-data { position: absolute; right: clamp(18px,3vw,48px); bottom: 28px; z-index: 15; padding-right: 12px; border-right: 2px solid rgba(100,235,255,.26); text-align: right; }.flight-data span,.flight-data b,.flight-data small { display: block; }.flight-data span { color: #486b83; font-size: 7px; letter-spacing: .19em; }.flight-data b { margin-top: 3px; color: #82a8b9; font-size: 10px; }.flight-data small { margin-top: 2px; color: #425d72; font-size: 7px; }

.target-lock { position: absolute; left: 50%; top: 44%; z-index: 28; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }.lock-box { position: relative; width: 154px; height: 154px; margin: auto; border: 1px solid rgba(100,235,255,.23); border-radius: 50%; animation: lockRotate 2.2s linear infinite; }.lock-box::before { content: ""; position: absolute; inset: 21px; border: 1px dashed rgba(100,235,255,.42); border-radius: 50%; }.lock-box i { position: absolute; width: 33px; height: 33px; border-style: solid; border-color: var(--cyan); }.lock-box i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }.lock-box i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }.lock-box i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }.lock-box i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }.lock-box span { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 18px var(--cyan); }.target-lock p { margin: 9px 0 2px; color: var(--cyan); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-shadow: 0 0 12px var(--cyan); }.target-lock small { color: #7595a8; font-size: 8px; letter-spacing: .2em; }.target-lock.is-locked .lock-box { border-color: rgba(255,207,107,.62); animation-duration: .8s; }.target-lock.is-locked .lock-box i { border-color: var(--gold); }.target-lock.is-locked p { color: #ffe3a0; text-shadow: 0 0 15px #ffae62; }

.tractor-beam { position: fixed; z-index: 32; left: 0; top: 0; height: 58px; width: 0; transform-origin: left center; opacity: 0; pointer-events: none; background: linear-gradient(180deg,transparent,rgba(114,241,255,.17),rgba(212,251,255,.86) 48%,rgba(113,195,255,.26),transparent); clip-path: polygon(0 43%,100% 0,100% 100%,0 57%); filter: drop-shadow(0 0 16px rgba(91,225,255,.8)); transition: opacity .16s; }.tractor-beam.is-active { opacity: 1; animation: beamFlicker .16s steps(2) infinite; }.tractor-beam i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #fff; box-shadow: 0 0 11px #fff,0 0 25px var(--cyan); }.tractor-beam span { position: absolute; right: -6px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 20px var(--cyan); }

.primary-control { position: absolute; left: 50%; bottom: 23px; z-index: 34; width: min(410px,42vw); transform: translateX(-50%); }.mission-button { width: 100%; min-height: 65px; display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; padding: 7px 17px; border: 1px solid rgba(100,235,255,.62); color: #fff; cursor: pointer; background: linear-gradient(110deg,rgba(27,69,147,.94),rgba(70,58,179,.94) 51%,rgba(8,122,155,.93)); clip-path: polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px); box-shadow: 0 0 30px rgba(54,155,231,.22),inset 0 1px rgba(255,255,255,.21); transition: transform .18s,filter .18s; }.mission-button:hover { filter: brightness(1.15); transform: translateY(-2px); }.mission-button:active { transform: translateY(1px); }.mission-button.is-cruising { background: linear-gradient(110deg,rgba(91,39,151,.95),rgba(34,95,190,.96),rgba(8,139,158,.95)); }.mission-button:disabled { cursor: wait; filter: saturate(.65); }
.button-reactor { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.37); border-radius: 50%; box-shadow: 0 0 15px rgba(100,235,255,.25); }.button-reactor i { width: 10px; height: 10px; border-radius: 50%; background: #fff9bc; box-shadow: 0 0 10px #fff,0 0 22px var(--cyan); animation: reactorPulse 1.5s ease-in-out infinite; }.button-copy { text-align: left; }.button-copy b,.button-copy small { display: block; }.button-copy b { font-size: 18px; letter-spacing: .07em; }.button-copy small { margin-top: 2px; color: rgba(222,242,255,.67); font-size: 8px; }.button-arrow { font-size: 27px; }

.result-overlay { position: absolute; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 45%,rgba(23,94,155,.4),rgba(2,8,19,.86) 48%,rgba(1,4,11,.96) 79%); backdrop-filter: blur(6px); animation: resultIn .5s ease both; }.result-rings { position: absolute; left: 50%; top: 45%; width: min(48vw,550px); aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; }.result-rings i { position: absolute; inset: 0; border: 1px solid rgba(100,235,255,.22); border-radius: 50%; animation: resultPulse 2.4s ease-out infinite; }.result-rings i:nth-child(2) { inset: 14%; border-color: rgba(141,106,255,.32); animation-delay: .45s; }.result-rings i:nth-child(3) { inset: 27%; border-color: rgba(255,212,119,.32); animation-delay: .9s; }.result-rings i:nth-child(4) { inset: 39%; border-style: dashed; animation: spin 5s linear infinite; }.result-lock { position: absolute; left: 50%; top: 45%; width: min(70vw,720px); height: min(40vh,350px); transform: translate(-50%,-50%); pointer-events: none; }.result-lock i { position: absolute; width: 65px; height: 65px; border-color: rgba(255,212,119,.56); border-style: solid; }.result-lock i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }.result-lock i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }.result-lock i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }.result-lock i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }.result-code { position: relative; margin: 0 0 8px; color: var(--cyan); font-size: 10px; letter-spacing: .2em; }.result-overlay h2 { position: relative; max-width: 90vw; margin: 0; color: transparent; background: linear-gradient(180deg,#fff,#e6fbff 45%,#73ddff); background-clip: text; font-size: clamp(62px,9vw,142px); line-height: 1.08; overflow-wrap: anywhere; filter: drop-shadow(0 0 22px rgba(100,235,255,.72)); }.result-blessing { position: relative; margin: 9px 0 30px; color: #ffe5a4; font-size: clamp(18px,2.2vw,30px); font-weight: 750; text-shadow: 0 0 18px rgba(255,183,92,.45); }.result-actions { position: relative; display: flex; gap: 10px; }.result-button { min-width: 150px; min-height: 45px; padding: 0 19px; border: 1px solid rgba(100,235,255,.27); border-radius: 4px; color: #c0dce6; background: rgba(14,59,80,.34); cursor: pointer; }.result-primary { color: #fff; border-color: rgba(100,235,255,.58); background: linear-gradient(110deg,#4257c3,#128ea5); }

footer { min-height: 35px; z-index: 45; display: flex; justify-content: center; align-items: center; gap: 18px; padding: 7px 3vw; color: #526b7d; border-top: 1px solid rgba(100,225,255,.09); background: #020610; font-size: 9px; }footer p { margin: 0; }
.toast { position: fixed; left: 50%; bottom: 52px; z-index: 300; max-width: min(560px,88vw); padding: 12px 18px; transform: translate(-50%,18px); opacity: 0; pointer-events: none; color: #fff; border: 1px solid rgba(100,235,255,.4); border-radius: 5px; background: rgba(4,28,52,.97); box-shadow: 0 16px 45px rgba(0,0,0,.5); text-align: center; font-size: 12px; transition: .24s ease; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast.error { color: #ffd8de; border-color: rgba(255,101,125,.48); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes statusPulse { 50% { opacity: .4; } }
@keyframes beaconPulse { 0%,100% { opacity: .72; transform: scale(.78); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes signalFlash { 50% { color: #fff8c2; border-color: var(--gold); filter: brightness(1.6); } }
@keyframes verticalScan { from { top: 2%; } to { top: 96%; } }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes blip { 50% { opacity: .2; transform: scale(.65); } }
@keyframes lockRotate { to { transform: rotate(360deg); } }
@keyframes beamFlicker { 50% { filter: brightness(1.35) drop-shadow(0 0 18px rgba(91,225,255,.9)); } }
@keyframes reactorPulse { 50% { transform: scale(1.4); box-shadow: 0 0 14px #fff,0 0 31px var(--cyan); } }
@keyframes resultPulse { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .7; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes resultIn { from { opacity: 0; } }

@media (max-width: 1100px) {
  .online-state { display: none; }.mission-panel { width: 218px; }.radar-panel { width: 150px; }.radar { width: 96px; height: 96px; }.primary-control { width: min(370px,42vw); }
}
@media (max-width: 780px) {
  .mission-header { min-height: 112px; flex-wrap: wrap; padding: 9px 13px; gap: 7px 12px; }.brand-emblem { width: 40px; height: 40px; }.brand p { font-size: 7px; }.brand h1 { font-size: 18px; }.mission-metrics { margin-left: auto; }.mission-metrics > div { min-width: 60px; }.header-actions { width: 100%; }.hud-button { flex: 1; min-height: 34px; padding: 0 7px; }
  .radar-panel { left: 10px; top: 10px; width: 125px; padding: 8px; }.radar { width: 76px; height: 76px; margin-block: 7px 4px; }.radar-head small { display: none; }
  .mission-panel { left: 10px; bottom: 88px; width: 188px; padding: 10px; }.switch-row small,.flight-data { display: none; }.primary-control { width: min(400px,calc(100vw - 20px)); bottom: 18px; }.mission-button { min-height: 58px; }.button-copy b { font-size: 16px; }
  .target-node { min-height: 24px; padding: 3px 8px 3px 5px; font-size: 11px; }.target-node.is-winner { font-size: 19px; }.result-actions { width: min(360px,82vw); }.result-button { flex: 1; min-width: 0; }.result-lock { width: 88vw; }
  footer { min-height: 45px; flex-direction: column; gap: 2px; text-align: center; }
}
@media (max-width: 480px) {
  .mission-metrics > div:nth-child(2) { display: none; }.radar-panel { transform: scale(.86); transform-origin: left top; }.mission-panel { width: 172px; }.mission-panel .import-trigger { display: none; }.lock-box { width: 120px; height: 120px; }.result-actions { flex-direction: column; }.result-button { width: 100%; }.result-lock { height: 36vh; }.target-labels.is-dense .target-node:not(.is-winner) b { max-width: 48px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-height: 750px) and (min-width: 781px) {
  .mission-header { min-height: 65px; padding-block: 7px; }.brand-emblem { width: 40px; height: 40px; }.radar-panel { top: 10px; transform: scale(.85); transform-origin: left top; }.mission-panel { bottom: 13px; padding: 10px; }.primary-control { bottom: 14px; }.mission-button { min-height: 55px; }.flight-data { bottom: 18px; }footer { min-height: 29px; padding-block: 4px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }