:root {
      --dc-dark: #101828;
      --dc-muted: #667085;
      --dc-accent: #0acbf2;
      --dc-accent-dark: #089fbc;
      --dc-warm: #ff7a59;
      --dc-shadow: 0 20px 50px rgba(16, 24, 40, 0.16);
      --dc-surface: rgba(255, 255, 255, 0.96);
    }

    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      color: var(--dc-dark);
      background: #f4f6fb;
    }

    .brand-accent {
      color: var(--dc-accent);
    }

    .btn-outline-brand {
      border-color: rgba(10, 203, 242, 0.34);
      color: var(--dc-accent-dark);
      background: #fff;
    }

    .btn-outline-brand:hover,
    .btn-outline-brand:focus {
      border-color: var(--dc-accent);
      background: var(--dc-accent);
      color: #fff;
    }

    .btn-warm {
      background: var(--dc-warm);
      border-color: var(--dc-warm);
      color: #fff;
      box-shadow: 0 16px 34px rgba(255, 122, 89, 0.24);
    }

    .btn-warm:hover,
    .btn-warm:focus {
      background: #e45d3b;
      border-color: #e45d3b;
      color: #fff;
    }

    .navbar-primary-menu {
      margin-left: 28px;
    }

    .navbar-primary-link {
      color: var(--dc-dark);
      text-decoration: none;
      padding: 10px 0;
      font-weight: 500;
    }

    .navbar-primary-link:hover,
    .navbar-primary-link:focus {
      color: var(--dc-dark);
      opacity: .75;
    }

    .navbar-primary-link.active {
      color: #0acbf2;
    }

    .nearby-shell {
      position: relative;
      min-height: calc(100vh - 77px);
      overflow: hidden;
    }

    .nearby-map {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .nearby-topbar {
      position: absolute;
      top: 96px;
      left: 18px;
      right: 18px;
      z-index: 20;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      pointer-events: none;
    }

    .nearby-card,
    .nearby-actions {
      pointer-events: auto;
      background: var(--dc-surface);
      border: 1px solid rgba(16, 24, 40, 0.08);
      box-shadow: var(--dc-shadow);
      backdrop-filter: blur(14px);
    }

    .nearby-card {
      border-radius: 28px;
      padding: 22px 24px;
      text-align: left;
      position: relative;
      top: 10px;
      left: 60px;
      right: 60px;
    }

    .nearby-card h1 {
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      margin-bottom: 10px;
    }

    .nearby-card p {
      color: var(--dc-muted);
      margin-bottom: 0;
    }

    .nearby-actions {
      border-radius: 22px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 220px;
      margin-left: 100px;
    }

    .nearby-floating-locate {
      position: absolute;
      right: 18px;
      bottom: 78px;
      z-index: 22;
      width: 64px;
      height: 64px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      font-size: 1.5rem;
    }

    .btn-geo {
      background: var(--dc-accent);
      border-color: var(--dc-accent);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 16px 34px rgba(10, 203, 242, 0.24);
    }

    .btn-geo:hover,
    .btn-geo:focus {
      background: var(--dc-accent-dark);
      border-color: var(--dc-accent-dark);
      color: #fff;
    }

    .nearby-status {
      position: absolute;
      left: 18px;
      bottom: 18px;
      z-index: 20;
      background: rgba(16, 24, 40, 0.82);
      color: #fff;
      border-radius: 999px;
      padding: 10px 16px;
      font-size: .92rem;
      box-shadow: 0 14px 30px rgba(16, 24, 40, 0.18);
      max-width: calc(100vw - 36px);
      pointer-events: none;
    }

    .nearby-popup-link {
      display: block;
      text-decoration: none;
      color: inherit;
    }

    .nearby-popup {
      min-width: 220px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .nearby-popup__title {
      font-weight: 800;
      font-size: 1rem;
      color: var(--dc-dark);
      margin-bottom: 4px;
    }

    .nearby-popup__meta {
      color: var(--dc-muted);
      font-size: .9rem;
      margin-bottom: 0;
    }

    .nearby-popup__logo {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      object-fit: cover;
      border: 2px solid rgba(16, 24, 40, 0.06);
      background: #fff;
    }

    .nearby-popup__content {
      min-width: 0;
    }

    .nearby-popup-link:hover .nearby-popup__title,
    .nearby-popup-link:focus .nearby-popup__title {
      color: var(--dc-accent-dark);
    }

    .nearby-business-marker {
      background: transparent;
      border: 0;
    }

    .nearby-business-marker__pin {
      position: relative;
      width: 28px;
      height: 28px;
      border-radius: 999px 999px 999px 0;
      transform: rotate(-45deg);
      background: var(--dc-warm);
      box-shadow: 0 10px 22px rgba(255, 122, 89, 0.34);
      border: 2px solid rgba(255,255,255,.94);
    }

    .nearby-business-marker__pin::after {
      content: "";
      position: absolute;
      inset: 7px;
      border-radius: 999px;
      background: rgba(255,255,255,.96);
    }

    .leaflet-popup-content-wrapper {
      border-radius: 18px;
      box-shadow: 0 16px 30px rgba(16, 24, 40, 0.12);
    }

    .leaflet-popup-content {
      margin: 16px 18px;
    }

    @media (max-width: 991.98px) {
      .navbar .btn {
        width: 100%;
      }

      .navbar-primary-menu {
        margin-left: 0;
      }

      .nearby-topbar {
        flex-direction: column;
      }

      .nearby-card,
      .nearby-actions {
        width: 100%;
        max-width: none;
      }

      .nearby-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: min(80%, 420px);
        align-self: center;
      }

      .nearby-actions {
        margin-left: 0;
      }

      .nearby-floating-locate {
        right: 16px;
        bottom: 84px;
      }
    }