:root{--navy:#08233b;--navy2:#0d3556;--yellow:#ffd21c;--green:#0ca65a;--red:#ef2b2d;--blue:#2678ee;--bg:#f4f7fb;--line:#dce5ee;--text:#10243a}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial;color:var(--text)}button,input,textarea{font:inherit}.hidden{display:none!important}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,#061b2e,#0c3a5e)}.login-card{width:min(430px,100%);background:white;border-radius:22px;padding:30px}.brand{font-weight:900;font-size:31px;letter-spacing:.4px}.brand b{color:var(--yellow)}.subtitle{color:#758698;margin-bottom:25px}.login form{display:grid;gap:12px}.login input,textarea{padding:14px;border:1px solid var(--line);border-radius:11px}.login button,.mainbtn{padding:15px;border:0;border-radius:12px;background:var(--yellow);font-weight:850}.msg{color:var(--red);min-height:22px;margin-top:9px}
#app{min-height:100vh;padding-bottom:78px}header{background:linear-gradient(140deg,var(--navy),var(--navy2));color:white;padding:22px 18px 24px;display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:0;z-index:20}header .brand{font-size:27px}.driver{text-align:right;display:grid;gap:4px}.driver small{color:#bcd0df}main{padding:16px;max-width:720px;margin:auto}.hero{background:linear-gradient(150deg,#0b2943,#0d385b);color:white;border-radius:20px;padding:21px;margin-bottom:14px}.hero h1{margin:3px 0 6px;font-size:29px}.hero p{margin:0;color:#c4d6e3}.card{background:white;border:1px solid var(--line);border-radius:16px;padding:17px;margin-bottom:13px;box-shadow:0 4px 18px #08233b0a}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.status{display:inline-flex;align-items:center;gap:7px;font-weight:800}.dot{width:10px;height:10px;border-radius:50%;background:var(--green)}.yellow{background:var(--yellow)}.red{background:var(--red)}.muted{color:#718294}.bigstat{font-size:25px;font-weight:850}.mainbtn{width:100%;font-size:19px;display:flex;justify-content:center;gap:9px;align-items:center;margin:10px 0}.mainbtn.blue{background:var(--blue);color:white}.mainbtn.red{background:var(--red);color:white}.mainbtn.gray{background:#eaf0f5}.outline{width:100%;padding:14px;border:1px solid #aebdca;background:white;border-radius:12px;font-weight:750}.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.mini{text-align:center}.mini b{display:block;font-size:21px;margin-top:5px}
nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:white;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);z-index:30;padding-bottom:env(safe-area-inset-bottom)}nav button{border:0;background:white;color:#6f8192;font-size:22px;display:grid;place-items:center;gap:2px}nav button span{font-size:12px}nav button.active{color:#d9a900}.sosnav{color:var(--red)!important}.alert{background:#fff0f0;border:1px solid #ffcaca;color:#9d0e17;border-radius:14px;padding:14px}.offline{background:#fff7df;border:1px solid #ffdc72;color:#6a5100;border-radius:12px;padding:10px;margin-bottom:12px}.ok{color:var(--green)}.bad{color:var(--red)}.trip{display:grid;grid-template-columns:74px 1fr auto;gap:10px;padding:12px 0;border-bottom:1px solid #e8eef3}.trip:last-child{border:0}.sosbox{background:#e51f27;color:white;border-radius:18px;padding:20px;text-align:center}.sosbox h2{font-size:27px;margin:5px}.sosbtn{width:100%;height:110px;border:0;border-radius:22px;background:var(--red);color:white;font-size:28px;font-weight:900;margin:16px 0}.sync{font-size:12px;padding:4px 8px;border-radius:10px;background:#eaf1f7}
@media(min-width:700px){main{padding:22px}.hero{padding:28px}.grid{grid-template-columns:repeat(3,1fr)}}