:root{
  --page:#edf3ee;--page2:#dfe8e1;--panel:rgba(255,255,255,.92);--text:#142019;
  --muted:#687a6d;--line:rgba(31,77,44,.15);--line2:rgba(38,138,70,.38);
  --green:#087a35;--bright:#1aa54b;--yellow:#ffd41a;--shadow:0 18px 44px rgba(15,32,19,.14)
}
body.dark{
  --page:#07110b;--page2:#020604;--panel:rgba(10,22,14,.95);--text:#f1fff4;
  --muted:#9bb09f;--line:rgba(133,255,161,.18);--line2:rgba(96,255,133,.42);
  --green:#70ff97;--bright:#70ff97;--shadow:0 18px 44px rgba(0,0,0,.34)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif}
body{
  padding:env(safe-area-inset-top,0) 12px env(safe-area-inset-bottom,0);color:var(--text);
  background:radial-gradient(circle at 50% 0%,rgba(66,180,98,.18),transparent 35%),linear-gradient(180deg,var(--page),var(--page2))
}
button,input{font:inherit}.app{width:min(920px,100%);margin:auto;padding:12px 0 28px}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.kicker{font-size:11px;letter-spacing:.14em;color:var(--bright);font-weight:800}
h1{margin:4px 0 0;font-size:clamp(26px,5vw,39px);letter-spacing:-.035em}
.chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:9px 12px;font-size:11px;font-weight:800}
.chip i{width:8px;height:8px;border-radius:50%;background:#ffc34a;box-shadow:0 0 12px currentColor}
.chip i.live{background:var(--bright)}.chip i.error{background:#ff5b5b}
.card{border:1px solid var(--line);background:var(--panel);border-radius:18px;box-shadow:var(--shadow)}
.controls{padding:14px 16px;margin-bottom:12px}
.control-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.label{display:block;font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:800}
#rangeValue{display:block;font-size:29px;margin-top:2px}
.toggle-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill,.action-btn{border:1px solid var(--line2);background:rgba(57,180,90,.08);color:var(--text);border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;cursor:pointer}
.pill.active{background:rgba(68,210,104,.13)}.pill.install{color:var(--green)}
.slider{display:grid;grid-template-columns:25px 1fr 50px;gap:10px;align-items:center;margin-top:12px;color:var(--muted);font-size:10px}
input[type=range]{width:100%;accent-color:var(--bright)}
.quick{display:flex;gap:6px;margin-top:10px}
.quick button{flex:1;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--muted);padding:7px 4px;font-size:11px;font-weight:800}
.quick button.active{border-color:var(--line2);background:rgba(68,210,104,.1);color:var(--text)}
.radar-card{padding:9px;border-radius:26px}
.scope{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#fff}
body.dark .scope{background:#000}
.map-wrap{position:absolute;inset:0;z-index:1;overflow:hidden;background:#cad3cb}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}
.scope.map-off .map-wrap,.scope.map-off .map-wash{display:none}
body.dark .map-wrap iframe{filter:brightness(.48) contrast(1.16) saturate(.78) hue-rotate(125deg)}
.map-wash{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(53,126,72,.08),rgba(53,126,72,.08)),radial-gradient(circle,transparent 56%,rgba(0,0,0,.22) 100%)}
body.dark .map-wash{background:linear-gradient(rgba(23,79,42,.13),rgba(23,79,42,.13)),radial-gradient(circle,transparent 54%,rgba(0,0,0,.44) 100%)}
.grid{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(rgba(0,95,38,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,95,38,.16) 1px,transparent 1px);background-size:10% 10%}
body.dark .grid{background:linear-gradient(rgba(86,255,130,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(86,255,130,.11) 1px,transparent 1px);background-size:10% 10%}
.ring{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(0,102,40,.76);border-radius:50%;pointer-events:none}
body.dark .ring{border-color:rgba(84,255,128,.48)}
.ring span{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-size:9px;color:#064d21;background:rgba(255,255,255,.91);border:1px solid rgba(0,105,43,.22);border-radius:999px;padding:2px 6px;white-space:nowrap;font-weight:800}
body.dark .ring span{color:#eaffef;background:rgba(6,18,10,.88);border-color:rgba(84,255,128,.18)}
.cross{position:absolute;z-index:4;background:rgba(0,100,40,.36);pointer-events:none}.cross.h{left:0;right:0;top:50%;height:1px}.cross.v{top:0;bottom:0;left:50%;width:1px}
body.dark .cross{background:rgba(84,255,128,.20)}
.r25{width:25%;height:25%}.r50{width:50%;height:50%}.r75{width:75%;height:75%}.r100{width:98%;height:98%}
.sweep{position:absolute;z-index:6;inset:-50%;transform-origin:center;animation:spin 5s linear infinite;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 330deg,rgba(0,100,40,.03) 340deg,rgba(0,120,45,.33) 359deg,transparent 360deg)}
body.dark .sweep{background:conic-gradient(from 0deg,transparent 0 330deg,rgba(78,255,126,.03) 340deg,rgba(78,255,126,.23) 359deg,transparent 360deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.targets{position:absolute;inset:0;z-index:8}
.ownship{position:absolute;z-index:9;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:3px solid rgba(2,18,7,.85);box-shadow:0 0 16px #fff;pointer-events:none}
.target{position:absolute;transform:translate(-50%,-50%);border:0;background:none;color:var(--yellow);cursor:pointer;padding:8px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.48))}
.target .plane{display:block;font-size:29px;line-height:1;transform:rotate(var(--heading));text-shadow:-1px -1px 0 rgba(0,0,0,.75),1px 1px 0 rgba(0,0,0,.75)}
.target .tag{display:block;margin-top:-1px;background:rgba(255,219,37,.95);color:#111;border-radius:5px;padding:2px 4px;font-size:8px;font-weight:900;white-space:nowrap}
.readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px}
.readout{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:14px;padding:10px}
.readout span,.diag-grid span,.info span,.airport span{display:block;font-size:9px;letter-spacing:.08em;color:var(--muted);font-weight:800}
.readout strong{display:block;margin-top:3px;font-size:13px}
.detail{display:none;margin-top:12px;padding:16px}.detail.open{display:block}
.detail-head{display:flex;justify-content:space-between;align-items:center}.detail-head small{display:block;color:var(--bright);font-size:10px;letter-spacing:.1em;font-weight:900}.detail h2{margin:4px 0 12px;font-size:24px}
.close{width:36px;height:36px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);border-radius:12px;font-size:22px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.info,.airport{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:14px;padding:10px}.info strong{display:block;margin-top:4px;font-size:13px}
.route{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:10px 0}.airport strong{display:block;margin-top:2px;color:var(--bright);font-size:20px}.airport small{display:block;color:var(--muted);margin-top:3px;font-size:10px}.route-arrow{color:var(--bright)}
.info-grid.two{grid-template-columns:repeat(2,1fr)}.note{font-size:10px;line-height:1.45;color:var(--muted)}
.diagnostics{margin-top:12px;padding:14px}.diag-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.diag-head strong{font-size:14px}.diag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.diag-grid>div{border:1px solid var(--line);border-radius:12px;padding:9px;background:rgba(255,255,255,.02)}.diag-grid strong{display:block;margin-top:3px;font-size:11px;overflow-wrap:anywhere}.diagnostics p{font-size:10px;color:var(--muted);margin:10px 0 0}
.install-help{position:fixed;z-index:50;left:50%;bottom:18px;transform:translateX(-50%);width:min(440px,calc(100% - 24px));background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:15px;box-shadow:0 20px 50px rgba(0,0,0,.35)}.install-help strong,.install-help span{display:block}.install-help span{font-size:11px;color:var(--muted);margin:5px 0 12px}
@media(max-width:650px){body{padding-left:8px;padding-right:8px}.header{align-items:flex-start}.controls{padding:12px}.control-top{align-items:flex-start}.toggle-row{max-width:58%}.radar-card{padding:7px;border-radius:20px}.scope{border-radius:15px}.readouts,.diag-grid{grid-template-columns:repeat(2,1fr)}.info-grid{grid-template-columns:repeat(2,1fr)}}

.diag-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}