:root { --st: env(safe-area-inset-top); --sb: env(safe-area-inset-bottom); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Arial, sans-serif; overflow: hidden; }
#map { position: absolute; inset: 0; z-index: 0; }

.veh-panel {
  position: absolute; top: calc(10px + var(--st)); left: 10px; right: 10px;
  z-index: 1000; max-width: 440px; background: #171c26; color: #f8fafc;
  border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.45); overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.veh-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; cursor: pointer; font-weight: bold; font-size: 15px; user-select: none;
}
.veh-head .chev { color: #a8b0c2; transition: transform .2s; }
.veh-panel.collapsed .veh-list { display: none; }
.veh-panel.collapsed .chev { transform: rotate(-90deg); }
.veh-list { max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid rgba(255,255,255,.08); }
.veh-empty { padding: 12px 14px; color: #a8b0c2; }
.veh-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.veh-item:last-child { border-bottom: none; }
.veh-item:active, .veh-item.sel { background: rgba(37,99,235,.18); }
.veh-item-content { flex: 1; min-width: 0; }
.veh-item .nm { font-weight: bold; font-size: 14px; }
.veh-item .sub { color: #a8b0c2; font-size: 12px; margin-top: 2px; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }

.bg-moving { background: #16a34a; }
.bg-parked { background: #f59e0b; }
.bg-offline { background: #6b7280; }
.bg-disconnected { background: #dc2626; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: bold; color: #fff; vertical-align: middle; }

.detail {
  position: absolute; left: 10px; right: 10px; bottom: calc(70px + var(--sb));
  z-index: 1100; max-width: 460px; margin: 0 auto;
  background: #171c26; color: #f8fafc; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.5); padding: 14px 16px; display: none;
}
.detail.show { display: block; }
.detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.detail-heading { margin-top: 6px; }
.detail-name { font-weight: 800; font-size: 18px; }
.detail-close { border: none; background: rgba(255,255,255,.12); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.detail-rows { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 14px; }
.detail-rows .k { color: #a8b0c2; }
.detail-rows .v { text-align: right; font-weight: 600; word-break: break-word; }

.actions {
  position: absolute; left: 8px; right: 8px; bottom: calc(10px + var(--sb));
  z-index: 1000; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.actions a, .actions button {
  flex: 0 0 auto; background: #2563eb; color: #fff; border: none; border-radius: 12px;
  padding: 12px 16px; font-size: 14px; font-weight: bold; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); white-space: nowrap; cursor: pointer;
}
.actions button { background: #374151; }

.car-icon { width: 44px; height: 44px; position: relative; transform-origin: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.car-arrow { width: 44px; height: 44px; background: #2563eb; clip-path: polygon(50% 0%, 88% 100%, 50% 78%, 12% 100%); opacity: .95; }
.car-emoji { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-size: 19px; line-height: 1; }
.leaflet-control-attribution { font-size: 10px; }