body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Custom Scrollbar for logs */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Alert States */
.alert-active {
    border-color: rgba(239, 68, 68, 0.7) !important;
    box-shadow: inset 0 0 80px rgba(239, 68, 68, 0.25), 0 0 20px rgba(239, 68, 68, 0.4);
    animation: borderPulse 1.5s infinite;
}

@keyframes borderPulse {
    0% { border-color: rgba(239, 68, 68, 0.5); box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.2); }
    50% { border-color: rgba(239, 68, 68, 0.9); box-shadow: inset 0 0 100px rgba(239, 68, 68, 0.4); }
    100% { border-color: rgba(239, 68, 68, 0.5); box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.2); }
}

.status-alert {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Log Entry Animations */
.log-entry {
    animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hide canvas by default until loaded */
#output-canvas {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
#output-canvas.loaded {
    opacity: 1;
}