.my-ip-wrapper { background: #0d0d0d; border: 1px solid #222; padding: 30px; border-radius: 8px; font-family: 'Share Tech Mono', monospace; margin: 40px 0; box-shadow: 0 10px 40px rgba(0,0,0,0.8); }
.my-ip-header { color: #00f2ff; font-size: 14px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 15px; }
.highlight-ip { color: #fff; font-size: 18px; padding: 2px 8px; background: rgba(255,255,255,0.1); border-radius: 3px; }
.pulse-cyan { width: 10px; height: 10px; background: #00f2ff; border-radius: 50%; display: inline-block; animation: blink-cyan 1.5s infinite; box-shadow: 0 0 10px #00f2ff; margin-right: 10px; }

.my-ip-intro p { color: #aaa; font-size: 14px; line-height: 1.6; }
.cyber-btn-cyan { background: transparent; border: 1px solid #00f2ff; color: #00f2ff; font-weight: bold; padding: 12px 25px; cursor: pointer; transition: 0.3s; font-family: inherit; margin-top: 20px; text-transform: uppercase; width: 100%; font-size: 14px; }
.cyber-btn-cyan:hover { background: #00f2ff; color: #000; box-shadow: 0 0 20px rgba(0, 242, 255, 0.4); }

.scan-steps-list { list-style: none; padding: 15px; margin: 0; background: #000; border: 1px solid #222; border-radius: 4px; height: 200px; overflow-y: auto; font-size: 12px; color: #888; }
.scan-steps-list li { margin-bottom: 8px; animation: fadeIn 0.3s ease-in; }

.my-ip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.my-ip-card { background: #111; border: 1px solid #333; padding: 20px; border-radius: 6px; border-top: 3px solid #D4FF00; }
.my-ip-card.full-width { grid-column: span 2; border-top-color: #00f2ff; }
.card-title { color: #D4FF00; font-size: 12px; font-weight: bold; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.my-ip-card.full-width .card-title { color: #00f2ff; }

.my-ip-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1a1a1a; padding: 8px 0; font-size: 12px; }
.my-ip-row .lbl { color: #666; }
.my-ip-row .val { color: #ccc; text-align: right; }

.port-badge { background: rgba(0, 242, 255, 0.15); border: 1px solid #00f2ff; color: #00f2ff; padding: 2px 6px; border-radius: 3px; font-size: 11px; margin: 2px; display: inline-block; }
.bl-badge { background: #ff003c; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: bold; margin: 2px; display: inline-block; }

.my-ip-cve-link { display: flex; text-decoration: none; padding: 10px; background: rgba(0, 242, 255, 0.05); border: 1px solid #222; margin-bottom: 8px; border-radius: 4px; transition: 0.2s; font-size: 12px; }
.my-ip-cve-link:hover { border-color: #00f2ff; background: rgba(0, 242, 255, 0.1); }

/* --- STYLES TRACEROUTE --- */
.traceroute-path { max-height: 300px; overflow-y: auto; padding-top: 10px; }
.tr-hop { display: flex; align-items: stretch; margin-bottom: 0; }
.tr-icon-container { display: flex; flex-direction: column; align-items: center; width: 30px; margin-right: 15px; }
.tr-node { width: 10px; height: 10px; border-radius: 50%; z-index: 2; margin-top: 4px; }
.tr-line { flex: 1; width: 2px; background: #333; margin-top: 4px; margin-bottom: 4px; }

.tr-info { padding-bottom: 20px; flex: 1; }
.tr-ip { font-family: monospace; font-size: 14px; font-weight: bold; }
.tr-geo { color: #888; font-size: 11px; margin-top: 3px; }
.tr-tags { margin-top: 5px; }
.hop-tag { display: inline-block; background: #ff003c; color: #fff; padding: 2px 5px; font-size: 9px; border-radius: 3px; font-weight: bold; margin-right: 5px; text-transform: uppercase; }

.mitm-alert { background: rgba(255, 0, 60, 0.15); border: 1px solid #ff003c; color: #ff003c; padding: 12px; border-radius: 4px; font-weight: bold; font-size: 11px; margin-bottom: 20px; text-align: center; animation: pulse-neon 2s infinite; }

.hidden { display: none; }
.error-box { background: rgba(255,0,60,0.1); color: #ff003c; border: 1px solid #ff003c; padding: 15px; text-align: center; border-radius: 4px; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #00f2ff; border-radius: 4px; }

@keyframes blink-cyan { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }


/* --- CLASSES MANQUANTES (INTELLIGENCE IA & BOUTON) --- */

/* Bloc Intelligence IA */
.my-ip-ai-intel {
    border-left: 4px solid #D4FF00 !important;
    background: rgba(212,255,0,0.02);
    margin-bottom: 20px;
}
.my-ip-row b { color: #ccc; }
.my-ip-ai-intel .card-title { color: #D4FF00; }
.ai-profil-text { font-size: 12px; color: #ccc; line-height: 1.5; margin-bottom: 10px; }
.ai-tags-wrapper { display: flex; flex-wrap: wrap; gap: 5px; }

/* Bouton AbuseIPDB */
.uab-btn-report-network {
    margin-top: 15px;
    width: 100%;
    padding: 10px;
    background: rgba(255, 0, 60, 0.05);
    border: 1px solid #ff003c;
    color: #ff003c;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Share Tech Mono', monospace;
    transition: all 0.3s ease;
    border-radius: 3px;
    text-transform: uppercase;
}

.uab-btn-report-network:hover {
    background: #ff003c;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 60, 0.4);
    transform: translateY(-2px);
}

/* Grille interne pour la posture */
.my-ip-grid-inner { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}

/* Couleurs dynamiques pour les scores et traceroute */
.val.critical { color: #ff003c !important; font-weight: bold; }
.val.safe { color: #00ff41 !important; font-weight: bold; }
.tr-node.node-risky { background: #ff003c !important; box-shadow: 0 0 8px #ff003c !important; }
.tr-node.node-safe { background: #00f2ff !important; box-shadow: 0 0 8px #00f2ff !important; }
.tr-ip.risky { color: #ff003c !important; }
.tr-ip.safe { color: #00f2ff !important; }

/* Tags IA spécifiques dans le traceroute */
.hop-tag.ai-tag {
    border: 1px solid #D4FF00;
    color: #D4FF00;
    background: rgba(212,255,0,0.05);
    font-size: 8px;
}

/* Animation de chargement finale */
.finalizing-step { color: #D4FF00; animation: blink-cyan 1.5s infinite; }


/* ================================================== */
/*         EFFETS HOVER SUR LES TAGS (MY-IP)          */
/* ================================================== */

/* --- Style de base commun pour l'animation --- */
.port-badge, .bl-badge, .hop-tag, .tag-risk {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: help;
    position: relative;
    overflow: hidden;
}

/* --- Effet de soulèvement global --- */
.port-badge:hover, .bl-badge:hover, .hop-tag:hover, .tag-risk:hover {
    transform: translateY(-2px) scale(1.05);
    z-index: 5;
}

/* --- Ports Exposés (Cyan) --- */
.port-badge:hover {
    background: #00f2ff !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.6);
    border-color: #fff !important;
}

/* --- Blacklists & Menaces (Rouge) --- */
.bl-badge:hover, .hop-tag:not(.ai-tag):hover {
    background: #ff003c !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 0, 60, 0.6);
    border-color: #fff !important;
}

/* --- Tags Intelligence IA (Vert Néon) --- */
.hop-tag.ai-tag:hover {
    background: #D4FF00 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.6);
    border-color: #fff !important;
}

/* --- Cas particulier : Tag Risque avec style Inline --- */
/* Pour supporter les couleurs injectées dynamiquement par le JS */
.tag-risk[style*="#ff003c"]:hover {
    background: #ff003c !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 0, 60, 0.6);
}

.tag-risk[style*="#ff8800"]:hover {
    background: #ff8800 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 136, 0, 0.6);
}

/* --- Animation Scan Line (Optionnel) --- */
/* Ajoute un petit reflet qui passe sur le badge au survol */
.port-badge:after, .bl-badge:after, .hop-tag:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.4s;
}

.port-badge:hover:after, .bl-badge:hover:after, .hop-tag:hover:after {
    left: 150%;
}

/* --- Interaction avec le Traceroute --- */
/* Quand on survole une ligne de hop, on met en évidence le point */
.tr-hop:hover .tr-node {
    transform: scale(1.4);
    box-shadow: 0 0 12px currentColor;
}

.tr-hop:hover .tr-ip {
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px currentColor;
}

.fadeIn.error-box {
    animation: fadeIn 0.5s ease-out forwards;
    box-shadow: 0 0 30px rgba(255, 0, 60, 0.2);
}

@media (max-width: 600px) {
    .my-ip-grid-inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) { 
    .my-ip-grid { grid-template-columns: 1fr; } 
    .my-ip-card.full-width { grid-column: span 1; }
    .my-ip-cve-link { flex-direction: column; gap: 5px; } 
}