body { font-family: 'Kanit', sans-serif; background-color: #f3f4f6; touch-action: manipulation; }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }

/* Custom Scrollbar */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Button Effects */
.btn-key { transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-key:active { transform: scale(0.90); filter: brightness(0.9); }

/* Animations */
@keyframes pop { 0% { transform: scale(0.95); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.animate-pop { animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@keyframes popOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; } }
.animate-pop-out { animation: popOut 0.2s ease-in forwards; }

@keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-in { animation: slideIn 0.3s ease-out forwards; }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes flashGreen { 0% { background-color: #d1fae5; border-color: #34d399; transform: scale(1.02); } 100% { background-color: #f8fafc; border-color: #f1f5f9; transform: scale(1); } }
.animate-flash-green { animation: flashGreen 0.4s ease-out; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.animate-shake { animation: shake 0.2s ease-in-out; }

@keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-8px) scale(1.1); } }
.animate-float-up { animation: floatUp 2s ease-out forwards; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.2s ease-out forwards; }

/* Urgent Mode Pulse (Red Screen Edge) */
@keyframes urgentPulse { 0%, 100% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 10px 4px rgba(239, 68, 68, 0.5); } }
.urgent-mode::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; animation: urgentPulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Menu Hamburger Animation */
@keyframes menu-w-1 { 0%, 100% { width: 18px; } 50% { width: 14px; } }
@keyframes menu-w-2 { 0%, 100% { width: 14px; } 50% { width: 18px; } }
@keyframes menu-w-3 { 0%, 100% { width: 18px; } 50% { width: 12px; } }

.menu-bar { height: 2px; background-color: #475569; border-radius: 2px; }
.anim-bar-1 { animation: menu-w-1 0.9s infinite ease-in-out; }
.anim-bar-2 { animation: menu-w-2 1.1s infinite ease-in-out; }
.anim-bar-3 { animation: menu-w-3 1s infinite ease-in-out; }

/* Safe Area for iPhone X+ */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* Fix for Keypad Container Padding */
#keypadContainer { padding-bottom: env(safe-area-inset-bottom); }