:root{--bg:#edf4ff;--ink:#152c61;--muted:#536d94;--accent:#007aff;--accent-edge:#278aff;--blob-one:#98ccff;--blob-two:#c3b4f5;--blob-three:#c5efff;--line:rgb(74 111 166 / 17%);--glass:rgb(255 255 255 / 32%);--glass-border:rgb(255 255 255 / 78%);--glass-shadow:0 12px 40px rgb(61 97 159 / 6%),inset 0 1px 1px rgb(255 255 255 / 90%);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100svh;isolation:isolate;display:flow-root}body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 76% 48% at 12% 92%,var(--blob-one),transparent 78%),radial-gradient(ellipse 80% 44% at 94% 16%,var(--blob-two),transparent 82%),radial-gradient(ellipse 100% 65% at 12% 42%,var(--blob-three),transparent 84%),var(--bg)}
button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.page{width:100%;max-width:430px;margin:0 auto;padding:calc(clamp(20px,4svh,36px) + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));min-height:100vh;min-height:var(--viewport-height,100svh);display:flex;flex-direction:column}
.vehicle,.secondary,dialog{background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3)}
.intro{text-align:center}.intro h1{font-size:27px;font-weight:750;letter-spacing:-.6px;line-height:1.35;margin:0;white-space:nowrap}.intro>p{font-size:15px;color:var(--muted);line-height:22px;margin:8px -6px 0;overflow-wrap:anywhere}
.vehicle{margin-top:21px;border-radius:26px;padding:22px 34px 18px;text-align:center}.vehicle-label{font-size:15px;font-weight:550;line-height:20px;margin:0 0 14px}.plate{background:rgb(255 255 255 / 72%);border:1.5px solid var(--muted);border-radius:9px;position:relative;height:78px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgb(255 255 255 / 58%),inset 0 2px 5px rgb(55 100 170 / 8%)}.plate strong{font-size:40px;line-height:1;font-weight:750;letter-spacing:1px;white-space:nowrap}.plate i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--muted)}.plate i:nth-child(1){top:8px;left:7px}.plate i:nth-child(2){top:8px;right:7px}.plate i:nth-child(3){bottom:8px;left:7px}.plate i:nth-child(4){bottom:8px;right:7px}.vehicle-status{font-size:14px;line-height:22px;color:var(--ink);margin:14px -20px 0}
.actions{margin-top:22px}.button{width:100%;min-height:58px;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:22px;font-size:20px;line-height:1.4;font-weight:650;border:1px solid transparent;transition:transform .18s,box-shadow .18s,background .18s}.button:active{transform:scale(.98)}.button svg{width:26px;height:26px}.button>svg,.button>span{position:relative;z-index:1}.primary{color:white;background:linear-gradient(180deg,rgb(255 255 255 / 24%),transparent 46%),var(--accent);border-color:var(--accent-edge);box-shadow:inset 0 1px 3px rgb(255 255 255 / 30%),0 8px 24px color-mix(in srgb,var(--accent) 12%,transparent)}.primary:hover{filter:brightness(1.045)}.action-caption{text-align:center;color:var(--muted);font-size:13px;line-height:20px;margin:8px 0 8px}.secondary{min-height:60px;color:var(--ink)}.secondary:hover{background:rgb(255 255 255 / 52%)}
.tips{margin:28px 7px 0}.tips h2{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:650;line-height:24px;margin:0}.tips h2::before,.tips h2::after{content:"";height:1px;background:var(--line);flex:1}.tips ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:reminder}.tips li{counter-increment:reminder;display:flex;gap:18px;align-items:center;font-size:14px;color:var(--ink);line-height:22px;padding:10px 0;min-height:52px}.tips li+li{border-top:1px solid var(--line)}.tips li::before{content:counter(reminder);flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:rgb(255 255 255 / 28%);border:1px solid rgb(255 255 255 / 55%);box-shadow:inset 0 1px 1px white}
footer{text-align:center;padding-top:22px;margin-top:auto}footer p{font-size:12px;line-height:20px;margin:0;color:var(--muted)}.footer-help{border:0;background:transparent;color:var(--muted);font-size:12px;min-height:44px;padding:8px 18px}.phone-fallback:not([hidden]){display:flex;justify-content:center;align-items:center;gap:16px;margin:0 0 10px;min-height:38px}.phone-fallback strong{font-size:16px;letter-spacing:.5px;font-weight:600;-webkit-user-select:text;user-select:text}.phone-fallback button{border:0;background:transparent;color:var(--accent);font-size:13px;min-height:44px;padding:8px 4px}
dialog{width:calc(100% - 32px);max-width:390px;max-height:calc(100dvh - 32px);overflow:auto;border-radius:28px;background:rgb(249 251 255 / 88%);color:var(--ink);padding:24px;box-shadow:0 24px 80px rgb(27 51 93 / 18%),inset 0 1px 1px white}dialog::backdrop{background:rgb(29 44 76 / 28%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.dialog-head h2{font-size:20px;margin:0;line-height:1.5}.close{width:34px;height:34px;border:1px solid white;border-radius:50%;background:rgb(255 255 255 / 60%);display:grid;place-items:center;flex:none}.close svg{width:18px;height:18px}.help-content h3{font-size:15px;margin:20px 0 7px}.help-content p,.dialog-description{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 18px}.help-content .privacy-note{font-size:12px;background:rgb(255 255 255 / 50%);padding:12px;border-radius:12px;margin:20px 0}.close-dialog{font-size:16px;min-height:48px}
form label{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin:19px 0 9px}form label span{font-weight:400;color:var(--muted);font-size:12px}input,select{width:100%;height:48px;border:1px solid white;border-radius:12px;background:rgb(255 255 255 / 65%);padding:0 12px;color:var(--ink);font-size:16px;box-shadow:inset 0 1px 4px rgb(35 63 110 / 4%)}input::placeholder{font-size:14px;color:var(--muted)}input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}.sms-preview{background:color-mix(in srgb,var(--accent) 7%,white);border:1px solid white;border-radius:16px;padding:14px;margin:20px 0}.sms-preview span{font-size:12px;color:var(--muted)}.sms-preview p{font-size:14px;line-height:1.8;margin:6px 0 0;overflow-wrap:anywhere}form .button{min-height:50px;font-size:16px}.sms-hint{font-size:12px;text-align:center;color:var(--muted);margin:12px 0 0}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:rgb(25 42 70 / 92%);color:#fff;padding:12px 20px;font-size:14px;line-height:1.6;border:1px solid rgb(255 255 255 / 25%);border-radius:16px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}.toast.visible{opacity:1}.noscript{position:fixed;bottom:0;background:#fff0b4;padding:10px;margin:0;width:100%;text-align:center}
@media(min-width:600px){body::before{background:radial-gradient(ellipse 45% 60% at 30% 90%,var(--blob-one),transparent 80%),radial-gradient(ellipse 42% 70% at 70% 5%,var(--blob-two),transparent 85%),var(--bg)}.page{margin:30px auto;min-height:760px;background:rgb(255 255 255 / 14%);border:1px solid rgb(255 255 255 / 65%);border-radius:36px;box-shadow:0 24px 80px rgb(27 51 93 / 8%);padding-left:24px;padding-right:24px}.intro h1{font-size:29px}}
@media(max-width:599px) and (max-height:740px){.page{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}.intro h1{font-size:26px}.intro>p{font-size:14px;margin-top:6px}.vehicle{margin-top:18px;padding:16px 28px 14px;border-radius:24px}.vehicle-label{margin-bottom:10px;font-size:14px}.plate{height:68px}.plate strong{font-size:38px}.vehicle-status{margin-top:10px;font-size:13px;line-height:20px}.actions{margin-top:18px}.button,.secondary{min-height:54px;border-radius:20px;font-size:19px}.action-caption{margin:6px 0 0;line-height:20px;font-size:12px}.phone-fallback:not([hidden]){margin-bottom:6px}.tips{margin-top:20px}.tips ol{margin-top:8px}.tips li{min-height:42px;padding:7px 0;font-size:13px}.tips li::before{flex-basis:24px;height:24px;font-size:12px}footer{padding-top:14px}}
@media(max-width:359px){.page{padding-left:16px;padding-right:16px}.intro h1{font-size:24px;letter-spacing:-.9px}.intro>p{font-size:13px}.vehicle{padding-left:25px;padding-right:25px}.plate strong{font-size:34px}.tips{margin-left:0;margin-right:0}.tips li{font-size:13px;gap:12px}.button{font-size:18px;gap:12px}}
@supports not (height:100svh){.page{padding-top:calc(24px + env(safe-area-inset-top))}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vehicle,.secondary{background:rgb(255 255 255 / 78%)}dialog{background:#f9fbff}}
@media(prefers-reduced-transparency:reduce){.vehicle,.secondary,dialog{background:#f9fbff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
body{min-height:100vh;min-height:var(--viewport-height,100svh)}
dialog{max-height:calc(var(--viewport-height,100vh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
[hidden]{display:none!important}
.contact-action{font-size:17px;min-height:52px}.contact-note{font-size:13px;line-height:1.7;color:var(--muted);margin:16px 0 0}.contact-note strong{color:var(--ink)}#contact-details .phone-fallback{margin:4px 0 18px;gap:12px;flex-wrap:wrap}#contact-details .phone-fallback strong{font-size:24px;letter-spacing:.7px}
.page main{display:flex;flex-direction:column;flex:1}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;height:100vh;height:var(--viewport-height,100svh);min-height:0}
.page{height:100vh;height:var(--viewport-height,100svh);min-height:0;overflow:hidden}
.page main{min-height:0}
.page .intro{margin-top:16px}
.page .vehicle{margin-top:33px}
.toast{inset:auto;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;margin:0;width:max-content;z-index:2147483647}
@media(max-width:599px) and (max-height:740px){.page .vehicle{margin-top:30px}}
@media(max-height:460px){.page .vehicle{margin-top:18px}}
.page .actions{margin-top:auto;padding-top:24px;flex-shrink:0}
.actions #sms-owner{margin-top:12px}
#contact-details .phone-fallback{justify-content:flex-start}
dialog{position:fixed;top:calc(var(--viewport-offset-top,0px) + var(--viewport-height,100vh)/2);left:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#contact-dialog{--dialog-inset-top:clamp(16px,calc(var(--viewport-height,100vh)*.42 - 110px),320px);top:calc(var(--viewport-offset-top,0px) + var(--dialog-inset-top) + env(safe-area-inset-top));transform:translateX(-50%);max-height:calc(var(--viewport-height,100vh) - var(--dialog-inset-top) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media(min-width:600px) and (min-height:600px){.page{height:calc(var(--viewport-height,100vh) - 60px);min-height:0}}
@media(min-width:600px) and (max-height:599px){.page{margin:0 auto;min-height:0;border:0;border-radius:0}}
@media(max-height:460px){.page{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}.intro h1{font-size:22px}.intro>p{font-size:12px;line-height:18px;margin-top:4px}.vehicle{margin-top:12px;padding:10px 24px}.vehicle-label{font-size:12px;line-height:16px;margin-bottom:6px}.plate{height:50px}.plate strong{font-size:30px}.vehicle-status{font-size:12px;line-height:18px;margin-top:6px}.page .actions{padding-top:12px}.page .button{font-size:17px;min-height:44px}.action-caption{font-size:11px;line-height:16px;margin:4px 0}}




