@font-face{font-family:"NIU Number";src:url('/fonts/niu-din.ttf') format('truetype');font-style:italic;font-weight:700;font-display:swap}
:root{color-scheme:dark;--page:#171d24;--surface:#202730;--divider:#ffffff10;--text:#f4f6f8;--secondary:#a1abb8;--tertiary:#7e8998;--mint:#72d9bf;--accent:#72d9bf;--gutter:20px;--inner:20px;--radius:16px;--app-height:100vh;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;font-size:16px;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports(height:100dvh){:root{--app-height:100dvh}}
:root.is-standalone{--app-height:100vh}
*,*::before,*::after{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* Keep the proven iOS Home Screen fix: normal-flow roots, never fixed roots. */
html,body{width:100%;height:var(--app-height);margin:0;overflow:hidden;overscroll-behavior:none;touch-action:pan-x pan-y}
body{background:#10141a;color:var(--text)}
button,input{font:inherit}
button{margin:0;padding:0;color:inherit;background:transparent;border:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:wait;opacity:.45}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,picture{display:block;-webkit-user-drag:none;pointer-events:none}
a{color:inherit}
#app{position:relative;width:100%;max-width:440px;height:var(--app-height);margin:0 auto;display:grid;grid-template-rows:minmax(0,1fr) auto auto;background:linear-gradient(155deg,#1c232b,var(--page) 52%);overflow:hidden}
main{min-width:0;min-height:0;padding:calc(var(--safe-top) + 52px) var(--safe-right) 28px var(--safe-left);overflow:hidden auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:translateY(var(--pull-distance,0px));transition:transform .22s ease}
main::-webkit-scrollbar{display:none}
#app[data-view="track"] main,#app[data-view="location"] main{padding-top:var(--safe-top)}
#app[data-view="battery"] main{padding-top:calc(var(--safe-top) + 40px)}
#app[data-view="settings"] main{padding-top:calc(var(--safe-top) + 20px)}
.more-button{position:absolute;z-index:12;top:calc(var(--safe-top) + 8px);right:20px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#ffffff05;color:#dce2e9}
.more-button .icon{width:24px;height:24px}
#app[data-view="track"] .more-button,#app[data-view="location"] .more-button,#app[data-view="settings"] .more-button{display:none}
.settings-menu{position:fixed;top:calc(var(--safe-top) + 52px);right:max(20px,calc((100vw - 440px)/2 + 20px));left:auto;bottom:auto;margin:0;width:240px;padding:8px 18px 12px;border:1px solid #ffffff12;border-radius:18px;background:#252d37;color:var(--text);box-shadow:0 12px 40px #0005}
.settings-menu::backdrop{background:#0005}
.menu-heading{display:flex;align-items:center;justify-content:space-between;min-height:40px;color:var(--secondary);font-size:12px}
.menu-heading button{width:32px;height:32px;font-size:24px;color:var(--secondary)}
.settings-menu>button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;text-align:left;font-size:15px;border-top:1px solid var(--divider)}
.settings-menu .menu-danger{color:#ef989f}
.bottom-nav{position:relative;z-index:10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:calc(58px + var(--safe-bottom));padding:6px max(14px,var(--safe-right)) calc(6px + var(--safe-bottom)) max(14px,var(--safe-left));background:#1d242d;border-top:1px solid #ffffff0e}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;color:#9ba6b6;font-size:12px;line-height:16px;letter-spacing:.2px}
.bottom-nav button.active{color:var(--mint)}
.bottom-nav button>span{display:grid;place-items:center;width:26px;height:26px}
.bottom-nav svg{width:24px;height:24px;stroke-width:1.7}
.icon{width:24px;height:24px;flex:0 0 auto}
.chevron{width:14px;height:14px;flex:0 0 auto;color:var(--tertiary)}
.metric{display:flex;flex-direction:column;min-width:0;align-items:flex-start}
.metric-readout{display:inline-flex;align-items:baseline;gap:1px;max-width:100%;white-space:nowrap;font-family:"NIU Number","Arial Narrow",sans-serif;font-style:italic;font-weight:700;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.metric-number{display:inline-block;line-height:1}
.metric-readout .metric-unit{display:inline-block;font:inherit;font-size:.48em;line-height:1;margin-left:2px}
.metric-readout .seconds{font-size:.72em}
.metric-readout .minute-mark{font-size:.85em;margin-left:1px}
.metric-readout .second-mark{font-size:.62em}
.metric-label{color:var(--secondary);font-size:14px;line-height:21px;margin-top:9px}
.caption{font-size:12px;line-height:18px;color:var(--secondary)}
.home-summary{margin:4px 20px 18px}
.overview-metrics{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;text-align:left}
.overview-metrics>.metric:last-child{border-left:1px solid var(--divider);padding-left:28px}
.overview-metrics .metric-readout{font-size:58px}
.overview-metrics .metric-unit{font-size:.43em}
.status-energy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;margin-top:24px;font-size:12px;line-height:18px;color:var(--secondary)}
.status-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.status-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#7e8998}
.online .status-dot{background:var(--mint)}
.energy-link{display:inline-flex;align-items:center;gap:7px;min-height:34px;color:var(--secondary);font-size:12px}
.energy-link .metric-readout{font-size:19px;color:var(--text)}
.energy-link .metric-unit{font-size:12px;color:var(--secondary)}
.energy-link .chevron{margin-left:4px}
.home-location{display:block;width:calc(100% - 24px);position:relative;margin:0 12px;overflow:hidden;border-radius:16px;background:var(--surface)}
.home-map{height:clamp(220px,30vh,290px)}
.home-map .map-tiles{-webkit-mask-image:linear-gradient(#000 60%,#0009);mask-image:linear-gradient(#000 60%,#0009)}
.location-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;width:100%;padding:14px 16px;text-align:left;background:linear-gradient(90deg,#222b36,#202832)}
.location-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:500;line-height:24px}
.location-meta{display:flex;align-items:center;gap:8px;flex:0 0 auto;color:var(--secondary);font-size:12px;line-height:20px}
.location-unavailable{position:static!important;height:220px}
.recent-ride{margin:22px 20px 0}
.section-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;text-align:left;font-size:14px;line-height:22px}
.recent-ride .section-link{min-height:40px;border-bottom:1px solid var(--divider)}
.recent-ride-detail{display:block;width:100%;padding-top:16px;text-align:left}
.recent-metrics{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:12px}
.recent-metrics .metric-readout{font-size:34px}
.recent-ride .ride-time{font-size:12px}
.page-intro{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 20px 14px}
.page-intro h1,.settings-heading h1{margin:0;font-size:22px;line-height:30px;font-weight:600;letter-spacing:.1px}
.odometer{display:inline-flex;align-items:baseline;gap:6px;font-size:11px;color:var(--secondary);white-space:nowrap}
.odometer .metric-readout{font-size:18px;color:var(--text)}
.odometer .metric-unit{font-size:11px;color:var(--secondary)}
.ride-day{margin:20px 20px 0}
.day-label{margin:0;padding-bottom:12px;border-bottom:1px solid var(--divider);font-size:14px;line-height:22px;font-weight:500}
.ride{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:16px;width:100%;padding:16px 0;text-align:left}
.ride+.ride{border-top:1px solid var(--divider)}
.ride-copy{display:flex;flex-direction:column;gap:13px;min-width:0}
.ride-time{font-size:13px;line-height:20px;font-variant-numeric:tabular-nums;color:var(--secondary);white-space:nowrap}
.ride-list-metrics{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ride-list-metrics .metric-readout{font-size:27px}
.ride-list-metrics .metric-unit{font-size:12px}
.ride-map{display:block;width:100%;height:80px;border-radius:10px;pointer-events:none}
.ride-map .route-end{width:10px;height:10px;border-width:1.5px;font-size:0}
.map-credit{padding:12px 20px 0;font-size:10px;line-height:16px;color:var(--tertiary);text-align:right}
.map-credit a{text-decoration:none}
.battery-summary{margin:4px 20px 0}
.battery-summary>.metric>.metric-readout{font-size:54px}
.battery-summary>.metric .metric-unit{font-size:.43em}
.battery-key-metrics{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.battery-key-metrics>.metric:last-child{border-left:1px solid var(--divider);padding-left:28px}
.battery-key-metrics .metric-readout{font-size:34px}
.battery-key-metrics .metric-unit{font-size:15px}
.battery-key-metrics .metric-label{font-size:13px;margin-top:7px}
.range-details{margin:16px 20px 0;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.range-details .section-link{min-height:46px}
.range-details .section-link[aria-expanded="true"] .chevron{transform:rotate(90deg)}
.range-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:12px 0 20px}
.range-options .metric-readout{font-size:27px}
.range-options .metric-label{font-size:12px}
.chart-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 20px 14px}
.chart-switch-row h2{margin:0;font-size:15px;font-weight:500;line-height:23px}
.chart-tabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid #ffffff13;border-radius:12px;background:#202832}
.chart-tabs button{min-height:32px;min-width:72px;padding:4px 8px;border-radius:9px;font-size:12px;line-height:20px;color:var(--secondary)}
.chart-tabs button[aria-selected="true"]{background:#495667;color:var(--text)}
.chart-card{margin:0 20px;padding:0}
.chart-plot{display:grid;grid-template-columns:minmax(0,1fr) 26px;gap:8px}
.chart-plot svg{width:100%;height:112px;overflow:visible}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:var(--secondary);font-size:11px;line-height:14px}
.chart-x{display:flex;justify-content:space-between;padding-right:34px;margin-top:9px;color:var(--secondary);font-size:10px;line-height:18px}
.charge-note{display:flex;align-items:baseline;gap:14px;margin:18px 20px 0;color:var(--secondary);font-size:13px;line-height:22px}
.charge-note>span:first-child{color:var(--text)}
.chart-footer{display:flex;justify-content:space-between;margin-top:16px}
.info-list{margin:0}
.battery-info{margin:12px 20px 0;border-top:1px solid var(--divider)}
.info-line{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0}
.battery-info .info-line{min-height:48px;padding:10px 0}
.info-line+.info-line{border-top:1px solid var(--divider)}
.info-line dt,.info-line dd{margin:0;font-size:14px;line-height:24px}
.info-line dd{text-align:right;color:var(--secondary);font-variant-numeric:tabular-nums}
.supporting{margin-left:8px;font-size:11px;color:#ef989f}
.card{margin:0 20px 16px;border-radius:16px;background:var(--surface);overflow:hidden}
.detail-shell{position:relative}
.detail-map{height:clamp(300px,47vh,450px)}
.location-page-map{height:clamp(340px,55vh,520px)}
.page-back{display:grid;place-items:center;position:absolute;z-index:6;top:16px;left:16px;width:42px;height:42px;border-radius:50%;color:#f7f8fa;background:#252b38ed}
.page-back svg{width:22px;height:22px}
.route-summary{margin-top:16px;padding:21px 18px}
.route-date{font-size:16px;font-weight:500;line-height:24px;margin-bottom:4px}
.route-time{color:var(--secondary);font-size:13px;line-height:20px;margin-bottom:24px;font-variant-numeric:tabular-nums}
.ride-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.ride-metrics .metric-readout{font-size:27px}
.ride-metrics .metric-label{font-size:11px;line-height:18px}
.route-speed{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;border-top:1px solid var(--divider);padding-top:20px}
.route-speed .metric-readout{font-size:25px}
.route-speed .metric-label{font-size:12px}
.location-info{position:relative;z-index:3;margin-top:-18px;padding:22px 20px}
.location-info h1{margin:0 0 6px;font-size:18px;line-height:26px;font-weight:600;white-space:normal}
.location-time{color:var(--secondary);font-size:12px;line-height:20px}
.location-address{margin-top:14px;color:var(--secondary);font-size:13px;line-height:22px;overflow-wrap:anywhere}
.location-address:empty{display:none}
.location-actions{display:grid;grid-template-columns:1fr;margin-top:22px}
.action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:12px 18px;border-radius:11px;background:#34404e;color:var(--text);font-size:14px;font-weight:500;line-height:22px}
.action .icon{width:17px;height:17px}
.action.primary{background:var(--mint);color:#112820}
.action.text{padding:0;min-height:30px;color:#ef989f;background:transparent;font-size:13px}
.settings-heading{display:flex;align-items:center;gap:10px;margin:0 20px 22px}
.settings-back{display:grid;place-items:center;width:32px;height:40px;margin-left:-8px}
.settings-back svg{width:22px;height:22px}
.connection-status{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;gap:12px}
.connection-status>span{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:22px}
.connection-status .status-dot{background:var(--mint)}
.serial-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px 20px;font-size:12px;line-height:20px;color:var(--secondary)}
.serial-line code{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--secondary);word-break:break-all}
.settings-control{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:16px 20px;font-size:14px}
.form-title{margin:20px 20px 10px;color:var(--secondary);font-size:13px;font-weight:400;line-height:20px}
.form-fields{padding:0 18px}
.input-line{display:flex;align-items:center;gap:12px;min-height:59px}
.input-line+.input-line{border-top:1px solid var(--divider)}
.input-line label{flex:0 0 57px;font-size:14px;line-height:22px}
.input-line input{min-width:0;width:100%;height:58px;padding:0;border:0;outline:none;border-radius:0;background:transparent;font-size:16px;line-height:24px;color:var(--text);caret-color:var(--mint)}
.input-line input::placeholder{color:var(--tertiary);font-size:14px}
.form-submit{display:flex;padding:4px 20px 20px}
.form-submit .action{width:100%;font-size:15px;min-height:48px}
.empty{padding:48px 24px;text-align:center;font-size:13px;line-height:22px;color:var(--secondary)}
.empty h1{margin:0 0 9px;color:var(--text);font-size:18px;font-weight:500}
.empty .action{margin:20px 4px 0}
.connect-gate{padding-top:70px}
.connect-gate .action{min-width:210px;margin-top:0}
.inline-empty{padding:20px 0 4px;color:var(--secondary);font-size:12px;line-height:20px}
.error-banner{margin:12px 20px;padding:12px 14px;background:#3b2c32;color:#edbdc2;border-radius:10px;font-size:12px;line-height:20px}
.map{position:relative;overflow:hidden;isolation:isolate;background:#dfe5e8;touch-action:pan-y}
.map-dark{background:#25313e}
.map-tiles,.route-overlay{position:absolute;inset:0;overflow:hidden}
.map-tiles img{position:absolute;width:256px;height:256px;max-width:none}
.map-dark .map-tiles img{filter:invert(.91) hue-rotate(180deg) saturate(.65) brightness(.88) contrast(.92)}
.map-amap.map-dark .map-tiles img{filter:grayscale(.85) invert(.9) sepia(.3) saturate(1.7) hue-rotate(170deg) brightness(.88)}
.map-marker{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);width:36px;height:36px;border:3px solid #72d9bf;border-radius:50%;background:#25313e;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 8px #72d9bf12}
.map-marker svg{width:20px;height:20px;stroke-width:2}
.route-overlay svg{display:block;width:100%;height:100%}
.route-end{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#53cdb2;color:#fff;font-size:9px;line-height:14px}
.route-end.finish{background:#e96273}
.map-message{position:absolute;top:16px;right:16px;z-index:3;padding:6px 10px;border-radius:6px;background:#ffffffeb;color:#637080;font-size:11px;line-height:16px}
.map-dark .map-message{color:#b6c1ce;background:#253244e8}
.map-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--secondary)}
.preview-loading,.pull-spinner{display:block;width:20px;height:20px;border:2px solid #95a4b629;border-top-color:var(--mint);border-radius:50%}
.preview-loading{position:absolute;top:calc(50% - 10px);left:calc(50% - 10px);animation:refresh-spin .8s linear infinite}
.skeleton{margin:16px 20px;height:150px;border-radius:16px;background:linear-gradient(100deg,#202730 15%,#2a333f 45%,#202730 75%);background-size:240% 100%;animation:shimmer 1.5s linear infinite}
.skeleton.short{height:80px}
#pull-refresh{position:absolute;top:calc(14px + var(--safe-top));left:0;right:0;z-index:8;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .16s,transform .2s;color:var(--secondary)}
#pull-refresh.visible{opacity:1;transform:translateY(0)}
.pull-spinner{transform:rotate(var(--pull-angle,0deg))}
#pull-refresh.ready .pull-spinner{border-top-color:var(--text)}
#pull-refresh.refreshing .pull-spinner{animation:refresh-spin .7s linear infinite}
.pulling main{transition:none}
#toast{position:fixed;z-index:30;left:50%;bottom:calc(82px + var(--safe-bottom));transform:translate(-50%,6px);max-width:min(85%,340px);width:max-content;opacity:0;pointer-events:none;padding:13px 20px;border-radius:10px;color:#fff;background:#3c4653f2;text-align:center;font-size:14px;line-height:21px;transition:opacity .16s,transform .16s}
#toast.show{opacity:1;transform:translate(-50%,0)}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{background-position:-140% 0}}
@media(max-width:359px){.overview-metrics .metric-readout,.battery-summary>.metric>.metric-readout{font-size:50px}.overview-metrics>.metric:last-child,.battery-key-metrics>.metric:last-child{padding-left:20px}.overview-metrics,.battery-key-metrics{gap:16px}.ride{grid-template-columns:minmax(0,1fr) 86px;gap:12px}.ride-map{height:72px}.ride-list-metrics .metric-readout{font-size:24px}.chart-tabs button{min-width:65px}.chart-switch-row{gap:10px}.status-energy-row{gap:6px}.status-item{font-size:11px}.ride-metrics{gap:10px}.ride-metrics .metric-readout{font-size:24px}.odometer{gap:4px;font-size:10px}.odometer .metric-readout{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.map-attribution{padding:3px 12px 4px;background:#1d242d;color:#94a1ae;font-size:9px;line-height:12px;text-align:center}
.map-attribution a{text-decoration:none}
.vector-snapshot{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;filter:none}
.map-vector{background:#202b37}