:root {
  color-scheme: dark;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
}

html {
  min-width: 100%;
  min-height: 100%;
  background-color: var(--bg-start, var(--bg1, #667eea));
  overscroll-behavior: none;
}

body {
  min-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--bg-start, var(--bg1, #667eea));
}

/* Paint the iPhone safe areas so installed apps never expose white strips. */
html::before,
html::after {
  content: "";
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  pointer-events: none;
}

html::before {
  top: 0;
  height: var(--app-safe-top);
  background: var(--bg-start, var(--bg1, #667eea));
}

html::after {
  bottom: 0;
  height: var(--app-safe-bottom);
  background: var(--bg-end, var(--bg2, #764ba2));
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    background-color: var(--bg-start, var(--bg1, #667eea));
  }
}

@media (max-width: 600px) {
  .controller-page body {
    padding: calc(4px + var(--app-safe-top)) var(--app-safe-right) calc(8px + var(--app-safe-bottom)) var(--app-safe-left) !important;
  }

  .controller-page .controller-shell {
    width: 100%;
    padding: 0 !important;
  }

  .controller-page .controller-panel {
    max-width: none !important;
    padding: clamp(16px, 4.5vw, 22px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .controller-page .controller-panel > .glass-card {
    border: 0 !important;
    box-shadow: 0 8px 24px rgba(22, 20, 70, .22) !important;
  }

  .controller-page .controller-title {
    margin-top: .25rem;
  }

  .launcher-page body {
    padding: calc(16px + var(--app-safe-top)) calc(16px + var(--app-safe-right)) calc(16px + var(--app-safe-bottom)) calc(16px + var(--app-safe-left));
  }

  .launcher-page main {
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .tv-page .tv-stage,
  .display-page .app-container {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}