:root{--bg: #050a1e;--bg-card: rgba(8, 16, 42, .88);--border: rgba(38, 76, 160, .38);--accent: #3a7ff0;--accent-glow: rgba(58, 127, 240, .28);--text: #c0d8ff;--text-dim: #5872a0;--red: #ff3448;--font: "Courier New", "Lucida Console", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh;background:radial-gradient(ellipse at 20% 20%,rgba(20,50,120,.25) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(10,30,80,.2) 0%,transparent 60%),var(--bg)}.header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--border);background:#030614eb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}.header-left{display:flex;align-items:center;gap:16px}.title-mu{font-size:48px;line-height:1;color:#3a7ff0;text-shadow:0 0 24px rgba(58,127,240,.7);font-style:italic}.header-text{display:flex;flex-direction:column;gap:2px}.title{font-size:22px;font-weight:700;letter-spacing:5px;color:#4a90ff;text-shadow:0 0 18px rgba(74,144,255,.55)}.subtitle{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim)}.header-right{display:flex;align-items:center;gap:20px}.location-badge{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim)}.location-icon{font-size:12px}.live-badge{display:flex;align-items:center;gap:7px;padding:4px 10px;border:1px solid rgba(255,50,70,.4);border-radius:4px;font-size:10px;letter-spacing:2px;font-weight:700;color:var(--red);background:#ff32460f}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1.6s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}.main{flex:1;display:flex;overflow:hidden}.radar-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:28px}.radar-container{position:relative;width:600px;height:600px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#040a1a;box-shadow:0 0 0 1px #2850a026,0 0 60px #143ca04d,inset 0 0 30px #0a1e5080}.map-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(.5) brightness(.75);pointer-events:none}.radar-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.radar-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-dim);font-size:13px}.error-text{color:#ff6070}.spinner{width:38px;height:38px;border:3px solid rgba(58,127,240,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.side-panel{width:288px;border-left:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:12px;background:#030716bf;overflow-y:auto}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:16px}.card-title{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}.card-hint{font-size:10px;color:var(--text-dim);margin-bottom:12px;line-height:1.5}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{display:flex;flex-direction:column;gap:3px}.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim)}.stat-val{font-size:20px;font-weight:700;color:#70b8ff;text-shadow:0 0 12px rgba(100,165,255,.38);letter-spacing:1px}.slider-track{display:flex;align-items:center;gap:8px;margin-bottom:8px}.slider-end-label{font-size:9px;color:var(--text-dim);white-space:nowrap}.slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:5px;border-radius:3px;background:linear-gradient(90deg,#0a28a0,#3060d0,#a02030);outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#4a90ff;box-shadow:0 0 10px #4a90ffcc;cursor:pointer;transition:box-shadow .15s}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 16px #4a90ff}.angle-display{text-align:center;padding:4px 0}.angle-val{font-size:28px;font-weight:700;color:#80b8ff;text-shadow:0 0 14px rgba(80,160,255,.45)}.legend-wrap{display:flex;align-items:center;gap:12px}.legend-grad{flex:1;height:14px;border-radius:7px;background:linear-gradient(90deg,#ff1830,#9010c0,#0040e0);box-shadow:0 0 10px #6450c859}.legend-labels{display:flex;flex-direction:column;gap:1px;font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}.refresh-card{margin-top:auto}.refresh-row{display:flex;gap:8px;margin-bottom:8px;font-size:10px}.refresh-key{min-width:70px;color:var(--text-dim)}.refresh-val{color:var(--text);word-break:break-all;flex:1}.bar-wrap{flex:1;height:5px;background:#1e3c8259;border-radius:3px;overflow:hidden;position:relative;align-self:center}.bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px;transition:width 1s linear;box-shadow:0 0 6px var(--accent-glow)}.bar-val{font-size:10px;color:var(--text-dim);min-width:26px;text-align:right}.footer{padding:8px 28px;border-top:1px solid var(--border);font-size:10px;color:var(--text-dim);letter-spacing:1px;background:#020510b3}@media (max-width: 960px){.main{flex-direction:column;overflow:auto}.side-panel{width:100%;border-left:none;border-top:1px solid var(--border)}.radar-panel{padding:16px}.radar-container{width:min(100%,600px);height:min(100%,600px)}}