body { font-family: system-ui, -apple-system, sans-serif; }
::-webkit-scrollbar { width: 8px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
.nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; color: #a1a1aa; border-radius: 0.5rem; transition: all 0.2s; font-weight: 600; cursor: pointer; white-space: nowrap; }
.nav-link:hover { background-color: #27272a; color: #34d399; }
.nav-link.active { background-color: #18181b; color: #10b981; }

@media (min-width: 768px) {
    .nav-link { padding: 0.75rem 1rem; border-radius: 0.75rem; border-left: 4px solid transparent; }
    .nav-link.active { border-left: 4px solid #10b981; }
}
@media (max-width: 767px) {
    .nav-link { border-bottom: 2px solid transparent; border-radius: 0.5rem; font-size: 0.9rem; }
    .nav-link.active { border-bottom: 2px solid #10b981; border-left: none; }
}
#tool-container #dash { display: none !important; }

/* The global Kick FontAwesome trick */
.fa-kick::before { font-family: "Arial Black", sans-serif; font-weight: bold; content: "K"; font-size: 1.1em; }

/* Support Button Tada Animation */
@keyframes tada {
    0% { transform: scale3d(1, 1, 1); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    100% { transform: scale3d(1, 1, 1); }
}
.animate-tada {
    animation: tada 1s cubic-bezier(0.25, 1, 0.5, 1);
}