html, body, #map { height:100%; margin:0 }
   :root {
      --card:#fff;
      --muted:#666;
      --shadow:0 6px 24px rgba(0,0,0,.12);
    }
    body { font-size:15px; line-height:1.5; }

    body.panel-open {
      overflow:hidden;
    }

    .panel {
      position:absolute;
      z-index:1000;
      background:var(--card);
      padding:26px;
      border-radius:18px;
      top:14px;
      left:14px;
      width:340px;
      box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.45);
      border:1px solid rgba(255,255,255,.55);
      font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
      box-sizing:border-box;
    }
    .title { margin:0; font-size:21px; font-weight:800; letter-spacing:.3px }
    .subtitle, .nav { margin:0 0 8px 0; font-size:13px; color:#333 }
    .muted { color:var(--muted); }

    .panel label { font-weight:600; display:block; margin-top:10px; font-size:14px; }
    .panel input, .panel select {
      width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:10px;
      box-sizing:border-box; max-width:100%; font-size:15px;
    }
    .dt { max-width:230px; padding-right:36px; }
    /* Native picker indicator no longer used; flatpickr handles UI */
    .flatpickr-calendar,
    html.theme-aliens .flatpickr-calendar {
      position:absolute !important;
      z-index:2000 !important;
      pointer-events:auto;
    }

    .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .row.space { margin-top:8px; }

    /* Use shared brand button styles from /style.css */
    .badge { background:#eee; padding:6px 12px; border-radius:999px; font-size:14px; font-weight:600; }
    .spinner { display:none; width:14px; height:14px; border:2px solid #999; border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite }
    @keyframes spin { to { transform: rotate(360deg) } }

    .error { position:absolute; z-index:1000; top:12px; right:12px; background:#ffecec; color:#b30000; padding:8px 10px; border-radius:10px; box-shadow:var(--shadow); display:none }

    /* Tiny inline toggle */
    .toggle { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
    .toggle input { transform: scale(1.1); }

    /* Custom control container next to zoom (bottom-right) */
    .leaflet-bottom.leaflet-right .tool-stack { margin: 0 10px 10px 0; display:flex; gap:8px; align-items:center; }
    .tool-btn {
      background:#fff; border:1px solid #ccc; padding:6px 10px; border-radius:6px; cursor:pointer;
      box-shadow:0 1px 3px rgba(0,0,0,.1); font-size:12px; font-weight:600;
    }
    .clock { position:absolute; right:12px; top:12px; font-weight:700; color:#333 }
    /* vehicle icon with white circular background */
    .veh-ico { position: relative; }
    .veh-ico { position: relative; background: transparent; border: none; }
    .veh-ico svg { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
    /* pulse halo for latest marker (perfectly centered) */
    .veh-ico .veh-pulse, .pin-ico .pin-pulse {
      position:absolute; left:50%; top:50%; width:34px; height:34px;
      transform: translate(-50%, -50%);
      border-radius:50%; border:2px solid rgba(0,102,204,.35);
      animation: ping 1.6s ease-out infinite; pointer-events:none;
    }
    .veh-ico.latest { }
    .veh-ico .veh-tail { position:absolute; left:50%; bottom:-2px; transform: translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid #fff; pointer-events:none; }
    .pin-ico { position: relative; width: 40px; height: 48px; }
    .pin-ico .pin-bg { position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.25); box-shadow:0 1px 2px rgba(0,0,0,.25); }
    .pin-ico .pin-dot { position:absolute; left:50%; top:50%; width:10px; height:10px; margin-left:-5px; margin-top:-5px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; }
    /* Tail apex sits exactly at container bottom so anchor [20,48] matches coordinate */
    .pin-ico .pin-tail { position:absolute; left:50%; bottom:0; transform: translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid #fff; }
    .pin-ico svg { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
    @keyframes ping { 0%{ transform: translate(-50%,-50%) scale(0.7); opacity:.75 } 80%{ transform: translate(-50%,-50%) scale(1.4); opacity:0 } 100%{ opacity:0 } }
    /* Geofence create overlay */
    .area-bar { position:absolute; z-index:1001; left:50%; top:12px; transform:translateX(-50%); background:#fff; border:1px solid #ddd; box-shadow:var(--shadow); border-radius:10px; padding:8px 10px; display:none; align-items:center; gap:8px; }
    .area-bar .muted { font-size:12px; }
    .area-bar input[type="text"]{ padding:6px 8px; border:1px solid #ddd; border-radius:8px; }
    /* Corner drag handles for geofence resize */
    .corner-handle { width:12px; height:12px; background:#fff; border:2px solid #0066cc; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.25); }
    .corner-handle .inner { width:12px; height:12px; }
    /* Center drag handle for moving */
    .center-handle { width:12px; height:12px; background:#0066cc; border:2px solid #fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25); }
    .center-handle .inner { width:12px; height:12px; }
    /* Geofence label style: subtle & non-blocking */
    .gf-label { pointer-events:none; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.15); padding:2px 6px; border-radius:6px; font-size:12px; }
    .panel-toggle {
      display:none;
      position:fixed;
      z-index:1002;
      bottom:28px;
      left:18px;
      right:auto;
      padding:20px 34px;
      border-radius:999px;
      border:0;
      background:linear-gradient(135deg, #f87171, #e53935);
      box-shadow:0 18px 34px rgba(229,57,53,.45);
      font-weight:800;
      letter-spacing:.4px;
      color:#fff;
      gap:6px;
      align-items:center;
      font-size:15px;
      cursor:pointer;
    }
    .panel-overlay {
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.45);
      z-index:999;
      opacity:0;
      pointer-events:none;
      transition:opacity .3s ease;
    }
    .panel-close {
      display:none;
      border:none;
      background:transparent;
      font-size:14px;
      font-weight:700;
      color:#0f172a;
      margin-left:auto;
      cursor:pointer;
    }
    .panel-head {
      display:flex;
      align-items:flex-start;
      gap:12px;
    }
    .panel-head-text {
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:0;
    }
    .panel-close:focus-visible,
    .panel-toggle:focus-visible {
      outline:3px solid rgba(59,130,246,.65);
      outline-offset:3px;
    }
    .btn {
      font-size:13px;
      padding:14px 18px;
      border-radius:16px;
    }
    .replay-card {
      margin-top:14px;
      padding:12px;
      border-radius:14px;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.96));
      border:1px solid rgba(15,23,42,.08);
      box-shadow:0 10px 24px rgba(15,23,42,.14);
    }
    .replay-head {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      margin-bottom:8px;
    }
    .replay-title { font-weight:800; letter-spacing:.2px; }
    .replay-list { display:flex; flex-direction:column; gap:8px; }
    .replay-trip {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:12px;
      background:#fff;
      border:1px solid rgba(15,23,42,.1);
      font-size:13px;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .replay-trip:hover {
      border-color:rgba(37,99,235,.55);
      box-shadow:0 10px 20px rgba(15,23,42,.16);
      transform:translateY(-1px);
    }
    .replay-trip.active {
      border-color:#2563eb;
      box-shadow:0 12px 24px rgba(37,99,235,.25);
    }
    .replay-trip strong { font-size:13px; }
    .replay-trip .muted { font-size:12px; }
    .replay-empty { padding:6px 8px; font-size:12px; }
    .replay-controls { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
    .replay-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .replay-range { width:100%; }
    .replay-events { display:flex; flex-wrap:wrap; gap:6px; }
    .replay-event {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px 8px;
      border-radius:999px;
      background:#0f172a;
      color:#fff;
      font-size:11px;
      font-weight:700;
      cursor:pointer;
      border:0;
      appearance:none;
      font-family:inherit;
    }
    .replay-toggle {
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:6px;
      font-size:12px;
      font-weight:700;
      color:#2563eb;
      background:transparent;
      border:0;
      padding:0;
      cursor:pointer;
    }
    .replay-toggle:hover { text-decoration: underline; }
    .replay-toggle::before {
      content:'▸';
      font-size:12px;
      transform: translateY(-1px);
    }
    .replay-toggle[aria-expanded="true"]::before { content:'▾'; }
    .replay-event[data-type="overspeed"] { background:#ef4444; }
    .replay-event[data-type="harsh_brake"] { background:#f97316; }
    .replay-event[data-type="harsh_accel"] { background:#22c55e; }
    .replay-event.active { box-shadow:0 0 0 2px rgba(255,255,255,.8) inset, 0 8px 16px rgba(15,23,42,.2); }
    .replay-event:focus-visible { outline:3px solid rgba(59,130,246,.65); outline-offset:2px; }
    .replay-marker {
      position:relative;
      width:28px;
      height:28px;
    }
    .replay-marker .pulse {
      position:absolute;
      left:50%;
      top:50%;
      width:28px;
      height:28px;
      border-radius:50%;
      border:2px solid rgba(37,99,235,.35);
      transform:translate(-50%,-50%);
      animation: ping 1.6s ease-out infinite;
    }
    .replay-marker .core {
      position:absolute;
      left:50%;
      top:50%;
      width:12px;
      height:12px;
      border-radius:50%;
      background:#2563eb;
      border:2px solid #fff;
      box-shadow:0 2px 8px rgba(15,23,42,.3);
      transform:translate(-50%,-50%);
    }
    .popup-card {
      min-width:0;
      max-width:100%;
      font-size:15px;
      line-height:1.55;
      box-sizing:border-box;
      width:100%;
    }
    .popup-card strong {
      font-size:17px;
      display:block;
      margin-bottom:4px;
    }
    .popup-meta {
      margin:6px 0 0;
      font-size:15px;
    }
    .popup-badges {
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:12px;
    }
    .popup-card {
      display:flex;
      flex-direction:column;
      gap:10px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.06);
      border-radius:16px;
      padding:12px 14px;
      box-shadow:0 14px 30px rgba(15,23,42,.22);
      backdrop-filter: blur(10px) saturate(1.15);
      -webkit-backdrop-filter: blur(10px) saturate(1.15);
    }
    .popup-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .popup-title {
      font-weight:800;
      letter-spacing:.2px;
    }
    .popup-time {
      font-size:12px;
      color:#475569;
      white-space:nowrap;
    }
    .popup-hero {
      display:flex;
      align-items:flex-end;
      gap:10px;
    }
    .popup-speed {
      display:flex;
      align-items:flex-end;
      gap:6px;
      font-weight:800;
      color:#0f172a;
    }
    .popup-speed .value { font-size:24px; line-height:1; }
    .popup-speed .unit { font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:.6px; }
    .popup-status {
      font-size:12px;
      font-weight:700;
      padding:4px 8px;
      border-radius:999px;
      background:rgba(15,23,42,.08);
      color:#0f172a;
    }
    .popup-chips {
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .popup-chip {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px 8px;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(15,23,42,.1);
      font-size:12px;
      color:#0f172a;
      font-weight:700;
    }
    .popup-chip svg { width:12px; height:12px; color:#334155; }
    /* Aiemmasta reittipisteesta peritty lukema (esim. sammutetun auton
       polttoaine): sama arvo, mutta erotettavissa tuoreesta mittauksesta. */
    .popup-chip.is-stale { border-style:dashed; color:#475569; }
    .popup-chip.is-stale svg { color:#64748b; }
    .badge.is-stale { border:1px dashed rgba(15,23,42,.28); }
    .popup-address {
      font-size:12px;
      color:#475569;
    }
    .leaflet-popup-content {
      margin:0;
      font-size:15px;
      line-height:1.55;
      box-sizing:border-box;
      width:auto !important;
      min-width:360px;
      max-width:440px;
    }
    .leaflet-popup-content-wrapper {
      border-radius:18px;
      padding:18px 20px;
      background:rgba(255,255,255,.45);
      border:1px solid rgba(255,255,255,.04);
      box-shadow:0 14px 30px rgba(15,23,42,.2);
      backdrop-filter: blur(12px) saturate(1.1);
      -webkit-backdrop-filter: blur(12px) saturate(1.1);
    }

    .theme-aliens .panel {
      background: linear-gradient(160deg, rgba(6, 12, 10, 0.98), rgba(3, 7, 6, 0.95));
      border: 1px solid rgba(120, 255, 180, 0.35);
      box-shadow: 0 30px 70px rgba(0,0,0,.65), inset 0 0 0 1px rgba(210,255,230,.08);
      color: #e7fff0;
      font-family: 'Rajdhani', 'Ubuntu', system-ui, sans-serif;
    }
    .theme-aliens .panel::before {
      content:'';
      position:absolute;
      left:12px;
      right:12px;
      top:12px;
      height:2px;
      background:linear-gradient(90deg, rgba(140,255,180,.0), rgba(140,255,180,.7), rgba(255,210,120,.55), rgba(140,255,180,.15));
      opacity:.8;
      border-radius:999px;
      pointer-events:none;
    }
    .theme-aliens .panel label,
    .theme-aliens .panel .subtitle,
    .theme-aliens .panel .nav,
    .theme-aliens .panel .muted {
      color: #9ec4b1;
    }
    .theme-aliens .panel input,
    .theme-aliens .panel select {
      background: rgba(6, 12, 10, 0.92);
      border-color: rgba(120,255,180,.35);
      color: #e7fff0;
      box-shadow: inset 0 0 12px rgba(30, 80, 60, 0.25);
    }
    .theme-aliens .panel input:focus,
    .theme-aliens .panel select:focus {
      border-color: #9dff5a;
      box-shadow: 0 0 0 3px rgba(132,255,170,.3);
    }
    .theme-aliens .panel .title {
      color:#e8ffee;
      text-shadow:0 0 16px rgba(120, 255, 180, 0.3);
      letter-spacing:1px;
    }
    .theme-aliens .panel-toggle {
      background: linear-gradient(135deg, #84ff5a, #3de081);
      color:#03110a;
      box-shadow:0 18px 34px rgba(10,20,12,.55), 0 0 18px rgba(120,255,180,.35);
    }
    .theme-aliens .replay-card {
      background: linear-gradient(180deg, rgba(8, 14, 12, 0.96), rgba(4, 8, 6, 0.96));
      border: 1px solid rgba(120,255,180,.25);
      box-shadow:0 18px 34px rgba(0,0,0,.6);
    }
    .theme-aliens .replay-trip {
      background: rgba(8, 14, 12, 0.85);
      border-color: rgba(120,255,180,.2);
      color:#e5ffe8;
    }
    .theme-aliens .replay-trip:hover {
      border-color: rgba(140,255,180,.6);
      box-shadow:0 12px 24px rgba(0,0,0,.5);
    }
    .theme-aliens .replay-trip.active {
      border-color: rgba(170,255,210,.9);
      box-shadow:0 0 0 1px rgba(140,255,180,.4) inset, 0 16px 34px rgba(0,0,0,.6);
    }
    .theme-aliens .replay-toggle { color:#9dff6f; }
    .theme-aliens .replay-event {
      background: rgba(20, 30, 24, 0.95);
      border: 1px solid rgba(120,255,180,.25);
      color:#eafff0;
    }
    .theme-aliens .popup-card {
      background: rgba(8, 14, 12, 0.45);
      border: 1px solid rgba(255,255,255,.05);
      color:#e8ffee;
      box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
      backdrop-filter: blur(14px) saturate(1.25);
      -webkit-backdrop-filter: blur(14px) saturate(1.25);
    }
    .theme-aliens .popup-time,
    .theme-aliens .popup-address { color:#8fb6a5; }
    .theme-aliens .popup-chip {
      background: rgba(8, 14, 12, 0.9);
      border-color: rgba(120,255,180,.04);
      color:#dbffe8;
    }
    .theme-aliens .popup-status {
      background: rgba(120,255,180,.12);
      color:#dfffe7;
    }
    .theme-aliens .leaflet-popup-content-wrapper {
      background: linear-gradient(160deg, rgba(12, 22, 18, 0.35), rgba(6, 12, 10, 0.18));
      border-color: rgba(140,255,190,.45);
      box-shadow: 0 18px 40px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(120,255,180,.2),
        0 0 24px rgba(120,255,180,.35),
        0 0 60px rgba(120,255,180,.15);
      backdrop-filter: blur(18px) saturate(1.4);
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
    }
    .theme-aliens .leaflet-popup-tip {
      background: linear-gradient(160deg, rgba(12, 22, 18, 0.35), rgba(6, 12, 10, 0.18));
      border: 1px solid rgba(140,255,190,.35);
      box-shadow: inset 0 0 0 1px rgba(120,255,180,.2), 0 0 18px rgba(120,255,180,.25);
    }
    .theme-aliens .veh-ico svg,
    .theme-aliens .pin-ico svg {
      filter: drop-shadow(0 0 10px rgba(120,255,180,.55));
    }
    .theme-aliens .pin-ico svg {
      display: none;
    }
    .theme-aliens .leaflet-interactive {
      filter: drop-shadow(0 0 8px rgba(120,255,180,.45));
    }
    .theme-aliens .veh-ico .veh-pulse,
    .theme-aliens .pin-ico .pin-pulse {
      border-color: rgba(157,255,90,.5);
    }
    .theme-aliens .veh-ico .veh-tail {
      border-top-color: rgba(8, 14, 12, 0.95);
      filter: drop-shadow(0 0 6px rgba(120,255,180,.35));
    }
    .theme-aliens .pin-ico .pin-bg {
      background: radial-gradient(circle at 40% 35%, rgba(140,255,180,.25), rgba(8,14,12,.95));
      border-color: rgba(120,255,180,.55);
      box-shadow: 0 0 20px rgba(120,255,180,.35);
    }
    .theme-aliens .pin-ico .pin-tail {
      border-top-color: rgba(8, 14, 12, 0.95);
      filter: drop-shadow(0 0 6px rgba(120,255,180,.35));
    }
    .theme-aliens .pin-ico .pin-dot {
      box-shadow: 0 0 12px rgba(140,255,180,.7), inset 0 0 6px rgba(0,0,0,.35);
    }
    .theme-aliens .pin-ico .pin-dot,
    .theme-aliens .veh-ico .veh-pulse,
    .theme-aliens .pin-ico .pin-pulse {
      animation: blipPulse 1.8s ease-in-out infinite;
    }
    .theme-aliens .leaflet-overlay-pane .hist-point {
      filter: drop-shadow(0 0 10px rgba(140,255,180,.7));
      animation: blipPulse 2.4s ease-in-out infinite;
      opacity: 0.85;
      stroke: #9dff6f !important;
      fill: #9dff6f !important;
    }
    @keyframes blipPulse {
      0% { opacity: 0.35; }
      50% { opacity: 1; }
      100% { opacity: 0.35; }
    }
    .theme-aliens #map {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(600px 420px at 50% 80%, rgba(120,255,180,.16), rgba(5,8,7,0) 70%),
        radial-gradient(800px 520px at 50% 90%, rgba(255,210,120,.08), rgba(5,8,7,0) 75%),
        linear-gradient(180deg, rgba(4,7,6,.96), rgba(5,8,7,.98));
    }
    .theme-aliens #map::after {
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(0deg, rgba(120,255,180,.04) 0, rgba(120,255,180,.04) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 22px),
        repeating-linear-gradient(90deg, rgba(120,255,180,.03) 0, rgba(120,255,180,.03) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 22px),
        radial-gradient(circle at 50% 80%, rgba(120,255,180,.16), rgba(0,0,0,0) 55%);
      opacity:.18;
      z-index: 501;
    }
    .theme-aliens .leaflet-tile {
      filter: grayscale(0.7) brightness(0.45) contrast(1.3) sepia(0.45) hue-rotate(80deg) saturate(1.3);
      opacity: 0.45;
    }
    .theme-aliens .leaflet-container {
      background: #050807;
    }
    .theme-aliens .leaflet-control-zoom a,
    .theme-aliens .tool-btn {
      background: rgba(8,14,12,.92);
      color: #9dff6f;
      border-color: rgba(120,255,180,.35);
      box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 0 12px rgba(120,255,180,.08);
    }
    .theme-aliens .leaflet-control-zoom a:hover,
    .theme-aliens .tool-btn:hover {
      background: rgba(12,20,16,.95);
      color: #d8ff9d;
    }
    .theme-aliens .leaflet-bar a {
      border-color: rgba(120,255,180,.35);
    }
    .theme-aliens .leaflet-control-attribution {
      background: rgba(8,14,12,.85);
      color: #9abdad;
      border-radius: 8px;
      border: 1px solid rgba(120,255,180,.25);
      box-shadow: 0 8px 16px rgba(0,0,0,.45);
    }
    .theme-aliens .leaflet-control-attribution a {
      color: #9dff6f;
    }
    .theme-aliens .area-bar {
      background: rgba(8,14,12,.95);
      border-color: rgba(120,255,180,.35);
      color: #dfffe8;
    }
    .theme-aliens .corner-handle {
      background: rgba(8,14,12,.95);
      border-color: rgba(140,255,180,.8);
      box-shadow: 0 0 10px rgba(120,255,180,.45);
    }
    .theme-aliens .center-handle {
      background: rgba(140,255,180,.9);
      border-color: rgba(8,14,12,.95);
      box-shadow: 0 0 10px rgba(120,255,180,.55);
    }
    .theme-aliens .gf-label {
      background: rgba(8,14,12,.9);
      border-color: rgba(120,255,180,.3);
      color:#dfffe8;
    }
    .theme-aliens .spinner {
      border-color: rgba(120,255,180,.6);
      border-top-color: transparent;
    }
    .theme-aliens .error {
      background: rgba(40, 12, 12, 0.95);
      color:#ffd6d6;
      border-color: rgba(255, 120, 120, 0.35);
    }
    @media (max-width: 1024px) {
      html, body, #map { height:100%; }
      .panel {
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        width:100%;
        max-height:100vh;
        border-radius:26px 26px 0 0;
      padding:36px clamp(22px, 6vw, 40px) max(env(safe-area-inset-bottom, 24px), 24px);
        box-shadow:0 -16px 50px rgba(15,23,42,.45);
        transform:translateY(100%);
        transition:transform .35s cubic-bezier(.4,0,.2,1);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
      }
      body.panel-open .panel {
        transform:translateY(0);
      }
      .panel-head {
        position:sticky;
        top:-10px;
        padding-bottom:12px;
        background:linear-gradient(180deg, rgba(255,255,255,.97) 60%, rgba(255,255,255,0));
        z-index:2;
      }
      .panel-close {
        display:inline-flex;
        align-items:center;
        gap:4px;
      }
      .panel-close::before {
        content:'×';
        font-size:22px;
        line-height:1;
      }
      .panel-toggle {
        display:inline-flex;
      }
      body.panel-open .panel-toggle {
        opacity:0;
        pointer-events:none;
      }
      body.panel-open .panel-overlay {
        opacity:1;
        pointer-events:auto;
      }
      .subtitle.nav {
        font-size:13px;
      }
      .clock {
        position:static;
        margin:6px 0 10px;
        font-weight:700;
      }
      .panel .row {
        flex-direction:column;
        align-items:stretch;
      }
      .panel input,
      .panel select {
        font-size:23px;
        padding:22px 26px;
      }
      .btn {
        font-size:23px;
        padding:24px;
      }
      .panel label {
        font-size:22px;
      }
      .replay-card { padding:16px; }
      .replay-trip { font-size:18px; padding:12px 14px; }
      .replay-trip strong { font-size:18px; }
      .replay-trip .muted { font-size:16px; }
      .replay-event { font-size:14px; padding:8px 12px; }
    }
    @media (max-width: 640px) {
      .panel {
        padding-top:max(env(safe-area-inset-top, 20px), 20px);
      }
      body { font-size:23px; }
      .title { font-size:34px; }
      .subtitle.nav { font-size:19px; }
      .popup-card { font-size:22px; line-height:1.65; }
      .popup-card strong { font-size:24px; }
      .popup-meta { font-size:21px; }
      .leaflet-popup-content { font-size:22px; line-height:1.65; }
      .replay-trip { font-size:20px; }
      .replay-trip strong { font-size:20px; }
      .replay-trip .muted { font-size:18px; }
      .replay-event { font-size:16px; }
      #map { height:100vh; }
      .area-bar { left:12px; right:12px; transform:none; width:auto; flex-wrap:wrap; gap:6px; }
      .area-bar input[type="text"]{ flex:1 1 140px; min-width:140px; }
      .panel-toggle {
        bottom:max(env(safe-area-inset-bottom, 24px), 24px);
        left:max(env(safe-area-inset-left, 18px), 18px);
        font-size:24px;
        padding:26px 42px;
      }
    }