/* EVBro — Rendering on touch devices: no `backdrop-filter`.
   Standalone sheet: the load ORDER (templates/index.html) follows the original cascade; do not change it (it goes LAST).

   Why: Chrome for Android composites `backdrop-filter` layers badly when several are present at once (header, dock,
   modal and action sheet backdrops, plus the opacity animation): the background disappears or the dialog shows up as an
   «unformed square». The blur is only decoration, so on touch it is replaced by more opaque backgrounds. */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Modal and action sheet backdrops: no blur, darker so the content behind does not distract */
  .modal-overlay,
  .action-sheet-overlay { background: rgba(0, 0, 0, 0.78); }

  /* Header and dock: opaque (formerly translucent with blur) */
  .app-header { background: var(--bg); }
  .native-bottom-dock { background: #0b0c10; }
  [data-theme="light"] .native-bottom-dock { background: #ffffff; }
  .mobile-bottom-nav { background: var(--bg); }
}