/* ===========================================================
   app.css — small bits Tailwind's utility classes don't cover.
   Almost everything else is expressed with Tailwind classes
   directly in the markup (see js/app.js), matching the reference
   designs (colors/spacing/radius come from the Tailwind config
   embedded in index.html).
=========================================================== */
@layer base{
  html,body{ width:100vw; min-height:100vh; margin:0; padding:0; }
  body{ overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent; }
  .pb-safe{ padding-bottom:env(safe-area-inset-bottom,0px); }
  .pt-safe{ padding-top:env(safe-area-inset-top,0px); }
  main>:first-child{ margin-top:0!important; }
  main>:last-child{ margin-bottom:0!important; }
}
::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

/* ---------- Screen fade-in ---------- */
.screen-enter{ animation:screenIn 220ms ease both; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .screen-enter{ animation:none; } }

/* ---------- Receipt scan animation ---------- */
.receipt-scan-frame{ position:relative; overflow:hidden; }
.receipt-scan-frame::after{
  content:''; position:absolute; left:0; right:0; height:3px;
  background:#10B981; box-shadow:0 0 8px #10B981;
  animation:scanline 1.6s ease-in-out infinite;
}
@keyframes scanline{ 0%{top:6%;} 50%{top:92%;} 100%{top:6%;} }
@media (prefers-reduced-motion:reduce){ .receipt-scan-frame::after{ animation:none; top:50%; } }

/* ---------- Bottom sheet ---------- */
.sheet-backdrop{ transition:opacity 200ms ease; }
.sheet-card{ transition:transform 220ms cubic-bezier(.32,.72,0,1); }

/* ---------- Toast ---------- */
.toast-el{ transition:opacity 200ms ease, transform 200ms ease; }