:root {
  --app-motion-fast: 160ms;
  --app-motion-base: 190ms;
  --app-motion-slow: 220ms;
  --app-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --app-slide-distance: 16px;
  --app-micro-distance: 8px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --app-motion-fast: 1ms;
    --app-motion-base: 1ms;
    --app-motion-slow: 1ms;
    --app-slide-distance: 0px;
    --app-micro-distance: 0px;
  }
}

.app-page-root {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.app-enter-forward {
  animation: app-enter-forward var(--app-motion-base) var(--app-motion-ease) both;
}

.app-enter-back {
  animation: app-enter-back var(--app-motion-base) var(--app-motion-ease) both;
}

.app-exit-forward {
  animation: app-exit-forward var(--app-motion-fast) var(--app-motion-ease) both;
}

.app-exit-back {
  animation: app-exit-back var(--app-motion-fast) var(--app-motion-ease) both;
}

@keyframes app-enter-forward {
  from {
    opacity: 0;
    transform: translateX(var(--app-slide-distance));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes app-enter-back {
  from {
    opacity: 0;
    transform: translateX(calc(var(--app-slide-distance) * -1));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes app-exit-forward {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(var(--app-slide-distance) * -0.35));
  }
}

@keyframes app-exit-back {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(var(--app-slide-distance) * 0.35));
  }
}

.app-micro-in {
  opacity: 0;
  transform: translateY(var(--app-micro-distance));
  animation: app-micro-in var(--app-motion-fast) var(--app-motion-ease) both;
  animation-delay: calc(var(--app-stagger-index, 0) * 12ms);
}

@keyframes app-micro-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-pressable {
  transition: transform var(--app-motion-fast) var(--app-motion-ease), opacity var(--app-motion-fast) var(--app-motion-ease);
  transform-origin: center;
}

.app-pressable.is-pressed,
.app-pressable:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .app-enter-forward,
  .app-enter-back,
  .app-exit-forward,
  .app-exit-back,
  .app-micro-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .app-pressable,
  .app-pressable.is-pressed,
  .app-pressable:active {
    transition: none !important;
    transform: none !important;
  }
}

/* ==== Phone-frame wrapper for desktop browsers (≥480px) ==== */
/* On phones the layout fills the screen; on desktop it sits in a centered phone-shaped frame. */
@media (min-width: 480px) {
  html {
    background: #0a0a0a;
    min-height: 100vh;
  }
  html.dark { background: #0a0a0a; }
  body {
    max-width: 390px !important;
    margin: 0 auto !important;
    min-height: 100vh;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04);
    position: relative;
    overflow-x: hidden;
  }
  body > div.mx-auto {
    max-width: 390px !important;
    width: 390px !important;
  }
  /* Pull fixed elements (bottom nav, floating buttons) inside the phone frame */
  body .fixed,
  body .fixed.bottom-0,
  body .fixed.top-0,
  body .fixed.inset-x-0,
  body .bottom-nav,
  body nav.fixed,
  body #global-save-btn {
    max-width: 390px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 390px !important;
    box-sizing: border-box !important;
  }
  /* Save button keeps its own translate inside the centered frame */
  body #global-save-btn {
    width: auto !important;
    max-width: none !important;
  }
}

/* View Transitions disabled — they exposed a flash of the new page's pre-hydration
   state during the snapshot, which read as a "phantom screen" sliding in. With
   them off, the SW serves both pages from cache instantly and the swap is
   imperceptible against the shared #000 background. */

/* Solid black on html to prevent any white flash between pages */
html { background: #000; }