body { font-family: 'Inter', sans-serif; overflow-x: hidden; } /* Only prevent side scrolling */
.mono-font { font-family: 'JetBrains Mono', monospace; }

/* --- 1. BACKGROUND GRID (Fixed) --- */
.scrolling-grid {
    position: fixed; /* Changed to fixed so it stays put while you scroll */
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(0, 50, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 50, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    top: -50%;
    left: -50%;
    transform: perspective(500px) rotateX(60deg);
    animation: planeMove 20s linear infinite;
    z-index: -2; /* Behind everything */
    pointer-events: none;
}

@keyframes planeMove {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
}

/* --- 2. CIRCUIT ANIMATIONS --- */
.circuit-path {
    fill: none;
    stroke: rgba(37, 99, 235, 0.15);
    stroke-width: 1.5;
}

/* Pulse Animations */
.pulse-fast {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-dasharray: 20 200;
    stroke-dashoffset: 220;
    animation: flowFast 2s linear infinite;
}

.pulse-slow {
    fill: none;
    stroke: #60a5fa;
    stroke-width: 1.5;
    stroke-dasharray: 40 400;
    stroke-dashoffset: 440;
    animation: flowSlow 5s linear infinite;
}

@keyframes flowFast { to { stroke-dashoffset: -220; } }
@keyframes flowSlow { to { stroke-dashoffset: -440; } }

/* --- 3. UTILS --- */
.custom-checkbox { display: none; }
.custom-checkbox + label span {
    display: inline-block;
    width: 16px; height: 16px;
    margin-right: 8px;
    border: 1px solid #333;
    background: #0a0a0a;
    border-radius: 2px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.custom-checkbox:checked + label span {
    background: #2563eb;
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
    -webkit-text-fill-color: #e5e7eb !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }


/* Add to static/css/login.css */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}