/* WEB ONLY: cinematic responsive system, Android 1.3.18 untouched */
:root{--bg:#f3f5f7;--surface:#fff;--surface2:#edf1f5;--ink:#1c2733;--muted:#687788;--line:#dce3e9;--blue:#bc292c;--orange:#d86931;--green:#118057;--red:#c22d2d;--shadow:0 12px 36px #10283a13;--rz-glow:#c82f31}
:root[data-theme=dark]{--bg:#0c141d;--surface:#18232f;--surface2:#21303d;--ink:#f2f7fa;--muted:#b1bfd0;--line:#344453;--blue:#fd6759;--orange:#f99a54;--green:#6bd29f;--red:#fa7269;--shadow:0 13px 37px #0005;--rz-glow:#f35d52}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0c141d;--surface:#18232f;--surface2:#21303d;--ink:#f2f7fa;--muted:#b1bfd0;--line:#344453;--blue:#fd6759;--orange:#f99a54;--green:#6bd29f;--red:#fa7269;--shadow:0 13px 37px #0005;--rz-glow:#f35d52}}
html{scroll-behavior:smooth}
body{font-size:calc(15px * var(--font-scale,1));line-height:1.42;background:radial-gradient(ellipse at 0 0,#c12a2a0c,transparent 36%),radial-gradient(ellipse at 98% 80%,#3699b00a,transparent 35%),var(--bg);min-width:280px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(#8ba1b80b 1px,transparent 1px),linear-gradient(90deg,#8ba1b80b 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(black,transparent 95%)}
button,input,select,textarea{font-family:inherit}
button{transition:background-color .22s,border-color .22s,box-shadow .28s,transform .25s cubic-bezier(.2,.8,.2,1)}
button:active{transform:scale(.976)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#app{max-width:1550px;padding-bottom:calc(85px + env(safe-area-inset-bottom))}
.topbar{height:68px;min-height:68px;padding:9px clamp(12px,2vw,25px);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);box-shadow:0 4px 18px #0000000a;gap:11px;z-index:40}
.topbar::after{content:"";height:1px;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.36}
.brand{font-size:calc(23px * var(--font-scale,1));line-height:1.05;font-weight:850;letter-spacing:.5px;color:var(--ink);gap:8px;min-width:0}
.brand img{width:43px;height:43px;border-radius:12px;flex:none;box-shadow:0 4px 16px #b5252532}
.brand small{font-size:calc(10px * var(--font-scale,1));margin-top:4px;line-height:1.1;letter-spacing:1.7px;color:var(--muted)}
.icon-button{width:42px;height:42px;min-height:42px;flex:none;border-radius:12px;border:1px solid var(--line);font-size:20px}
.icon-button .ui-icon{width:21px;height:21px}
.page{max-width:1200px;padding:clamp(14px,2.3vw,28px) clamp(12px,2.3vw,26px);margin:0 auto;min-width:0}
.page-head{align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.page h1{font-size:clamp(calc(23px * var(--font-scale,1)),4vw,calc(34px * var(--font-scale,1)));line-height:1.2;letter-spacing:-.45px}
.page h2,dialog h2{font-size:clamp(calc(17px * var(--font-scale,1)),3vw,calc(23px * var(--font-scale,1)));line-height:1.22;margin:14px 0 10px}
.sub,.muted,.empty,.history-hint,.fleet-filter-hint{font-size:calc(13px * var(--font-scale,1));line-height:1.4}
.page-head .sub{margin:3px 0 0}
.btn{font-size:calc(14px * var(--font-scale,1));min-height:42px;padding:9px 12px;line-height:1.25;border-radius:11px;font-weight:700;white-space:normal}
.btn>.ui-icon{width:18px;height:18px}
.btn.primary{background:linear-gradient(135deg,#e5443f,#b41c26);border-color:#bf272a;color:white;box-shadow:0 5px 17px #b6272d30}
.btn.outline{border-color:color-mix(in srgb,var(--blue) 44%,var(--line))}
.btn:hover{box-shadow:0 6px 17px #1320331b}
.card,.tile,.row-card{border-radius:17px;box-shadow:0 9px 28px #13223312}
.card{padding:clamp(13px,2vw,19px);margin-bottom:13px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,#df66532f,transparent)}
.card:hover{border-color:color-mix(in srgb,var(--blue) 18%,var(--line))}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions .btn{flex:1 1 135px;width:auto;min-width:0}
.search,.field input,.field select,.field textarea,.page .search{font-size:calc(14px * var(--font-scale,1));min-height:42px;line-height:1.35;padding:9px 10px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);color:var(--ink)}
.field{margin-bottom:10px;min-width:0}
.field span,.measurements .field span{font-size:calc(12px * var(--font-scale,1));line-height:1.25;margin-bottom:4px}
.field textarea{min-height:83px}
.search{margin-bottom:11px}
.two-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.measurements{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.measurements .field input{font-size:calc(17px * var(--font-scale,1));min-height:44px;padding:8px 3px}
.worklist label{font-size:calc(14px * var(--font-scale,1));padding:7px 0}
.worklist input,.history-checkbox input,.fleet-checkbox input{width:19px;height:19px}
.facts>div{flex-wrap:wrap;padding:9px 0;gap:7px}
.facts dt,.facts dd{font-size:calc(14px * var(--font-scale,1))}
.tabs{display:flex;gap:3px;margin:10px 0;padding:4px}
.tabs button{min-height:37px;font-size:calc(13px * var(--font-scale,1));padding:7px}
.pill,.history-count,.works-date,.work-summary,.photos small,.small,.import-status{font-size:calc(12px * var(--font-scale,1));line-height:1.35}
.grow strong,.history-entry .history-row .grow strong{font-size:calc(16px * var(--font-scale,1))}
.grow p,.history-entry .history-row .grow p,.fleet-entry .row-card p{font-size:calc(12px * var(--font-scale,1));line-height:1.32;margin:4px 0}
.row-card,.fleet-entry .row-card,.history-entry .history-row{padding:11px;gap:8px;min-height:72px}
.history-entry{margin-bottom:8px}
.history-toolbar{margin:8px 0;gap:8px;flex-wrap:wrap}
.history-toolbar>.btn{font-size:calc(13px * var(--font-scale,1));min-height:38px;padding:8px 11px}
.history-select-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.history-select-actions .btn{font-size:calc(12px * var(--font-scale,1));padding:7px 3px;min-height:42px;white-space:normal}
.history-filter,.fleet-filter{grid-template-columns:repeat(2,minmax(0,1fr));padding:11px;gap:8px}
.history-filter .history-sort{grid-column:auto}
.history-filter .field input,.history-filter .field select,.fleet-filter .field input,.fleet-filter .field select{font-size:calc(13px * var(--font-scale,1));min-height:40px;padding:8px}
.modal-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.modal-actions .btn{min-height:44px;width:auto}
.backup-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.compact-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.backup-actions .btn,.compact-actions .btn{font-size:calc(12px * var(--font-scale,1));min-height:43px;padding:7px 4px;white-space:normal}
.backup-actions .btn>.ui-icon,.compact-actions .btn>.ui-icon{width:17px;height:17px}
.setting-line{flex-wrap:nowrap;align-items:center;gap:7px}
.setting-line>select,.setting-line>button{width:auto;font-size:calc(12px * var(--font-scale,1));min-height:40px}
dialog{width:min(94vw,520px);padding:12px;max-height:85dvh;border-radius:20px}
dialog form{max-height:76dvh}
dialog::backdrop{background:#07131ec7;backdrop-filter:blur(5px)}
dialog[open]{animation:rz-dialog-in .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes rz-dialog-in{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#notice{font-size:calc(13px * var(--font-scale,1));min-height:38px;bottom:calc(80px + env(safe-area-inset-bottom));padding:10px 13px;box-shadow:0 10px 26px #081a2c48}
#notice.show{animation:rz-toast .28s ease-out both}
@keyframes rz-toast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.empty{padding:25px 10px}
.categories-bus{max-width:820px}
.categories-bus .tile-bus{overflow:hidden;isolation:isolate}
.categories-bus .tile-hero{height:clamp(148px,25vw,220px);position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 60% 9%,#e8454844,transparent 56%),linear-gradient(135deg,#152d3d,#101b2b 65%,#263b48)}
.categories-bus .tile-hero::before{content:"";position:absolute;inset:auto -15% -41%;height:69%;transform:perspective(360px) rotateX(70deg);background:repeating-linear-gradient(90deg,transparent 0 24px,#ffffff13 25px 27px,transparent 28px 61px);animation:rz-road-flow 11s linear infinite}
.categories-bus .tile-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 21%,#ffffff1a 45%,transparent 60%);transform:translateX(-125%);animation:rz-scan-light 7s ease-in-out infinite}
@keyframes rz-road-flow{to{background-position:125px 0}}
@keyframes rz-scan-light{0%,24%{transform:translateX(-125%)}60%,100%{transform:translateX(150%)}}
.categories-bus .category-mark{z-index:1;width:126px;height:108px;border-radius:25px;background:linear-gradient(145deg,#fff,#d6e2ea);color:#203243;border:1px solid #fff;box-shadow:0 18px 45px #0007,inset 0 2px 3px #fff;transform:perspective(500px) rotateX(9deg);animation:rz-float 5.8s ease-in-out infinite}
.categories-bus .category-icon{width:83px;height:83px}
@keyframes rz-float{0%,100%{transform:translateY(0) perspective(500px) rotateX(9deg)}50%{transform:translateY(-7px) perspective(500px) rotateX(4deg)}}
.categories-bus .tile-text{padding:13px 17px 5px}
.categories-bus .tile-text b{font-size:calc(20px * var(--font-scale,1))}
.tile-more{font-size:calc(13px * var(--font-scale,1));min-height:42px;padding:9px 12px;margin:8px 13px 13px;border-radius:10px}
.tile-more-arrow{width:30px;height:30px}
.tile-more-arrow .ui-icon{width:18px;height:18px}
.tile-bus:hover .tile-more-arrow{transform:translateX(4px)}
.fleet-plate-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr));gap:9px}
.fleet-plate-grid .fleet-entry,.fleet-plate-grid .fleet-front,.fleet-plate-grid .fleet-plate-card{min-height:110px}
.fleet-plate-grid .fleet-plate-card{padding:9px 5px}
.fleet-plate-grid .fleet-number{font-size:clamp(13px,10cqw,25px)}
.fleet-plate-grid .fleet-entry{--swipe-action-width:100%}
.fleet-plate-grid .fleet-row-actions{width:100%}
.fleet-plate-grid .fleet-row-actions>button{font-size:clamp(10px,3vw,14px)}
.fleet-plate-grid .fleet-entry:hover{border-color:color-mix(in srgb,var(--blue) 30%,var(--line))}
.history-entry{--swipe-action-width:min(196px,58vw)}
.history-row-actions{width:var(--swipe-action-width)}
.history-entry.swiped .history-front{transform:translateX(calc(0px - var(--swipe-action-width)))}
.fleet-entry.swiped .fleet-front{transform:translateX(calc(0px - var(--swipe-action-width)))}
.history-row-actions>button,.fleet-row-actions>button{font-size:calc(12px * var(--font-scale,1))}
.bottom-nav{height:calc(69px + env(safe-area-inset-bottom));max-width:1550px;padding:5px 4px calc(5px + env(safe-area-inset-bottom));gap:2px;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -6px 25px #0d213317}
.bottom-nav button{flex:1;min-width:0;border-radius:11px;padding:6px 1px;font-size:calc(11px * var(--font-scale,1));gap:2px}
.bottom-nav [data-icon]{width:23px;height:23px}
.bottom-nav [data-icon] .ui-icon{width:21px;height:21px}
.bottom-nav button.active{background:color-mix(in srgb,var(--blue) 9%,transparent);color:var(--blue)}
.bottom-nav .nav-add [data-icon]{width:42px;height:42px;margin-top:-18px;background:linear-gradient(145deg,#ed4a43,#aa1d28);box-shadow:0 6px 18px #b9242c37}
.bottom-nav .nav-add [data-icon] .ui-icon{width:23px;height:23px}
.web-page-enter{animation:rz-page-enter .42s cubic-bezier(.2,.75,.2,1) both}
@keyframes rz-page-enter{from{opacity:0;transform:translateY(9px);filter:blur(2px)}to{opacity:1;transform:none;filter:blur(0)}}
.card,.fleet-entry,.history-entry{transition:border-color .24s,box-shadow .28s,transform .26s}
.card:hover{transform:translateY(-1px)}
.rz-scrolled .topbar{box-shadow:0 9px 25px #0b213329}

/* browser-only controls and layered loader */
.web-network{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line);padding:7px 9px;border-radius:99px;color:var(--muted);font-size:11px}
.web-network i{width:7px;height:7px;border-radius:50%;background:#1b9267;box-shadow:0 0 0 3px #1b926722}
.offline .web-network i{background:#db783c;box-shadow:0 0 0 3px #db783c22}
.web-install{font-size:12px;min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink)}
.web-install[hidden]{display:none!important}
#rz-to-top{position:fixed;z-index:29;right:max(14px,calc((100vw - 1530px)/2));bottom:calc(84px + env(safe-area-inset-bottom));width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--blue);box-shadow:var(--shadow);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .24s,visibility .24s,transform .24s}
#rz-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
#rz-to-top svg{width:20px;height:20px}
#rz-loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 39%,#344b5e,#121f2a 58%,#07111b);color:white;transition:opacity .5s ease,visibility .5s ease}
#rz-loader[hidden]{display:none!important}
#rz-loader.is-gone{opacity:0;visibility:hidden;pointer-events:none}
#rz-loader::before{content:"";position:absolute;inset:-35%;background:conic-gradient(transparent,#e541402d,transparent,#ffffff13,transparent);animation:rz-loader-halo 12s linear infinite}
@keyframes rz-loader-halo{to{transform:rotate(360deg)}}
.rz-loader-inner{position:relative;display:flex;flex-direction:column;gap:11px;align-items:center;text-align:center;max-width:92vw}
.rz-loader-emblem{width:146px;height:146px;position:relative;display:grid;place-items:center;perspective:640px}
.rz-loader-ring{position:absolute;inset:6px;border-radius:50%;border:2px solid #b4c5d64f;box-shadow:inset 0 0 25px #0007,0 0 30px #e5484836}
.rz-loader-ring.first{border-top:3px solid #f14c46;border-left-color:#ffffff9a;animation:rz-spin 2.1s ease-in-out infinite}
.rz-loader-ring.second{inset:20px;border-bottom:3px solid #e6453c;border-right-color:#ffffffaa;animation:rz-spin-reverse 3.4s linear infinite}
@keyframes rz-spin{to{transform:rotate(360deg)}}@keyframes rz-spin-reverse{to{transform:rotate(-360deg)}}
.rz-loader-core{width:66px;height:66px;border-radius:23px;background:linear-gradient(145deg,#fff,#97abbc 58%,#eef3f8);box-shadow:0 16px 30px #0009,inset 0 2px 3px #fff;display:grid;place-items:center;animation:rz-core 3s ease-in-out infinite}
.rz-loader-core svg{width:42px;height:42px;color:#233744}
@keyframes rz-core{0%,100%{transform:translateY(0) rotateY(-8deg)}50%{transform:translateY(-5px) rotateY(8deg)}}
.rz-loader-title{font-size:25px;font-weight:900;letter-spacing:6px;text-indent:6px}
.rz-loader-sub{font-size:11px;letter-spacing:2.8px;color:#bdcdd8}
.rz-loader-bar{width:155px;height:3px;border-radius:99px;background:#ffffff26;margin-top:13px;overflow:hidden}
.rz-loader-bar span{display:block;width:45%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9b1725,#ff6b56);animation:rz-progress 1.3s ease-in-out infinite}
@keyframes rz-progress{0%{transform:translateX(-101%)}100%{transform:translateX(325%)}}
.rz-loader-hint{font-size:12px;color:#b2c5d2;max-width:320px}
.rz-loader-hint.error{color:#ffb5a8}
#rz-install-banner{position:fixed;bottom:calc(78px + env(safe-area-inset-bottom));left:50%;z-index:90;transform:translateX(-50%) translateY(16px);width:min(92vw,480px);border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 15px 45px #0b1a2f57;padding:12px;display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#rz-install-banner.is-visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
#rz-install-banner strong{display:block;font-size:14px}
#rz-install-banner small{display:block;font-size:12px;color:var(--muted)}
#rz-install-banner .btn{font-size:12px;min-height:36px;padding:8px;flex:none}
#rz-install-dismiss{border:0;background:transparent;color:var(--muted);font-size:22px;padding:3px 5px}
@media(min-width:700px){
 .page{padding:23px 22px 35px}
 .history-filter,.fleet-filter{grid-template-columns:repeat(3,minmax(0,1fr))}
 .history-filter .history-sort{grid-column:auto}
 .fleet-plate-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}
 .fleet-plate-grid .fleet-entry,.fleet-plate-grid .fleet-front,.fleet-plate-grid .fleet-plate-card{min-height:124px}
 .categories-bus{max-width:850px}
 .categories-bus .tile-hero{height:225px}
}
@media(min-width:1020px){
 #app{padding-bottom:25px}
 .topbar{height:74px;min-height:74px;padding:10px 27px}
 .brand{font-size:26px}
 .brand img{width:46px;height:46px}
 #view{margin-left:218px;min-height:calc(100dvh - 74px)}
 .bottom-nav{position:sticky;top:90px;left:0;bottom:auto;transform:none;float:left;width:196px;height:auto;margin:19px 0 0 13px;padding:10px 9px;display:flex;flex-direction:column;align-items:stretch;gap:5px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);background:var(--surface);backdrop-filter:none}
 .bottom-nav button{display:flex;align-items:center;flex-direction:row;justify-content:flex-start;gap:10px;width:100%;height:45px;min-height:45px;flex:none;text-align:left;padding:9px 12px;border-radius:11px;font-size:calc(14px * var(--font-scale,1));font-weight:650}
 .bottom-nav [data-icon]{width:23px;height:23px;flex:none}
 .bottom-nav .nav-add [data-icon]{width:27px;height:27px;margin:0;border-radius:9px;box-shadow:none}
 .bottom-nav .nav-add [data-icon] .ui-icon{width:19px;height:19px}
 .bottom-nav .nav-add{background:color-mix(in srgb,var(--blue) 9%,var(--surface))}
 #rz-to-top{bottom:26px}
 #rz-install-banner{bottom:25px}
 .page{padding:25px 29px 44px;max-width:1150px}
 .categories-bus{max-width:100%}
 .categories-bus .tile-hero{height:230px}
}
@media(max-width:390px){
 .topbar{padding-inline:10px;gap:6px}
 .brand{font-size:calc(20px * var(--font-scale,1));gap:7px}
 .brand img{width:37px;height:37px}
 .brand small{font-size:calc(9px * var(--font-scale,1));letter-spacing:1.1px}
 .web-network{padding:6px 7px;font-size:10px}
 .web-install{padding:6px;font-size:11px}
 .page{padding-inline:10px}
 .history-select-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:340px){.web-network{display:none}.fleet-plate-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,145px),1fr))}.history-select-actions{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

#rz-loader.is-error .rz-loader-bar{visibility:hidden}
#rz-loader.is-error .rz-loader-ring,#rz-loader.is-error .rz-loader-core{animation-play-state:paused}
.rz-retry{background:#f2f6fa;color:#182631;border:1px solid #ffffff80;border-radius:11px;padding:10px 18px;font-size:14px;font-weight:700;margin-top:11px;min-height:42px}