:root {
  color-scheme: dark;
  --bg: #040b10;
  --panel: rgba(7, 20, 28, .70);
  --panel-2: rgba(9, 28, 38, .84);
  --line: rgba(111, 226, 238, .18);
  --line-strong: rgba(111, 226, 238, .42);
  --text: #eaf7f8;
  --muted: #7c9aa2;
  --faint: #46616a;
  --accent: #7ef3f3;
  --good: #82f0c7;
  --warn: #f1d589;
  --danger: #ff9c9c;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.app-shell { position: relative; width: 100%; height: 100%; min-height: 520px; background: #041018; }
.world { position: absolute; inset: 0; }
.world-vignette { position: absolute; inset: 0; pointer-events:none; background: radial-gradient(circle at 50% 44%, transparent 35%, rgba(0,9,14,.28) 75%, rgba(0,4,8,.76) 100%); box-shadow: inset 0 0 120px rgba(0,0,0,.6); z-index: 2; }
.rain-layer { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .4s ease; background-image: repeating-linear-gradient(110deg, transparent 0 17px, rgba(180,230,240,.13) 18px, transparent 19px 33px); background-size: 140px 140px; animation: rain .48s linear infinite; }
.rain-layer.active { opacity: .55; }
@keyframes rain { to { background-position: 52px 118px; } }
.glass { background: linear-gradient(180deg, rgba(9,26,35,.77), rgba(3,14,20,.64)); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 42px rgba(0,0,0,.18); }
.eyebrow { color: #6d9aa3; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.topbar { position:absolute; left:16px; right:16px; top:14px; min-height:72px; z-index:10; border-radius:16px; display:grid; grid-template-columns:minmax(220px,1fr) minmax(280px,580px) minmax(260px,1fr); align-items:center; padding:12px 16px; gap:18px; }
.brand-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--line); border-radius:13px; color:var(--accent); font-size:24px; background:rgba(31,86,96,.12); }
.brand { margin-top:4px; font-family:var(--mono); font-weight:900; letter-spacing:.11em; font-size:18px; }
.brand span { color:#44727b; }
.search { position:relative; display:grid; grid-template-columns:1fr auto; gap:8px; }
.search input { min-width:0; height:46px; padding:0 16px; color:var(--text); background:rgba(1,12,18,.55); border:1px solid var(--line); border-radius:13px; outline:none; }
.search input::placeholder { color:#4f7179; }
.search button, .intro-card > button, .contact-actions button { border:1px solid var(--line-strong); background:linear-gradient(180deg, rgba(68,157,169,.25), rgba(28,91,103,.22)); border-radius:11px; color:var(--accent); font-family:var(--mono); font-weight:800; letter-spacing:.08em; cursor:pointer; }
.search button { min-width:54px; }
.search-results { position:absolute; left:0; right:62px; top:52px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:rgba(3,15,22,.97); box-shadow:0 18px 45px rgba(0,0,0,.45); }
.search-result { width:100%; border:0; border-bottom:1px solid rgba(100,210,220,.10); padding:11px 13px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:transparent; cursor:pointer; text-align:left; }
.search-result:hover { background:rgba(75,183,195,.09); }
.search-result small { color:var(--muted); }
.sync-cluster { display:flex; justify-content:flex-end; align-items:center; gap:8px; min-width:0; }
.sync-pill { display:flex; gap:7px; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:#68858c; }
.sync-pill i { width:7px; height:7px; border-radius:50%; background:#41565b; box-shadow:0 0 0 3px rgba(65,86,91,.12); }
.sync-pill.ok { color:var(--good); } .sync-pill.ok i { background:var(--good); box-shadow:0 0 10px rgba(130,240,199,.55); }
.sync-pill.bad { color:var(--danger); } .sync-pill.bad i { background:var(--danger); }
.clock { display:flex; flex-direction:column; text-align:right; min-width:92px; font-family:var(--mono); }
.clock strong { font-size:12px; letter-spacing:.08em; } .clock small { color:var(--faint); font-size:9px; }
.left-panel { position:absolute; z-index:8; top:104px; left:16px; width:305px; max-height:calc(100% - 246px); overflow:hidden; border-radius:16px; padding:18px; }
.location-line { display:flex; justify-content:space-between; gap:10px; margin-top:10px; }
.location-line h1 { margin:0; font-size:22px; letter-spacing:-.03em; } .location-line p { margin:4px 0 0; color:#527078; font:10px var(--mono); }
.tag { height:max-content; padding:6px 9px; border:1px solid rgba(126,243,243,.18); border-radius:8px; color:var(--good); font:700 9px var(--mono); letter-spacing:.1em; }
.stats-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:24px 0 19px; }
.stats-3 div { min-width:0; } .stats-3 strong { display:block; font:700 18px var(--mono); color:#d8f2f4; } .stats-3 small { font:8px var(--mono); color:#527078; letter-spacing:.12em; }
.panel-heading { padding-top:15px; border-top:1px solid rgba(100,210,220,.09); color:#618089; font:700 9px var(--mono); letter-spacing:.14em; }
.contact-list { display:flex; flex-direction:column; margin:10px -7px 0; overflow:auto; max-height:260px; scrollbar-width:thin; }
.contact-row { display:grid; grid-template-columns:1fr auto; gap:8px; width:100%; padding:10px 8px; border:0; border-bottom:1px solid rgba(100,210,220,.07); background:transparent; text-align:left; cursor:pointer; }
.contact-row:hover, .contact-row.selected { background:rgba(75,183,195,.08); }
.contact-row strong { font:700 12px var(--mono); } .contact-row small { display:block; margin-top:2px; color:#5e7d85; font:9px var(--mono); }
.contact-row em { align-self:center; color:#75949b; font:normal 10px var(--mono); }
.muted-line { padding:14px 8px; color:#57727a; font-size:12px; }
.provider-note { margin-top:12px; color:#405d64; font:8px var(--mono); }
.heading-tape { position:absolute; z-index:8; top:103px; left:50%; transform:translateX(-50%); height:38px; min-width:245px; padding:0 18px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:18px; color:#4f6d75; font:10px var(--mono); }
.heading-tape strong { color:var(--accent); font-size:12px; } .heading-tape i { width:1px; height:13px; background:var(--line); }
.contact-card { position:absolute; z-index:9; right:16px; top:104px; width:300px; border-radius:16px; padding:18px; }
.contact-card h2 { margin:8px 0 2px; font:900 24px var(--mono); letter-spacing:.05em; } .contact-card > p { margin:0; color:var(--muted); font-size:11px; }
.icon-button { position:absolute; right:12px; top:12px; width:34px; height:34px; border:1px solid var(--line); border-radius:9px; background:transparent; cursor:pointer; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.contact-grid small { display:block; color:#57757d; font:8px var(--mono); letter-spacing:.11em; } .contact-grid strong { display:block; margin-top:3px; font:12px var(--mono); }
.contact-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .contact-actions button { min-height:38px; font-size:9px; }
.reticle { position:absolute; z-index:5; left:50%; top:48%; width:42px; height:42px; transform:translate(-50%,-50%); opacity:.55; pointer-events:none; }
.reticle:before, .reticle:after { content:""; position:absolute; background:rgba(180,248,248,.65); } .reticle:before { left:20px; top:0; bottom:0; width:1px; } .reticle:after { left:0; right:0; top:20px; height:1px; }
.reticle span:first-child { position:absolute; inset:15px; border:1px solid rgba(180,248,248,.7); border-radius:50%; }
.bottom-hud { position:absolute; z-index:8; left:16px; right:16px; bottom:14px; min-height:118px; border-radius:16px; padding:10px 12px 8px; display:grid; grid-template-columns:170px 1fr; grid-template-rows:1fr auto; column-gap:16px; }
.mode-switch { display:flex; align-items:flex-end; gap:5px; padding:4px; }
.mode { border:1px solid transparent; border-radius:9px; padding:10px 11px; background:transparent; color:#58747b; font:800 9px var(--mono); letter-spacing:.08em; cursor:pointer; }
.mode.active { border-color:var(--line); background:rgba(52,139,151,.10); color:var(--accent); }
.hud-metrics { display:grid; grid-template-columns:repeat(4,minmax(62px,1fr)) 92px repeat(4,minmax(62px,1fr)); gap:12px; align-items:center; }
.hud-metrics > div:not(.attitude-wrap) { min-width:0; }
.hud-metrics small { display:block; color:#55737a; font:700 8px var(--mono); letter-spacing:.12em; }
.hud-metrics strong { font:700 14px var(--mono); color:#ccebee; } .hud-metrics em { margin-left:3px; color:#47666d; font:normal 8px var(--mono); }
.attitude { position:relative; width:84px; height:64px; margin:auto; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:linear-gradient(#0e3445 0 50%, #4b382a 50% 100%); }
.horizon { position:absolute; left:-40%; width:180%; top:50%; height:1px; background:rgba(230,250,250,.85); transform-origin:center; }
.wing { position:absolute; left:50%; top:50%; width:48px; height:12px; transform:translate(-50%,-50%); border-bottom:2px solid var(--accent); }
.wing:before { content:""; position:absolute; left:23px; top:5px; width:2px; height:10px; background:var(--accent); }
.status-line { grid-column:2; align-self:end; display:flex; justify-content:center; gap:22px; color:#436269; font:8px var(--mono); letter-spacing:.09em; white-space:nowrap; }
.controls { position:absolute; z-index:8; right:16px; bottom:151px; width:285px; border-radius:16px; padding:14px; }
.control-rows { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-top:10px; }
.control-rows p { margin:0; display:flex; gap:7px; align-items:center; color:#55737a; font:8px var(--mono); }
kbd { min-width:42px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; color:#87aab1; text-align:center; font:8px var(--mono); background:rgba(0,0,0,.18); }
.camera-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:12px; }
.camera-switch button { border:1px solid transparent; background:transparent; border-radius:8px; padding:8px; color:#4e6b72; font:8px var(--mono); cursor:pointer; } .camera-switch button.active { border-color:var(--line); color:var(--accent); background:rgba(50,135,145,.08); }
.toast { position:absolute; z-index:30; left:50%; bottom:152px; transform:translateX(-50%) translateY(10px); opacity:0; pointer-events:none; max-width:min(520px,calc(100% - 40px)); padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:rgba(2,14,20,.92); color:#bfe7ea; font:11px var(--mono); transition:.2s ease; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.intro-backdrop { position:absolute; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,7,11,.74); transition:opacity .5s ease, visibility .5s ease; }
.intro-backdrop.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.intro-card { width:min(480px,100%); border-radius:24px; padding:38px; text-align:center; background:linear-gradient(180deg,rgba(9,34,46,.92),rgba(4,19,27,.94)); }
.intro-icon { width:82px; height:82px; display:grid; place-items:center; margin:0 auto 20px; border:1px solid rgba(126,243,243,.45); border-radius:22px; color:var(--accent); font-size:38px; background:rgba(78,177,190,.09); }
.intro-card h2 { margin:17px 0 12px; font:900 40px var(--mono); letter-spacing:.12em; } .intro-card p { max-width:370px; margin:0 auto 25px; color:#8ca6ad; font-size:13px; line-height:1.65; }
.intro-card > button { width:100%; min-height:52px; } .intro-card > button:disabled { opacity:.55; cursor:wait; }
.intro-card > small { display:block; margin-top:14px; color:#58777e; font:9px var(--mono); }
.cesium-viewer-bottom, .cesium-viewer-toolbar { opacity:.72; }
.cesium-widget-credits { font-size:10px!important; }
@media (max-width: 1050px) {
  .topbar { grid-template-columns:1fr minmax(260px,420px); } .sync-cluster { display:none; }
  .left-panel { width:270px; }
  .controls { display:none; }
  .hud-metrics { grid-template-columns:repeat(4,1fr) 78px repeat(2,1fr); }
  .hud-metrics > div:nth-child(8), .hud-metrics > div:nth-child(9) { display:none; }
  .status-line { gap:10px; }
}
@media (max-width: 760px) {
  .topbar { left:8px; right:8px; top:8px; grid-template-columns:1fr; min-height:auto; gap:10px; padding:10px; }
  .brand-wrap { display:none; }
  .left-panel { left:8px; top:76px; width:220px; max-height:250px; padding:12px; }
  .left-panel .stats-3 { margin:14px 0 10px; } .left-panel .provider-note, .left-panel .panel-heading { display:none; }
  .contact-list { max-height:108px; }
  .heading-tape { top:76px; left:auto; right:8px; transform:none; min-width:160px; gap:10px; }
  .contact-card { top:122px; right:8px; width:min(280px,calc(100% - 16px)); }
  .bottom-hud { left:8px; right:8px; bottom:8px; min-height:128px; grid-template-columns:1fr; grid-template-rows:auto 1fr; padding:8px; }
  .mode-switch { justify-content:center; align-items:center; }
  .hud-metrics { grid-template-columns:repeat(4,1fr); gap:6px; }
  .attitude-wrap, .hud-metrics > div:nth-child(n+6) { display:none; }
  .status-line { grid-column:1; display:none; }
  .reticle { top:52%; }
}