/* Custom Scrollbar - Estilo IDE */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #8b5cf6; }

body { 
    background-color: #09090b; 
    color: #e4e4e7;
    background-image: radial-gradient(circle at 50% 0%, #1a1a24 0%, transparent 50%);
    background-attachment: fixed;
}

.code-container pre {
    margin: 0;
    padding: 1rem;
    background: transparent !important;
}

.toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
}

.toast {
    background-color: #8b5cf6; color: white;
    padding: 12px 24px; border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5);
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards, fadeOut 0.3s ease 2.7s forwards;
    display: flex; align-items: center; gap: 10px;
    font-weight: 500;
}

@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

.snippet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    align-items: start;
}