.main-content {
            background: linear-gradient(135deg, #b6d8f0 0%, #c6e0f5 35%, #d5eaf8 65%, #e4f2fc 100%) !important;
            background-attachment: fixed !important;
            min-height: 100vh;
        }
        body { background: #b6d8f0; }
        .page-header h4 { color: #0d47a1; font-weight: 700; font-size: 1.4rem; }

        /* Map container — full viewport */
        #mapContainer {
            height: 100vh;
            min-height: 400px;
            overflow: hidden;
            transform-origin: center center;
            transition: transform 0.4s ease;
        }
        #mapViewport {
            height: 100vh;
            overflow: hidden;
        }
        /* Floating toolbar over map */
        .floating-toolbar {
            position: absolute;
            top: 10px; left: 10px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            padding: 8px 12px;
            background: rgba(255,255,255,.45);
            backdrop-filter: blur(6px);
            border-radius: 10px;
            box-shadow: 0 1px 8px rgba(0,0,0,.1);
            pointer-events: auto;
        }
        .floating-toolbar .map-search { width: 130px; }
        .floating-toolbar .btn { font-size: .78rem; padding: 4px 10px; white-space: nowrap; }
        .floating-toolbar select { font-size: .78rem; padding: 4px 8px; }
        /* Lift Leaflet popup & marker panes above the floating toolbar (z-index 1000) */
        .leaflet-pane.leaflet-popup-pane  { z-index: 1100 !important; }
        .leaflet-pane.leaflet-marker-pane { z-index: 1050 !important; }
        .floating-stat {
            display: none;
        }
        .floating-stat .num { font-size: 1rem; font-weight: 800; color: #1b5e20; }
        .floating-stat-inline { font-size:.82rem; font-weight:700; color:#dc3545; white-space:nowrap; margin-left:auto; }
        .floating-stat-inline .num { font-size:.95rem; font-weight:800; color:#1b5e20; }

        /* Stats bar */
        .stats-bar {
            display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
        }
        .stat-chip {
            background: rgba(255,255,255,.7); border-radius: 8px; padding: 8px 16px;
            border: 1px solid rgba(255,255,255,.6); backdrop-filter: blur(6px);
            font-size: 0.85rem; font-weight: 600; color: #0d47a1;
            display: flex; align-items: center; gap: 6px;
        }
        .stat-chip .num { font-size: 1.1rem; font-weight: 800; color: #1b5e20; }

        /* Search */
        .map-search { background: rgba(255,255,255,.7); border: 1px solid rgba(13,71,161,.15); border-radius: 8px; padding: 8px 14px; font-size: 0.88rem; color: #212121; width: 280px; }

        /* Side panel — semi-transparent */
        .side-panel {
            position: absolute; top: 0; right: 0; width: 340px; height: 100%;
            background: rgba(255,255,255,.65); backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-left: 1px solid rgba(13,71,161,.08); z-index: 1000;
            display: none; flex-direction: column; overflow: hidden;
            box-shadow: -2px 0 16px rgba(0,0,0,.08);
            transition: background .2s;
        }
        .side-panel:hover { background: rgba(255,255,255,.85); }
        .side-panel.open { display: flex; }
        .side-panel-header {
            padding: 10px 14px; background: rgba(13,71,161,.05);
            border-bottom: 1px solid rgba(13,71,161,.08);
            display: flex; justify-content: space-between; align-items: center;
        }
        .side-panel-header h6 { margin: 0; color: #0d47a1; font-weight: 700; font-size: 0.9rem; }
        .side-panel-body { padding: 12px 14px; overflow-y: auto; flex: 1; }
        .side-panel-body .form-label { font-weight: 600; color: #0d47a1; font-size: 0.8rem; margin-bottom: 3px; }
        .side-panel-body .form-control, .side-panel-body .form-select {
            background: rgba(255,255,255,.75); border: 1px solid rgba(13,71,161,.12);
            color: #212121; font-size: 0.85rem; border-radius: 6px;
        }

        /* Marker name label */
        .marker-label {
            font-size: 12px; font-weight: 700; color: #fff;
            background: rgba(0,0,0,.62);
            padding: 1px 5px; border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0,0,0,.5);
            text-shadow: none;
            white-space: nowrap; text-align: center;
            pointer-events: none; margin-top: 2px;
            max-width: 96px; overflow: hidden; text-overflow: ellipsis;
        }

        /* Color picker buttons */
        .color-picker { display: flex; gap: 6px; flex-wrap: wrap; }
        .color-btn {
            width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
            cursor: pointer; transition: .15s;
        }
        .color-btn:hover, .color-btn.active { border-color: #0d47a1; transform: scale(1.15); }

        /* Icon picker */
        .icon-picker { display: flex; gap: 6px; flex-wrap: wrap; }
        .icon-btn {
            width: 34px; height: 34px; border-radius: 6px; border: 2px solid #dee2e6;
            background: #f8f9fa; cursor: pointer; transition: .15s;
            display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #495057;
        }
        .icon-btn:hover { border-color: #0d47a1; background: #e3f0ff; color: #0d47a1; }
        .icon-btn.active { border-color: #0d47a1; background: #0d47a1; color: #fff; transform: scale(1.1); }

        /* Location list */
        .loc-list { max-height: 300px; overflow-y: auto; }
        .loc-item {
            padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.06);
            cursor: pointer; transition: background .15s; display: flex; align-items: center; gap: 10px;
        }
        .loc-item:hover { background: rgba(13,71,161,.06); }
        .loc-item .loc-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; flex-shrink: 0; }
        .loc-item .loc-info { flex: 1; min-width: 0; }
        .loc-item .loc-name { font-weight: 700; color: #212121; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .loc-item .loc-addr { font-size: 0.78rem; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* Toolbar */
        .map-toolbar {
            display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
        }

        /* Animated relay line */
        @keyframes dash-flow {
            to { stroke-dashoffset: -29; }
        }
        .relay-animated {
            animation: dash-flow 0.9s linear infinite;
        }

        /* Responsive */
        @media (max-width: 768px) {
            #mapContainer { height: 100vh; min-height: 350px; }
            .side-panel { width: 100%; }
            .floating-toolbar {
                top: auto !important; bottom: 72px !important;
                left: 8px !important; right: 8px !important;
                gap: 4px; padding: 6px 10px; flex-wrap: nowrap;
                justify-content: space-between;
            }
            .floating-toolbar .map-search { flex: 1; min-width: 0; width: auto !important; }
            .floating-toolbar .btn { font-size: .7rem; padding: 3px 6px; }
            .floating-stat { top: 10px; bottom: auto; left: 10px; }
            #filterServer { width: 100px !important; font-size: .72rem !important; flex-shrink: 0; }
            .floating-stat-inline { font-size: .72rem !important; white-space: nowrap; flex-shrink: 0; }
            .leaflet-control-container { z-index: 1500 !important; }
            .leaflet-control-layers-list { min-width: 130px; }
            .leaflet-control-layers label { display: flex; align-items: center; gap: 6px; padding: 6px 2px !important; font-size: 13px !important; cursor: pointer; }
            .leaflet-control-layers input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }
        }

        /* Relay arrow label */
        .relay-arrow { background: none !important; border: none !important; }
        /* Measure tooltip */
        .measure-tooltip { background: rgba(244,67,54,.85) !important; color: #fff !important; border: none !important; font-weight: 700; font-size: 11px !important; padding: 2px 6px !important; border-radius: 4px !important; }
        .measure-tooltip::before { border-top-color: rgba(244,67,54,.85) !important; }
        .measure-label { background: none !important; border: none !important; }
        /* Layer control styling - z-index above floating toolbar (1000) */
        .leaflet-control-container { z-index: 1500 !important; }
        .leaflet-control-layers { z-index: 1200 !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; }
        .leaflet-control-layers-toggle { width: 36px !important; height: 36px !important; }
        /* markercluster overrides */
        .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background:transparent !important; }
        .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background:transparent !important; }

        /* Transparent sidebar */
        #sidebar {
            background: rgba(15, 30, 70, 0.55) !important;
            box-shadow: 2px 0 16px rgba(0,0,0,0.2) !important;
            border-right: 1px solid rgba(255,255,255,0.08) !important;
        }
        #sidebar .sidebar-header {
            background: rgba(0,0,0,0.18) !important;
        }
        #sidebar .sidebar-menu-item > ul {
            background: rgba(0,0,0,0.15) !important;
        }
        .sidebar-toggle {
            background: rgba(15, 30, 70, 0.65) !important;
            border-top: 1px solid rgba(255,255,255,0.08) !important;
        }
        .sidebar-toggle:hover {
            background: rgba(15, 30, 70, 0.85) !important;
        }
        /* Map Tools FAB dropdown */
        .map-tools-dd { position:fixed; z-index:9999; background:#fff; border-radius:8px; box-shadow:0 3px 14px rgba(0,0,0,.28); min-width:195px; overflow:hidden; display:none; }
        .map-tools-dd .dd-hdr { padding:7px 14px; font-size:.72rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.05em; background:#f8f9fa; border-bottom:1px solid #eee; display:flex; align-items:center; gap:6px; }
        .map-tools-dd a { display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:.84rem; color:#333; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.05); cursor:pointer; transition:background .12s; }
        .map-tools-dd a:last-child { border-bottom:none; }
        .map-tools-dd a:hover { background:#f0f4ff; color:#1565c0; }