body {
      background:
        radial-gradient(circle at 18% 12%, rgba(245, 158, 11, .12), transparent 28%),
        radial-gradient(circle at 82% 30%, rgba(34, 211, 238, .10), transparent 30%),
        #06080d;
    }
    .glass {
      background: rgba(15, 18, 26, .74);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(63, 63, 70, .48);
    }
    .materials-leaflet-map .leaflet-tile-pane { filter: saturate(.82) brightness(.62) contrast(1.12); }
    .materials-leaflet-map .leaflet-control-zoom a {
      background: rgba(9, 9, 11, .92);
      border-bottom-color: rgba(39, 39, 42, .95);
      color: #f4f4f5;
    }
    .materials-leaflet-map .leaflet-control-zoom a:hover { background: rgba(24, 24, 27, .96); color: #67e8f9; }
    .materials-map-pin {
      width: 26px;
      height: 30px;
      border-radius: 13px 13px 13px 4px;
      border: 2px solid var(--pin-color);
      background: #050505;
      box-shadow: 0 0 0 4px var(--pin-ring), 0 10px 22px rgba(0,0,0,.42);
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(-45deg);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .materials-map-pin::after {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--pin-color);
    }
    .materials-map-pin b {
      display: none;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      transform: rotate(45deg);
    }
    .materials-map-pin.is-weighbridge { --pin-color: #22d3ee !important; --pin-ring: rgba(34,211,238,.22) !important; }
    .materials-map-pin.is-platon { --pin-color: #fbbf24 !important; --pin-ring: rgba(251,191,36,.24) !important; }
    .materials-map-pin.is-weighbridge::after,
    .materials-map-pin.is-platon::after { display: none; }
    .materials-map-pin.is-weighbridge b,
    .materials-map-pin.is-platon b { display: block; }
    .materials-map-pin.is-active {
      transform: rotate(-45deg) scale(1.35);
      border-color: #fff;
      box-shadow: 0 0 0 8px var(--pin-ring), 0 0 0 2px #fff, 0 0 28px rgba(245,158,11,.75), 0 16px 28px rgba(0,0,0,.5);
    }

    .materials-map-pin.is-icon::after { display: none; }
    .materials-map-pin.is-icon svg {
      width: 15px;
      height: 15px;
      color: #fff;
      transform: rotate(45deg);
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
    }
    .materials-map-pin.is-truck { --pin-color: #67e8f9 !important; --pin-ring: rgba(34,211,238,.22) !important; }
    .materials-map-pin.is-concrete { --pin-color: #cbd5e1 !important; --pin-ring: rgba(203,213,225,.20) !important; }
    .materials-map-pin.is-wood { --pin-color: #a3e635 !important; --pin-ring: rgba(163,230,53,.20) !important; }
    .materials-map-pin.is-asphalt { --pin-color: #94a3b8 !important; --pin-ring: rgba(148,163,184,.20) !important; }
    .materials-map-pin.is-port { --pin-color: #38bdf8 !important; --pin-ring: rgba(56,189,248,.22) !important; }
    .materials-map-pin.is-plant { --pin-color: #f97316 !important; --pin-ring: rgba(249,115,22,.22) !important; }
    .materials-map-pin.is-warehouse { --pin-color: #a78bfa !important; --pin-ring: rgba(167,139,250,.20) !important; }
    .materials-map-pin.is-conveyor { --pin-color: #fb923c !important; --pin-ring: rgba(251,146,60,.20) !important; }
    .materials-cluster-pin {
      border-radius: 999px;
      border: 2px solid var(--pin-color);
      background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 32%), #050505;
      box-shadow: 0 0 0 10px var(--pin-ring), 0 0 32px var(--pin-ring), 0 18px 34px rgba(0,0,0,.5);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .materials-cluster-pin b {
      font-family: Outfit, Inter, sans-serif;
      font-size: 15px;
      font-weight: 900;
    }
    .materials-cluster-pin small {
      margin-top: 2px;
      font-size: 8px;
      color: #a1a1aa;
      font-weight: 800;
      text-transform: uppercase;
    }
    .materials-radius-center {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 4px solid #fff;
      background: #0f172a;
      box-shadow: 0 0 0 7px rgba(34,211,238,.22), 0 0 26px rgba(34,211,238,.72), 0 14px 26px rgba(0,0,0,.45);
      display: block;
      cursor: grab;
    }
    .leaflet-drag-target .materials-radius-center,
    .materials-radius-center:active {
      cursor: grabbing;
    }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 999px; }