sl-input::part(base) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Style the actual input area */
sl-input::part(input) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border_radius: 8px !important;
    
    /* This makes it match Hyperdiv's 'mono' exactly */
    font-family: var(--sl-font-mono) !important; 
}

/* 3. Match the placeholder to the same font */
sl-input::part(input)::placeholder {
    font-family: var(--sl-font-mono) !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* 4. Focus state */
sl-input::part(input):focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.animated-bg {
    background: linear-gradient(-45deg, #011a14, #081342, #01241e, #000000);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}