:root{
 --navy:#102a68; --navy2:#071b4b; --teal:#078f89; --teal2:#12aaa2; --orange:#ff6b18;
 --ink:#14213d; --muted:#667085; --bg:#f5f8fb; --card:#fff; --line:#dbe4ee;
 --green:#138a5b; --red:#d92d20; --shadow:0 10px 28px rgba(16,42,104,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{min-height:100vh}
a{text-decoration:none;color:inherit}
.app{max-width:520px;margin:0 auto;min-height:100vh;background:#f8fafc;box-shadow:0 0 30px rgba(0,0,0,.08)}
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;color:var(--navy);letter-spacing:-.4px}
.brand img{width:38px;height:38px;object-fit:contain;border-radius:10px}
.brand span{font-size:19px}.brand b{color:var(--teal)}
.top-actions{display:flex;gap:8px}.iconbtn{border:1px solid var(--line);background:#fff;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px}
.content{padding:16px 16px 94px}
.hero{background:linear-gradient(135deg,var(--navy),#1d3e88);color:#fff;border-radius:22px;padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;top:-80px;background:rgba(18,170,162,.22)}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:800;opacity:.82}
h1{font-size:27px;line-height:1.1;margin:7px 0 10px;letter-spacing:-.8px}
h2{font-size:20px;margin:22px 0 12px;color:var(--navy)}
h3{font-size:16px;margin:0 0 8px}
p{line-height:1.5}.muted{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:0 4px 14px rgba(16,42,104,.05);margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;min-height:112px}
.tile .ico{font-size:25px;margin-bottom:8px}.tile b{display:block;font-size:13px}.tile small{display:block;color:var(--muted);margin-top:5px;line-height:1.35}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:13px;padding:13px 16px;font-weight:800;font-size:14px;cursor:pointer;min-height:46px}
.btn-primary{background:var(--teal);color:#fff}.btn-navy{background:var(--navy);color:#fff}.btn-outline{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn-orange{background:var(--orange);color:#fff}.btn-danger{background:var(--red);color:#fff}
.btn.full{width:100%}.btnrow{display:flex;gap:9px;margin-top:13px}.btnrow>*{flex:1}
.field{margin:11px 0}.field label{display:block;font-size:12px;font-weight:800;color:#344054;margin-bottom:6px}
input,select,textarea{width:100%;border:1px solid #cfd9e6;border-radius:12px;padding:13px;background:#fff;font:inherit;color:var(--ink);outline:none}
input:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,170,162,.12)}
.step{display:flex;gap:12px;align-items:flex-start;margin:13px 0}.stepno{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900;flex:none}
.step.done .stepno{background:var(--green)}.step h3{margin:1px 0 3px}.step p{margin:0;font-size:12px;color:var(--muted)}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#eaf8f5;color:var(--teal)}
.badge.orange{background:#fff1e9;color:#d9570d}.badge.red{background:#feeceb;color:var(--red)}.badge.blue{background:#edf2ff;color:var(--navy)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.divider{height:1px;background:var(--line);margin:14px 0}
.price{font-size:24px;font-weight:900;color:var(--navy)}
.kpi{font-size:23px;font-weight:900;color:var(--navy)}.kpi.teal{color:var(--teal)}
.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left}.table th{color:var(--muted);font-weight:700}
.map{height:180px;border-radius:16px;background:
linear-gradient(20deg,transparent 45%,#d7e5df 46% 48%,transparent 49%),
linear-gradient(100deg,transparent 30%,#e6eef7 31% 33%,transparent 34%),
linear-gradient(160deg,transparent 65%,#dcebe5 66% 69%,transparent 70%),
#eef3f7;position:relative;overflow:hidden;border:1px solid var(--line)}
.map:before{content:"";position:absolute;left:18%;top:62%;width:58%;height:4px;background:var(--teal);transform:rotate(-24deg);border-radius:5px;box-shadow:0 0 0 3px rgba(7,143,137,.08)}
.pin{position:absolute;font-size:26px}.pin.start{left:12%;top:52%}.pin.end{right:14%;top:17%}
.vehicle{font-size:58px;text-align:center;padding:10px}
.bottomnav{position:fixed;bottom:0;z-index:30;width:min(520px,100%);background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:7px 4px calc(7px + env(safe-area-inset-bottom))}
.bottomnav a{font-size:10px;color:#667085;text-align:center;padding:6px 2px;border-radius:12px}.bottomnav a.active{color:var(--teal);background:#edf9f7;font-weight:900}.bottomnav .nicon{font-size:17px;display:block;margin-bottom:2px}
.logo-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;background:linear-gradient(160deg,#fff,#eff8f7)}
.logo-screen img{width:210px;height:210px;object-fit:contain}.logo-screen h1{font-size:34px;color:var(--navy);margin:4px 0}.logo-screen h1 span{color:var(--teal)}
.quote{font-size:15px;color:var(--muted);max-width:330px}.onboard-art{font-size:100px;text-align:center;padding:18px 0}
.progress{height:5px;background:#e8eef4;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--teal);border-radius:99px}
.checklist{display:grid;gap:8px}.check{display:flex;gap:9px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;font-size:13px}.check.on{border-color:#8ad9d4;background:#f0fbfa}.check input{width:auto}
.timeline{border-left:2px solid #cfe7e4;margin:4px 0 0 10px;padding-left:18px}.timeline .event{position:relative;margin:14px 0}.timeline .event:before{content:"";position:absolute;left:-26px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--teal)}
.alert{padding:12px;border-radius:13px;background:#fff7ed;border:1px solid #fed7aa;font-size:12px}.success{padding:12px;border-radius:13px;background:#effaf5;border:1px solid #b8e7d2;font-size:12px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.section-title h2{margin:0}
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:#fff;border:1px solid var(--line);padding:14px;border-radius:15px}
.portal{max-width:1180px;margin:0 auto;padding:20px}.portal .content{padding-bottom:30px}.portalgrid{display:grid;grid-template-columns:240px 1fr;gap:18px}.sidebar{background:var(--navy);color:#fff;border-radius:18px;padding:15px;height:max-content}.sidebar a{display:block;padding:10px;border-radius:10px;font-size:13px}.sidebar a.active,.sidebar a:hover{background:rgba(255,255,255,.12)}.portal .app{max-width:none;box-shadow:none}
.footer-note{text-align:center;font-size:11px;color:#8b97a8;margin-top:18px}
@media(min-width:700px){.app{margin:20px auto;border-radius:26px;overflow:hidden}.bottomnav{position:static;width:auto;margin-top:-75px;display:none}.portalgrid{grid-template-columns:230px 1fr}}