/* --- Root Containers & Background Pattern --- */
html, body, #__next, main {
    background-color: #050510 !important;
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    color: #e0eaff !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
}

/* --- Force Card Backgrounds and Preflight Border Bypass --- */
.group {
    background-color: rgba(10, 5, 20, 0.85) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #4d0099 !important;
    border-left-width: 4px !important;
    border-left-color: #b026ff !important;
    box-shadow: 0 0 10px rgba(176, 38, 255, 0.3), inset 0 0 15px rgba(176, 38, 255, 0.1) !important;
    backdrop-filter: blur(5px) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.group:hover {
    background-color: rgba(15, 10, 35, 0.95) !important;
    border-color: #00f3ff !important;
    border-left-color: #00f3ff !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.6), inset 0 0 10px rgba(0, 243, 255, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* --- Correct Category Header Colors (Cyan) --- */
h2 {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    font-weight: 900 !important;
}

/* --- Correct Service Title Colors --- */
.group .truncate, .group div.font-medium, .group .text-sm.font-medium {
    color: #e0eaff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 4px rgba(224, 234, 255, 0.3) !important;
    transition: all 0.2s ease !important;
}

/* --- Service Title Hover Colors (Cyan) --- */
.group:hover .truncate, .group:hover div.font-medium, .group:hover .text-sm.font-medium {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.6) !important;
}

/* --- Subtitles, API Stats, and Descriptions --- */
.text-xs, p {
    color: #b026ff !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* --- Ping & Metric Highlights --- */
.text-green-500, .dark\:text-green-500 {
    color: #00f3ff !important;
    text-shadow: 0 0 6px rgba(0, 243, 255, 0.6) !important;
}

.text-red-500, .dark\:text-red-500 {
    color: #ff003c !important;
    text-shadow: 0 0 6px rgba(255, 0, 60, 0.6) !important;
}

/* --- Icons --- */
.group img, .group svg {
    filter: drop-shadow(0 0 6px rgba(176, 38, 255, 0.7)) !important;
    transition: all 0.2s ease !important;
}

.group:hover img, .group:hover svg {
    filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.9)) !important;
}

/* --- Top Resource Bar --- */
header {
    border-bottom-style: dashed !important;
    border-bottom-width: 1px !important;
    border-bottom-color: #b026ff !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 4px 10px -4px rgba(176, 38, 255, 0.3) !important;
}