@font-face{font-family:"GpsNum";src:url("font/gpsnum.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"GpsDig";src:url("font/gpsdig.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
.gpsd{max-width:480px;margin:0 auto;font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:#eee9df;-webkit-user-select:none;user-select:none;}
.gpsd *{box-sizing:border-box;}
.gpsd-device{position:relative;background:#070707;border-radius:22px;padding:8px;box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 0 0 1px #2b2b2b;}
.gpsd-stage{position:relative;width:100%;aspect-ratio:239/214;background:url(img/dial.png) center top/100% 100% no-repeat;overflow:hidden;}
.gpsd-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:1;}.gpsd-ncanvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:9;pointer-events:none;}
.gpsd-ibtn{position:absolute;top:2.2%;width:9%;height:9%;border:0;background:transparent;color:#767676;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;padding:0;z-index:6;transition:color .2s;}
.gpsd-ibtn:hover{color:#c9c9c9;}
.gpsd-ibtn svg{width:66%;height:66%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.gpsd-rf{left:3%;}
.gpsd-st{right:3%;}
.gpsd-gps{position:absolute;left:0;right:0;top:26.6%;text-align:center;color:#8b8b8b;font-family:"Arial","Helvetica",sans-serif;font-size:23px;font-weight:400;letter-spacing:7px;z-index:4;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.6);}
.gpsd-dots{position:absolute;left:0;right:0;top:32.6%;display:flex;justify-content:center;gap:12px;z-index:4;}
.gpsd-dots i{display:block;width:11px;height:11px;border-radius:50%;background:#ffd21f;box-shadow:0 0 8px rgba(255,210,31,.55);}
.gpsd-dots i.off{background:#4b4b4b;box-shadow:none;animation:gpsdBlink 1.3s infinite;}
@keyframes gpsdBlink{0%,100%{opacity:.25;}50%{opacity:.85;}}
.gpsd-clock{position:absolute;left:50%;top:35.4%;transform:translateX(-50%);width:46%;height:10.2%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#2e2f2f 0%,#252626 42%,#191a1a 100%);border:2px solid #131313;border-top-color:#3a3b3b;border-left-color:#2c2d2d;border-radius:3px;color:#dedad3;font-family:"GpsDig","Consolas",monospace;font-size:20px;font-weight:400;letter-spacing:.5px;white-space:nowrap;box-shadow:inset 0 3px 7px rgba(0,0,0,.9),inset 0 -2px 3px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.08),0 -2px 5px rgba(0,0,0,.6);text-shadow:0 0 8px rgba(214,230,246,.35),0 1px 0 rgba(0,0,0,.9);z-index:4;}
.gpsd-speedbox{position:absolute;left:50%;top:62.6%;transform:translateX(-50%);width:36%;height:12.2%;display:flex;align-items:center;justify-content:center;gap:2px;background:linear-gradient(180deg,#b0a597 0%,#a09486 34%,#91867a 68%,#7d7266 100%);border-radius:3px;border:4px solid #211d19;box-shadow:inset 0 2px 1px rgba(255,255,255,.6),inset 0 -4px 5px rgba(0,0,0,.3),inset 3px 0 3px rgba(0,0,0,.12),0 3px 7px rgba(0,0,0,.6);z-index:5;color:#17140f;}
.gpsd-speedbox b{font-family:"GpsDig","Consolas",monospace;font-size:30px;font-weight:400;letter-spacing:0;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.28);}
.gpsd-speedbox em{font-style:normal;font-family:"GpsDig","Consolas",monospace;font-size:13px;font-weight:400;margin-top:9px;letter-spacing:0;text-shadow:0 1px 0 rgba(255,255,255,.45);}
.gpsd-veh{position:absolute;bottom:7.4%;width:9.6%;height:9.6%;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:5;color:#6d6d6d;transition:color .2s;}
.gpsd-veh svg{width:86%;height:86%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.gpsd-bike{left:3.4%;}
.gpsd-car{right:3.4%;}
.gpsd-veh.on{color:#d8d8d8;}
.gpsd-car.on{color:#c3ef12;}
.gpsd-units{position:absolute;left:26%;right:26%;bottom:6.8%;height:7.8%;display:flex;background:linear-gradient(180deg,#2c2c2c 0%,#1a1a1a 45%,#0f0f0f 100%);border:1px solid #4b4b4b;border-top-color:#5c5c5c;border-radius:9px 9px 4px 4px;overflow:hidden;z-index:6;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -6px 10px rgba(0,0,0,.6),0 2px 5px rgba(0,0,0,.6);}
.gpsd-unit{flex:1;border:0;background:transparent;color:#9a9a9a;font-family:"GpsNum","Arial",sans-serif;font-size:15px;cursor:pointer;padding:0;line-height:1;transition:color .15s,background .15s;}
.gpsd-unit+.gpsd-unit{border-left:1px solid #3a3a3a;}
.gpsd-unit.on{background:linear-gradient(180deg,#454545 0%,#333 55%,#2a2a2a 100%);box-shadow:inset 0 0 0 1px #6f6f6f,inset 0 -3px 6px rgba(0,0,0,.5);color:#fff;border-radius:4px;margin:2px 1px;}
.gpsd-tabs{display:flex;height:51px;background:#080808;border-top:1px solid #262626;}
.gpsd-tab{flex:1;border:0;background:transparent;color:#8d8d8d;font-size:20px;cursor:pointer;padding:0;letter-spacing:1px;}
.gpsd-tab+.gpsd-tab{border-left:1px solid #1f1f1f;}
.gpsd-tab.on{color:#f7a11a;font-weight:600;}
.gpsd-panes{background:#000;border-top:1px solid #a8a29a;}
.gpsd-pane{display:none;}
.gpsd-pane.on{display:block;}
.gpsd-sbar{background:linear-gradient(180deg,#8d8379 0%,#857b71 50%,#7c7268 100%);color:#f7f1e5;text-align:center;font-size:18px;line-height:31px;height:31px;letter-spacing:1px;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.35);}
.gpsd-tiles{display:flex;background:#5a534b;border-bottom:1px solid #6f6860;}
.gpsd-tile{flex:1;position:relative;height:85px;border-right:1px solid #7c746a;overflow:hidden;background:linear-gradient(180deg,#5f574e 0%,#57504a 100%);}
.gpsd-tile:last-child{border-right:0;}
.gpsd-tile .ic{position:absolute;left:10px;top:9px;color:#efe8dc;line-height:0;}
.gpsd-tile .ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.gpsd-tile b{display:block;text-align:center;padding:20px 8px 0 22px;color:#f6f0e4;font-family:"GpsDig","Consolas",monospace;font-size:32px;font-weight:400;line-height:1.05;white-space:nowrap;letter-spacing:0;text-shadow:0 1px 1px rgba(0,0,0,.4);}
.gpsd-tile b span{font-size:14px;font-weight:400;margin-left:3px;letter-spacing:0;}
.gpsd-tile em{position:absolute;left:11px;bottom:6px;font-style:normal;font-size:15px;color:#ddd5c7;line-height:1.2;letter-spacing:.5px;}
.gpsd-list{background:#57504a;}
.gpsd-row{position:relative;display:flex;align-items:center;height:43px;padding:0 10px;border-top:1px solid #6f6860;font-size:17px;line-height:1;}
.gpsd-row:nth-child(odd){background:#635b52;}
.gpsd-row:first-child{border-top:0;}
.gpsd-row .ic{flex:0 0 25px;width:25px;height:25px;display:flex;align-items:center;color:#efe9dd;}
.gpsd-row .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.gpsd-row em{flex:1;font-style:normal;color:#efeadf;letter-spacing:.5px;}
.gpsd-row b{font-family:"GpsDig","Consolas",monospace;font-weight:400;color:#f6f0e4;font-size:18px;letter-spacing:.3px;text-align:right;white-space:nowrap;}
.gpsd-row b.hl{color:#ffb03a;}
.gpsd-sat{display:flex;align-items:center;justify-content:space-between;background:#5b544c;border-bottom:1px solid #6d665d;padding:12px 12px;color:#f2ecdf;}
.gpsd-satbars{display:flex;align-items:flex-end;gap:8px;height:34px;}
.gpsd-satbars i{display:block;width:16px;border-radius:3px 3px 0 0;background:#3d3d3d;}
.gpsd-satbars i:nth-child(1){height:30%;}
.gpsd-satbars i:nth-child(2){height:48%;}
.gpsd-satbars i:nth-child(3){height:64%;}
.gpsd-satbars i:nth-child(4){height:82%;}
.gpsd-satbars i:nth-child(5){height:100%;}
.gpsd-satbars i.on{background:linear-gradient(180deg,#ffd54a,#ff9f1a);}
.gpsd-sattxt{font-size:15px;color:#f2ecdf;}
.gpsd-sattxt span{display:block;font-size:13px;color:#cfc7ba;margin-top:4px;}
.gpsd-chartbox{position:relative;height:220px;background:#4f4942;overflow:hidden;}
.gpsd-chartbox canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;}
.gpsd-legend{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;background:#565049;font-size:14px;color:#f0eadd;}
.gpsd-legend span{white-space:nowrap;}
.gpsd-sheet{position:fixed;left:0;top:0;right:0;bottom:0;z-index:9998;display:none;}
.gpsd-sheet.on{display:block;}
.gpsd-mask{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.65);}
.gpsd-sheetbody{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:430px;background:#1d1d1d;border:1px solid #454545;border-radius:12px;padding:14px 16px 16px;color:#e8e2d6;box-shadow:0 22px 56px rgba(0,0,0,.55);}
.gpsd-sheethead{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #333;}
.gpsd-sheethead h4{margin:0;font-size:16px;font-weight:600;color:#f3ede1;}
.gpsd-close{width:30px;height:30px;border:0;background:transparent;color:#9a9a9a;font-size:22px;line-height:1;cursor:pointer;padding:0;}
.gpsd-setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #303030;font-size:14px;color:#e6e0d4;}
.gpsd-switch{position:relative;display:block;width:44px;height:24px;flex:0 0 44px;}
.gpsd-switch input{position:absolute;opacity:0;width:0;height:0;}
.gpsd-switch i{position:absolute;left:0;top:0;right:0;bottom:0;background:#3a3a3a;border-radius:20px;box-shadow:inset 0 0 0 1px #565656;transition:background .2s;}
.gpsd-switch i:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#cfcfcf;transition:left .2s,background .2s;}
.gpsd-switch input:checked+i{background:#f7a11a;box-shadow:none;}
.gpsd-switch input:checked+i:after{left:23px;background:#fff;}
.gpsd-seg{display:flex;border:1px solid #4a4a4a;border-radius:6px;overflow:hidden;}
.gpsd-seg button{border:0;background:transparent;color:#aaa;font-size:12px;padding:7px 9px;cursor:pointer;white-space:nowrap;}
.gpsd-seg button+button{border-left:1px solid #4a4a4a;}
.gpsd-seg button.on{background:#3f3f3f;color:#fff;}
.gpsd-acts{display:flex;gap:6px;}
.gpsd-act{border:1px solid #4a4a4a;background:#2a2a2a;color:#e6e0d4;border-radius:6px;padding:7px 9px;font-size:12px;cursor:pointer;white-space:nowrap;}
.gpsd-act:disabled{opacity:.45;cursor:default;}
.gpsd-sheetnote{margin:12px 0 0;font-size:12px;line-height:1.8;color:#9a9a9a;}
@media (max-width:420px){
.gpsd-gps{font-size:22px;letter-spacing:4px;}
.gpsd-clock{font-size:17px;}
.gpsd-speedbox b{font-size:26px;}
.gpsd-speedbox em{font-size:13px;margin-top:5px;}
.gpsd-unit{font-size:17px;}
.gpsd-tab{font-size:18px;}
.gpsd-tabs{height:47px;}
.gpsd-sbar{font-size:16px;height:28px;line-height:28px;}
.gpsd-tile{height:76px;}
.gpsd-tile b{font-size:28px;}
.gpsd-tile em{font-size:13px;}
.gpsd-row{height:39px;font-size:15px;}
.gpsd-row b{font-size:16px;}
}
@media (max-width:360px){
.gpsd-gps{font-size:19px;}
.gpsd-clock{font-size:15px;}
.gpsd-speedbox b{font-size:23px;}
.gpsd-unit{font-size:15px;}
.gpsd-tab{font-size:16px;}
.gpsd-sbar{font-size:14px;height:26px;line-height:26px;}
.gpsd-tile{height:68px;}
.gpsd-tile b{font-size:24px;}
.gpsd-row{height:35px;font-size:13px;}
.gpsd-row b{font-size:14px;}
}