@layer pages {
  .login-card { max-width: 360px; margin: 12vh auto; }
  .scan-page { max-width: none; padding: 0; }
  .hud {
    position: relative; min-height: 100dvh; background: black; overflow: hidden;
  }
  .hud-video, .hud-overlay {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .hud-overlay { pointer-events: none; }
  .hud-rail {
    position: absolute; left: 0; right: 0; display: flex; gap: var(--s-2);
    align-items: center; padding: var(--s-3);
    background: var(--overlay); z-index: 2;
    padding-left: max(var(--s-3), env(safe-area-inset-left));
    padding-right: max(var(--s-3), env(safe-area-inset-right));
  }
  .hud-rail--top { top: 0; padding-top: max(var(--s-3), env(safe-area-inset-top)); }
  .hud-rail--bottom {
    bottom: 0; justify-content: space-between;
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  }
  .hud-stats { margin-left: auto; color: var(--text-2); font-size: var(--fs-sm); }
  .driving .hud-rail--bottom, .driving .hud-video { filter: brightness(.35); }
  .thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-2); background: var(--surface-3); }
  .lightbox {
    position: fixed; inset: 0; background: var(--overlay); z-index: 50;
    display: none; grid-template-columns: 1fr minmax(240px, 320px);
  }
  .lightbox[open] { display: grid; }
  .lightbox canvas, .lightbox img { max-height: 100dvh; margin: auto; }
  .map-canvas { height: 70vh; border-radius: var(--r-3); background: var(--surface-2); }
}