body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
}
#map {
    height: 450px;
    background-color: #1a1a1a;
    border-radius: 0.5rem;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: #212936;
    color: #f0f0f0;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.ui-panel {
    background: rgba(23, 30, 40, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
.panel-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #06b6d4;
    margin-bottom: 1rem;
}
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(23, 30, 40, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(128, 128, 128, 0.1);
    padding: 1rem;
    border-radius: 0.75rem;
    transition: all 0.2s ease-in-out;
}
.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(6, 182, 212, 0.5);
}
.stat-title { color: #9ca3af; font-size: 0.875rem; }
.stat-value { font-size: 1.5rem; font-weight: 600; }
.highlight-row { background-color: #0891b220 !important; outline: 1px solid #0891b2; }
.pagination-btn {
    background-color: #374151; color: #d1d5db; padding: 4px 12px;
    border-radius: 6px; transition: background-color 0.2s;
}
.pagination-btn:hover:not(:disabled) { background-color: #4b5563; }
.pagination-btn:disabled { background-color: #1f2937; color: #4b5563; cursor: not-allowed; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 4px; }
.custom-div-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.marker-ipv4 { background-color: #ef4444; border: 1px solid #dc2626; }
.marker-domain { background-color: #3b82f6; border: 1px solid #2563eb; }
.marker-url { background-color: #eab308; border: 1px solid #d97706; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
    background-color: rgba(6, 182, 212, 0.6);
    border: 2px solid rgba(14, 116, 144, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.leaflet-control-custom {
    background-color: #212936;
    background-clip: padding-box;
    color: #d1d5db;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 1.4rem;
    cursor: pointer;
    border: 2px solid rgba(128, 128, 128, 0.2);
}
.leaflet-control-custom:hover {
    background-color: #374151;
}

/* --- UPGRADE: Online Status Indicator --- */
.online-indicator {
    width: 10px;
    height: 10px;
    background-color: #22c55e; /* green-500 */
    border-radius: 50%;
    box-shadow: 0 0 6px #22c55e;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}