*{box-sizing:border-box}
:root{
  --bg:#090b0e; --card:#11151a; --line:#1c2229; 
  --text:#f4f6f8; --muted:#747e89; --green:#43df91; 
  --red:#ff4d5e;
}
body{ margin:0; background:var(--bg); 
  color:var(--text); 
  font-family:-apple-system,BlinkMacSystemFont,"Segoe 
  UI",Roboto,sans-serif;
}
.app{ max-width:500px; min-height:100vh; margin:auto; 
  padding:28px 20px 110px;
}
header{ display:flex; justify-content:space-between; 
  align-items:center; margin-bottom:32px;
}
.logo{ font-size:25px; font-weight:750; 
  letter-spacing:-1px;
}
.jgs{ margin-top:2px; color:var(--muted); 
  font-size:10px; letter-spacing:4px;
}
.online{ display:flex; align-items:center; gap:7px; 
  color:#8d96a0; font-size:11px;
}
.online span{ width:8px; height:8px; border-radius:50%; 
  background:var(--green); box-shadow:0 0 12px 
  var(--green);
}
.page{display:none} .page.active{display:block} 
.vehicle{
  text-align:center; margin:25px 0 30px;
}
.car{ font-size:65px; margin-bottom:8px;
}
.vehicle h1{ margin:0; font-size:22px;
}
.vehicle p{ margin:6px; color:var(--muted); 
  font-size:13px;
}
.status{ display:inline-block; margin-top:12px; 
  padding:9px 19px; background:#11171a; 
  border-radius:30px; font-size:13px; font-weight:700; 
  letter-spacing:1px;
}
.grid{ display:grid; grid-template-columns:1fr 1fr; 
  gap:12px;
}
.card{ padding:18px; 
  background:linear-gradient(145deg,#12171c,#0e1115); 
  border:1px solid var(--line); border-radius:19px; 
  min-height:105px;
}
.wide{ grid-column:1/3;
}
.card label{ display:block; color:var(--muted); 
  font-size:10px; letter-spacing:1.5px;
}
.card strong{ display:block; margin-top:14px; 
  font-size:18px;
}
.row{ display:flex; justify-content:space-between; 
  gap:15px; padding-top:15px; font-size:13px; 
  color:#aab2bb;
}
.green{color:var(--green)!important} 
.red{color:var(--red)!important} h2{
  margin:15px 0 25px; font-size:26px;
}
h3{ margin-top:30px; color:var(--muted); 
  font-size:11px; letter-spacing:2px;
}
.mapbox{ height:430px; border:1px solid var(--line); 
  border-radius:22px; background:
    radial-gradient(circle at center,#172028,#0d1115 
    65%);
  display:flex; flex-direction:column; 
  justify-content:center; align-items:center; 
  text-align:center;
}
.pin{font-size:50px} .mapbox p{ color:var(--muted); 
  font-size:13px;
}
.event{ display:flex; gap:15px; padding:17px 5px; 
  border-bottom:1px solid var(--line); font-size:14px;
}
.event small{ display:block; color:var(--muted); 
  margin-top:5px;
}
button{ width:100%; padding:15px; margin:6px 0; 
  border:1px solid var(--line); border-radius:15px; 
  background:#12171c; color:var(--text); 
  font-size:14px;
}
button:active{ transform:scale(.98);
}
button.danger{ border-color:#54232a; 
  background:#261216; color:#ff6977;
}
nav{ position:fixed; bottom:0; left:0; right:0; 
  display:flex; justify-content:center; 
  background:rgba(9,11,14,.95); 
  backdrop-filter:blur(18px); border-top:1px solid 
  var(--line); 
  padding-bottom:env(safe-area-inset-bottom);
}
nav button{ width:25%; max-width:125px; margin:0; 
  padding:11px 2px; border:0; border-radius:0; 
  background:none; color:#606a74; font-size:10px;
}
nav button span{ display:block; margin-bottom:3px; 
  font-size:21px;
}
nav button.active{ color:white;
}
.car img{
width:125px;
height:auto;
object-fit:contain;
}
.car img{
width:125px;
height:auto;
object-fit:contain;
}

/* ===== CARGUARD CLEAN EVENTS ===== */

.recent-section {
  margin-top: 28px;
  padding-bottom: 85px;
}

.recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.recent-header > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.recent-header button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 8px 0;
}

.home-events {
  border-top: 1px solid var(--line);
}

.home-event,
.event {
  display: flex;
  align-items: center;
  min-height: 58px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.event-dot {
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px rgba(67,223,145,.35);
}

.event-dot.alert {
  background: var(--red);
  box-shadow: 0 0 7px rgba(255,77,94,.4);
}

.event-text {
  flex: 1;
  min-width: 0;
}

.event-text strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.event-text small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.event-time {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .5px;
}

nav button {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

nav button.active {
  color: var(--text);
}

.danger {
  color: var(--red) !important;
}