/* SnapCal global styles */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { touch-action: pan-y; }
#root { min-height: 100dvh; }

/* Animated theme transition */
.theme-transition, .theme-transition * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }

/* Numbers */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ===== Premium card system ===== */
.card {
  background: #ffffff;
  border-radius: 1.75rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.05), 0 12px 32px -8px rgba(16,24,40,.06);
  border: 1px solid rgba(16,24,40,.04);
}
.dark .card {
  background: linear-gradient(180deg, #1a1a1e 0%, #141416 100%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 28px rgba(0,0,0,.45);
}
.card-hero {
  background: linear-gradient(180deg, #ffffff 0%, #fcfdf9 100%);
  border-radius: 2rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06), 0 24px 48px -16px rgba(132,204,22,.10);
  border: 1px solid rgba(16,24,40,.04);
}
.dark .card-hero {
  background: linear-gradient(180deg, #1b1b20 0%, #131316 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 40px rgba(0,0,0,.5), 0 0 60px -20px rgba(163,230,53,.08);
}

/* Ambient dashboard background mesh */
.bg-mesh {
  background-image:
    radial-gradient(600px 400px at 85% -5%, rgba(163,230,53,.10), transparent 60%),
    radial-gradient(500px 350px at -10% 20%, rgba(96,165,250,.06), transparent 55%);
}
.dark .bg-mesh {
  background-image:
    radial-gradient(600px 400px at 85% -5%, rgba(163,230,53,.07), transparent 60%),
    radial-gradient(500px 350px at -10% 20%, rgba(96,165,250,.05), transparent 55%);
}

/* Glass surfaces */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
.dark .glass {
  background: rgba(16,16,19,.72);
}

/* Ring tick marks */
@keyframes ring-glow { 0%,100% { opacity:.55 } 50% { opacity:1 } }
.ring-glow-dot { animation: ring-glow 2.4s ease-in-out infinite; }

/* Skeleton shimmer */
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.05) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 12px;
}
.dark .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 75%);
  background-size: 800px 100%;
}

/* CTA shimmer sweep */
@keyframes cta-shimmer { 0% { transform: translateX(-120%) skewX(-18deg) } 100% { transform: translateX(240%) skewX(-18deg) } }
.cta-shimmer::after {
  content: ''; position: absolute; inset: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: cta-shimmer 2.6s infinite; pointer-events: none;
}

/* Scan laser */
@keyframes laser { 0%,100% { top: 6% } 50% { top: 92% } }
.laser-line {
  position: absolute; left: 4%; right: 4%; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #A3E635 30%, #d9f99d 50%, #A3E635 70%, transparent);
  box-shadow: 0 0 18px 4px rgba(163,230,53,.65), 0 0 50px 12px rgba(163,230,53,.25);
  animation: laser 2.1s ease-in-out infinite;
}
@keyframes bracket-pulse { 0%,100% { opacity: .95; transform: scale(1) } 50% { opacity: .5; transform: scale(1.035) } }
.corner-brackets { animation: bracket-pulse 1.6s ease-in-out infinite; }

/* Photo shimmer overlay while scanning */
@keyframes photo-shimmer { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
.scan-shimmer::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(163,230,53,.14) 50%, transparent 60%);
  animation: photo-shimmer 1.8s infinite; pointer-events: none;
}

/* Streak flame flicker */
@keyframes flicker { 0%,100% { transform: scale(1) rotate(-1.5deg) } 30% { transform: scale(1.08) rotate(1.5deg) } 60% { transform: scale(.96) rotate(-1deg) } 80% { transform: scale(1.05) rotate(.5deg) } }
.flame-flicker { animation: flicker 1.8s ease-in-out infinite; transform-origin: 50% 90%; }

/* Paywall animated gradient glow */
@keyframes glow-move { 0%,100% { transform: translate(-18%, -12%) scale(1) } 33% { transform: translate(14%, 8%) scale(1.15) } 66% { transform: translate(-6%, 16%) scale(.95) } }
.paywall-glow { animation: glow-move 9s ease-in-out infinite; filter: blur(90px); }
@keyframes badge-pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
.badge-pulse { animation: badge-pulse 2.2s ease-in-out infinite; }

/* Camera FAB pulse */
@keyframes fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(163,230,53,.5) } 70% { box-shadow: 0 0 0 16px rgba(163,230,53,0) } 100% { box-shadow: 0 0 0 0 rgba(163,230,53,0) } }
.fab-pulse { animation: fab-pulse 2.8s infinite; }

/* Checkmark draw */
.check-draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .55s .15s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0 } }
.circle-draw { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw .6s ease-out forwards; }

/* Hide scrollbars on strips */
.no-scrollbar::-webkit-scrollbar { display: none }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none }

/* Focus rings */
button:focus-visible, a:focus-visible, input:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid #A3E635; outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

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