:root { color-scheme: dark; font-family: Arial, sans-serif; background: #101516; color: #e8eee9; }
body { margin: 0; background: radial-gradient(circle at top right, #1d3934, #101516 55%); min-height: 100vh; }
main { max-width: 900px; margin: auto; padding: 8vw 6vw; }
.eyebrow, .label { color: #8dd3b6; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 680px; font-size: clamp(2.5rem, 8vw, 5.5rem); line-height: .95; margin: 1rem 0; }
.lede { color: #aabbb2; font-size: 1.15rem; max-width: 500px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 4rem 0; }
.card { background: #17211f; border: 1px solid #2d443e; border-radius: 12px; padding: 1.25rem; min-height: 90px; }
.wide { grid-column: span 2; } strong { display: block; font-size: 1.35rem; margin-top: 1rem; } small { color: #8da39a; display: block; margin-top: .5rem; }
h2 { font-size: 1rem; font-weight: normal; color: #8dd3b6; } ul { list-style: none; padding: 0; display: grid; gap: .6rem; } li { padding: .8rem 1rem; background: #17211f; border-radius: 8px; display: flex; justify-content: space-between; } li span { color: #8da39a; }
.map-link, a { color: #8dd3b6; } .map-button { display: inline-block; background: #8dd3b6; color: #10201b; border-radius: 6px; padding: .8rem 1.1rem; font-weight: bold; text-decoration: none; } .map-main { max-width: 1200px; } .map-header { display: flex; align-items: baseline; gap: 1.5rem; } .map-header h1 { margin-right: auto; } .map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.5rem 0; color: #aabbb2; } select { background: #17211f; border: 1px solid #2d443e; color: #e8eee9; padding: .65rem; border-radius: 6px; margin-left: .5rem; } .map-info { margin-top: 1rem; min-height: auto; display: grid; gap: .45rem; } .map-info strong { margin-top: 0; } .geojson-overlay { display: none; }
button { background: #8dd3b6; border: 0; border-radius: 6px; color: #10201b; cursor: pointer; font: inherit; padding: .7rem 1rem; } button[hidden] { display: none; } button:disabled { background: #52645d; color: #b5c0ba; cursor: not-allowed; } #recording-status { color: #ffb38f; } .recording-tools { border: 1px solid #744538; border-radius: 8px; padding: .75rem 1rem; } label { display: block; color: #aabbb2; margin: .8rem 0; } input, textarea { display: block; width: 100%; box-sizing: border-box; background: #101816; border: 1px solid #2d443e; color: #e8eee9; border-radius: 6px; padding: .7rem; margin-top: .35rem; } textarea { min-height: 120px; } .overlay-panel { margin-top: 1rem; } .overlay-panel form { display: flex; align-items: end; gap: 1rem; } .overlay-panel input { max-width: 420px; } .overlay-panel ul { margin-top: 1rem; } .overlay-panel li { align-items: center; } .mission-tools { flex-wrap: wrap; }
#map { min-height: 55vh; background: #17211f; border: 1px solid #2d443e; border-radius: 12px; overflow: hidden; } .vector-marker { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: #ff6b4a; box-shadow: 0 1px 5px #17211f; } .map-error { color: #ffb38f; border: 1px solid #744538; border-radius: 8px; padding: .75rem 1rem; }
.network-mode { margin-top: 3rem; background: #17211f; border: 1px solid #2d443e; border-radius: 12px; padding: 1.25rem; } .mode-choice { display: flex; gap: 1rem; flex-wrap: wrap; } .mode-choice label, .confirm { margin: .7rem 0; } .mode-choice input, .confirm input { display: inline; width: auto; } .reconnect-info { border-left: 3px solid #8dd3b6; padding: .5rem 1rem; margin: 1rem 0; } .reconnect-info p { margin: .4rem 0; } .warning { color: #ffb38f; } .mode-actions { display: flex; gap: .7rem; flex-wrap: wrap; } #network-mode-message { min-height: 1.2rem; color: #8dd3b6; } #reveal-network-password { padding: .35rem .6rem; font-size: .85rem; }
.network-status { font-size: 1.1rem; color: #8dd3b6; margin: 1rem 0; } .network-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; } .network-details p { margin: 0; padding: .7rem; background: #101816; border-radius: 6px; } .network-details strong, .network-details span { display: block; margin: 0; } .network-details span { color: #e8eee9; margin-top: .25rem; } .network-direct { border-left: 3px solid #8dd3b6; padding: .7rem 1rem; } 
.diagnostic-network { margin-top: 1rem; padding: .85rem; border: 1px solid #d86c3e; background: #2a1c17; font-size: .8rem; }
 .diagnostic-network button { margin: .3rem .4rem .3rem 0; } .compatibility-properties { display: grid; grid-template-columns: minmax(8rem, .35fr) 1fr; gap: .4rem 1rem; margin: 1rem 0; } .compatibility-properties dt { font-weight: bold; color: #aabbb2; } .compatibility-properties dd { margin: 0; } .compatibility-download { display: inline-block; margin: .3rem .4rem .3rem 0; } #compatibility-test-message { min-height: 1.2rem; }
.standalone-confirmation { border: 2px solid #8dd3b6; border-radius: 8px; padding: 1rem; margin: 1rem 0; } .standalone-confirmation strong { margin-top: 0; } .standalone-confirmation p { margin: .5rem 0; } 
@media (max-width: 650px) { .grid { grid-template-columns: 1fr; } .wide { grid-column: auto; } .map-header { align-items: center; gap: .8rem; } .map-toolbar, .overlay-panel form { align-items: stretch; flex-direction: column; } .map-toolbar label, .map-toolbar button { width: 100%; box-sizing: border-box; } select { width: 100%; margin: .35rem 0 0; } }
.route-swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: -0.05rem; }
.satellite-header { margin-bottom: 1.5rem; }
.satellite-summary, .satellite-panel { background: #17211f; border: 1px solid #2d443e; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.satellite-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.satellite-metrics p, .dop-grid span { background: #101816; border-radius: 6px; padding: .75rem; margin: 0; }
.satellite-metrics strong { display: block; font-size: 1.15rem; margin: 0 0 .3rem; }
.satellite-metrics span, .dop-grid span { color: #8da39a; font-size: .8rem; }
.dop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .6rem; }
.dop-grid strong { color: #e8eee9; margin-left: .25rem; }
.satellite-message { color: #8dd3b6; margin: .8rem 0; }
.satellite-panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.satellite-panel h2 { color: #8dd3b6; font-size: 1rem; font-weight: normal; }
.satellite-legend { color: #aabbb2; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.legend-used::before, .legend-not-used::before, .legend-missing::before { content: ''; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .3rem; background: #8dd3b6; }
.legend-not-used::before { background: #d86c3e; }
.legend-missing::before { background: #52645d; }
.signal-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .65rem; }
.signal-item { background: #101816; border: 1px solid #2d443e; border-radius: 6px; padding: .75rem; }
.signal-item.used { border-color: #8dd3b6; }
.signal-item strong, .signal-item span, .signal-item em { display: block; margin: 0; }
.signal-item strong { font-size: .9rem; }
.signal-item span, .signal-item em { color: #aabbb2; font-size: .75rem; margin-top: .35rem; }
.signal-bar { height: .5rem; background: #2d443e; border-radius: 1rem; margin-top: .7rem; overflow: hidden; }
.signal-bar span { height: 100%; background: #8dd3b6; margin: 0; }
.sky-wrap { max-width: 360px; margin: 0 auto; }
#sky-plot { width: 100%; height: auto; }
.sky-horizon { fill: #101816; stroke: #8da39a; stroke-width: 2; }
.sky-ring, .sky-axis { fill: none; stroke: #2d443e; stroke-width: 1; }
#sky-plot text { fill: #aabbb2; font-size: 11px; }
.sky-used { fill: #8dd3b6; stroke: #e8eee9; stroke-width: 1; }
.sky-not-used { fill: #d86c3e; stroke: #e8eee9; stroke-width: 1; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; } th, td { text-align: left; padding: .65rem; border-bottom: 1px solid #2d443e; } th { color: #8dd3b6; } td { color: #aabbb2; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 700px) { .satellite-metrics { grid-template-columns: repeat(2, 1fr); } .dop-grid { grid-template-columns: repeat(2, 1fr); } }
.package-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); gap: 1rem; }
.package-preview { min-height: 620px; }
#package-map { height: 580px; background: #17211f; }
.package-controls { min-height: 620px; }
.package-controls form { display: grid; gap: .75rem; }
.package-entry { display: block; border: 1px solid #2d443e; }
.package-entry p { color: #aabbb2; font-size: .8rem; line-height: 1.45; }
.package-entry button, .package-entry a { margin: .2rem .35rem .2rem 0; }
.package-entry a { display: inline-block; overflow-wrap: anywhere; }
.package-controls .error, .package-preview .error { color: #d86c3e; }
.package-controls progress { width: 100%; }
.package-controls ul { padding: 0; }
@media (max-width: 850px) { .package-layout { grid-template-columns: 1fr; } .package-preview, .package-controls { min-height: 0; } #package-map { height: 380px; } }
 .auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
 .auth-card { width: min(100%, 30rem); }
 .auth-card form { display: grid; gap: 1rem; }
 .auth-card input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; }
 .error { color: #a52525; }
 .success { color: #176b43; }