@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#080e19;--panel:#101a2a;--panel2:#0d1625;--line:#223047;--text:#edf3ff;--muted:#91a0b8;--blue:#64a8ff;--purple:#b99aff;--cyan:#62d9e8;--amber:#ffca78;--green:#52d6a0;--red:#ff7888;--radius:18px}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#13213a 0,transparent 36%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.app-shell{max-width:1440px;margin:auto;padding:0 28px}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1b293d}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}.brand-mark,.dialog-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#438cf5,#7d69ec);font:800 14px Manrope;letter-spacing:-1px;box-shadow:0 7px 24px #407bf533}.brand strong{display:block;font:800 17px Manrope;letter-spacing:-.5px}.brand small{display:block;color:#7587a3;font-size:9px;letter-spacing:1.8px;margin-top:3px}.top-actions{display:flex;gap:12px;align-items:center}.status-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:9px 12px;color:var(--muted);font-size:12px;background:#101a2a}.dot,.live-label i{width:7px;height:7px;border-radius:50%;background:#8995a8;display:inline-block}.status-pill.connected .dot,.live-label i{background:var(--green);box-shadow:0 0 12px #52d6a066}.status-pill.connected{color:var(--green);border-color:#235845}.status-pill.error .dot{background:var(--red)}.button{border:1px solid transparent;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:.2s}.button:hover{transform:translateY(-1px)}.button.primary{background:linear-gradient(135deg,#438cf5,#6c75f2);color:white}.button.secondary{background:#172338;color:#dce7fb;border-color:#293b55}.button.disabled{pointer-events:none;opacity:.4}.welcome-row{display:flex;justify-content:space-between;align-items:end;padding:32px 0 24px;gap:20px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;color:#8093b0;margin:0 0 9px}.welcome-row h1{font:800 clamp(25px,3vw,34px) Manrope;letter-spacing:-1.2px;margin:0}.subheading{margin:8px 0 0;color:var(--muted);font-size:13px}.updated{color:var(--muted);font-size:11px;text-align:right}.updated strong{display:block;color:#dce7fb;font-size:12px;margin-top:6px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.metric-card,.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#121e30,#0d1625);box-shadow:0 12px 30px #00000012}.metric-card{padding:20px 21px;min-width:0;position:relative;overflow:hidden}.metric-card:after{content:"";position:absolute;top:-40px;right:-40px;width:100px;height:100px;border-radius:50%;filter:blur(28px);opacity:.14;background:currentColor}.accent-blue{color:var(--blue)}.accent-purple{color:var(--purple)}.accent-cyan{color:var(--cyan)}.accent-amber{color:var(--amber)}.metric-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#aab8ce}.metric-icon{font-size:20px;color:currentColor}.metric-value{display:flex;align-items:baseline;gap:8px;margin:18px 0 12px;color:var(--text);font:800 clamp(27px,3vw,35px) Manrope;letter-spacing:-1px;white-space:nowrap}.metric-value small{font:500 12px 'DM Sans';color:#93a3bc;letter-spacing:0}.metric-value.status-value{font-size:21px;letter-spacing:-.3px}.metric-foot{color:#7486a1;font-size:10px}.content-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:16px;margin-top:16px}.panel{padding:22px;min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.panel-heading h2{font:700 17px Manrope;letter-spacing:-.4px;margin:0}.panel-description{color:var(--muted);font-size:11px;margin:7px 0 0}.chart-controls{display:flex;gap:4px;padding:4px;background:#09111e;border:1px solid #1c2a40;border-radius:10px}.range-btn{border:0;background:transparent;color:#8394ae;padding:7px 9px;border-radius:7px;font-size:10px;cursor:pointer}.range-btn.active{background:#233652;color:#f3f7ff}.chart-wrap{height:258px;position:relative}.legend-row{display:flex;align-items:center;gap:16px;color:#a7b5cb;font-size:10px;margin-top:16px;flex-wrap:wrap}.legend-row span{display:flex;align-items:center;gap:6px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.roll-dot{background:#b99aff}.pitch-dot{background:#62d9e8}.legend-note{color:#647895;margin-left:auto}.live-label{font-size:9px;letter-spacing:1.4px;color:var(--green);display:flex;align-items:center;gap:7px}.angle-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px}.angle-card{background:#0b1422;border:1px solid #1d2b40;border-radius:14px;padding:16px;text-align:center;min-width:0}.angle-label{font-size:9px;letter-spacing:2px;color:#9aaac2;font-weight:700}.tilt-meter{height:78px;position:relative;margin:8px auto 0;width:100%;max-width:170px;overflow:hidden}.tilt-meter:before{content:"";position:absolute;left:10%;right:10%;bottom:0;height:62px;border:9px solid #263951;border-bottom:0;border-radius:100px 100px 0 0}.tilt-center{position:absolute;width:8px;height:8px;border-radius:50%;background:#f4f7ff;left:calc(50% - 4px);bottom:0}.tilt-needle{position:absolute;width:3px;height:52px;background:var(--purple);border-radius:4px;left:calc(50% - 1.5px);bottom:0;transform-origin:bottom center;transform:rotate(0deg);box-shadow:0 0 12px #b99aff77}.angle-number{font:800 clamp(24px,2.5vw,32px) Manrope;margin-top:7px;letter-spacing:-1px}.angle-number small{font-size:14px;color:#98a8c0;margin-left:3px}.angle-caption{font-size:9px;color:#778aa5;margin-top:5px}.pitch-meter{height:78px;margin:8px auto 0;max-width:130px;position:relative;display:flex;align-items:center;justify-content:center}.pitch-meter:before{content:"";position:absolute;left:calc(50% - 3px);top:8px;bottom:8px;width:6px;border-radius:10px;background:#27384f}.pitch-zero{position:absolute;left:calc(50% - 16px);width:32px;height:2px;background:#d9e5f7}.pitch-bar{position:absolute;left:calc(50% - 3px);top:50%;height:0;width:6px;border-radius:10px;background:var(--cyan);transform-origin:top center;transition:height .15s}.fine-print{font-size:9px;line-height:1.6;color:#72849e;margin:13px 0 0}.map-panel{margin-top:16px}.map-heading{align-items:flex-start}.map-heading .button{margin-top:3px}#map{height:370px;width:100%;border:1px solid #26364c;border-radius:13px;background:#0b1422;z-index:1}.leaflet-container{font-family:'DM Sans',sans-serif}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#101a2a;color:#eef4ff}.leaflet-control-zoom a{background:#101a2a!important;color:#e9f0ff!important;border-color:#2b3c55!important}.location-details{display:grid;grid-template-columns:1fr 1fr auto auto;align-items:center;gap:12px;padding:17px 0}.coord-box{min-width:0}.detail-label{display:block;font-size:9px;color:#8294ae;letter-spacing:1.4px;margin-bottom:7px}.coord-box strong{font:600 13px 'DM Sans';overflow-wrap:anywhere}.address-box{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #24344b;border-radius:13px;background:#0b1422}.address-symbol{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#1a2b42;color:var(--blue);font-size:23px;flex-shrink:0}.address-content{flex:1;min-width:0}.address-content strong{font-size:13px;display:block;line-height:1.5}.address-content p{font-size:10px;color:#8192ab;margin:5px 0 0}.address-status{font-size:10px;color:#8ca0bb;white-space:nowrap}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.status-list>div{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #1d2b40;font-size:12px}.status-list>div:last-child{border:0}.status-name{display:flex;align-items:center;gap:9px;color:#9baac0}.status-list strong{font-size:11px;color:#e0e9f8;text-align:right}.status-indicator{width:7px;height:7px;background:#74839b;border-radius:50%;display:inline-block}.status-indicator.good{background:var(--green);box-shadow:0 0 8px #52d6a055}.status-indicator.bad{background:var(--red)}.sensor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.sensor-grid div{background:#0b1422;border:1px solid #1c2a3e;border-radius:10px;padding:12px}.sensor-grid span{display:block;color:#8193ad;font-size:9px;letter-spacing:1px;margin-bottom:8px}.sensor-grid strong{font:700 15px Manrope}footer{display:flex;justify-content:space-between;gap:15px;color:#586a84;font-size:10px;padding:25px 2px 30px}.login-dialog{width:min(420px,calc(100% - 28px));border:1px solid #2b3c55;border-radius:18px;background:#101a2a;color:var(--text);padding:28px;box-shadow:0 25px 100px #000a}.login-dialog::backdrop{background:#020611c9;backdrop-filter:blur(5px)}.dialog-mark{margin-bottom:18px}.login-dialog h2{font:800 23px Manrope;margin:0 0 8px}.login-dialog p{font-size:12px;line-height:1.6;color:#91a0b8}.login-dialog label{display:block;margin:17px 0 7px;font-size:11px;color:#bac8dd}.login-dialog input{width:100%;border:1px solid #2c3d56;background:#0b1422;border-radius:10px;padding:12px;color:#eef4ff;outline:none}.login-dialog input:focus{border-color:#659eff}.login-dialog .full-width{width:100%;margin-top:12px}.error-text{color:var(--red)!important;min-height:0}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#1b2b42;border:1px solid #3a506d;color:#eff5ff;padding:12px 17px;border-radius:11px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:9999;max-width:calc(100% - 28px)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.angle-visual{max-width:520px;margin:auto;width:100%}.location-details{grid-template-columns:1fr 1fr}.location-details .button{width:100%}.map-heading{align-items:center}}
@media(max-width:620px){.app-shell{padding:0 13px}.topbar{height:70px}.brand-mark{width:36px;height:36px}.brand strong{font-size:15px}.brand small{font-size:8px}.status-pill{padding:8px;font-size:10px}.top-actions{gap:6px}.top-actions .button{padding:9px;font-size:10px}.welcome-row{display:block;padding:26px 0 18px}.updated{text-align:left;margin-top:15px}.updated strong{display:inline;margin-left:5px}.metric-grid{gap:9px}.metric-card{padding:15px;border-radius:14px}.metric-heading{font-size:10px}.metric-value{font-size:27px;margin:15px 0 10px}.metric-value.status-value{font-size:17px}.metric-foot{font-size:9px}.panel{padding:16px;border-radius:15px}.panel-heading h2{font-size:15px}.chart-controls{gap:1px}.range-btn{padding:7px;font-size:9px}.chart-wrap{height:230px}.legend-note{width:100%;margin-left:0}.angle-visual{gap:8px}.angle-card{padding:12px 8px}.tilt-meter,.pitch-meter{height:67px}.tilt-meter:before{height:54px;border-width:7px}.tilt-needle{height:46px}.angle-number{font-size:25px}.map-heading{align-items:flex-start}.map-heading .button{font-size:10px;padding:9px}.panel-description{max-width:240px;line-height:1.5}#map{height:320px}.location-details{gap:12px}.coord-box strong{font-size:11px}.address-box{align-items:flex-start;padding:13px;gap:10px}.address-symbol{width:32px;height:32px}.address-content strong{font-size:12px}.address-status{display:none}.bottom-grid{grid-template-columns:1fr;gap:12px}.sensor-grid{gap:7px}.sensor-grid div{padding:10px}footer{display:block;line-height:1.8}footer span{display:block}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}