*{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: #f4f7fb;
            overflow: hidden;
        }

        /* ===== HEADER ===== */
        .header{
            width:100%;
            background: linear-gradient(135deg,#0f172a,#1e293b);
            color:white;
            padding:18px 30px;
            text-align:center;
            box-shadow:0 4px 15px rgba(0,0,0,0.2);
            position:relative;
            z-index:1000;
        }

        .header h1{
            font-size:32px;
            font-weight:700;
            letter-spacing:1px;
        }

        .header p{
            margin-top:5px;
            font-size:14px;
            color:#cbd5e1;
        }

        /* ===== TOP BAR ===== */
        .topbar{
            width:100%;
            background:white;
            padding:15px 25px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            box-shadow:0 2px 10px rgba(0,0,0,0.08);
            z-index:999;
        }

        /* ===== FILTERS ===== */
        .filters{
            display:flex;
            gap:15px;
        }

        select{
            padding:12px 18px;
            border:none;
            border-radius:10px;
            background:#0f172a;
            color:white;
            font-size:14px;
            font-weight:500;
            cursor:pointer;
            transition:0.3s;
            box-shadow:0 3px 10px rgba(0,0,0,0.15);
        }

        select:hover{
            background:#1d4ed8;
            transform:translateY(-2px);
        }

        select:focus{
            outline:none;
        }

        /* ===== MAP ===== */
        #map{
            width:100%;
            height:calc(98vh - 135px);
        }

        /* ===== LEGEND ===== */
        .legend{
            position:fixed;
            bottom:30px;
            left:30px;
            background:white;
            padding:15px 18px;
            border-radius:12px;
            box-shadow:0 5px 20px rgba(0,0,0,0.15);
            font-size:14px;
            z-index:1000;
            line-height:26px;
            min-width:180px;
        }

        .legend b{
            font-size:15px;
            color:#111827;
        }

        .dot{
            font-size:20px;
            vertical-align:middle;
        }

        /* ===== LEAFLET TOOLTIP ===== */
        .leaflet-tooltip{
            background:white;
            border:none;
            border-radius:8px;
            box-shadow:0 3px 10px rgba(0,0,0,0.2);
            padding:10px;
            color:#111827;
            font-size:13px;
        }



        /* ===== TOPBAR LAYOUT ===== */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    background: #f5f7fa;
    flex-wrap: wrap;
}

/* FILTER CONTAINER */
.filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1;
}





/* =====================================================
   KPI INLINE (MATCH FILTER SIZE)
===================================================== */

.kpi-inline{
    display:flex;
    align-items:center;
}

.kpi-box{

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    min-width:240px;
    height:48px;

    background:#ffffff;

    border-radius:12px;

    box-shadow:0 4px 12px rgba(0,0,0,0.10);

    font-size:15px;
    font-weight:500;

    transition:0.3s;
}

/* LABEL */
.kpi-label{
    color:#374151;
    font-weight:600;
}

/* SEPARATOR */
.kpi-sep{
    color:#9ca3af;
}

/* VALUE */
.kpi-value{
    font-size:18px;
    font-weight:700;
}

/* BORDER COLOR DYNAMIC */
.kpi-box{
    border-left:6px solid #2563eb;
}

#czNumberSearch {

    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    min-width: 180px;
    outline: none;
}

#searchBtn {

    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: #0b4f63;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

#searchBtn:hover {

    background: #083b4c;
}