html { 
    scroll-behavior: smooth; 
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #F0F9FF; 
}

header { 
    position: sticky !important; 
    top: 0 !important; 
}

.highlight-gradient { 
    background: linear-gradient(90deg, #10ac84, #0ea5e9); 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.card { 
    background-color: white; 
    border-radius: 1rem; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
}

input:disabled { 
    background-color: #F3F4F6; 
    cursor: not-allowed; 
}

/* Modal Styles */
#conversionModal {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.preset-amount:hover {
    transform: scale(1.02);
}