:root { --ring: rgba(225,29,72,.25); }

/* Tiny 2026-polish: subtle grain + smooth focus */
body {
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(244,63,94,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(1200px 700px at 50% 100%, rgba(16,185,129,.06), transparent 55%);
}

.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 14px;
}

.card-hover {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(15,23,42,.10);
  border-color: rgba(225,29,72,.22);
}

/* ========================================================
   MOBILE APP STYLES (Strictly scoped to screens < 768px)
   Guaranteed 0% effect on desktop/web views (>= 768px)
   ======================================================== */
@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    -webkit-overflow-scrolling: touch;
  }

  .safe-area-top {
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
  }

  .safe-area-bottom {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }

  .mobile-touch-feedback:active {
    transform: scale(0.96);
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Smooth horizontal scrolling for tables and tab bars on mobile */
  .mobile-scroll-touch {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}