*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100%;font-family:Segoe UI,Arial,sans-serif;color:#231f20;background:#f4f4f4}button,input,textarea{font:inherit}.app{min-height:100vh;max-width:560px;margin:0 auto;background:#f4f4f4}.screen{padding:16px 14px 14px}.banner{background:#fce8e9;border-left:3px solid #e3272d;color:#6f0f12;border-radius:6px;padding:11px 13px;font-size:13px;line-height:1.45;margin-bottom:12px}.card{background:#fff;border:1px solid #d9d9d9;border-radius:8px;margin-bottom:12px;padding:14px;box-shadow:0 1px 2px #231f200d}.card--accent{border-left:3px solid #e3272d}.wa-plate{overflow:hidden;width:min(100%,278px);aspect-ratio:4.55 / 1.62;margin-bottom:12px;border:2px solid #1b1b1b;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #0045bd,0 1px 3px #231f201f}.wa-plate__top{position:relative;display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;height:28%;background:#004bd3;color:#fff;text-align:center;font-family:Segoe UI,Arial,sans-serif;font-size:clamp(7px,1.9vw,12px);font-weight:800;letter-spacing:.22em;text-shadow:0 1px 0 rgba(0,0,0,.18)}.wa-plate__top:before,.wa-plate__top:after{content:"";position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #0028782e}.wa-plate__top:before{left:9px}.wa-plate__top:after{right:9px}.wa-plate__crest{justify-self:center;z-index:1;width:27px;height:27px;margin-top:14px;border:3px solid #fff;border-bottom-color:#f47b20;border-radius:50%;background:linear-gradient(#fff 0,#fff 48%,#f47b20 48%,#f47b20);box-shadow:0 0 0 2px #ffffffe0}.wa-plate__rego{display:flex;align-items:center;justify-content:center;height:72%;padding:1px 10px 4px;color:#0040af;font-family:Impact,Arial Black,Segoe UI Black,sans-serif;font-size:clamp(34px,11.5vw,58px);font-weight:900;line-height:.9;letter-spacing:.045em;white-space:nowrap;transform:scaleX(.86);text-shadow:-1px -1px 0 #eaf1ff,1px -1px 0 #eaf1ff,-1px 1px 0 #eaf1ff,1px 1px 0 #eaf1ff,0 2px 0 rgba(0,32,120,.28)}.section-title{font-size:11.5px;font-weight:700;color:#6b6b6b;text-transform:uppercase;letter-spacing:.8px;margin:16px 0 8px}.vehicle-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.vehicle-title__name{font-size:18px;font-weight:700;margin-top:2px}.status{border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;white-space:nowrap}.status--OK{background:#e8f5e9;color:#2e7d32}.status--ServiceDue{background:#fff3e0;color:#e65100}.status--Overdue{background:#fce8e9;color:#e3272d}.status--Unknown{background:#e9e9e9;color:#6b6b6b}.row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #e9e9e9;font-size:13px}.row:last-child{border-bottom:0}.row__key{color:#6b6b6b;flex-shrink:0}.row__value{color:#231f20;font-weight:600;text-align:right;min-width:0;word-break:break-word}.odo-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{background:#f4f4f4;border:1px solid #e9e9e9;border-radius:8px;padding:12px}.metric__label{color:#6b6b6b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.metric__value{font-size:18px;font-weight:800;margin-top:6px}.field{margin-bottom:12px}.field label{display:block;font-size:12px;color:#6b6b6b;font-weight:600;margin-bottom:5px}.input,.textarea{width:100%;border:1px solid #d9d9d9;background:#fff;border-radius:8px;min-height:48px;padding:12px;font-size:16px;color:#231f20}.textarea{min-height:92px;resize:vertical}.button{width:100%;min-height:52px;border:none;border-radius:8px;background:#e3272d;color:#fff;font-weight:700;cursor:pointer;padding:0 16px}.button:disabled{background:#c4c4c4;cursor:not-allowed}.button--secondary{background:#fff;color:#c21f24;border:1px solid #f15a5f}.actions{display:grid;gap:10px}.empty,.loading,.error{min-height:60vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;gap:12px;color:#6b6b6b}.spinner{width:32px;height:32px;border:3px solid #e9e9e9;border-top-color:#e3272d;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
