@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    transition: background-color 0.3s ease; 
}

.nav-btn { 
    padding: 1rem; 
    border-radius: 1.25rem; 
    color: #9ca3af; 
    transition: all 0.3s ease; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.nav-btn:hover { 
    background-color: #fff7ed; 
    color: #f97316; 
}

.dark .nav-btn:hover { 
    background-color: #1f2937; 
}

.nav-btn.active { 
    background-color: #f97316; 
    color: white; 
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3); 
}

.tab-content { 
    animation: fadeIn 0.4s ease-out; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.custom-scrollbar::-webkit-scrollbar { 
    width: 6px; 
}

.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: #e5e7eb; 
    border-radius: 10px; 
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb { 
    background: #374151; 
}

.dark input[type="date"]::-webkit-calendar-picker-indicator { 
    filter: invert(1); 
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.3;
    filter: brightness(0.7);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.dark input[type="number"]::-webkit-inner-spin-button,
.dark input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
    filter: brightness(2) invert(0.3);
}

input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
    opacity: 0.6;
}

.dark input[type="number"]:hover::-webkit-inner-spin-button,
.dark input[type="number"]:hover::-webkit-outer-spin-button {
    opacity: 0.7;
    filter: brightness(2.5) invert(0.2);
}

.animate-in { 
    animation-fill-mode: forwards; 
}

canvas { 
    max-width: 100% !important; 
}

/* Modal and transition refinements */
#fund-modal, #fund-op-modal {
    transition: opacity 0.3s ease;
}

.zoom-in-95 {
    animation: zoomIn 0.2s ease-out;
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}