/* dvh = the visible height between a phone browser's toolbars (Avalonia issue #14452). */
html, body { margin: 0; padding: 0; height: 100%; height: 100dvh; overflow: hidden; background: #1E1E1E; color: #FFD700; font-family: system-ui, sans-serif; }
#out { height: 100%; width: 100%; }
.avalonia-splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.avalonia-splash h1 { margin: 12px 0 0; font-weight: 400; }
.avalonia-splash p { margin: 0; color: #BBBBBB; }
.beammusic-text-field { position: fixed; z-index: 1000; box-sizing: border-box; margin: 0; padding: 6px 10px;
  font: 16px system-ui, sans-serif; color: #FFFFFF; background: #1E1E1E; border: 2px solid #FFD700; border-radius: 4px;
  outline: none; resize: none; }
.beammusic-update { position: fixed; z-index: 1001; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center; padding: 10px 14px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  font: 15px system-ui, sans-serif; color: #FFFFFF; background: #2D2D2D; border: 1px solid #FFD700; border-radius: 6px; }
.beammusic-update button { font: inherit; color: #1E1E1E; background: #FFD700; border: 0; border-radius: 4px; padding: 6px 12px; }
/* Avalonia only fades the splash out (class splash-close) and leaves it over the app: let taps through, and index.html removes
   it. Otherwise a tap on the hidden logo or heading reaches the app at the wrong place (relative to that element), which made
   filter chips on phones do nothing or press the Back button. */
.avalonia-splash.splash-close { transition: opacity 200ms; opacity: 0; pointer-events: none; }