:root{--toolbar:#263238;--primary:#00838f;--primary-dark:#006064;--accent:#ffb300;--surface:#fff;--line:#cfd8dc;--text:#263238;--muted:#607d8b;--top:56px;--bottom:64px;--sheet:148px;font-family:Roboto,Arial,sans-serif;color:var(--text)}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#eceff1}button,select,input{font:inherit}.toolbar{position:fixed;z-index:12;inset:0 0 auto;height:var(--top);display:flex;align-items:center;padding:0 14px;background:var(--toolbar);color:#fff;border-bottom:3px solid var(--primary);box-shadow:0 2px 4px #0005}.menu-button{width:42px;height:42px;margin-right:7px;border:0;background:transparent;color:#fff;font-size:25px;cursor:pointer}.logo{display:flex;align-items:center;gap:9px;font-size:18px}.logo img{width:34px;height:36px;object-fit:contain;image-rendering:auto}.subtitle{margin-left:20px;color:#b0bec5;font-size:13px}.connection{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px}.connection i{width:8px;height:8px;border-radius:50%;background:var(--accent)}.connection.ok i{background:#4caf50}.connection.error i{background:#ef5350}.tool-button{height:36px;margin-left:16px;border:0;background:transparent;color:#80deea;font-weight:700;cursor:pointer}
h2{margin:0 0 12px;font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--primary-dark)}label{display:block;margin:8px 0 5px;font-size:11px;color:var(--muted);font-weight:700}select{width:100%;height:36px;border:0;border-bottom:1px solid #78909c;border-radius:0;background:#fff;padding:0 4px;color:var(--text)}select:focus{outline:0;border-bottom:2px solid var(--primary)}select:disabled{color:#90a4ae}.meta,.warning,.source{font-size:11px;line-height:1.4;color:var(--muted)}.meta{margin-top:4px}.check{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:400}.check input,#opacity{accent-color:var(--primary)}#opacity{width:100%}output{float:right;color:var(--text)}
.switch-row{display:flex;align-items:center;justify-content:space-between;color:var(--text);font-weight:400}.switch-row input{position:absolute;opacity:0}.switch-row i{position:relative;width:34px;height:14px;border-radius:7px;background:#b0bec5;transition:.15s}.switch-row i:after{content:"";position:absolute;width:20px;height:20px;left:-1px;top:-3px;border-radius:50%;background:#eceff1;box-shadow:0 1px 3px #0007;transition:.15s}.switch-row input:checked+i{background:#80cbc4}.switch-row input:checked+i:after{left:15px;background:var(--primary)}
.layer-menu{position:fixed;z-index:11;left:0;top:var(--top);bottom:var(--bottom);width:292px;overflow:auto;background:#fff;border-right:1px solid #90a4ae;box-shadow:2px 0 5px #0004;transform:translateX(-102%);transition:transform .16s}.layer-menu.open{transform:none}.layer-menu section{padding:15px 16px;border-bottom:1px solid var(--line)}.analysis-row{padding:7px 0;border-top:1px solid #eceff1;display:flex;gap:8px;justify-content:space-between;font-size:11px}.analysis-row span{text-align:right;color:#90a4ae}.warning{color:#8d6e63}.source a{color:var(--primary-dark);word-break:break-all}
main{position:fixed;inset:var(--top) 0 var(--bottom)}#map{position:absolute;inset:0}.maplibregl-ctrl-bottom-right{bottom:26px}.maplibregl-ctrl-attrib{font-size:10px}.radar-site{width:16px;height:16px;border:2px solid #fff;background:var(--primary);border-radius:50%;box-shadow:0 1px 3px #0008;cursor:pointer}.radar-site.selected{background:var(--accent);border-color:#263238}.legend{position:absolute;left:12px;bottom:32px;width:304px;padding:8px 11px;background:#fff;border:1px solid #b0bec5;box-shadow:0 2px 4px #0004}.legend>div:first-child{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}.legend canvas{display:block;width:100%;height:12px}.legend-labels{display:flex;justify-content:space-between;font-size:9px;margin-top:3px}.probe{position:absolute;right:8px;bottom:28px;min-width:230px;padding:7px 9px;background:#fffffff2;border:1px solid #90a4ae;font:10px monospace;box-shadow:0 1px 3px #0003}.probe b,.probe span{display:block}.probe b{color:var(--primary-dark);margin-bottom:3px}.loading,.empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #b0bec5;padding:18px 24px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 5px #0004}.loading[hidden],.empty[hidden]{display:none}.loading span{width:18px;height:18px;border:2px solid #b2ebf2;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.empty{flex-direction:column;gap:5px}.empty span{font-size:12px;color:var(--muted)}@keyframes spin{to{transform:rotate(360deg)}}
.cross-point{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #263238;color:#263238;font:bold 11px sans-serif;box-shadow:0 1px 3px #0008}
.product-sheet{position:fixed;z-index:10;left:0;right:0;bottom:var(--bottom);height:var(--sheet);background:#fff;border-top:1px solid #78909c;box-shadow:0 -2px 5px #0004;transform:translateY(100%);transition:transform .18s}.product-sheet.open{transform:none}.sheet-toggle{position:absolute;left:50%;top:-34px;width:66px;height:34px;transform:translateX(-50%);border:1px solid #78909c;border-bottom:0;background:#fff;color:var(--primary-dark);font-size:16px;cursor:pointer}.product-sheet.open .sheet-toggle{transform:translateX(-50%) rotate(180deg)}.sheet-content{height:100%;display:flex;align-items:center;gap:18px;padding:11px 20px}.sheet-field{flex:1;min-width:145px}.radar-field{flex:1.25}.frames-field{max-width:175px}.load-button{height:40px;padding:0 24px;border:0;background:var(--primary);color:#fff;font-size:11px;font-weight:700;cursor:pointer}.load-button:hover{background:var(--primary-dark)}
.cross-panel{position:absolute;z-index:7;left:18px;right:18px;bottom:20px;height:330px;background:#fff;border:1px solid #78909c;box-shadow:0 2px 6px #0005}.cross-panel[hidden]{display:none}.cross-panel header{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #cfd8dc}.cross-panel header strong,.cross-panel header span{display:block}.cross-panel header strong{font-size:12px}.cross-panel header span{margin-top:3px;font-size:10px;color:#607d8b}.cross-panel header button{width:34px;height:34px;border:0;background:transparent;font-size:24px;cursor:pointer}.cross-panel canvas{display:block;width:100%;height:calc(100% - 46px);background:#101418}
.timeline{position:fixed;z-index:12;bottom:0;left:0;right:0;height:var(--bottom);display:flex;align-items:center;gap:8px;background:#fff;border-top:1px solid #90a4ae;padding:0 16px}.timeline button{width:38px;height:36px;border:0;background:#eceff1;color:#37474f;cursor:pointer}.timeline button:disabled{color:#b0bec5}.timeline #play{background:var(--primary);color:#fff}.timeline #play:disabled{background:#b0bec5}.timeline input{flex:1;accent-color:var(--primary)}.time{width:172px;text-align:right}.time strong,.time span{display:block}.time strong{font-size:12px}.time span{font-size:10px;color:var(--muted);margin-top:3px}#snackbar{position:fixed;z-index:20;left:20px;bottom:78px;min-width:240px;max-width:460px;padding:12px 16px;background:#323232;color:#fff;font-size:12px;opacity:0;pointer-events:none;transition:opacity .15s}#snackbar.show{opacity:1}
@media(max-width:850px){:root{--sheet:242px}.sheet-content{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:9px 14px}.sheet-field{min-width:0}.frames-field{max-width:none}.load-button{width:100%}.subtitle{display:none}.legend{width:240px}.connection span{display:none}}@media(max-width:540px){.layer-menu{width:270px}.toolbar{padding:0 6px}.logo img{display:none}.time{width:105px}.probe{min-width:190px}.sheet-content{gap:4px 10px}}