:root{--navy: #0f3d6e;--blue: #1e6fd9;--green: #0f8a47;--red: #c62828;--orange: #d9620c;--purple: #6d4fd8;--gray-100: #eef1f6;--gray-300: #cfd6e2;--gray-500: #6b7486;--ink: #142033;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#f4f7fb;font-size:16px;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}h1,h2,p{margin:0}.muted{color:var(--gray-500)}.small{font-size:13px}.center{text-align:center}.grow{flex:1;min-width:0}.row{display:flex;align-items:center;gap:8px}.row.between{justify-content:space-between}.stack>*+*{margin-top:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--gray-300);background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}.btn:disabled{opacity:.5}.btn.small{min-height:34px;padding:0 10px;font-size:13px;border-radius:8px}.btn.big{min-height:58px;font-size:18px;width:100%}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.warn{background:var(--orange);border-color:var(--orange);color:#fff}.btn.ghost{background:transparent;border-color:transparent;color:var(--blue)}.btn.light{background:#fff;color:var(--ink);border-color:#fff}.light-text{color:#fff!important}.input{width:100%;min-height:48px;padding:10px 12px;border-radius:10px;border:1px solid var(--gray-300);font:inherit;background:#fff;color:var(--ink)}textarea.input{min-height:70px}.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}.alert{padding:12px 14px;border-radius:10px;font-size:14px}.alert.error{background:#fdecec;color:#a61b18}.alert.info{background:#e8f1fd;color:#0f4a8f}.splash{min-height:100vh;display:flex;align-items:center;justify-content:center}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--gray-300);border-top-color:var(--blue);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.signin{width:100%;max-width:420px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:48px 20px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:10px}.signin img{align-self:center}.signin form{text-align:left;margin-top:14px}.app{--app-max: 720px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(68px + env(safe-area-inset-bottom))}.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) max(14px,calc((100% - var(--app-max)) / 2 + 14px)) 10px;background:var(--navy);color:#fff}.bar .grow{overflow:hidden}.bar .grow b,.bar .grow .small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar .small{opacity:.8}.bar .icon{background:none;border:0;color:#fff;padding:8px;flex-shrink:0}.offline-bar{background:#374151}.dot{width:10px;height:10px;border-radius:50%}.dot.on{background:#34d17a}.dot.off{background:#f05252}.banner{background:#fff1d6;color:#7a4a00;padding:10px 14px;font-size:14px;font-weight:600}.banner.info{background:#e8f1fd;color:#0f4a8f}.banner.update{display:flex;align-items:center;flex-wrap:wrap;gap:10px;background:var(--blue);color:#fff}.install-card{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--gray-300);text-align:left;color:var(--navy)}.install-card .grow{flex:1 1 160px}.install-card .btn{margin-left:auto}.install-card .muted{color:var(--gray-500)}.scan{width:100%;max-width:var(--app-max);margin:0 auto;padding:14px;display:flex;flex-direction:column;gap:12px}.direction{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#fff;padding:6px;border-radius:14px;border:1px solid var(--gray-300)}.direction button{min-width:0;min-height:56px;padding:0 8px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:clamp(15px,4.5vw,18px);font-weight:700;color:var(--gray-500);display:flex;align-items:center;justify-content:center;gap:8px}.direction button svg{flex-shrink:0}.direction button.on.entry{background:var(--blue);color:#fff}.direction button.on.exit{background:var(--navy);color:#fff}.scanner{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:3 / 4;max-height:min(58vh,640px);background:#0b1220;border-radius:16px;overflow:hidden}.scanner video{width:100%;height:100%;object-fit:cover}.scanner-frame{position:absolute;top:18%;right:14%;bottom:18%;left:14%;border:3px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 0 0 999px #00000059}.scanner-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;padding:24px}.checking{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600}.hint{text-align:center;color:var(--gray-500);font-size:14px}.tabbar{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-top:1px solid var(--gray-300);padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);z-index:10}.tabbar button{min-height:64px;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--gray-500);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tabbar button.on{color:var(--blue)}.result{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;padding:calc(28px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));color:#fff;text-align:center;overflow-y:auto}.result>svg{width:clamp(54px,15vw,72px);height:auto;flex-shrink:0}.result .headline{font-size:clamp(26px,7vw,40px);font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-top:10px;line-height:1.1;overflow-wrap:anywhere}.result .instruction{font-size:clamp(16px,4.5vw,18px);font-weight:600;margin-top:10px;max-width:460px}.result .reason{margin-top:10px;background:#0000002e;padding:8px 14px;border-radius:10px;font-weight:600;max-width:100%}.result .details{margin-top:18px;background:#fff;color:var(--ink);border-radius:16px;padding:16px;width:100%;max-width:520px;text-align:left}.vehicle-pic{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:12px;background:#eef2f7;margin-bottom:12px}.vehicle-pic.art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--gray-500);font-size:12px}.vehicle-pic.art svg{width:62%}.result .plate{font-size:clamp(22px,6.5vw,28px);font-weight:800;letter-spacing:1px;overflow-wrap:anywhere}.result dl{display:grid;grid-template-columns:minmax(84px,34%) 1fr;gap:6px 10px;margin:12px 0 0;font-size:15px}.result dt{color:var(--gray-500)}.result dd{margin:0;font-weight:600;overflow-wrap:anywhere}.result .actions{margin-top:auto;padding-top:20px;width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px}.tone-green{background:var(--green)}.tone-red{background:var(--red)}.tone-orange{background:var(--orange)}.tone-dark{background:#1f2937}.tone-gray{background:#4b5563}.sheet-back{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#0a142880;display:flex;align-items:flex-end;justify-content:center;padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}.sheet{background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));max-height:92vh;max-height:92dvh;overflow-y:auto}.sheet h2{display:flex;align-items:center;gap:8px;font-size:20px}.activity{width:100%;max-width:var(--app-max);margin:0 auto;padding:14px}.card{background:#fff;border:1px solid var(--gray-300);border-radius:14px;padding:12px;margin-bottom:12px}.warn-card{border-color:#f1c27d;background:#fffaf0}.event{display:flex;align-items:flex-start;gap:10px;padding:11px 4px;border-bottom:1px solid var(--gray-100);font-size:15px}.event .when{font-variant-numeric:tabular-nums;color:var(--gray-500);width:46px;flex-shrink:0}.event .err{color:var(--red);font-size:13px;overflow-wrap:anywhere}.event>.tag{flex-shrink:0}.tag{font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}.tag-green{background:#e6f6ed;color:#0c6b39}.tag-red{background:#fdecec;color:#a61b18}.tag-orange{background:#fff1e6;color:#b04e08}.tag-purple{background:#efebfd;color:var(--purple)}.offline-body{width:100%;max-width:520px;margin:0 auto;padding:32px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink)}.offline-body svg{color:var(--red)}.offline-body .btn.big{max-width:420px}.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%);background:#142033;color:#fff;padding:12px 16px;border-radius:12px;font-weight:600;z-index:50;width:max-content;max-width:min(90vw,420px);text-align:center}.demo-card{margin-top:18px;padding:12px;border-radius:14px;border:1px dashed #f1c27d;background:#fffaf0;color:#7a4a00;display:flex;flex-direction:column;gap:8px;text-align:left}.demo-card .btn{justify-content:flex-start;color:var(--ink)}.lang-switch{display:inline-flex;border:1px solid var(--gray-300);border-radius:9px;padding:2px;background:#fff}.lang-switch button{border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--gray-500);padding:5px 9px;border-radius:7px;cursor:pointer}.lang-switch button.on{background:var(--blue);color:#fff}.signin-lang{display:flex;justify-content:center;margin-top:14px}.bar .lang-switch{border-color:#ffffff59;background:#ffffff1f}.bar .lang-switch button{color:#dbe7f5;padding:4px 7px}.bar .lang-switch button.on{background:#fff;color:var(--navy)}@media (min-width: 820px){.tabbar{left:50%;right:auto;width:min(100%,var(--app-max));transform:translate(-50%);border-left:1px solid var(--gray-300);border-right:1px solid var(--gray-300);border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}.scan{padding:18px 20px 24px;gap:14px}.direction{max-width:520px;width:100%;margin-inline:auto}.hint{max-width:520px;margin-inline:auto}.scan>.row{width:100%;max-width:520px;margin-inline:auto}.activity{padding:18px 20px 24px}.signin{padding-top:64px}.sheet-back{align-items:center;padding:24px}.sheet{border-radius:20px;max-height:86vh;max-height:86dvh}}@media (max-width: 420px){.bar{gap:8px;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}.bar .lang-switch button{padding:3px 5px;font-size:11px}.scan,.activity{padding:10px}.signin{padding:32px 14px calc(24px + env(safe-area-inset-bottom))}.btn{padding:0 12px}.result{padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}.result .details{padding:13px;border-radius:14px}.result dl{font-size:14px}.sheet{padding-inline:14px}.tabbar button{font-size:11px}}@media (orientation: landscape) and (max-height: 560px){.scan{max-width:1000px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"scanner direction" "scanner hint" "scanner checking" "scanner actions";align-items:start;gap:10px 12px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))}.scan>.direction{grid-area:direction;max-width:none}.scan>.scanner{grid-area:scanner;max-width:none;width:100%;aspect-ratio:4 / 3;max-height:calc(100dvh - 92px)}.scan>.hint{grid-area:hint;max-width:none;padding:0 4px}.scan>.checking{grid-area:checking;justify-content:flex-start;padding:0 4px}.scan>.row{grid-area:actions;max-width:none}.direction button{min-height:50px}.app{padding-bottom:calc(58px + env(safe-area-inset-bottom))}.tabbar button{min-height:54px;flex-direction:row;gap:8px;font-size:12px}.result{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}.result>svg{width:44px;height:44px}.result .headline{font-size:24px;margin-top:2px}.result .instruction{font-size:15px;margin-top:4px}.result .reason{margin-top:6px;padding:5px 10px;font-size:14px}.result .details{margin-top:10px;padding:12px}.vehicle-pic{max-height:110px;margin-bottom:8px}.result dl{font-size:13px;grid-template-columns:96px 1fr}.result .actions{flex-direction:row;padding-top:10px}.result .actions .btn{flex:1;min-height:48px}}@media (max-height: 420px){.result{display:block}.result .actions{margin-top:14px}}
