:root {
      --app-height: 100dvh;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --screen-gutter: 6px;
      --bg: #eaf0ee;
      --panel: rgba(255, 255, 255, 0.9);
      --card: #ffffff;
      --card-2: #f5f9f7;
      --text: #13231f;
      --muted: #60706b;
      --border: rgba(16, 33, 28, 0.13);
      --shadow: 0 24px 52px rgba(16, 33, 28, 0.16);
      --accent: #0f766e;
      --accent-2: #14b8a6;
      --success: #22c55e;
      --warning: #f59e0b;
      --danger: #ef4444;
      --bg-top: #f7faf8;
      --bg-orb-1: rgba(58, 146, 127, 0.22);
      --bg-orb-2: rgba(247, 187, 113, 0.2);
      --surface: var(--panel);
      --surface-strong: var(--card);
      --ink: var(--text);
      --line: var(--border);
      --accent-soft: rgba(15, 118, 110, 0.14);
      --warm: var(--warning);
      --radius-xl: 26px;
      --radius-lg: 18px;
      --shadow-lg: var(--shadow);
      --shadow-md: 0 14px 32px rgba(16, 33, 28, 0.12);
      --sheet-peek: 112px;
      --sheet-mid: 52dvh;
      --sheet-full: 82dvh;
    }

    html[data-theme="dark"][data-palette="teal"] {
      --bg: #071324;
      --panel: rgba(8, 22, 43, 0.9);
      --card: #0f1f39;
      --card-2: #112542;
      --text: #eaf5ff;
      --muted: #8ca4c8;
      --border: rgba(115, 141, 184, 0.22);
      --shadow: 0 28px 56px rgba(1, 6, 16, 0.62);
      --accent: #22d3aa;
      --accent-2: #34ead3;
      --success: #34d399;
      --warning: #f59e0b;
      --danger: #fb7185;
      --bg-top: #08152a;
      --bg-orb-1: rgba(34, 211, 170, 0.18);
      --bg-orb-2: rgba(56, 189, 248, 0.16);
      --accent-soft: rgba(34, 211, 170, 0.14);
      --shadow-md: 0 12px 30px rgba(2, 9, 19, 0.52);
    }

    html[data-theme="dark"][data-palette="blue"] {
      --bg: #050f22;
      --panel: rgba(7, 19, 44, 0.9);
      --card: #0d1c3d;
      --card-2: #10254d;
      --text: #e9f2ff;
      --muted: #90a8cd;
      --border: rgba(128, 150, 199, 0.24);
      --shadow: 0 28px 56px rgba(2, 8, 22, 0.64);
      --accent: #38bdf8;
      --accent-2: #60a5fa;
      --success: #4ade80;
      --warning: #fbbf24;
      --danger: #fb7185;
      --bg-top: #07142e;
      --bg-orb-1: rgba(56, 189, 248, 0.2);
      --bg-orb-2: rgba(96, 165, 250, 0.16);
      --accent-soft: rgba(56, 189, 248, 0.16);
      --shadow-md: 0 12px 30px rgba(2, 10, 26, 0.54);
    }

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

    html,
    body {
      height: 100%;
      font-family: "Manrope", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 4% 10%, var(--bg-orb-1) 0, transparent 26%),
        radial-gradient(circle at 96% 0%, var(--bg-orb-2) 0, transparent 26%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 70%);
      overflow: hidden;
    }

    body {
      padding:
        calc(var(--screen-gutter) + var(--safe-top))
        calc(var(--screen-gutter) + var(--safe-right))
        calc(var(--screen-gutter) + var(--safe-bottom))
        calc(var(--screen-gutter) + var(--safe-left));
    }

    .app {
      width: 100%;
      height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - (var(--screen-gutter) * 2));
    }

    .map-stage {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
      background: var(--card-2);
    }

    .map-stage::before {
      content: "";
      position: absolute;
      width: 460px;
      height: 460px;
      border-radius: 50%;
      right: -140px;
      top: -180px;
      background: radial-gradient(circle, rgba(15, 118, 110, 0.28), transparent 70%);
      z-index: 2;
      pointer-events: none;
    }

    #map {
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .top-left-stack {
      position: absolute;
      left: 16px;
      top: 16px;
      z-index: 700;
      display: grid;
      gap: 10px;
    }

    .brand-shell {
      position: relative;
      width: auto;
      min-width: 60px;
      max-width: none;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid var(--line);
      border-radius: 16px;
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow-md);
      padding: 8px 9px;
      display: block;
      color: var(--ink);
      text-decoration: none;
      transition: transform 0.14s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .brand-shell:hover {
      text-decoration: none;
      transform: translateY(-1px);
      background: rgba(255, 255, 255, 0.92);
      border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
      box-shadow: 0 16px 34px rgba(16, 33, 28, 0.16);
    }

    .top-right-search {
      position: absolute;
      right: 14px;
      top: 14px;
      width: min(460px, calc(100% - 28px));
      z-index: 1000;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid var(--line);
      border-radius: 16px;
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow-md);
      padding: 8px 58px 8px 10px;
      isolation: isolate;
      overflow: visible;
    }

    .top-right-search.mobile-search-empty {
      min-height: 112px;
    }

    .top-right-search.mobile-search-hint-active {
      border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
        0 18px 36px color-mix(in srgb, var(--accent) 20%, transparent);
      transform-origin: top right;
      animation: mobileSearchPulse 1.8s ease-in-out infinite;
    }

    @keyframes mobileSearchPulse {
      0%,
      100% {
        transform: translateZ(0) scale(1);
        opacity: 1;
      }

      50% {
        transform: translateZ(0) scale(1.012);
        opacity: 0.96;
      }
    }

    .map-onboarding {
      position: absolute;
      inset: 0;
      z-index: 1450;
      pointer-events: none;
    }

    .map-onboarding-backdrop {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.08), transparent 18%),
        linear-gradient(180deg, rgba(234, 240, 238, 0.06), rgba(19, 35, 31, 0.18));
      opacity: 0.92;
    }

    .map-onboarding-card {
      position: absolute;
      left: 38%;
      top: clamp(108px, 18vh, 164px);
      width: min(440px, calc(100% - 32px));
      transform: translateX(-50%);
      padding: 20px 20px 18px;
      border-radius: 22px;
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      box-shadow: 0 22px 44px rgba(16, 33, 28, 0.18);
      display: grid;
      gap: 14px;
      pointer-events: auto;
    }

    .map-onboarding-kicker {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 12%, #ffffff 88%);
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.32px;
      text-transform: uppercase;
    }

    .map-onboarding-title {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(22px, 3vw, 30px);
      line-height: 1.02;
      letter-spacing: -0.02em;
      color: var(--ink);
      max-width: 12ch;
    }

    .map-onboarding-body {
      display: grid;
      gap: 10px;
    }

    .map-onboarding-copy {
      max-width: 38ch;
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
    }

    .map-onboarding-steps {
      display: grid;
      gap: 8px;
    }

    .map-onboarding-step {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(245, 249, 247, 0.86));
      color: var(--ink);
      font-size: 14px;
      line-height: 1.45;
      font-weight: 700;
    }

    .map-onboarding-step-index {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, #14b8a6, #0f766e);
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
      flex: 0 0 auto;
    }

    .map-onboarding-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .map-onboarding-note {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
      font-weight: 700;
      max-width: 34ch;
    }

    .map-demo-click {
      position: absolute;
      left: 52%;
      top: 58%;
      width: 180px;
      height: 180px;
      transform: translate(-50%, -50%);
      display: grid;
      place-items: center;
      pointer-events: none;
    }

    .map-demo-ring {
      position: absolute;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 2px solid rgba(15, 118, 110, 0.28);
      animation: mapDemoRing 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
      opacity: 0;
    }

    .map-demo-ring.ring-2 {
      animation-delay: 0.45s;
    }

    .map-demo-ring.ring-3 {
      animation-delay: 0.9s;
    }

    .map-demo-dot {
      position: relative;
      z-index: 2;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(145deg, #14b8a6, #0f766e);
      border: 3px solid rgba(255, 255, 255, 0.96);
      box-shadow: 0 12px 26px rgba(15, 118, 110, 0.26);
    }

    .map-demo-cursor {
      position: absolute;
      right: 34px;
      bottom: 38px;
      width: 64px;
      height: 64px;
      filter: drop-shadow(0 10px 18px rgba(16, 33, 28, 0.18));
      animation: mapDemoCursor 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
      transform-origin: 68% 24%;
    }

    .map-demo-cursor svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: rgba(255, 255, 255, 0.98);
      stroke: rgba(16, 33, 28, 0.48);
      stroke-width: 1.8;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .map-demo-label {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.68);
      background: rgba(255, 255, 255, 0.9);
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.01em;
      line-height: 1.25;
      text-align: center;
      max-width: min(260px, calc(100vw - 40px));
      white-space: nowrap;
      box-shadow: 0 12px 26px rgba(16, 33, 28, 0.12);
    }

    @keyframes mapDemoRing {
      0% {
        transform: scale(0.35);
        opacity: 0;
      }
      18% {
        opacity: 0.92;
      }
      100% {
        transform: scale(3.4);
        opacity: 0;
      }
    }

    @keyframes mapDemoCursor {
      0%, 18% {
        transform: translate(18px, -24px) scale(1);
      }
      26%, 34% {
        transform: translate(0, 0) scale(0.92);
      }
      46%, 100% {
        transform: translate(18px, -24px) scale(1);
      }
    }

    .theme-fab {
      position: absolute;
      right: 16px;
      top: 16px;
      z-index: 1400;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.9);
      box-shadow: var(--shadow-md);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: transform 0.12s ease, filter 0.2s ease, border-color 0.2s ease;
    }

    .theme-fab:hover {
      filter: brightness(1.02);
    }

    .theme-fab:active {
      transform: translateY(1px) scale(0.99);
    }

    .theme-fab svg {
      width: 20px;
      height: 20px;
      position: absolute;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .theme-fab .icon-sun {
      opacity: 0;
      transform: scale(0.86);
    }

    .theme-fab .icon-moon {
      opacity: 1;
      transform: scale(1);
    }

    html[data-theme="dark"] .theme-fab .icon-sun {
      opacity: 1;
      transform: scale(1);
    }

    html[data-theme="dark"] .theme-fab .icon-moon {
      opacity: 0;
      transform: scale(0.86);
    }

    .brand-row {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 0;
    }

    .brand-logo {
      width: 52px;
      height: 64px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 8px 15px rgba(15, 118, 110, 0.22));
    }

    .brand-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
      max-width: 210px;
    }

    .brand-kicker {
      font-size: 11px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: 0.2px;
      text-transform: uppercase;
      color: var(--accent);
    }

    .brand-cta-text {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 800;
      color: var(--ink);
    }

    .brand-cta-arrow {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 18px;
      font-weight: 800;
      flex: 0 0 auto;
    }

    .brand-name-wrap {
      display: grid;
      gap: 1px;
    }

    .brand-name {
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      letter-spacing: 0.2px;
      font-size: 16px;
      line-height: 1.2;
    }

    .brand-tag {
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .brand-search-slot {
      margin-top: 0;
      position: relative;
      z-index: 2;
      width: 100%;
      min-width: 0;
      overflow: visible;
      pointer-events: auto;
    }

    .brand-search-slot .leaflet-control-geocoder,
    .brand-geocoder {
      display: flex;
      align-items: center;
      width: 100%;
      min-width: 0;
      margin: 0;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: none;
      overflow: visible;
      position: relative;
      touch-action: manipulation;
    }

    .brand-search-slot .leaflet-control-geocoder-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      margin-right: 4px;
      border-radius: 10px;
      border: 0;
      background-color: transparent;
      opacity: 0.84;
      cursor: pointer;
      transition: background-color 0.16s ease, opacity 0.16s ease;
    }

    .brand-search-slot .leaflet-control-geocoder-icon:hover {
      opacity: 1;
      background: color-mix(in srgb, var(--accent) 8%, transparent);
    }

    .brand-search-slot .leaflet-control-geocoder-icon:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent) 40%, white 60%);
      outline-offset: 1px;
    }

    .brand-search-slot .leaflet-control-geocoder-form {
      display: block !important;
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
    }

    .brand-search-slot .leaflet-control-geocoder-form::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 50%;
      width: 18px;
      height: 18px;
      transform: translateY(-50%);
      background: color-mix(in srgb, var(--accent) 80%, var(--text) 20%);
      pointer-events: none;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.75' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M16.2 16.2L21 21' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.75' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M16.2 16.2L21 21' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .brand-search-slot .leaflet-control-geocoder-form input {
      width: 100%;
      height: 40px;
      border: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      padding: 0 12px 0 42px;
      font-family: "Manrope", sans-serif;
      -webkit-appearance: none;
      appearance: none;
      touch-action: manipulation;
    }

    .brand-search-slot .leaflet-control-geocoder-form input::placeholder {
      color: var(--muted);
      opacity: 0.92;
    }

    .brand-search-slot .leaflet-control-geocoder-form-no-error {
      display: none;
    }

    .brand-search-slot .leaflet-control-geocoder-error {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 6px);
      margin: 0;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow-md);
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      z-index: 1011;
    }

    .mobile-search-helper {
      margin-top: 8px;
      padding: 1px 4px 0;
      font-size: 11px;
      line-height: 1.5;
      color: var(--muted);
      font-weight: 700;
    }

    .mobile-search-helper[hidden] {
      display: none !important;
    }

    .mobile-search-quick-picks {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-height: 32px;
    }

    .mobile-search-quick-picks[hidden] {
      display: none !important;
    }

    .mobile-search-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, #ffffff 90%), rgba(255, 255, 255, 0.98));
      color: color-mix(in srgb, var(--accent) 76%, var(--ink) 24%);
      font-family: "Manrope", sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow:
        0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
      transition: transform 0.14s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .mobile-search-chip:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, #ffffff 84%), #ffffff);
      box-shadow:
        0 12px 24px color-mix(in srgb, var(--accent) 26%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .mobile-search-chip:active {
      transform: translateY(0);
      box-shadow:
        0 6px 14px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .mobile-search-chip:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent) 36%, white 64%);
      outline-offset: 2px;
    }

    .brand-search-slot .leaflet-control-geocoder-alternatives {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 6px);
      width: 100% !important;
      min-width: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow-md);
      max-height: 220px;
      overflow-y: auto;
      z-index: 1010;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .geocoder-overlay-list {
      position: fixed;
      left: 0;
      top: 0;
      width: 0;
      min-width: 0;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow-md);
      max-height: 220px;
      overflow-y: auto;
      z-index: 4010;
      pointer-events: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .brand-search-slot .leaflet-control-geocoder-alternatives li,
    .geocoder-overlay-list li {
      white-space: normal;
      line-height: 1.35;
      padding: 8px 10px;
      touch-action: manipulation;
      list-style: none;
    }

    .brand-search-slot .leaflet-control-geocoder-alternatives li a,
    .geocoder-overlay-list li a {
      color: var(--ink);
      touch-action: manipulation;
    }

    .brand-search-slot .leaflet-control-geocoder-alternatives-minimized {
      display: none;
    }

    .brand-search-slot .leaflet-control-geocoder-selected,
    .brand-search-slot .leaflet-control-geocoder-alternatives li:hover,
    .geocoder-overlay-list li:hover {
      background: color-mix(in srgb, var(--accent) 10%, var(--card) 90%);
    }

    .brand-search-slot .leaflet-control-geocoder-icon::before {
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      background: color-mix(in srgb, var(--accent) 80%, var(--text) 20%);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.75' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M16.2 16.2L21 21' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.75' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M16.2 16.2L21 21' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .brand-search-slot .leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon::before {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
      border-top-color: transparent;
      background: none;
      -webkit-mask: none;
      mask: none;
      animation: geocoderSpin 0.7s linear infinite;
    }

    @keyframes geocoderSpin {
      to {
        transform: rotate(360deg);
      }
    }

    .brand-shell h1 {
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      font-size: clamp(20px, 2.8vw, 34px);
      line-height: 1.1;
      margin-bottom: 6px;
      max-width: 20ch;
    }

    .brand-shell p {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .brand-shell:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--accent-2) 44%, transparent);
      outline-offset: 2px;
    }

    .map-actions {
      position: absolute;
      left: 16px;
      bottom: 16px;
      z-index: 700;
      width: auto;
      max-width: min(360px, calc(100% - 32px));
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid var(--line);
      border-radius: 18px;
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow-md);
      padding: 12px;
      display: grid;
      gap: 9px;
    }

    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
    }

    .chip {
      border: 1px dashed rgba(16, 33, 28, 0.28);
      border-radius: 12px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.7);
    }

    .hint {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }

    .loading {
      display: none;
      align-items: center;
      gap: 9px;
      border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line) 52%);
      border-radius: 14px;
      padding: 10px 12px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, #ffffff 84%), #ffffff);
      backdrop-filter: blur(8px);
      box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent);
      font-size: 13px;
      color: var(--ink);
      font-weight: 800;
      width: 100%;
      max-width: 100%;
      position: relative;
      overflow: hidden;
    }

    .loading::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
    }

    .loading.show {
      display: flex;
      animation: loadingPop 240ms cubic-bezier(0.22, 1, 0.36, 1), loadingGlow 1.8s ease-in-out infinite;
    }

    #loading-text {
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--accent);
      animation: bounce 1.1s ease-in-out infinite;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    }

    .dot:nth-child(2) {
      animation-delay: 0.18s;
    }

    .dot:nth-child(3) {
      animation-delay: 0.36s;
    }

    @keyframes bounce {
      0%, 100% { opacity: 0.35; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-4px); }
    }

    @keyframes loadingPop {
      0% {
        opacity: 0;
        transform: translateY(4px) scale(0.98);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes loadingGlow {
      0%, 100% {
        box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent);
      }
      50% {
        box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 36%, transparent);
      }
    }

    .status {
      display: none;
      border-radius: 12px;
      border: 1px solid var(--line);
      padding: 9px 10px;
      font-size: 12px;
      line-height: 1.45;
      background: var(--surface-strong);
    }

    .status.show {
      display: block;
    }

    .status.info {
      background: #effaf8;
      border-color: rgba(15, 118, 110, 0.34);
      color: #145d56;
    }

    .status.error {
      background: #fef2f2;
      border-color: rgba(185, 28, 28, 0.36);
      color: #8f1a1a;
    }

    .compare-toolbar {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 8px;
    }

    .results-compare-toolbar {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .results-compare-toolbar #compare-toggle {
      order: 3;
    }

    .compare-toolbar .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 38px;
      line-height: 1.2;
      text-align: center;
      padding: 8px 10px;
      font-size: 12px;
    }

    .results-compare-toolbar .btn {
      width: auto;
      min-width: 118px;
      white-space: nowrap;
    }

    .results-compare-toolbar #compare-clear {
      order: 2;
    }

    .results-compare-toolbar #compare-exit {
      order: 1;
    }

    .compare-btn.active {
      border-color: rgba(15, 118, 110, 0.5);
      background: #e7f7f4;
      color: #0f5d57;
    }

    .compare-step {
      grid-column: 1 / -1;
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.35;
      text-align: left;
    }

    .results-compare-toolbar .compare-step {
      order: 4;
      flex: 1 1 100%;
      text-align: right;
      margin-top: 2px;
    }

    .advanced-toggle-icon {
      font-size: 13px;
      line-height: 1;
      color: var(--muted);
    }

    .map-links-advanced {
      margin-top: 6px;
    }

    .advanced-panel {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #ffffff;
      padding: 8px 10px;
      display: grid;
      gap: 6px;
    }

    .advanced-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      user-select: none;
    }

    .advanced-panel .link-chip {
      width: fit-content;
    }

    .advanced-panel .theme-controls {
      width: 100%;
      max-width: none;
      margin-top: 4px;
    }

    .advanced-check input {
      accent-color: var(--accent);
      cursor: pointer;
    }

    .advanced-check input:disabled {
      cursor: not-allowed;
    }

    .advanced-note {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }

    
    .results {
      display: none;
      position: absolute;
      right: 16px;
      top: 132px;
      bottom: 16px;
      width: min(430px, calc(100% - 32px));
      z-index: 720;
      overflow: hidden;
      display: none;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
      padding: 10px;
    }

    .results.show {
      display: grid;
    }

    .sheet-head {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: var(--card);
      padding: 8px 10px;
      min-height: 44px;
      box-shadow: var(--shadow-md);
      touch-action: none;
    }

    .sheet-grip {
      width: 38px;
      height: 5px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--muted) 42%, transparent);
      flex: 0 0 auto;
    }

    .sheet-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      flex: 1 1 auto;
      min-width: 0;
    }

    .sheet-toggle {
      border: 1px solid var(--line);
      background: var(--card-2);
      color: var(--ink);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .results-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid var(--line);
      border-radius: 18px;
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow-md);
      padding: 10px 12px;
    }

    .results-title {
      display: grid;
      gap: 2px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .results-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      color: var(--muted);
    }

    .results-place {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 260px;
    }

    .results-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      background: rgba(255, 255, 255, 0.68);
      border: 1px solid var(--line);
      border-radius: 18px;
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow-md);
      padding: 10px;
    }

    .nav-chip {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--ink);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.12s ease, filter 0.2s ease;
    }

    .nav-chip:hover {
      filter: brightness(1.02);
    }

    .nav-chip:active {
      transform: translateY(1px) scale(0.995);
    }

    .nav-chip.active {
      background: var(--accent-soft);
      border-color: rgba(15, 118, 110, 0.45);
      color: #0f5d57;
    }

    .nav-chip[aria-disabled="true"] {
      opacity: 0.58;
      cursor: not-allowed;
      background: #f3f6f5;
    }

    .nav-chip[aria-disabled="true"]:hover {
      filter: none;
    }

    .results-scroll {
      min-height: 0;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 10px;
      overflow: hidden;
    }

    .results-body {
      overflow-y: auto;
      padding-right: 2px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .results-body::-webkit-scrollbar,
    .results-scroll::-webkit-scrollbar {
      width: 9px;
    }

    .results-body::-webkit-scrollbar-thumb,
    .results-scroll::-webkit-scrollbar-thumb {
      background: rgba(16, 33, 28, 0.24);
      border-radius: 999px;
    }

.panel {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(4px);
      padding: 14px;
    }

    .score-head {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 10px;
      align-items: center;
    }

    .score-title {
      font-family: "Space Grotesk", sans-serif;
      font-size: 17px;
      margin-bottom: 3px;
    }

    .score-sub {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .score-box {
      border: 1px solid var(--line);
      background: #ffffff;
      border-radius: 15px;
      padding: 10px 12px;
      position: relative;
      display: grid;
      gap: 8px;
    }

    .score-radar-shell {
      position: relative;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f9fcfb;
      padding: 6px;
      min-height: 212px;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    #score-radar {
      width: 100%;
      height: 198px;
      display: block;
    }

    .score-radar-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: grid;
      justify-items: center;
      gap: 0;
      pointer-events: none;
    }

    .score-radar-total-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.35px;
      text-transform: uppercase;
      color: var(--muted);
    }

    .score-radar-total {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(28px, 4.2vw, 42px);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.8px;
      color: var(--ink);
    }

    .score-box-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }

    .score-box-meta .score-band,
    .score-box-meta .confidence-badge {
      margin-top: 0;
    }

    .score-number {
      font-size: clamp(34px, 7vw, 58px);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -1.3px;
      font-family: "Space Grotesk", sans-serif;
    }

    .score-band {
      display: inline-flex;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 800;
      margin-top: 4px;
    }

    .confidence-badge {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 800;
      background: #f7faf8;
      color: var(--ink);
      cursor: pointer;
    }

    .confidence-badge.high {
      color: #155e3f;
      border-color: rgba(21, 128, 61, 0.4);
      background: rgba(21, 128, 61, 0.12);
    }

    .confidence-badge.medium {
      color: #8a4c08;
      border-color: rgba(180, 83, 9, 0.42);
      background: rgba(180, 83, 9, 0.12);
    }

    .confidence-badge.low {
      color: #8f1a1a;
      border-color: rgba(185, 28, 28, 0.4);
      background: rgba(185, 28, 28, 0.12);
    }

    .confidence-tooltip {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 8px 10px;
      font-size: 11px;
      line-height: 1.45;
      text-align: left;
      color: var(--muted);
    }

    .confidence-mini-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
      margin-bottom: 8px;
    }

    .mini-kpi {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 8px 9px;
    }

    .mini-kpi-k {
      font-size: 11px;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 800;
      margin-bottom: 4px;
    }

    .mini-kpi-v {
      font-size: 14px;
      font-weight: 800;
    }

    .high {
      color: var(--success);
      background: rgba(21, 128, 61, 0.12);
    }

    .medium {
      color: var(--warm);
      background: rgba(180, 83, 9, 0.12);
    }

    .low {
      color: var(--danger);
      background: rgba(185, 28, 28, 0.12);
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 9px;
      margin-top: 10px;
    }

    .metric {
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 7px;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .metric:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(16, 33, 28, 0.12);
    }

    .metric-button {
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-family: inherit;
    }

    .metric-button.active {
      border-color: rgba(15, 118, 110, 0.5);
      box-shadow: 0 10px 22px rgba(15, 118, 110, 0.12);
      background: #f8fffd;
    }

    .metric-button[disabled] {
      cursor: not-allowed;
      opacity: 0.72;
    }

    .metric-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.2px;
    }

    .metric-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .metric-caret {
      color: var(--muted);
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .metric-button[data-expandable="true"] .metric-label {
      color: var(--text);
    }

    .metric-button.active .metric-caret {
      transform: rotate(180deg);
      color: var(--accent);
    }

    .metric-value {
      font-size: 18px;
      font-weight: 800;
      width: fit-content;
      border-radius: 10px;
      padding: 4px 8px;
      background: rgba(16, 33, 28, 0.05);
    }

    .metric-value.missing {
      background: rgba(185, 28, 28, 0.1);
      color: #8f1a1a;
    }

    .metric-value.inactive {
      background: rgba(15, 118, 110, 0.1);
      color: #0f5d57;
    }

    .trust-block {
      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fff;
      padding: 10px;
    }

    .breakdown-list {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .breakdown-item {
      border: 1px solid #e4ece8;
      border-radius: 11px;
      padding: 8px;
      background: #f9fcfb;
      display: grid;
      gap: 6px;
    }

    .breakdown-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      list-style: none;
    }

    .breakdown-head::-webkit-details-marker {
      display: none;
    }

    .breakdown-score {
      font-family: "Space Grotesk", sans-serif;
      font-size: 15px;
      font-weight: 700;
    }

    .mini-bar {
      width: 100%;
      height: 7px;
      border-radius: 999px;
      background: #e7efec;
      overflow: hidden;
    }

    .mini-bar-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0f766e, #34d399);
    }

    .breakdown-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .mini-chip {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 700;
      background: #fff;
      color: var(--muted);
    }

    .mini-chip.ok {
      color: #155e3f;
      border-color: rgba(21, 128, 61, 0.3);
      background: rgba(21, 128, 61, 0.08);
    }

    .mini-chip.old {
      color: #8a4c08;
      border-color: rgba(180, 83, 9, 0.34);
      background: rgba(180, 83, 9, 0.08);
    }

    .mini-chip.missing {
      color: #8f1a1a;
      border-color: rgba(185, 28, 28, 0.34);
      background: rgba(185, 28, 28, 0.08);
    }

    .mini-chip.high {
      color: #14532d;
      border-color: rgba(21, 128, 61, 0.36);
      background: rgba(21, 128, 61, 0.09);
    }

    .mini-chip.medium {
      color: #92400e;
      border-color: rgba(180, 83, 9, 0.36);
      background: rgba(180, 83, 9, 0.09);
    }

    .mini-chip.low {
      color: #334155;
      border-color: rgba(51, 65, 85, 0.28);
      background: rgba(51, 65, 85, 0.08);
    }

    .submetric-list {
      display: grid;
      gap: 4px;
      margin-top: 2px;
    }

    .submetric-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      color: var(--muted);
      padding-top: 2px;
      border-top: 1px dashed #dde7e2;
    }

    .drivers-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }

    .driver-head {
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .driver-head.positive {
      color: #155e3f;
    }

    .driver-head.negative {
      color: #8f1a1a;
    }

    .driver-list {
      display: grid;
      gap: 6px;
    }

    .driver-item {
      border: 1px solid #e4ece8;
      border-radius: 10px;
      padding: 7px 8px;
      background: #f9fcfb;
      font-size: 11px;
      line-height: 1.45;
    }

    .driver-item-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 2px;
    }

    .driver-item-evidence {
      color: var(--muted);
      margin-bottom: 3px;
    }

    .driver-empty,
    .breakdown-empty {
      font-size: 12px;
      color: var(--muted);
      border: 1px dashed var(--line);
      border-radius: 10px;
      padding: 8px 9px;
      background: #fbfdfc;
    }

    .recommendation-list {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }

    .recommendation-item {
      border: 1px solid #e4ece8;
      border-radius: 10px;
      padding: 7px 8px;
      background: #f9fcfb;
      font-size: 12px;
      color: var(--ink);
      line-height: 1.45;
    }

    .map-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }

    .map-links-inline {
      display: flex;
    }

    .map-links-floating {
      display: none;
      position: absolute;
      left: 16px;
      bottom: var(--floating-links-bottom, 16px);
      z-index: 708;
      pointer-events: auto;
      transition: bottom 220ms ease;
    }

    .link-chip {
      text-decoration: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 700;
      color: var(--ink);
      background: #fff;
    }

    .link-chip:hover {
      filter: brightness(1.02);
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-top: 8px;
    }

    .tile {
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fff;
      padding: 10px;
    }

    .tile-k {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .tile-v {
      font-size: 20px;
      font-weight: 800;
      font-family: "Space Grotesk", sans-serif;
    }

    .muted {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      margin-top: 7px;
    }

    .landmark-tabs {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .landmark-tab-btn {
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--ink);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .landmark-tab-btn.active {
      background: var(--accent-soft);
      border-color: rgba(15, 118, 110, 0.45);
      color: #0f5d57;
    }

    .landmark-pane {
      display: none;
    }

    .landmark-pane.active {
      display: block;
    }

    .landmark-list {
      display: grid;
      gap: 7px;
      margin-top: 8px;
    }

    .landmark-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 9px 10px;
    }

    .landmark-main {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
    }

    .landmark-meta {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .landmark-distance {
      font-size: 16px;
      font-weight: 800;
      font-family: "Space Grotesk", sans-serif;
      white-space: nowrap;
    }

    .landmark-groups {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .landmark-group {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 9px 10px;
    }

    .landmark-group-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .hidden {
      display: none !important;
    }

    .report-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
      margin-bottom: 8px;
    }

    .btn {
      border: 0;
      cursor: pointer;
      font-weight: 700;
      border-radius: 11px;
      padding: 10px 12px;
      transition: transform 0.12s ease, filter 0.2s ease;
    }

    .btn:active {
      transform: translateY(1px) scale(0.995);
    }

    .btn:focus-visible,
    .metric-button:focus-visible,
    .landmark-tab-btn:focus-visible,
    .nav-chip:focus-visible {
      outline: 3px solid rgba(15, 118, 110, 0.35);
      outline-offset: 2px;
    }

    .btn-primary {
      background: linear-gradient(145deg, var(--accent), #0d9488);
      color: white;
      box-shadow: 0 8px 20px rgba(13, 148, 136, 0.24);
    }

    .btn-primary:hover {
      filter: brightness(1.04);
    }

    .btn-secondary {
      background: #ffffff;
      color: var(--ink);
      border: 1px solid var(--line);
    }

    .report-box {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 12px;
      min-height: 120px;
      max-height: 460px;
      overflow: auto;
      white-space: pre-wrap;
      line-height: 1.62;
      font-size: 14px;
    }

    .report-box.typing {
      white-space: pre-wrap;
    }

    .report-history {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .report-history-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .report-history-head .score-sub {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
    }

    .report-history-list {
      display: grid;
      gap: 7px;
      max-height: 280px;
      overflow: auto;
      padding-right: 2px;
    }

    .report-history-empty {
      border: 1px dashed var(--line);
      border-radius: 10px;
      background: #fbfdfc;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      padding: 9px 10px;
    }

    .report-history-item {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fdfefe;
      padding: 8px 9px;
      display: grid;
      gap: 6px;
    }

    .report-history-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .report-history-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--ink);
    }

    .report-history-time {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }

    .report-history-meta {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }

    .report-meta-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      padding: 4px 8px;
      line-height: 1;
    }

    .report-history-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .history-action-btn {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      border-radius: 9px;
      padding: 6px 9px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .history-action-btn:hover {
      filter: brightness(1.02);
    }

    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 8px;
      margin-bottom: 10px;
    }

    .compare-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #ffffff;
      padding: 10px;
      display: grid;
      gap: 7px;
    }

    .compare-card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
    }

    .compare-card-title {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .compare-card-coord {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .compare-card-total {
      font-family: "Space Grotesk", sans-serif;
      font-size: 26px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .compare-score-list {
      display: grid;
      gap: 6px;
    }

    .compare-score-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      border-bottom: 1px solid #eef3f0;
      padding-bottom: 5px;
    }

    .compare-score-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .compare-score-value {
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 12px;
      background: rgba(16, 33, 28, 0.06);
      color: var(--ink);
    }

    .compare-diff {
      border: 1px dashed var(--line);
      border-radius: 12px;
      background: #ffffff;
      padding: 10px;
      display: grid;
      gap: 7px;
      margin-bottom: 8px;
    }

    .compare-diff-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }

    .compare-diff-value {
      font-family: "Space Grotesk", sans-serif;
      font-size: 15px;
      color: var(--ink);
    }

    .compare-diff-value.positive {
      color: #0f766e;
    }

    .compare-diff-value.negative {
      color: #b45309;
    }

    .radar-wrap {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #ffffff;
      padding: 10px;
      margin-bottom: 10px;
    }

    #compare-radar {
      width: 100%;
      height: 280px;
      display: block;
    }

    .compare-legend {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .legend-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      background: #fff;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex: 0 0 auto;
    }

    .legend-dot.loc1 {
      background: rgba(15, 118, 110, 0.8);
    }

    .legend-dot.loc2 {
      background: rgba(185, 83, 9, 0.8);
    }

    .compare-pdf-frame {
      width: 100%;
      min-height: 420px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .trace-summary {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 12px;
      margin-top: 8px;
      margin-bottom: 8px;
      font-size: 13px;
      line-height: 1.55;
      display: grid;
      gap: 8px;
    }

    .trace-group {
      border: 1px solid #dbe5e0;
      border-radius: 10px;
      padding: 8px;
      background: #f8fbfa;
    }

    .trace-group-title {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      color: #285b51;
      margin-bottom: 4px;
    }

    .trace-json {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #101a17;
      color: #d4efe5;
      padding: 10px;
      min-height: 160px;
      max-height: 420px;
      overflow: auto;
      white-space: pre;
      font-size: 12px;
      line-height: 1.45;
      font-family: "JetBrains Mono", "Fira Code", monospace;
    }

    .report-skeleton {
      display: grid;
      gap: 8px;
      padding: 2px 0;
    }

    .report-skeleton span {
      display: block;
      height: 10px;
      border-radius: 8px;
      background: linear-gradient(90deg, #e6eeea 0%, #d9e3de 45%, #e6eeea 100%);
      background-size: 220% 100%;
      animation: skeletonShimmer 1.15s linear infinite;
    }

    .report-skeleton span:nth-child(1) { width: 92%; }
    .report-skeleton span:nth-child(2) { width: 97%; }
    .report-skeleton span:nth-child(3) { width: 88%; }
    .report-skeleton span:nth-child(4) { width: 95%; }
    .report-skeleton span:nth-child(5) { width: 82%; }
    .report-skeleton span:nth-child(6) { width: 90%; }
    .report-skeleton span:nth-child(7) { width: 76%; }

    @keyframes skeletonShimmer {
      0% { background-position: 220% 0; }
      100% { background-position: -220% 0; }
    }

    .custom-drop-marker {
      background: transparent;
      border: 0;
    }

    .marker-wrap {
      position: relative;
      width: 34px;
      height: 34px;
    }

    .marker-pin {
      position: absolute;
      left: 50%;
      top: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transform: translateX(-50%);
      background: linear-gradient(145deg, #14b8a6, #0f766e);
      border: 2px solid rgba(255, 255, 255, 0.95);
      box-shadow: 0 6px 18px rgba(15, 118, 110, 0.45);
    }

    .marker-pin::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -7px;
      width: 10px;
      height: 10px;
      transform: translateX(-50%) rotate(45deg);
      background: inherit;
      border-right: 2px solid rgba(255, 255, 255, 0.95);
      border-bottom: 2px solid rgba(255, 255, 255, 0.95);
      border-radius: 0 0 2px 0;
      box-sizing: border-box;
    }

    .marker-ripple {
      position: absolute;
      left: 50%;
      bottom: 2px;
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: 2px solid rgba(15, 118, 110, 0.35);
      transform: translate(-50%, 50%) scale(0.2);
      opacity: 0;
      pointer-events: none;
    }

    .marker-enter .marker-pin {
      animation: markerDrop 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .marker-enter .marker-ripple {
      animation: markerRipple 1s ease-out 120ms 2;
    }

    @keyframes markerDrop {
      0% {
        transform: translate(-50%, -26px) scale(0.72);
        opacity: 0;
      }
      65% {
        transform: translate(-50%, 1px) scale(1.03);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, 0) scale(1);
      }
    }

    @keyframes markerRipple {
      0% {
        transform: translate(-50%, 50%) scale(0.2);
        opacity: 0.8;
      }
      100% {
        transform: translate(-50%, 50%) scale(2.9);
        opacity: 0;
      }
    }

    .fine {
      font-size: 12px;
      color: #73837f;
      margin-bottom: 6px;
    }

    .leaflet-control-geocoder {
      border-radius: 10px;
      box-shadow: 0 8px 20px rgba(16, 33, 28, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.65);
      overflow: hidden;
    }

    .leaflet-control-geocoder-form input {
      font-family: "Manrope", sans-serif;
    }

    .leaflet-tooltip.landmark-tooltip {
      background: rgba(16, 33, 28, 0.94);
      color: #f3f8f5;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      padding: 8px 10px;
      box-shadow: 0 12px 24px rgba(16, 33, 28, 0.3);
      font-size: 12px;
      line-height: 1.4;
      min-width: 200px;
    }

    .leaflet-tooltip-top.landmark-tooltip::before {
      border-top-color: rgba(16, 33, 28, 0.94);
    }

    .landmark-marker-wrap {
      background: transparent;
      border: 0;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      overflow: visible;
    }

    .landmark-marker-wrap.compact {
      width: 22px;
      height: 22px;
    }

    .landmark-marker-badge {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      color: #ffffff;
      filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.25)) drop-shadow(0 3px 8px rgba(15, 23, 42, 0.46));
      transform: translate(var(--marker-shift-x, 0px), var(--marker-shift-y, 0px));
    }

    .landmark-marker-badge::before {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: 9px;
      background: var(--marker-bg, #0f766e);
      border: 2px solid rgba(15, 23, 42, 0.78);
      box-shadow: 0 1px 6px rgba(15, 23, 42, 0.35);
    }

    .landmark-marker-badge svg {
      width: 21px;
      height: 21px;
      stroke: currentColor;
      stroke-width: 2.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      position: relative;
      z-index: 1;
    }

    .landmark-marker-badge.compact {
      width: 20px;
      height: 20px;
      filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.22)) drop-shadow(0 2px 5px rgba(15, 23, 42, 0.3));
    }

    .landmark-marker-badge.compact::before {
      inset: 1px;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.96);
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.24);
    }

    .landmark-marker-badge.compact svg {
      width: 11px;
      height: 11px;
      stroke-width: 2.3;
    }

    @media (prefers-reduced-motion: reduce) {
      .dot,
      .loading.show,
      .report-skeleton span,
      .marker-enter .marker-pin,
      .marker-enter .marker-ripple,
      .map-demo-ring,
      .map-demo-cursor {
        animation: none !important;
      }
    }

    @media (hover: none), (pointer: coarse) {
      .marker-ripple {
        display: none;
      }

      .marker-enter .marker-pin,
      .marker-enter .marker-ripple {
        animation: none !important;
      }
    }

    @media (max-width: 1040px) {
      .score-head {
        grid-template-columns: 1fr;
      }

      .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .drivers-grid {
        grid-template-columns: 1fr;
      }

      .grid-3 {
        grid-template-columns: 1fr;
      }

      .compare-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 980px) and (hover: none), (max-width: 980px) and (pointer: coarse) {
      .top-left-stack {
        left: 10px;
        top: 10px;
      }

      .brand-shell {
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 14px;
        display: grid;
        place-items: center;
      }

      .brand-row {
        justify-content: center;
      }

      .brand-copy,
      .brand-cta-arrow {
        display: none;
      }

      .brand-logo {
        width: 26px;
        height: 32px;
      }

      .leaflet-top.leaflet-left {
        margin-top: 64px;
      }

      .leaflet-touch .leaflet-bar a,
      .leaflet-touch .leaflet-control-layers-toggle,
      .leaflet-bar a {
        width: 38px;
        height: 38px;
        line-height: 38px;
      }

      .top-right-search {
        top: 10px;
        right: 10px;
        left: 84px;
        width: auto;
      }

      .results {
        right: 10px;
        left: 10px;
        width: auto;
        top: auto;
        bottom: 10px;
        max-height: 54dvh;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(2px);
        padding: 6px;
      }

      .results-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }

      .results-nav .nav-chip {
        flex: 0 0 auto;
      }

      .map-actions {
        left: 50%;
        right: auto;
        top: 82px;
        bottom: auto;
        width: min(340px, calc(100% - 18px));
        max-width: calc(100% - 18px);
        transform: translateX(-50%);
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        padding: 0;
        gap: 6px;
        justify-items: center;
        pointer-events: none;
      }

      .map-actions > * {
        pointer-events: auto;
      }

      .loading,
      .status {
        width: 100%;
      }

      .map-links {
        width: auto;
      }
    }

    @media (max-width: 680px) and (hover: none), (max-width: 680px) and (pointer: coarse) {
      :root {
        --screen-gutter: 4px;
        --sheet-peek: 96px;
        --sheet-mid: 50dvh;
        --sheet-full: 84dvh;
      }

      body {
        padding:
          calc(var(--screen-gutter) + var(--safe-top))
          calc(var(--screen-gutter) + var(--safe-right))
          calc(var(--screen-gutter) + var(--safe-bottom))
          calc(var(--screen-gutter) + var(--safe-left));
      }

      .top-left-stack {
        left: 8px;
        top: 8px;
        width: auto;
        height: auto;
      }

      .brand-shell {
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 14px;
        display: grid;
        place-items: center;
      }

      .top-right-search {
        left: 62px;
        right: 62px;
        top: 8px;
        min-height: 52px;
        border-radius: 14px;
        padding: 6px 8px 8px;
        display: grid;
        align-items: stretch;
        gap: 0;
        z-index: 1300;
      }

      .top-right-search.mobile-search-empty {
        min-height: 102px;
      }

      .map-actions {
        top: 66px;
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
      }

      .theme-fab {
        right: 8px;
        top: 8px;
        width: 48px;
        height: 48px;
      }

      .map-onboarding-card {
        left: 50%;
        top: 70px;
        width: calc(100% - 20px);
        padding: 15px 14px 13px;
        border-radius: 18px;
        gap: 10px;
      }

      .map-onboarding-title {
        font-size: 21px;
        max-width: 11ch;
      }

      .map-onboarding-copy {
        max-width: none;
        font-size: 13px;
      }

      .map-onboarding-step {
        padding: 9px 10px;
        gap: 8px;
        font-size: 13px;
      }

      .map-onboarding-step-index {
        width: 22px;
        height: 22px;
        font-size: 11px;
      }

      .map-demo-click {
        left: 50%;
        top: 62%;
        width: 150px;
        height: 150px;
      }

      .map-demo-cursor {
        right: 22px;
        bottom: 28px;
        width: 54px;
        height: 54px;
      }

      .map-demo-label {
        bottom: 2px;
        font-size: 13px;
        padding: 8px 12px;
        max-width: min(220px, calc(100vw - 24px));
      }

      .brand-logo {
        width: 24px;
        height: 30px;
      }

      .brand-search-slot .leaflet-control-geocoder-form input {
        height: 38px;
        font-size: 12px;
      }

      .mobile-search-helper {
        font-size: 10.5px;
      }

      .mobile-search-quick-picks {
        gap: 5px;
        min-height: 30px;
      }

      .mobile-search-chip {
        min-height: 30px;
        padding: 0 9px;
        font-size: 10.5px;
      }

      .brand-search-slot .leaflet-control-geocoder-form::before {
        width: 15px;
        height: 15px;
        left: 11px;
      }

      .brand-search-slot .leaflet-control-geocoder-alternatives,
      .geocoder-overlay-list {
        max-height: min(40dvh, 260px);
      }

      .chip {
        width: 100%;
      }

      .metrics {
        grid-template-columns: 1fr;
      }

      .confidence-mini-grid {
        grid-template-columns: 1fr;
      }

      .results-compare-toolbar {
        width: 100%;
      }

      .map-links {
        gap: 4px;
      }

      .map-links-inline {
        display: none;
      }

      .map-links-floating {
        display: flex;
        left: 10px;
      }

      .link-chip {
        font-size: 11px;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 8px 18px rgba(16, 33, 28, 0.12);
      }

      .compare-step {
        text-align: left;
      }

      .loading {
        padding: 8px 11px;
        font-size: 11px;
      }

      .status {
        padding: 8px 10px;
        font-size: 11px;
      }

      #loading-text {
        max-width: 100%;
      }

      #compare-radar {
        height: 250px;
      }
    }

    /* Modern right-panel component system */
    .results {
      right: 14px;
      top: 84px;
      bottom: 14px;
      width: min(460px, calc(100% - 28px));
      border: 1px solid var(--border);
      border-radius: 24px;
      background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 78%, var(--card) 22%));
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      gap: 12px;
      padding: 12px;
      z-index: 780;
    }

    .results-header {
      align-items: flex-start;
      border-radius: 16px;
      background: var(--card);
      border: 1px solid var(--border);
      padding: 12px;
      box-shadow: none;
    }

    .results-header-actions {
      display: grid;
      gap: 8px;
      justify-items: end;
      min-width: 196px;
    }

    .support-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: flex-end;
      text-align: right;
    }

    .support-label {
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .support-email {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--card-2);
      color: var(--ink);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      padding: 6px 10px;
      text-decoration: none;
    }

    .support-email:hover {
      background: color-mix(in srgb, var(--card-2) 72%, var(--panel-2) 28%);
    }

    .auth-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: flex-end;
    }

    .auth-user-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--card-2);
      color: var(--ink);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      padding: 6px 10px;
      max-width: 190px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .auth-modal {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: grid;
      place-items: center;
      padding: 16px;
    }

    .auth-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(7, 18, 30, 0.56);
      backdrop-filter: blur(3px);
    }

    .auth-modal-card {
      position: relative;
      width: min(460px, 100%);
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow-lg);
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .auth-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .auth-modal-title {
      font-family: "Space Grotesk", sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
    }

    .auth-close-btn {
      border: 1px solid var(--line);
      background: var(--card-2);
      color: var(--ink);
      width: 34px;
      height: 34px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      font-weight: 700;
    }

    .auth-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .auth-tab-btn {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      font-size: 12px;
      font-weight: 800;
      padding: 7px 12px;
      cursor: pointer;
    }

    .auth-tab-btn.active {
      background: var(--accent-soft);
      border-color: color-mix(in srgb, var(--accent) 45%, var(--line) 55%);
      color: var(--accent);
    }

    .auth-form {
      display: grid;
      gap: 10px;
    }

    .auth-field {
      display: grid;
      gap: 5px;
    }

    .auth-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .auth-input {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      color: var(--ink);
      font-family: inherit;
      font-size: 14px;
      padding: 10px 11px;
    }

    .auth-input:focus {
      outline: 0;
      border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .auth-form-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }

    .auth-link-btn {
      border: 0;
      background: transparent;
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      padding: 4px 0;
    }

    .auth-msg {
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.45;
      border: 1px solid var(--line);
      background: #f9fbfa;
      color: var(--ink);
    }

    .auth-msg.success {
      border-color: rgba(21, 128, 61, 0.26);
      background: rgba(240, 253, 244, 0.9);
      color: #14532d;
    }

    .auth-msg.error {
      border-color: rgba(185, 28, 28, 0.24);
      background: rgba(254, 242, 242, 0.92);
      color: #7f1d1d;
    }

    .results-kicker {
      color: var(--accent);
      letter-spacing: 0.35px;
    }

    .results-place {
      color: var(--text);
      font-size: 28px;
      line-height: 1.1;
      max-width: none;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
    }

    .results-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
    }

    .meta-item {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }

    .score-pill {
      min-width: 118px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
      background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent));
      padding: 8px 10px;
      text-align: left;
    }

    .score-pill-label {
      display: block;
      color: var(--accent);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.45px;
      text-transform: uppercase;
      margin-bottom: 1px;
    }

    .score-pill-value {
      display: block;
      color: var(--text);
      font-family: "Space Grotesk", sans-serif;
      font-size: 33px;
      line-height: 1;
      font-weight: 700;
    }

    .theme-controls {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 6px 8px;
      width: 100%;
      max-width: 165px;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 7px 8px;
      background: var(--card-2);
    }

    .palette-field {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .palette-select {
      height: 26px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
      padding: 0 6px;
      font-family: inherit;
      min-width: 70px;
    }

    .palette-select:disabled {
      opacity: 0.55;
    }

    .results-nav {
      display: flex;
      flex-wrap: wrap;
      overflow: visible;
      gap: 6px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--card);
      box-shadow: none;
      padding: 6px;
    }

    .results-nav::-webkit-scrollbar {
      height: 6px;
    }

    .results-nav::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--muted) 45%, transparent);
      border-radius: 999px;
    }

    .nav-chip {
      position: relative;
      border: 0;
      background: transparent;
      color: var(--muted);
      border-radius: 10px;
      padding: 8px 10px 10px;
      font-size: 13px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 1 1 calc(33.333% - 6px);
      min-width: 0;
      min-height: 42px;
      text-align: center;
      white-space: normal;
      line-height: 1.2;
    }

    .nav-chip::after {
      content: "";
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 3px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.18s ease;
    }

    .nav-chip.active {
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--text);
    }

    .nav-chip.active::after {
      transform: scaleX(1);
    }

    .tab-icon {
      width: 16px;
      height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .tab-icon svg,
    .stat-icon svg,
    .info-icon svg,
    .list-row-icon svg,
    .risk-icon svg,
    .check-icon svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .nav-chip[aria-disabled="true"] {
      opacity: 0.45;
      background: transparent;
    }

    .results-body {
      gap: 12px;
      padding-right: 0;
    }

    #results-body > .panel {
      display: none;
    }

    #results-body > .panel.active-panel {
      display: block;
      animation: panelIn 180ms ease;
    }

    @keyframes panelIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .panel {
      background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 78%, var(--card-2) 22%));
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: none;
      backdrop-filter: none;
      padding: 14px;
    }

    .score-title {
      color: var(--text);
    }

    .score-sub {
      color: var(--muted);
      margin-top: 4px;
    }

    .score-head {
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: start;
    }

    .score-box {
      min-width: 250px;
      background: var(--card-2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px;
    }

    .score-radar-shell {
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--card-2) 92%), color-mix(in srgb, var(--card) 16%, var(--card-2) 84%));
    }

    .score-radar-total-label {
      color: var(--muted);
    }

    .score-radar-total {
      color: var(--text);
    }

    .score-number {
      color: var(--text);
      font-size: clamp(34px, 5.6vw, 54px);
    }

    .score-band {
      margin-top: 6px;
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .metrics {
      margin-top: 12px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .metric {
      border: 1px solid var(--border);
      background: linear-gradient(180deg, color-mix(in srgb, var(--card-2) 72%, var(--card) 28%), color-mix(in srgb, var(--card-2) 92%, var(--card) 8%));
      border-radius: 14px;
      padding: 10px;
      box-shadow: none;
    }

    .metric-button.active {
      border-color: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
      background: color-mix(in srgb, var(--accent) 14%, var(--card-2) 86%);
      box-shadow: none;
    }

    .metric-label {
      color: var(--muted);
    }

    .metric-value {
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .confidence-badge {
      color: var(--text);
      background: var(--card);
      border-color: var(--border);
    }

    .confidence-tooltip,
    .mini-kpi,
    .trust-block,
    .breakdown-item,
    .driver-item,
    .recommendation-item,
    .compare-card,
    .compare-diff,
    .radar-wrap,
    .legend-chip,
    .report-box,
    .compare-pdf-frame,
    .trace-summary,
    .trace-group,
    .trace-json {
      background: var(--card-2);
      border-color: var(--border);
      color: var(--text);
    }

    .trace-json {
      background: color-mix(in srgb, var(--card-2) 30%, #06172f 70%);
      color: #cae8ff;
    }

    .mini-chip {
      background: var(--card);
      border-color: var(--border);
    }

    .submetric-item {
      border-top-color: color-mix(in srgb, var(--border) 80%, transparent);
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .stat-card {
      border-radius: 14px;
      border: 1px solid var(--border);
      padding: 12px 10px;
      display: grid;
      gap: 8px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--card-2) 91%), color-mix(in srgb, var(--accent-2) 4%, var(--card-2) 96%));
    }

    .stat-road {
      background: linear-gradient(180deg, color-mix(in srgb, #3b82f6 14%, var(--card-2) 86%), color-mix(in srgb, #2563eb 8%, var(--card-2) 92%));
    }

    .stat-sea {
      background: linear-gradient(180deg, color-mix(in srgb, #6366f1 14%, var(--card-2) 86%), color-mix(in srgb, #3b82f6 8%, var(--card-2) 92%));
    }

    .stat-icon {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 14%, transparent);
    }

    .stat-road .stat-icon {
      color: #60a5fa;
      background: rgba(59, 130, 246, 0.14);
    }

    .stat-sea .stat-icon {
      color: #93c5fd;
      background: rgba(99, 102, 241, 0.14);
    }

    .stat-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .stat-value {
      color: var(--text);
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(32px, 4.8vw, 44px);
      line-height: 1;
      font-weight: 700;
    }

    .stat-bar {
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--border) 75%, transparent);
      overflow: hidden;
    }

    .stat-bar-fill {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transition: width 240ms ease;
    }

    .section-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      background: linear-gradient(180deg, var(--card-2), color-mix(in srgb, var(--card-2) 90%, var(--card) 10%));
      margin-top: 12px;
    }

    .section-card-title {
      color: var(--text);
      font-size: 22px;
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 10px;
    }

    .info-grid {
      display: grid;
      gap: 10px;
    }

    .info-card {
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      padding: 12px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
    }

    .info-road {
      border-color: color-mix(in srgb, #3b82f6 40%, var(--border) 60%);
      background: rgba(59, 130, 246, 0.14);
    }

    .info-sea {
      border-color: color-mix(in srgb, #6366f1 40%, var(--border) 60%);
      background: rgba(99, 102, 241, 0.14);
    }

    .info-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .info-road .info-icon {
      color: #60a5fa;
      background: rgba(59, 130, 246, 0.18);
    }

    .info-sea .info-icon {
      color: #93c5fd;
      background: rgba(99, 102, 241, 0.2);
    }

    .info-title {
      color: var(--text);
      font-size: 19px;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .info-copy {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      margin: 0;
    }

    .source-band {
      margin-top: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border) 64%);
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--text);
      font-size: 12px;
      line-height: 1.5;
      padding: 10px 11px;
      font-weight: 700;
    }

    .fault-top-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .fault-mini-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--card-2);
      padding: 10px 11px;
      min-height: 78px;
      display: grid;
      align-content: center;
      gap: 6px;
    }

    .fault-mini-label {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.25px;
      color: var(--muted);
    }

    .fault-mini-value {
      font-size: 25px;
      line-height: 1.1;
      font-weight: 700;
      color: var(--text);
      font-family: "Space Grotesk", sans-serif;
      overflow-wrap: anywhere;
    }

    .fault-mini-value.high,
    .risk-pill.high {
      color: var(--success);
    }

    .fault-mini-value.medium,
    .risk-pill.medium {
      color: var(--warning);
    }

    .fault-mini-value.low,
    .risk-pill.low {
      color: var(--danger);
    }

    .risk-card {
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--warning) 36%, var(--border) 64%);
      background: linear-gradient(145deg, rgba(161, 98, 7, 0.24), rgba(120, 53, 15, 0.2));
      padding: 12px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
    }

    .risk-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(161, 98, 7, 0.2);
      color: #fbbf24;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .risk-title {
      color: var(--text);
      font-size: 22px;
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      margin-bottom: 4px;
      line-height: 1.2;
    }

    .risk-copy {
      color: var(--text);
      font-size: 13px;
      line-height: 1.5;
      margin: 0 0 7px;
    }

    .risk-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--card-2);
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
    }

    .risk-pill.high {
      background: color-mix(in srgb, var(--success) 14%, var(--card));
      border-color: color-mix(in srgb, var(--success) 34%, var(--border));
    }

    .risk-pill.medium {
      background: color-mix(in srgb, var(--warning) 14%, var(--card));
      border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
    }

    .risk-pill.low {
      background: color-mix(in srgb, var(--danger) 14%, var(--card));
      border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
    }

    .checklist-group {
      display: grid;
      gap: 9px;
    }

    .check-row {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--card);
      padding: 10px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 9px;
      align-items: start;
    }

    .check-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      flex: 0 0 auto;
    }

    .check-title {
      color: var(--text);
      font-size: 17px;
      line-height: 1.25;
      font-weight: 800;
      margin-bottom: 2px;
    }

    .check-copy {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      margin: 0;
    }

    .landmark-tabs {
      margin-top: 10px;
      margin-bottom: 10px;
      gap: 8px;
    }

    .landmark-tab-btn {
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .landmark-tab-btn.active {
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 12%, var(--card) 88%);
      border-color: color-mix(in srgb, var(--accent) 50%, var(--border) 50%);
    }

    .landmark-groups {
      display: grid;
      gap: 10px;
    }

    .landmark-list {
      display: grid;
      gap: 8px;
      margin-top: 0;
    }

    .list-row {
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--card);
      padding: 9px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .list-row-main {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .list-row-icon {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 13%, transparent);
      flex: 0 0 auto;
    }

    .list-row-title {
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
    }

    .list-row-meta {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.3;
      margin-top: 2px;
    }

    .distance-pill {
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border) 54%);
      background: color-mix(in srgb, var(--accent) 13%, transparent);
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      padding: 6px 9px;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .landmark-empty {
      border: 1px dashed var(--border);
      border-radius: 10px;
      background: var(--card);
      color: var(--muted);
      padding: 9px 10px;
      font-size: 12px;
      line-height: 1.45;
    }

    .muted,
    .fine,
    .driver-item-evidence,
    .compare-score-row,
    .compare-card-coord {
      color: var(--muted);
    }

    .compare-score-value {
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .btn-secondary {
      border: 1px solid var(--border);
      background: var(--card-2);
      color: var(--text);
    }

    .btn-primary {
      background: linear-gradient(145deg, var(--accent), var(--accent-2));
      color: #04131d;
      box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent);
    }

    .btn:focus-visible,
    .theme-fab:focus-visible,
    .metric-button:focus-visible,
    .landmark-tab-btn:focus-visible,
    .nav-chip:focus-visible,
    .palette-select:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--accent-2) 44%, transparent);
      outline-offset: 2px;
    }

    html[data-theme="dark"] .brand-shell,
    html[data-theme="dark"] .top-right-search,
    html[data-theme="dark"] .map-actions {
      background: rgba(9, 21, 42, 0.74);
      border-color: var(--border);
      color: var(--text);
    }

    html[data-theme="dark"] .theme-fab {
      background: rgba(9, 21, 42, 0.82);
      border-color: var(--border);
      color: var(--text);
    }

    html[data-theme="dark"] .loading {
      background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--accent) 22%, var(--card-2) 78%),
        color-mix(in srgb, var(--card) 42%, var(--card-2) 58%)
      );
      border-color: color-mix(in srgb, var(--accent) 56%, var(--border) 44%);
      color: var(--text);
      box-shadow: 0 10px 24px rgba(1, 10, 25, 0.62);
    }

    html[data-theme="dark"] .advanced-panel {
      background: var(--card-2);
      border-color: var(--border);
      color: var(--text);
    }

    html[data-theme="dark"] .advanced-note,
    html[data-theme="dark"] .advanced-toggle-icon {
      color: var(--muted);
    }

    html[data-theme="dark"] .brand-shell p,
    html[data-theme="dark"] .hint,
    html[data-theme="dark"] .brand-tag,
    html[data-theme="dark"] .mobile-search-helper {
      color: var(--muted);
    }

    html[data-theme="dark"] .chip,
    html[data-theme="dark"] .link-chip,
    html[data-theme="dark"] .mobile-search-chip {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--card) 82%), var(--card-2));
      border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
      color: color-mix(in srgb, var(--accent-2) 18%, var(--text) 82%);
      box-shadow:
        0 10px 20px rgba(1, 10, 25, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    html[data-theme="dark"] .top-right-search.mobile-search-hint-active {
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
        0 18px 36px rgba(1, 10, 25, 0.56);
    }

    @media (prefers-reduced-motion: reduce) {
      .top-right-search.mobile-search-hint-active {
        animation: none;
      }

      .mobile-search-chip {
        transition: none;
      }
    }

    html[data-theme="dark"] .leaflet-control-geocoder {
      border-color: var(--border);
      background: var(--card);
    }

    html[data-theme="dark"] .landmark-marker-badge {
      filter: drop-shadow(0 1px 1px rgba(2, 8, 22, 0.95)) drop-shadow(0 4px 10px rgba(2, 8, 22, 0.9));
    }

    html[data-theme="dark"] .landmark-marker-badge::before {
      background: var(--marker-bg, #0f766e);
      border-color: rgba(226, 232, 240, 0.78);
    }

    html[data-theme="dark"] .landmark-marker-badge.compact::before {
      border-color: rgba(226, 232, 240, 0.92);
    }

    html[data-theme="dark"] .brand-search-slot .leaflet-control-geocoder,
    html[data-theme="dark"] .brand-search-slot .leaflet-control-geocoder-alternatives,
    html[data-theme="dark"] .geocoder-overlay-list {
      border-color: var(--border);
      background: var(--card);
    }

    html[data-theme="dark"] .brand-search-slot .leaflet-control-geocoder-form input,
    html[data-theme="dark"] .brand-search-slot .leaflet-control-geocoder-alternatives li a,
    html[data-theme="dark"] .geocoder-overlay-list li a {
      color: var(--text);
    }

    html[data-theme="dark"] .brand-search-slot .leaflet-control-geocoder-form input::placeholder {
      color: var(--muted);
    }

    html[data-theme="dark"] .brand-search-slot .leaflet-control-geocoder-icon {
      filter: invert(1);
    }

    html[data-theme="dark"] .brand-search-slot .leaflet-control-geocoder-form::before {
      background: color-mix(in srgb, var(--accent-2) 78%, var(--text) 22%);
    }

    html[data-theme="dark"] .map-onboarding-backdrop {
      background:
        radial-gradient(circle at 50% 58%, rgba(34, 211, 170, 0.08), transparent 18%),
        linear-gradient(180deg, rgba(5, 15, 34, 0.08), rgba(5, 15, 34, 0.42));
    }

    html[data-theme="dark"] .map-onboarding-card {
      background: rgba(7, 19, 34, 0.92);
      border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
      box-shadow: 0 24px 48px rgba(2, 8, 22, 0.56);
    }

    html[data-theme="dark"] .map-onboarding-copy,
    html[data-theme="dark"] .map-onboarding-note {
      color: var(--muted);
    }

    html[data-theme="dark"] .map-onboarding-step {
      background: linear-gradient(180deg, rgba(17, 37, 66, 0.92), rgba(15, 31, 57, 0.92));
      border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
      color: var(--text);
    }

    html[data-theme="dark"] .map-demo-ring {
      border-color: rgba(52, 234, 211, 0.34);
    }

    html[data-theme="dark"] .map-demo-dot {
      border-color: rgba(226, 232, 240, 0.94);
      box-shadow: 0 12px 28px rgba(34, 211, 170, 0.16);
    }

    html[data-theme="dark"] .map-demo-cursor svg {
      fill: rgba(236, 248, 255, 0.98);
      stroke: rgba(5, 15, 34, 0.58);
    }

    html[data-theme="dark"] .map-demo-label {
      background: rgba(8, 22, 43, 0.9);
      border-color: var(--border);
      color: var(--text);
      box-shadow: 0 12px 28px rgba(2, 8, 22, 0.42);
    }

    @media (max-width: 1100px) {
      .results-place {
        font-size: 24px;
      }

      .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .stat-grid {
        grid-template-columns: 1fr;
      }

      .fault-top-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 980px) and (hover: none), (max-width: 980px) and (pointer: coarse) {
      :root {
        --sheet-peek: 112px;
        --sheet-mid: 52dvh;
        --sheet-full: 82dvh;
      }

      .results {
        right: 10px;
        left: 10px;
        top: auto;
        bottom: 10px;
        width: auto;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: var(--sheet-peek);
        max-height: var(--sheet-full);
        height: var(--sheet-mid);
        gap: 8px;
        padding: 6px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(4px);
        touch-action: pan-y;
        transition: transform 220ms ease, opacity 180ms ease, height 220ms ease;
      }

      .results:not(.show) {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 12px));
      }

      .results.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .results.sheet-peek {
        height: var(--sheet-peek);
      }

      .results.sheet-mid {
        height: var(--sheet-mid);
      }

      .results.sheet-full {
        height: var(--sheet-full);
      }

      .sheet-head {
        display: flex;
      }

      .results-header {
        display: grid;
        grid-template-columns: 1fr;
        padding: 10px;
      }

      .results-header-actions {
        justify-items: stretch;
        min-width: 0;
      }

      .results-compare-toolbar {
        justify-content: stretch;
      }

      .support-toolbar {
        justify-content: flex-start;
        text-align: left;
      }

      .auth-toolbar {
        justify-content: stretch;
      }

      .auth-toolbar .btn {
        flex: 1 1 calc(50% - 4px);
      }

      .auth-user-pill {
        max-width: none;
        width: 100%;
      }

      .results-compare-toolbar #compare-toggle {
        order: 1;
        flex: 1 1 100%;
      }

      .results-compare-toolbar #compare-clear,
      .results-compare-toolbar #compare-exit {
        order: 2;
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
      }

      .results-compare-toolbar .compare-step {
        text-align: left;
      }

      .theme-controls {
        max-width: none;
      }

      .results-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }

      .results-nav .nav-chip {
        flex: 0 0 auto;
      }

      .results-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 2px;
        gap: 8px;
        align-content: start;
      }

      .results-nav {
        position: sticky;
        top: 0;
        z-index: 2;
      }

      .results-body {
        min-height: auto;
        overflow: visible;
      }
    }

    @media (max-width: 680px) and (hover: none), (max-width: 680px) and (pointer: coarse) {
      .results {
        border-radius: 16px;
        padding: 8px;
        gap: 8px;
        max-height: var(--sheet-full);
      }

      .results-header {
        padding: 8px;
        gap: 8px;
        border-radius: 14px;
      }

      .results-place {
        font-size: 17px;
        line-height: 1.18;
      }

      .results-kicker {
        font-size: 10px;
      }

      .results-meta-row {
        gap: 6px;
        margin-top: 2px;
      }

      .auth-modal {
        padding: 10px;
      }

      .auth-modal-card {
        padding: 11px;
      }

      .auth-modal-title {
        font-size: 20px;
      }

      .meta-item {
        font-size: 10px;
      }

      .score-pill {
        min-width: 0;
        width: 100%;
        padding: 7px 8px;
        border-radius: 10px;
      }

      .score-pill-label {
        font-size: 9px;
      }

      .score-pill-value {
        font-size: 20px;
      }

      .nav-chip {
        gap: 6px;
        padding: 8px 10px;
        font-size: 11px;
      }

      .results-nav {
        padding: 6px;
        scrollbar-width: none;
      }

      .results-nav::-webkit-scrollbar {
        display: none;
      }

      .tab-icon {
        width: 16px;
        height: 16px;
      }

      .results-header-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 8px;
      }

      .support-toolbar {
        grid-column: 2;
        gap: 4px;
        justify-content: flex-end;
      }

      .support-label {
        display: none;
      }

      .support-email {
        padding: 5px 8px;
        font-size: 11px;
        width: fit-content;
        max-width: 100%;
      }

      .results-compare-toolbar {
        grid-column: 1 / -1;
        gap: 6px;
      }

      .results-compare-toolbar .btn {
        min-height: 38px;
        font-size: 12px;
      }

      .score-head {
        grid-template-columns: 1fr;
      }

      #score-radar {
        height: 176px;
      }

      .metrics {
        grid-template-columns: 1fr;
      }

      .info-title,
      .risk-title,
      .section-card-title {
        font-size: 17px;
      }
    }

    @media (max-width: 980px) and (orientation: landscape) and (hover: none), (max-width: 980px) and (orientation: landscape) and (pointer: coarse) {
      :root {
        --sheet-peek: 88px;
        --sheet-mid: 54dvh;
        --sheet-full: 72dvh;
      }
    }