:root{color-scheme:light}
body{background:hsl(var(--background))}
html{scroll-behavior:smooth}
.fade-swap{transition:opacity .22s ease,transform .22s ease}
.fade-swap.is-fading{opacity:0;transform:scale(.985)}
.safe-bottom{padding-bottom:env(safe-area-inset-bottom)}

/* Transição entre "páginas" (apenas opacity para não quebrar position:fixed em alguns celulares) */
#root{min-height:100vh;transition:opacity .26s cubic-bezier(.22,1,.36,1);will-change:opacity}
#root.is-page-fading{opacity:0;pointer-events:none}

/* Ajustes para telas bem pequenas (evita “vazar” botões/textos) */
@media (max-width: 360px){
  /* Bottom bar */
  .safe-bottom{gap:.5rem;padding-left:.5rem;padding-right:.5rem}
  .safe-bottom .h-12{height:44px}
  .safe-bottom .h-10{height:40px}
  .safe-bottom .px-8{padding-left:1rem;padding-right:1rem}
  .safe-bottom .px-5{padding-left:.875rem;padding-right:.875rem}
  .safe-bottom button{font-size:12px}
  .safe-bottom button,.safe-bottom .truncate{max-width:100%}
  .safe-bottom button{overflow:hidden;text-overflow:ellipsis}

  /* Em telas muito estreitas, permite quebrar (melhor que vazar) */
  .safe-bottom .whitespace-nowrap{white-space:normal}
}

/* Segurança extra: não deixa botões/inputs ultrapassarem a largura */
button,input,select,textarea{max-width:100%}