:root{font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#273645;background:#f5f7fa;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:#f5f7fa}header,main,footer{max-width:560px;margin:auto;padding:0 20px}header{display:flex;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:12px;gap:12px}small{letter-spacing:2px;font-size:9px;color:#8293a3}h1{font-size:25px;font-weight:650;letter-spacing:-.8px;margin:7px 0 0}h2{font-size:21px;font-weight:600;margin:0}h3{font-size:15px;font-weight:600;margin:0 0 10px}p{color:#708293;line-height:1.7;font-size:14px}a{color:#3a77b4;text-underline-offset:4px}button,input,select,.button{font:inherit;border-radius:14px;padding:12px 16px;border:1px solid #e4e9ef;background:#fff;color:#35495d}button,.button{cursor:pointer;touch-action:manipulation;transition:background .18s,transform .18s}button:hover,.button:hover{background:#edf4fb}button:active{transform:scale(.98)}button:disabled{opacity:.46;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #417db4;outline-offset:3px}nav{display:flex;gap:7px}nav button{font-size:12px;padding:10px 12px;min-height:42px;background:#ffffffa8}.primary{background:#417db4;color:#fff;border-color:#417db4}.primary:hover{background:#376b9b}.danger{color:#a15353}.card{background:white;border:1px solid #edf0f3;border-radius:24px;padding:28px}#login{margin:32px 0}label{display:block;margin:18px 0 9px;font-size:13px;color:#63788b}input{display:block;width:100%;margin:9px 0 18px;background:#f8fafc}input:focus,select:focus{outline:2px solid #8ab8de;outline-offset:2px}form button{width:100%}.tag{color:#7595b4;font-size:10px;letter-spacing:2px}.vehicle{text-align:center;padding:6px 0 12px}.car{width:100%;height:170px;background:url('/car.svg') center/contain no-repeat}.vehicle-note{font-size:11px;margin:0;color:#8a9bab}#connection{display:inline-flex;align-items:center;gap:7px;background:#e9eef3;color:#65798b;font-size:11px;max-width:100%;padding:5px 11px;border-radius:20px;margin:0;overflow-wrap:anywhere}#connection::before{content:'';width:6px;height:6px;background:#97a6b3;border-radius:50%;flex-shrink:0}#connection[data-online=true]{background:#e6f1ed;color:#468574}#connection[data-online=true]::before{background:#58a08b}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 16px}.grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;min-height:98px;padding:14px 6px;background:#fff;border-color:#e9edf2;box-shadow:0 5px 18px #23394f04;font-size:14px}.grid button:hover:enabled{background:#edf4fb}.grid svg{width:26px;height:26px;stroke:#6086a7;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}.grid .label small{display:none}.latest{width:100%;display:flex;flex-direction:column;text-align:left;gap:7px;padding:12px 15px;border:0;border-radius:16px;background:#eaf0f5}.latest-title{font-size:10px;color:#8293a3;display:flex;justify-content:space-between}#latest-result{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.footnote{text-align:center;font-size:10px;color:#8a9bab;margin:12px 0 0}#notice:empty{display:none}#notice{color:#946324;background:#fff2dc;border-radius:12px;padding:9px 12px;font-size:12px;margin:4px 0 10px;overflow-wrap:anywhere}footer{text-align:center;font-size:9px;letter-spacing:1px;color:#99a8b6;padding-top:15px;padding-bottom:max(14px,env(safe-area-inset-bottom))}dialog{width:min(100% - 32px,500px);max-height:85dvh;border:1px solid #e8eef4;border-radius:24px;padding:0;color:#273645;box-shadow:0 20px 90px #1b344d30}dialog::backdrop{background:#172f4855;backdrop-filter:none;-webkit-backdrop-filter:none}.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 10px;position:sticky;top:0;background:#fff;z-index:1}.sheet-head button{border:0;background:#f1f5f8;width:40px;height:40px;padding:0;font-size:24px;color:#718698}.sheet-body{padding:0 22px 22px}.sheet-body>label{margin-top:12px}#device{width:100%;min-width:0}.hint{font-size:12px;color:#8293a3}.setting-group{border-top:1px solid #edf0f4;margin:20px 0;padding-top:20px}.setting-group p,details p{font-size:12px}.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;text-align:center;font-size:13px;white-space:nowrap}.button{text-decoration:none;display:inline-block}#pair-code{display:block;font:20px monospace;color:#417db4;letter-spacing:1px;margin-top:16px;overflow-wrap:anywhere}#pair-code:empty{display:none}details{padding:15px 0;border-top:1px solid #edf0f4}summary{cursor:pointer;font-size:13px;color:#627b91;min-height:28px}.account-actions{padding-top:8px}.panel-notice{font-size:12px;color:#946324;overflow-wrap:anywhere}.panel-notice:empty{display:none}.entry{border-top:1px solid #edf0f4;padding:16px 0;display:grid;grid-template-columns:75px 1fr 95px;gap:6px;font-size:12px}.entry p{grid-column:1/-1;margin:0;font-size:12px;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:600px){dialog{position:fixed;margin:auto 0 0;width:100%;max-height:88dvh;max-width:none;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom)}header{padding-top:20px}}@media(max-height:700px){header{padding-top:14px;padding-bottom:10px}h1{font-size:22px}.car{height:130px}.vehicle{padding-bottom:8px}.grid{gap:8px;margin-bottom:12px}.grid button{min-height:85px;gap:9px;padding:10px 5px}.latest{padding:10px 13px}.footnote{margin-top:9px}footer{padding-top:10px}}@media(min-width:800px){header{padding-top:45px}.car{height:210px}.grid button{min-height:110px}footer{padding-top:24px}}
nav{flex-shrink:0}@media(max-width:350px){header,main,footer{padding-left:16px;padding-right:16px}header small{font-size:8px;letter-spacing:.8px}header h1{font-size:21px}nav{gap:5px}nav button{padding:10px;font-size:12px}.car{height:110px}}
/* Fixed application shell: only login and modal content may scroll. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
header,main,footer{width:100%;margin:0 auto;flex-shrink:0}header{padding-top:16px}footer{padding-bottom:10px;padding-top:10px}main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body.authenticated main{overflow:hidden;display:flex;flex-direction:column}
#dashboard{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding-bottom:2px}
.vehicle{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;overflow:hidden}
.car{flex:1;min-height:0;max-height:230px;height:auto}#connection{flex-shrink:0;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%}#connection::before{display:inline-block;margin-right:7px;vertical-align:1px}.vehicle-note{flex-shrink:0}
.control-section{flex-shrink:0}.grid{margin:0;gap:8px}.grid button{min-height:0;height:clamp(72px,12dvh,110px);gap:9px;padding:10px 5px}
.latest{flex-shrink:0;padding:10px 13px;gap:5px}#latest-result{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.footnote{flex-shrink:0;margin:0}
#notice{flex-shrink:0;max-height:64px;overflow:auto;overscroll-behavior:contain}
dialog{overscroll-behavior:contain;overflow:hidden}dialog[open]{display:flex;flex-direction:column}.sheet-head{flex-shrink:0;position:static}.sheet-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-height:600px){header{padding-top:9px;padding-bottom:8px}#dashboard{gap:6px}footer{font-size:8px;padding-top:7px;padding-bottom:7px}.vehicle-note{display:none}.grid button{height:72px}.car{max-height:145px}}
@media(max-height:460px){header{padding-top:5px;padding-bottom:5px}header small{display:none}header h1{margin:0;font-size:20px}.car,.vehicle-note,.footnote{display:none}.vehicle{flex:0 0 auto;padding:2px}.grid button{height:64px;gap:4px}.grid svg{width:21px;height:21px}.latest{padding:6px 12px;gap:2px}footer{display:none}}
@media(max-height:460px) and (min-width:600px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}.grid button{height:76px}#dashboard{justify-content:center}.vehicle{padding:8px}}

/* Page-owned dim layer keeps browser chrome and the visible top edge in sync. */
html.panel-open{background:#abb4bf}
#panel-backdrop{position:fixed;inset:0;z-index:20;background:#172f4855;touch-action:none}
dialog{position:fixed;inset:0;z-index:21;background:#fff;margin:auto}
@media(max-width:600px){dialog{margin:auto 0 0}}
button,a,summary{-webkit-tap-highlight-color:transparent}