:root{
  --navy:#061524;--navy2:#0b2c49;--navy3:#124b76;--white:#fff;--ink:#10253c;
  --muted:#718397;--blue:#1495ff;--blue2:#63c1ff;--green:#28c66f;--line:#dce7f0;
  --soft:#f2f6f9;--warn:#f1a52a;--danger:#df4e58;--shadow:0 10px 28px #001c3212;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#061421;color:#fff}body{overscroll-behavior:none}.app-shell{max-width:560px;margin:auto;min-height:100vh;background:linear-gradient(180deg,#061524 0 312px,#edf3f8 620px,#edf3f8 100%);padding-bottom:90px}.topbar{min-height:112px;padding:24px 18px 12px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:9px;letter-spacing:2px;opacity:.55;margin-bottom:4px}.brand{font-size:30px;font-weight:900;letter-spacing:-1.5px}.brand strong{color:var(--blue2)}.brand em{font-style:normal;font-weight:860}.subtitle{font-size:12px;opacity:.74;margin-top:2px}.top-actions{display:flex;gap:8px}.icon-btn{width:42px;height:42px;border:0;border-radius:15px;background:#143954;color:#fff;font-size:22px;box-shadow:inset 0 0 0 1px #ffffff10,0 8px 18px #00111f35}.view{padding:3px 14px 26px}.hero{border-radius:28px;overflow:hidden;box-shadow:0 18px 42px #00101f60;background:#102e48;position:relative;border:1px solid #ffffff10}.hero-img{height:225px;background-image:linear-gradient(180deg,rgba(3,18,31,.02) 34%,rgba(5,24,39,.18) 58%,rgba(5,24,39,.92) 100%),url('peugeot-308-sw.png');background-size:cover;background-position:center 47%;position:relative}.hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 72% 12%,#53b8ff30,transparent 34%);pointer-events:none}.hero-title{position:absolute;left:18px;top:16px;text-shadow:0 2px 12px #0009}.hero-title strong{display:block;font-size:25px;letter-spacing:-.5px}.hero-title small{font-size:12px;opacity:.9}.source-badge{position:absolute;right:14px;top:15px;padding:7px 10px;border-radius:999px;background:#ffffffea;color:#14314a;font-weight:900;font-size:9px;letter-spacing:.4px;box-shadow:0 5px 14px #0002}.hero-status{padding:14px 17px 15px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#0d3150,#15577f)}.status-left{display:flex;align-items:center;gap:10px}.dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #28c66f20}.dot.off{background:#92a6b7;box-shadow:none}.dot.bt{background:#249cff;box-shadow:0 0 0 5px #249cff20}.status-copy strong{font-size:14px}.status-copy small{display:block;opacity:.7;font-size:10px;margin-top:2px}.chev{opacity:.72;font-size:22px}.quick-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}.quick-chip{background:#ffffff12;border:1px solid #ffffff15;border-radius:14px;padding:9px 10px;color:#fff;font-size:10px;backdrop-filter:blur(10px)}.quick-chip strong{display:block;font-size:12px;margin-top:2px}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.metric{background:#fff;color:var(--ink);border-radius:20px;padding:14px 15px;min-height:86px;box-shadow:var(--shadow);border:1px solid #e8eff5}.metric .label{font-size:11px;color:var(--muted)}.metric .value{font-size:23px;font-weight:900;margin-top:4px;letter-spacing:-.5px}.metric .unit{font-size:12px;font-weight:700;color:#5e7287}.section-title{color:#142b42;font-weight:900;font-size:18px;margin:22px 3px 10px}.card{background:#fff;color:var(--ink);border-radius:20px;padding:16px;box-shadow:var(--shadow);margin-bottom:11px;border:1px solid #e6edf3}.last-trip{background:linear-gradient(145deg,#0b3453,#18587f);color:#fff;border:0}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.route{font-weight:850;font-size:16px}.meta{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.42}.last-trip .meta{color:#c8d9e6}.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e9f5ff;color:#087cd7;font-size:10px;font-weight:850;border:0}.pill.business{background:#138ff3;color:#fff}.pill.muted{background:#edf2f6;color:#6d8091}.pill.good{background:#e5f8ed;color:#168a49}.tabs{display:flex;background:#dfe9f1;border-radius:14px;padding:4px;margin-bottom:14px}.tabs button{flex:1;border:0;border-radius:11px;padding:8px;background:transparent;color:#607086;font-weight:760}.tabs button.active{background:#fff;color:#087cd9;box-shadow:0 2px 8px #001a2c18}.trip-card{display:grid;grid-template-columns:58px 1fr auto;gap:11px;align-items:center}.route-mini{width:58px;height:58px;border-radius:14px;background:linear-gradient(145deg,#e2f4ff,#d8eadf);position:relative;overflow:hidden}.route-mini:before{content:"";position:absolute;width:39px;height:4px;background:#188cea;left:10px;top:28px;transform:rotate(-32deg);border-radius:4px}.route-mini:after{content:"●  ●";position:absolute;color:#1490ec;left:7px;top:16px;letter-spacing:18px}.big-number{font-size:30px;font-weight:900}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{text-align:center;padding:12px 6px;background:#f4f8fb;border-radius:13px}.stat strong{display:block;font-size:17px}.stat small{font-size:10px;color:var(--muted)}.fuel-level{height:12px;background:#e6eef5;border-radius:10px;overflow:hidden}.fuel-level span{display:block;width:65%;height:100%;background:linear-gradient(90deg,#1aaa5b,#8ad94d)}.list-row{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:0}.round-icon{width:44px;height:44px;border-radius:15px;background:#e9f5ff;color:#087fdc;display:grid;place-items:center;font-size:20px;flex:0 0 auto}.grow{flex:1}.status-ok{font-weight:900;color:var(--green);font-size:11px}.status-warn{font-weight:900;color:var(--warn);font-size:11px}.status-bad{font-weight:900;color:var(--danger);font-size:11px}.chart{height:170px;display:flex;align-items:flex-end;gap:12px;padding:20px 5px 5px;border-bottom:1px solid var(--line)}.bar{flex:1;background:linear-gradient(#55b8ff,#158eea);border-radius:7px 7px 2px 2px;min-height:20px}.bar:nth-child(1){height:55%}.bar:nth-child(2){height:79%}.bar:nth-child(3){height:46%}.bar:nth-child(4){height:67%}.bar:nth-child(5){height:82%}.bar:nth-child(6){height:61%}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.menu-card{border:0;text-align:left;cursor:pointer;min-height:136px}.bottom-nav{position:fixed;z-index:50;bottom:0;left:50%;transform:translateX(-50%);width:min(560px,100%);height:78px;padding:7px 8px max(7px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid #d7e2ea;box-shadow:0 -6px 20px #00142318}.bottom-nav button{border:0;background:transparent;color:#77879a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:650}.bottom-nav button span{font-size:21px}.bottom-nav button small{font-size:10px}.bottom-nav button.active{color:#0b86e8}.btn-primary,.btn-secondary{width:100%;border:0;border-radius:14px;font-weight:900;padding:13px 16px;font-size:14px;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#128ff1,#0c7ed8);color:#fff;box-shadow:0 8px 20px #0b8ae72a}.btn-secondary{background:#edf4fa;color:#0f5f9e}.notice{background:#fff4d8;color:#805900;border:1px solid #f2d489;border-radius:14px;padding:11px 13px;font-size:12px;margin-bottom:12px}.info{background:#eaf5ff;color:#174e75;border:1px solid #cce6fa;border-radius:14px;padding:11px 13px;font-size:12px;margin-bottom:12px}.screen-title{font-size:29px;font-weight:920;color:#12283f;margin:2px 2px 15px;letter-spacing:-.8px}.setting{font-size:14px;cursor:pointer}.footer-note{color:#7a8b9c;font-size:11px;text-align:center;padding:10px 0 2px}.map-card{height:102px;border-radius:19px;position:relative;overflow:hidden;background:linear-gradient(90deg,#e5f2ed 1px,transparent 1px),linear-gradient(#dceaf6 1px,transparent 1px),#eef5f8;background-size:28px 28px,28px 28px;box-shadow:var(--shadow)}.map-road{position:absolute;left:-15px;top:45px;width:130%;height:10px;background:#fff;border:1px solid #d7e3e9;transform:rotate(-8deg);border-radius:10px}.map-pin{position:absolute;right:23%;top:29%;width:21px;height:21px;border-radius:50% 50% 50% 0;background:#198df0;transform:rotate(-45deg);box-shadow:0 4px 10px #0b62a866}.map-pin:after{content:"";position:absolute;width:7px;height:7px;background:#fff;border-radius:50%;left:7px;top:7px}.map-label{position:absolute;left:14px;bottom:10px;background:#ffffffee;color:#15314a;border-radius:10px;padding:7px 10px;font-weight:850;font-size:12px}.connection-card{background:linear-gradient(145deg,#0a2945,#134f78);color:#fff;border:0}.connection-card .meta{color:#c5d8e7}.step{display:flex;gap:10px;align-items:flex-start;margin:12px 0}.step-no{width:27px;height:27px;border-radius:50%;background:#108df1;color:#fff;display:grid;place-items:center;font-weight:850;flex:0 0 auto}.sep{height:1px;background:var(--line);margin:12px 0}.tiny{font-size:10px;color:#7b8d9d;line-height:1.45}.sync-spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.bt-hero{background:linear-gradient(145deg,#071d31,#0c446d);color:#fff;border:0}.bt-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.bt-orb{width:58px;height:58px;border-radius:20px;background:linear-gradient(145deg,#188ef0,#65c7ff);display:grid;place-items:center;font-size:30px;box-shadow:0 10px 26px #078ee653}.bt-device{background:#f5f9fc;border:1px solid #e3edf4;border-radius:15px;padding:12px;margin-top:9px}.bt-device strong{display:block}.native-tag{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;background:#dff3ff;color:#0e6cae;margin-left:5px}.data-source{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.data-source .signal{height:7px;width:76px;background:#e6eef3;border-radius:999px;overflow:hidden}.data-source .signal span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1495ff,#66c5ff)}
@media (min-width:700px){body{padding:30px 0}.app-shell{border-radius:34px;overflow:hidden;box-shadow:0 22px 70px #0007;min-height:920px}.bottom-nav{bottom:30px;border-radius:0 0 34px 34px}.hero-img{height:240px}}