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

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

.premium-card {
    background-color: #18181b;
    border: 1px solid #27272a;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.premium-card:hover {
    border-color: #3f3f46;
    box-shadow: 0 10px 25px -3px rgba(220, 38, 38, 0.1);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #dc2626; }

.gauge-svg { transform: rotateY(180deg); }
.gauge-path { transition: stroke-dashoffset 1s cubic-bezier(0.65, 0, 0.35, 1), stroke 0.5s; }

.spinner { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.skeleton {
    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.nav-item { position: relative; transition: all 0.3s ease; }
.nav-item.active {
    background: linear-gradient(90deg, rgba(220,38,38,0.15) 0%, transparent 100%);
    color: #ef4444 !important;
    border-left: 3px solid #dc2626 !important;
}
.nav-item:not(.active):hover {
    background-color: rgba(255,255,255,0.03);
    color: #e4e4e7;
    padding-left: 1.25rem;
}

/* Animação suave na troca de tabs */
.view-section {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}