/* --- Variables de Thème --- */
:root {
    /* Thème Clair (Défaut) */
    --bg-primary: #f8fafc; /* slate-50 (Fond d'écran) */
    --bg-secondary: #ffffff; /* white (Carte principale) */
    --text-primary: #1e293b; /* slate-800 */
    --text-secondary: #475569; /* slate-600 */
    
    --neon-color: #0284c7; /* sky-600 (Bleu Pro) */
    --neon-color-light: #0369a1; /* sky-700 */
    --neon-color-dark: #0c4a6e; /* sky-900 */
    --neon-shadow: rgba(2, 132, 199, 0.4); /* Ombre Bleue */
    --neon-shadow-medium: rgba(2, 132, 199, 0.8); /* Pour l'animation */
    --neon-shadow-light: rgba(2, 132, 199, 0.3); /* Pour l'animation */
    
    --scroll-track: #e2e8f0; /* slate-200 */
    --progress-track: #e2e8f0; /* slate-200 */
}

.dark {
    /* Thème Sombre (Futuriste) */
    --bg-primary: #0f172a; /* slate-900 */
    --bg-secondary: #1e293b; /* slate-800 */
    --text-primary: #f1f5f9; /* slate-100 */
    --text-secondary: #94a3b8; /* slate-400 */
    
    --neon-color: #06b6d4; /* cyan-500 (Cyan Neon) */
    --neon-color-light: #22d3ee; /* cyan-400 */
    --neon-color-dark: #0e7490; /* cyan-700 */
    --neon-shadow: rgba(6, 182, 212, 0.5); /* Ombre Cyan */
    --neon-shadow-medium: rgba(6, 182, 212, 0.8); /* Pour l'animation */
    --neon-shadow-light: rgba(6, 182, 212, 0.3); /* Pour l'animation */
    
    --scroll-track: #1e293b; /* slate-800 */
    --progress-track: #1e293b; /* slate-800 */
}
/* ---------------------------------- */


body {
    font-family: 'Inter', sans-serif;
    /* Couleur de fond gérée par Tailwind (bg-app-bg) */
}

/* Custom scrollbar (utilise les variables) */
#resultsContainer::-webkit-scrollbar {
    width: 8px;
}
#resultsContainer::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 10px;
}
#resultsContainer::-webkit-scrollbar-thumb {
    background: var(--neon-color);
    border-radius: 10px;
}
#resultsContainer::-webkit-scrollbar-thumb:hover {
    background: var(--neon-color-light);
}

/* Animation de lueur (utilise les variables) - CORRIGÉE */
@keyframes neon-pulse {
    0% { 
        box-shadow: 0 0 5px var(--neon-shadow); 
    }
    50% { 
        box-shadow: 0 0 20px var(--neon-shadow-medium), 0 0 30px var(--neon-shadow-light); 
    }
    100% { 
        box-shadow: 0 0 5px var(--neon-shadow); 
    }
}
.neon-glow {
    animation: neon-pulse 2s infinite alternate;
}

/* Progress bar (utilise les variables) */
#progressBarContainer {
    height: 4px;
    background-color: var(--progress-track);
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    box-shadow: 0 0 5px var(--neon-shadow);
}
#progressBar {
    height: 100%;
    width: 0%;
    background-color: var(--neon-color);
    transition: width 0.3s ease-in-out;
    border-radius: 9999px;
}

/* Style pour les boutons individuels */
.copy-subdomain-btn, .ping-subdomain-btn {
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.2s ease-in-out;
}
/* Apparaît au survol du 'li' (le parent) */
li:hover .copy-subdomain-btn, li:hover .ping-subdomain-btn {
    opacity: 1;
}

.ping-subdomain-btn {
    margin-right: 4px; /* Espace entre ping et copy */
}