::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

body { overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; font-family: 'Inter', sans-serif; background-color: #f8fafc; }
.dark body { background-color: #020617; }
[v-cloak] { display: none !important; }

/* Smooth Page Transitions */
.page-slide-enter-active, .page-slide-leave-active { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.page-slide-enter-from { opacity: 0; transform: translateY(15px) scale(0.98); }
.page-slide-leave-to { opacity: 0; transform: translateY(-15px) scale(0.98); position: absolute; width: 100%; }

/* Slide Fade for smaller components */
.slide-fade-enter-active { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.slide-fade-leave-active { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: none; }
.slide-fade-enter-from { opacity: 0; transform: translateX(10px); }
.slide-fade-leave-to { opacity: 0; transform: translateX(-10px); }

/* Mobile Scroll Fix: Clear the floating dock */
.pb-safe { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
.pb-dock-inner { padding-bottom: env(safe-area-inset-bottom); }
.live-value { transition: color 0.3s ease; }

/* Glassmorphism Utilities */
.glass { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.5); }
.dark .glass { background: rgba(15, 23, 42, 0.75); border-top: 1px solid rgba(255, 255, 255, 0.05); }
.glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border: 1px solid rgba(226, 232, 240, 0.8); }
.dark .glass-card { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(51, 65, 85, 0.5); }