/* Small custom layer on top of Tailwind Play CDN. */
:root { color-scheme: light; }
* { -webkit-tap-highlight-color: transparent; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Safe-area padding for installed PWA on notched devices */
.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: calc(env(safe-area-inset-bottom) + 6rem); }

.nav-btn.active { color: #15803d; }
.nav-btn.active svg { transform: translateY(-1px); }

.card { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; }
.badge { font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; }

/* input number spinner tidy */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { margin:0; }

/* toast */
#toast { transition: opacity .25s, transform .25s; }

/* spinner */
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* view transition */
.view { animation: fade .18s ease; }
@keyframes fade { from { opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }