:root {
  --tg-bg: #f8fafc;
}

html, body {
  height: 100%;
}

body {
  background: var(--tg-bg, #f8fafc);
}

.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: calc(env(safe-area-inset-bottom) + 0.75rem);
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

#toast-root {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.75rem);
  left: 1rem;
  right: 1rem;
  z-index: 100;
  pointer-events: none;
}

.toast {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
  padding: .75rem 1rem;
  border-radius: .75rem;
  color: white;
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  margin-bottom: .5rem;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-error { background: #dc2626; }
.toast-success { background: #16a34a; }

.tap-scale {
  transition: transform .1s ease;
}
.tap-scale:active {
  transform: scale(0.96);
}

.spinner {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: white;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}