* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; width: 100%; background: #0d0d0d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    #map { width: 100%; height: 100vh; height: 100dvh; }

    /* ── Pin-mode banner (seeker/owner pin placement hint) ── */
    #pin-mode-banner {
      position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
      z-index: 11; width: calc(100% - 24px); max-width: 520px;
      padding: 12px 14px;
      background: linear-gradient(135deg, rgba(124,58,237,0.95), rgba(79,70,229,0.95));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 14px;
      border: 1px solid rgba(167,139,250,0.4);
      box-shadow: 0 8px 32px rgba(124,58,237,0.4), 0 0 0 1px rgba(255,255,255,0.1);
      color: #fff; font-size: 13.5px; font-weight: 500;
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      animation: pmb-pulse 2.4s ease-in-out infinite, pmb-slide-in 0.28s ease-out;
    }
    #pin-mode-banner .pmb-text { flex: 1; line-height: 1.35; }
    #pin-mode-banner .pmb-text strong { font-weight: 700; color: #fef3c7; }
    #pin-mode-banner .pmb-cancel {
      background: rgba(0,0,0,0.28); color: #fff; border: 1px solid rgba(255,255,255,0.18);
      padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
    }
    #pin-mode-banner .pmb-cancel:hover { background: rgba(0,0,0,0.45); }
    @keyframes pmb-slide-in {
      from { transform: translate(-50%, -20px); opacity: 0; }
      to   { transform: translate(-50%, 0); opacity: 1; }
    }
    @keyframes pmb-pulse {
      0%, 100% { box-shadow: 0 8px 32px rgba(124,58,237,0.4), 0 0 0 1px rgba(255,255,255,0.1); }
      50%      { box-shadow: 0 8px 40px rgba(167,139,250,0.65), 0 0 0 2px rgba(167,139,250,0.35); }
    }

    /* ── Available-flats browse banner ──
       Shown when user enters "See flats available" mode from a rent-only pin.
       Visually distinct from #pin-mode-banner (purple/urgent) — this is teal/calm
       because it's informational ("you're now browsing"), not action-required. */
    #available-flats-banner {
      position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
      z-index: 11; width: calc(100% - 24px); max-width: 520px;
      padding: 11px 14px;
      background: linear-gradient(135deg, rgba(13,148,136,0.95), rgba(15,118,110,0.95));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 14px;
      border: 1px solid rgba(94,234,212,0.4);
      box-shadow: 0 8px 32px rgba(13,148,136,0.4), 0 0 0 1px rgba(255,255,255,0.1);
      color: #fff;
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      animation: pmb-slide-in 0.28s ease-out;
    }
    #available-flats-banner .afb-text { flex: 1; line-height: 1.3; }
    #available-flats-banner .afb-main { font-size: 13.5px; font-weight: 600; }
    #available-flats-banner .afb-sub  { font-size: 11.5px; opacity: 0.85; margin-top: 2px; }
    #available-flats-banner .afb-sub strong { font-weight: 700; color: #ccfbf1; }
    #available-flats-banner .afb-cancel {
      background: rgba(0,0,0,0.28); color: #fff; border: 1px solid rgba(255,255,255,0.18);
      padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
    }
    #available-flats-banner .afb-cancel:hover { background: rgba(0,0,0,0.45); }
    /* Brief pulse on the filter button when avail-only mode starts — guides the eye */
    .avail-mode-pulse {
      animation: avail-fb-pulse 1.2s ease-in-out 2;
    }
    @keyframes avail-fb-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(94,234,212,0); }
      50%      { box-shadow: 0 0 0 8px rgba(94,234,212,0.55); }
    }

    /* ── Pulsing tap-hint shown at map center during seeker/owner pin mode ── */
    /* Goal: cure the 44% drop between pin_mode_enter and form_open by giving
       the eye a clear "tap here" target. Pointer-events:none so it never blocks
       the actual tap that resolves it. Sits below the banner (z=11) but above
       the map (z=0). Auto-hides via hidePinModeBanner() on first successful tap
       OR on cancel.  */
    #tap-hint {
      position: fixed;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 90px; height: 90px;
      z-index: 8;
      pointer-events: none;
      display: none;
    }
    #tap-hint .tap-finger {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      font-size: 52px;
      line-height: 1;
      filter: drop-shadow(0 4px 14px rgba(0,0,0,0.85));
      animation: tap-finger-bob 1.6s ease-in-out infinite;
    }
    #tap-hint .tap-ripple {
      position: absolute;
      left: 50%; top: 50%;
      width: 36px; height: 36px;
      margin: -18px 0 0 -18px;
      border: 3px solid rgba(167,139,250,0.95);
      border-radius: 50%;
      box-sizing: border-box;
      animation: tap-ripple 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) infinite;
    }
    #tap-hint .tap-ripple-2 { animation-delay: 0.55s; }
    #tap-hint .tap-ripple-3 { animation-delay: 1.1s; }
    @keyframes tap-finger-bob {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50%      { transform: translate(-50%, -42%) scale(0.92); }
    }
    @keyframes tap-ripple {
      0%   { transform: scale(0.6); opacity: 0; border-width: 3px; }
      15%  { opacity: 0.95; }
      100% { transform: scale(2.6); opacity: 0; border-width: 1px; }
    }

    /* ── Search ── */
    .search-wrap {
      position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
      z-index: 10; width: 100%; max-width: 520px; padding: 8px 12px;
      display: flex; gap: 8px; align-items: center;
      background: rgba(8,8,18,0.62);
      backdrop-filter: blur(28px) saturate(1.6);
      -webkit-backdrop-filter: blur(28px) saturate(1.6);
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    }
    .search-input {
      flex: 1; padding: 10px 14px; border-radius: 11px;
      background: rgba(255,255,255,0.05); color: white;
      border: 1px solid rgba(255,255,255,0.08); font-size: 14px;
      outline: none;
      transition: border-color 0.2s;
    }
    .search-input::placeholder { color: #4a5568; }
    .search-input:focus { border-color: rgba(139,92,246,0.5); }

    /* ── Chicklet bar (under search) — quick action shortcuts ── */
    .chicklet-bar {
      position: fixed; top: 78px; left: 50%; transform: translateX(-50%);
      z-index: 10; width: 100%; max-width: 540px;
      padding: 0 12px;
      display: flex; gap: 6px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .chicklet-bar::-webkit-scrollbar { display: none; }
    .chicklet {
      flex-shrink: 0;
      padding: 7px 12px; border-radius: 18px;
      background: rgba(8,8,18,0.72);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border: 1px solid rgba(255,255,255,0.14);
      color: #e2e8f0; font-size: 12.5px; font-weight: 500;
      cursor: pointer; white-space: nowrap;
      display: inline-flex; align-items: center; gap: 6px;
      font-family: inherit;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }
    .chicklet:hover { background: rgba(20,20,36,0.85); border-color: rgba(255,255,255,0.24); }
    .chicklet:active { transform: scale(0.96); }
    .chicklet.active {
      background: rgba(13,148,136,0.18);
      border-color: rgba(94,234,212,0.4);
      color: #5eead4;
    }
    .chicklet-icon { font-size: 14px; line-height: 1; }

    /* ── Filter trigger button ── */
    .filter-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 14px; border-radius: 11px; white-space: nowrap;
      background: rgba(255,255,255,0.06); color: #9ca3af;
      border: 1px solid rgba(255,255,255,0.09); cursor: pointer; font-size: 13px;
      transition: all 0.15s; user-select: none; flex-shrink: 0;
    }
    .filter-btn:hover { border-color: rgba(255,255,255,0.2); color: white; }
    .filter-btn.has-filters { border-color: rgba(124,58,237,0.6); color: white; }
    .filter-count-badge {
      background: #7c3aed; color: white; font-size: 10px; font-weight: 700;
      width: 18px; height: 18px; border-radius: 50%;
      display: none; align-items: center; justify-content: center;
    }
    .filter-btn.has-filters .filter-count-badge { display: flex; }

    /* ── Filter modal specifics ── */
    .filter-modal-header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
    }
    .filter-modal-title { color: white; font-size: 16px; font-weight: 600; }
    .filter-clear { color: #8b5cf6; font-size: 13px; cursor: pointer; background: none; border: none; padding: 0; }
    .filter-clear:hover { color: #a78bfa; }
    .filter-section { margin-bottom: 20px; }
    .filter-section-label { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; display: block; }
    .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
    .fchip {
      padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 500;
      border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
      background: #0d0d1a; color: #9ca3af; transition: all 0.15s; user-select: none;
    }
    .fchip:hover { border-color: rgba(255,255,255,0.2); color: white; }
    .fchip.active { background: #7c3aed; border-color: #7c3aed; color: white; }
    /* ── Available Flats toggle ── */
    .avail-toggle-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); }
    .avail-toggle-label { color:#e5e7eb; font-size:14px; font-weight:500; }
    .avail-toggle-switch { position:relative; width:44px; height:24px; cursor:pointer; flex-shrink:0; }
    .avail-toggle-switch input { opacity:0; width:0; height:0; }
    .avail-toggle-track { position:absolute; inset:0; border-radius:12px; background:#374151; transition:background 0.2s; }
    .avail-toggle-switch input:checked + .avail-toggle-track { background:#7c3aed; }
    .avail-toggle-track::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform 0.2s; }
    .avail-toggle-switch input:checked + .avail-toggle-track::after { transform:translateX(20px); }
    .avail-sub-chips { display:none; gap:8px; margin-bottom:20px; padding-left:2px; }
    .avail-sub-chips.open { display:flex; }

    /* Prevent iOS Safari auto-zoom on input focus (requires 16px) */
    @media (max-width: 768px) {
      .search-input, .form-input { font-size: 16px !important; }
    }

    /* ── Stats modal ── */
    .stats-tab-row { display: flex; gap: 8px; margin-bottom: 20px; }
    .stats-tab {
      padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 500;
      border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
      background: #0d0d1a; color: #6b7280; transition: all 0.15s; user-select: none;
    }
    .stats-tab:hover { color: white; border-color: rgba(255,255,255,0.2); }
    .stats-tab.active { background: #7c3aed; border-color: #7c3aed; color: white; }
    .stat-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px; border-radius: 12px; background: #0d0d1a;
      border: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px;
    }
    .stat-label { color: #9ca3af; font-size: 13px; }
    .stat-label span { color: #6b7280; font-size: 11px; margin-left: 5px; }
    .stat-value { color: white; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
    .stats-empty { color: #4a5568; font-size: 13px; text-align: center; padding: 24px 0; }
    .stats-more { color: #8b5cf6; font-size: 13px; font-weight: 700; text-align: center; margin-top: 16px; }
    .stats-section-title {
      color: white; font-size: 13px; font-weight: 700;
      display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    }
    .stats-section-title span { color: #4a5568; font-size: 11px; font-weight: 400; }
    .lb-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; border-radius: 12px; background: #0d0d1a;
      border: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px;
      cursor: pointer; transition: border-color 0.15s, background 0.15s;
    }
    .lb-row:hover { background: #13132a; border-color: rgba(139,92,246,0.3); }
    .lb-rank {
      font-size: 13px; font-weight: 800; min-width: 24px; text-align: center;
    }
    .lb-rank.r1 { color: #f59e0b; }
    .lb-rank.r2 { color: #9ca3af; }
    .lb-rank.r3 { color: #b45309; }
    .lb-rank.rn { color: #4a5568; }
    .lb-info { flex: 1; min-width: 0; }
    .lb-main { color: #e2e8f0; font-size: 13px; font-weight: 600; }
    .lb-sub  { color: #4a5568; font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lb-amount { text-align: right; }
    .lb-perbhk { color: white; font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
    .lb-total  { color: #4a5568; font-size: 10px; margin-top: 1px; }

    /* ── Legend ── */
    .legend {
      position: fixed;
      bottom: calc(28px + env(safe-area-inset-bottom, 0px));
      left: 50%; transform: translateX(-50%);
      z-index: 10;
    }
    .legend-pill {
      padding: 6px 12px; border-radius: 20px;
      background: rgba(10,10,20,0.75); color: #6b7280; font-size: 11px;
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
      display: flex; align-items: center; gap: 8px;
    }
    .leg-btn {
      background: none; border: none; padding: 0; cursor: pointer;
      font-size: 11px; color: #9ca3af; font-family: inherit; letter-spacing: 0.02em;
    }
    .leg-btn:hover { color: #e2e8f0; }
    .leg-btn-purple { color: #a78bfa !important; font-weight: 600; }
    .leg-btn-purple:hover { color: #c4b5fd !important; }

    /* ── AdSense slots — manual placement (added 2026-06-06) ──
       Mobile slot sits above the legend bar; desktop slot sits
       below the chicklet bar in the top-left. Both wrappers are
       display:none by default and shown via media queries so only
       one slot ever renders for a given viewport. */
    .ad-slot-mobile, .ad-slot-desktop, .ad-slot-desktop-bottom {
      display: none;
      position: fixed;
      z-index: 9;
      border-radius: 8px;
      overflow: hidden;
    }
    .ad-slot-mobile {
      bottom: env(safe-area-inset-bottom, 0px);
      left: 0; right: 0; /* full-width strip, ad centered inside */
      /* Total strip 120px = 16px Sponsored label band + 100px ad <ins>
         + 4px breathing. Bumped from 100px on 2026-06-10 to land an
         explicit "Sponsored" boundary above the ad — was 14% CTR due
         to thumb-zone collisions with the map UI; AdSense flags > 8%
         as invalid-traffic risk. The label + thick separator should
         drop CTR back under 5%. */
      height: 120px;
      text-align: center; /* centers the inline-block 320x100 <ins> */
      border-top: 3px solid rgba(255, 255, 255, 0.45); /* THICKER separator — was 1px @ 0.22 */
      border-radius: 0; /* override shared rule — edge-to-edge strip looks wrong with rounded corners */
      background: rgba(8, 8, 18, 0.7); /* darker backing for clearer separation from map */
      box-sizing: border-box;
      /* IMPORTANT: do NOT set display here. The shared rule at the top
         keeps this display:none on desktop. The mobile media query
         below switches to display:flex (with the SPONSORED label
         layout). On 2026-06-11 we discovered that an unconditional
         `display:flex` here was leaking the slot onto desktop —
         it rendered behind the 728×90 leaderboard at the same z-index. */
    }
    /* "Sponsored" label inside the mobile ad strip — AdSense compliant,
       makes the ad-vs-map boundary unmistakable for users.
       Sits at the top of the strip; ad <ins> is anchored at the bottom. */
    .ad-slot-mobile::before {
      content: 'SPONSORED';
      position: absolute;
      top: 0; left: 0; right: 0;
      padding: 3px 0 2px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: rgba(255, 255, 255, 0.55);
      background: rgba(0, 0, 0, 0.5);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.2;
    }
    .ad-slot-desktop {
      top: 130px;
      left: 16px;
      width: 160px;
      height: 600px; /* wide skyscraper — left rail framing the map */
    }
    .ad-slot-desktop-bottom {
      bottom: env(safe-area-inset-bottom, 0px);
      left: 0; right: 0; /* container is full-width strip */
      height: 90px; /* matches the fixed 728x90 leaderboard inside */
      text-align: center; /* centers the inline-block <ins> horizontally */
    }
    @media (max-width: 767px) {
      .ad-slot-mobile {
        /* flex layout pairs with .ad-slot-mobile::before SPONSORED label;
           kept inside the media query so the slot stays display:none on
           desktop (fixed 2026-06-11 — was leaking onto desktop where it
           rendered behind the 728×90 leaderboard). */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end; /* push ad <ins> to bottom of strip */
      }
    }
    @media (min-width: 768px) { .ad-slot-desktop        { display: block; } }
    @media (min-width: 768px) { .ad-slot-desktop-bottom { display: block; } }

    /* ── In-modal AdSense slots — lazy-loaded on first modal open ──
       Container sits in the DOM at full size from page-load; the
       adsbygoogle SDK push() is deferred until the user actually
       opens the relevant modal (so visitors who never tap a pin
       don't burn an impression on this slot). */
    .ad-slot-pin-detail,
    .ad-slot-area-stats,
    .ad-slot-live-stats {
      display: block;
      margin: 14px auto 8px;
      width: 250px;
      height: 250px;
      max-width: 100%;
      border-radius: 8px;
      overflow: hidden;
      text-align: center;
    }
    .leg-dot { width: 8px; height: 8px; border-radius: 2px; }
    .leg-sep { width: 1px; height: 12px; background: rgba(255,255,255,0.1); }

    /* ── Pin markers ── */
    .pin-marker {
      position: absolute; left: 0; top: 0; cursor: pointer;
      display: flex; flex-direction: column; align-items: center;
      user-select: none; transition: transform 0.1s;
      will-change: transform;
    }
    .pin-marker:hover  { transform: scale(1.12); }
    .pin-marker:active { transform: scale(0.95); }
    .pin-label {
      padding: 4px 8px; border-radius: 8px;
      font-size: 10px; font-weight: 700; color: white; white-space: nowrap;
      display: flex; align-items: center; gap: 4px;
    }
    .pin-label.gated     { background: #2563eb; border: 1px solid rgba(37,99,235,0.6); box-shadow: 0 2px 10px rgba(37,99,235,0.45); }
    .pin-label.not-gated { background: #d97706; border: 1px solid rgba(217,119,6,0.6); box-shadow: 0 2px 10px rgba(217,119,6,0.45); }
    .pin-marker.highlighted .pin-label.gated     { border: 3px solid #93c5fd; box-shadow: 0 0 0 3px rgba(37,99,235,0.4), 0 4px 16px rgba(37,99,235,0.7); }
    .pin-marker.highlighted .pin-label.not-gated { border: 3px solid #fcd34d; box-shadow: 0 0 0 3px rgba(217,119,6,0.4), 0 4px 16px rgba(217,119,6,0.7); }
    .pin-marker.highlighted { transform: scale(1.18); z-index: 999; }
    .pin-label-sep { opacity: 0.5; font-weight: 300; }
    .pin-caret { width: 8px; height: 8px; transform: rotate(45deg); margin-top: -4px; }
    .pin-caret.gated     { background: #2563eb; }
    .pin-caret.not-gated { background: #d97706; }
    .pin-star { font-size: 9px; color: #fbbf24; opacity: 0.9; font-weight: 600; }

    /* ── Modal backdrop ── */
    .modal-backdrop {
      position: fixed; inset: 0; z-index: 100;
      display: none; align-items: flex-end; justify-content: center;
      padding: 16px; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    }
    .modal-backdrop.open { display: flex; }
    @media (min-width: 640px) { .modal-backdrop { align-items: center; } }

    /* ── Modal card ── */
    .modal-card {
      width: 100%; max-width: 400px; max-height: 82vh; overflow-y: auto;
      background: #161625; border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 24px; box-shadow: 0 25px 80px rgba(0,0,0,0.7);
      margin-top: env(safe-area-inset-top, 12px);
    }
    .modal-card::-webkit-scrollbar { width: 4px; }
    .modal-card::-webkit-scrollbar-track { background: transparent; }
    .modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

    /* ── Form elements ── */
    .modal-title   { color: white; font-size: 15px; font-weight: 600; }
    .modal-sub     { color: #4a5568; font-size: 12px; margin-top: 3px; margin-bottom: 20px; }
    .field-label   { color: #9ca3af; font-size: 12px; margin-bottom: 8px; display: block; }
    .field-label span { color: #ef4444; margin-left: 2px; }
    .field-group   { margin-bottom: 14px; }

    /* BHK chicklets */
    .bhk-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .bhk-btn {
      width: 48px; height: 40px; border-radius: 10px;
      background: #0d0d1a; border: 1px solid rgba(255,255,255,0.1);
      color: #9ca3af; font-size: 14px; font-weight: 600; cursor: pointer;
      transition: all 0.15s; display: flex; align-items: center; justify-content: center;
    }
    .bhk-btn:hover { border-color: rgba(139,92,246,0.5); color: white; }
    .bhk-btn.active { background: #7c3aed; border-color: #7c3aed; color: white; }

    /* Two-option selector */
    .two-option { display: flex; gap: 8px; }
    .opt-btn {
      flex: 1; padding: 10px; border-radius: 10px;
      background: #0d0d1a; border: 1px solid rgba(255,255,255,0.1);
      color: #9ca3af; font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 0.15s; text-align: center;
    }
    .opt-btn:hover { border-color: rgba(255,255,255,0.2); color: white; }
    .opt-btn.active { background: #7c3aed; border-color: #7c3aed; color: white; }
    .opt-btn.active.green { background: #059669; border-color: #059669; }
    .opt-btn.active.blue  { background: #2563eb; border-color: #2563eb; }

    /* Input field */
    .input-wrap    { position: relative; }
    .input-prefix  { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 14px; pointer-events: none; }
    .input-suffix  { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 12px; pointer-events: none; }
    .form-input {
      width: 100%; padding: 11px 16px; border-radius: 10px;
      background: #0d0d1a; color: white; border: 1px solid rgba(255,255,255,0.08);
      font-size: 14px; outline: none; transition: border-color 0.2s;
    }
    .form-input.has-prefix { padding-left: 28px; }
    .form-input.has-suffix { padding-right: 52px; }
    .form-input:focus { border-color: rgba(139,92,246,0.6); }
    .form-input::placeholder { color: #374151; }
    .form-input::-webkit-inner-spin-button,
    .form-input::-webkit-outer-spin-button { -webkit-appearance: none; }

    /* Toggle row */
    .toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px; border-radius: 10px; background: #0d0d1a;
      border: 1px solid rgba(255,255,255,0.08); cursor: pointer;
    }
    .toggle-title { color: white; font-size: 13px; }
    .toggle-hint  { color: #4a5568; font-size: 11px; margin-top: 1px; }
    .toggle       { width: 40px; height: 22px; border-radius: 11px; background: #374151; position: relative; transition: background 0.2s; flex-shrink: 0; }
    .toggle.on    { background: #10b981; }
    .toggle-knob  { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: transform 0.2s; }
    .toggle.on .toggle-knob { transform: translateX(18px); }

    /* Error / preview */
    .pin-error {
      display: none; color: #f87171; font-size: 12px; margin-bottom: 12px;
      padding: 8px 12px; background: rgba(248,113,113,0.1);
      border-radius: 8px; border: 1px solid rgba(248,113,113,0.2);
    }
    .preview-badge {
      font-size: 12px; padding: 3px 10px; border-radius: 20px;
      font-weight: 500; margin-bottom: 14px; display: none;
    }
    .preview-badge.maint    { background: rgba(16,185,129,0.12); color: #34d399; }
    .preview-badge.no-maint { background: rgba(245,158,11,0.12);  color: #fbbf24; }

    /* Divider */
    .form-divider { border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 16px 0; }

    /* Buttons */
    .btn-row { display: flex; gap: 10px; margin-top: 4px; }
    .btn {
      flex: 1; padding: 11px; border-radius: 12px;
      font-size: 14px; font-weight: 500; cursor: pointer;
      border: none; transition: all 0.15s;
    }
    .btn-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #9ca3af; }
    .btn-cancel:hover { background: rgba(255,255,255,0.05); }
    .btn-submit { background: #7c3aed; color: white; font-weight: 600; }
    .btn-submit:hover:not(:disabled) { background: #6d28d9; }
    .btn-submit:disabled { opacity: 0.35; cursor: not-allowed; }

    /* ── Detail modal ── */
    .detail-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
    .detail-header-actions { display: flex; align-items: center; gap: 8px; }
    .pin-share-btn { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); border: none; color: #9ca3af; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; }
    .pin-share-btn:hover { color: white; background: rgba(255,255,255,0.12); }
    .report-btn { font-size: 13px; line-height: 1; }
    .report-btn:hover { color: #f87171 !important; background: rgba(239,68,68,0.1) !important; }
    .report-btn.pending { color: #f87171 !important; background: rgba(239,68,68,0.15) !important; }
    .report-btn.reported { color: #f87171 !important; cursor: default; opacity: 0.6; }
    /* Pin share mini modal */
    .pin-share-card { background: #111827; border-radius: 16px; padding: 18px; max-width: 340px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
    .pin-share-title { color: white; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
    .pin-share-msg { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #9ca3af; line-height: 1.55; margin-bottom: 14px; word-break: break-word; }
    .pin-share-actions { display: flex; flex-direction: column; gap: 8px; }
    .rating-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
    /* Comments */
    .comments-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
    .comments-label { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; }
    .comments-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 180px; overflow-y: auto; }
    .comment-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 9px 12px; }
    .comment-text { color: #d1d5db; font-size: 13px; line-height: 1.5; word-break: break-word; }
    .comment-time { color: #4b5563; font-size: 11px; margin-top: 4px; }
    .comment-empty { color: #4b5563; font-size: 13px; }
    .comment-input-row { display: flex; gap: 8px; align-items: flex-start; }
    .comment-input {
      flex: 1; padding: 9px 12px; border-radius: 10px;
      background: rgba(255,255,255,0.05); color: white;
      border: 1px solid rgba(255,255,255,0.08); font-size: 13px;
      outline: none; resize: none; font-family: inherit;
      transition: border-color 0.2s; line-height: 1.4;
    }
    .comment-input::placeholder { color: #4a5568; }
    .comment-input:focus { border-color: rgba(139,92,246,0.5); }
    .comment-post-btn {
      padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
      background: rgba(124,58,237,0.2); color: #a78bfa;
      border: 1px solid rgba(124,58,237,0.4); cursor: pointer;
      transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
    }
    .comment-post-btn:hover { background: rgba(124,58,237,0.35); color: white; }
    .comment-post-btn:disabled { opacity: 0.4; cursor: default; }
    .comment-error { color: #f87171; font-size: 12px; margin-top: 6px; display: none; }
    /* Underlined "Report this issue" CTA appended to every dialog error line */
    .err-report-link { color: inherit; text-decoration: underline; cursor: pointer; opacity: 0.8; white-space: nowrap; }
    .err-report-link:hover { opacity: 1; }
    /* Same-spot picker sheet rows (pins sharing one rounded coordinate) */
    .samespot-row { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; font-size: 13.5px; color: #e2e8f0; }
    .samespot-row:hover { background: rgba(255,255,255,0.09); }
    .samespot-badge { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; letter-spacing: 0.3px; flex-shrink: 0; background: #22c55e; color: #052e16; }
    .samespot-badge.tolet { background: #f59e0b; color: #422006; }
    .samespot-rent { font-weight: 700; flex-shrink: 0; }
    .samespot-meta { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .samespot-soc { flex: 1; min-width: 0; }
    .samespot-chev { color: #64748b; font-size: 16px; margin-left: auto; flex-shrink: 0; }
    .rating-label { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
    .rating-stars { display: flex; gap: 6px; margin-bottom: 6px; }
    .rating-star { font-size: 24px; cursor: pointer; color: #374151; transition: color 0.1s, transform 0.1s; line-height: 1; }
    .rating-star:hover, .rating-star.active { color: #fbbf24; }
    .rating-star:hover { transform: scale(1.15); }
    .rating-summary { font-size: 12px; color: #6b7280; margin-top: 2px; }
    .rating-summary span { color: #fbbf24; font-weight: 700; }
    .detail-eyebrow { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
    .detail-amount  { color: white; font-size: 34px; font-weight: 700; letter-spacing: -1px; }
    .close-btn {
      width: 30px; height: 30px; border-radius: 50%;
      background: rgba(255,255,255,0.06); border: none;
      color: #9ca3af; font-size: 20px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s; flex-shrink: 0; margin-top: 2px;
    }
    .close-btn:hover { background: rgba(255,255,255,0.12); color: white; }

    .detail-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
    .badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: 14px; font-size: 11px; font-weight: 500;
    }
    .badge-dot { width: 5px; height: 5px; border-radius: 50%; }
    .badge.violet { background: rgba(139,92,246,0.12); color: #a78bfa; border: 1px solid rgba(139,92,246,0.2); }
    .badge.green  { background: rgba(16,185,129,0.12);  color: #34d399;  border: 1px solid rgba(16,185,129,0.2); }
    .badge.amber  { background: rgba(245,158,11,0.12);  color: #fbbf24;  border: 1px solid rgba(245,158,11,0.2); }
    .badge.blue   { background: rgba(59,130,246,0.12);  color: #60a5fa;  border: 1px solid rgba(59,130,246,0.2); }
    .badge.gray   { background: rgba(107,114,128,0.12); color: #9ca3af;  border: 1px solid rgba(107,114,128,0.2); }

    .detail-meta { display: flex; flex-wrap: wrap; gap: 14px; }
    .meta-item { color: #4a5568; font-size: 12px; display: flex; align-items: center; gap: 5px; }

    /* ── Chatter section ── */
    .chatter-section { margin-top: 16px; }
    .chatter-header {
      display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
    }
    .chatter-title { color: white; font-size: 13px; font-weight: 700; }
    .chatter-sub   { color: #4a5568; font-size: 11px; }
    .chatter-list {
      max-height: 200px; overflow-y: auto;
      margin: 10px 0; display: flex; flex-direction: column; gap: 8px;
    }
    .chatter-list::-webkit-scrollbar { width: 3px; }
    .chatter-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
    .chatter-bubble {
      background: #0d0d1a; border: 1px solid rgba(255,255,255,0.05);
      border-radius: 10px; padding: 9px 12px;
    }
    .chatter-bubble.own { border-color: rgba(139,92,246,0.2); background: rgba(139,92,246,0.06); }
    .chatter-text { color: #d1d5db; font-size: 13px; line-height: 1.5; word-break: break-word; }
    .chatter-time { color: #374151; font-size: 10px; margin-top: 4px; }
    .chatter-empty { color: #374151; font-size: 12px; text-align: center; padding: 16px 0; }
    .chatter-input-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
    .chatter-input {
      flex: 1; padding: 9px 12px; border-radius: 10px;
      background: #0d0d1a; color: white; border: 1px solid rgba(255,255,255,0.08);
      font-size: 13px; outline: none; transition: border-color 0.2s;
    }
    .chatter-input:focus { border-color: rgba(139,92,246,0.5); }
    .chatter-input::placeholder { color: #374151; }
    .chatter-send {
      padding: 9px 14px; border-radius: 10px; border: none;
      background: #7c3aed; color: white; font-size: 13px; font-weight: 600;
      cursor: pointer; flex-shrink: 0; transition: background 0.15s;
    }
    .chatter-send:hover { background: #6d28d9; }
    .chatter-send:disabled { opacity: 0.4; cursor: not-allowed; }
    .chatter-disclaimer { color: #374151; font-size: 10px; margin-top: 6px; }

    /* ── Owner actions (edit / delete) ── */
    .owner-actions { margin-top: 16px; }
    .btn-danger {
      flex: 1; padding: 11px; border-radius: 12px;
      font-size: 14px; font-weight: 500; cursor: pointer;
      background: rgba(239,68,68,0.12); color: #f87171;
      border: 1px solid rgba(239,68,68,0.25); transition: all 0.15s;
    }
    .btn-danger:hover { background: rgba(239,68,68,0.22); border-color: rgba(239,68,68,0.45); }
    .btn-edit {
      flex: 1; padding: 11px; border-radius: 12px;
      font-size: 14px; font-weight: 500; cursor: pointer;
      background: rgba(255,255,255,0.05); color: #9ca3af;
      border: 1px solid rgba(255,255,255,0.1); transition: all 0.15s;
    }
    .btn-edit:hover { background: rgba(255,255,255,0.09); color: white; }

    /* ── Share modal ── */
    .share-message-box {
      background: #0d0d1a; border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px; padding: 14px 16px;
      color: #9ca3af; font-size: 13px; line-height: 1.6;
      margin-bottom: 16px; user-select: all;
    }
    .share-message-box em { color: #a78bfa; font-style: normal; }
    .btn-whatsapp {
      width: 100%; padding: 13px; border-radius: 14px;
      background: #25D366; color: white; font-size: 14px; font-weight: 600;
      border: none; cursor: pointer; transition: background 0.15s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      margin-bottom: 10px;
    }
    .btn-whatsapp:hover { background: #1fba57; }
    .btn-copy {
      width: 100%; padding: 11px; border-radius: 14px;
      background: rgba(255,255,255,0.05); color: #9ca3af; font-size: 14px;
      border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.15s;
    }
    .btn-copy:hover { background: rgba(255,255,255,0.09); color: white; }
    .btn-copy.copied { color: #34d399; border-color: rgba(52,211,153,0.3); }

    /* ── Welcome modal ── */
    .welcome-backdrop {
      position: fixed; inset: 0; z-index: 200;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,0.82);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 1; transition: opacity 0.35s ease;
    }
    .welcome-backdrop.hiding { opacity: 0; pointer-events: none; }
    .welcome-card {
      width: 100%; max-width: 420px;
      max-height: 82vh; overflow: hidden;
      display: flex; flex-direction: column;
      background: #12121f;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      box-shadow: 0 32px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
      transform: translateY(0px); transition: transform 0.35s ease;
    }
    .welcome-backdrop.hiding .welcome-card { transform: translateY(16px); }
    .welcome-scroll {
      flex: 1; overflow-y: auto; padding: 22px 22px 0;
    }
    .welcome-scroll::-webkit-scrollbar { width: 3px; }
    .welcome-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
    .welcome-footer {
      flex-shrink: 0; padding: 0 22px 20px;
      border-top: 1px solid rgba(255,255,255,0.05);
      padding-top: 14px; margin-top: 14px;
    }

    .welcome-logo {
      display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
    }
    .welcome-logo-dot {
      width: 10px; height: 10px; border-radius: 50%; background: #8b5cf6;
      box-shadow: 0 0 10px rgba(139,92,246,0.7); flex-shrink: 0;
    }
    .welcome-brand { font-size: 20px; font-weight: 700; color: #8b5cf6; letter-spacing: -0.3px; }
    .welcome-tagline {
      color: #6b7280; font-size: 12px; line-height: 1.5;
      margin-bottom: 14px; padding-left: 20px;
    }

    .welcome-section { margin-bottom: 14px; }
    .welcome-section-title {
      color: #e2e8f0; font-size: 13px; font-weight: 600;
      margin-bottom: 7px; display: flex; align-items: center; gap: 8px;
    }
    .welcome-section-title::before {
      content: ''; display: block; width: 3px; height: 14px;
      background: #8b5cf6; border-radius: 2px; flex-shrink: 0;
    }
    .welcome-section-body {
      color: #6b7280; font-size: 12px; line-height: 1.55;
      padding-left: 11px; border-left: 1px solid rgba(139,92,246,0.2);
    }
    .welcome-points {
      list-style: none; display: flex; flex-direction: column; gap: 7px;
      padding-left: 11px; border-left: 1px solid rgba(139,92,246,0.2);
    }
    .welcome-points li {
      color: #6b7280; font-size: 12px; line-height: 1.45;
      display: flex; align-items: flex-start; gap: 8px;
    }
    .welcome-points li .wp-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }

    .btn-welcome {
      width: 100%; padding: 12px; border-radius: 14px;
      background: #7c3aed; color: white; font-size: 15px; font-weight: 600;
      border: none; cursor: pointer; transition: background 0.15s;
      letter-spacing: 0.01em;
    }
    .btn-welcome:hover { background: #6d28d9; }

    /* ── Guided Tour (2026-05-10) ── */
    .tour-blocker {
      position: fixed; inset: 0;
      z-index: 4999;            /* below spotlight (5000) and tooltip (5001) */
      background: transparent;  /* spotlight's box-shadow handles the dim */
      display: none;
      cursor: default;
    }
    .tour-blocker.active { display: block; }
    .tour-blocker.dim { background: rgba(0,0,0,0.78); }
    .tour-spotlight {
      position: fixed; z-index: 5000;
      border: 2px solid rgba(167,139,250,0.85); border-radius: 12px;
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.78);
      pointer-events: none;
      transition: top 0.32s ease, left 0.32s ease, width 0.32s ease, height 0.32s ease;
    }
    .tour-tooltip {
      position: fixed; z-index: 5001;
      left: 50%; transform: translateX(-50%);
      width: calc(100% - 32px); max-width: 380px;
      background: #161625; border: 1px solid rgba(167,139,250,0.30);
      border-radius: 16px; padding: 16px 18px 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      transition: top 0.28s ease, bottom 0.28s ease;
    }
    .tour-tooltip-step { color: #a78bfa; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
    .tour-tooltip-title { color: #e2e8f0; font-size: 16px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
    .tour-tooltip-body { color: #cbd5e1; font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
    .tour-tooltip-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
    .tour-tooltip-body li { padding-left: 0; }
    .tour-tooltip-buttons { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .tour-skip { background: none; border: none; color: #6b7280; font-size: 12px; cursor: pointer; padding: 6px 0; font-family: inherit; }
    .tour-skip:hover { color: #9ca3af; }
    .tour-nav { display: flex; gap: 8px; align-items: center; }
    .tour-back { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #cbd5e1; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-family: inherit; }
    .tour-back:hover { background: rgba(255,255,255,0.08); }
    .tour-next { background: linear-gradient(135deg, #7c3aed, #6d28d9); border: none; color: white; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; font-family: inherit; }
    .tour-next:hover { filter: brightness(1.1); }

    /* Tour-start dialog (initial prompt) */
    .tour-dialog-backdrop {
      position: fixed; inset: 0; z-index: 4900;
      background: rgba(0,0,0,0.78); backdrop-filter: blur(8px);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .tour-dialog-backdrop.open { display: flex; }
    .tour-dialog-card {
      background: #12121f; border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px; padding: 24px 22px 18px;
      width: 100%; max-width: 360px; text-align: center;
      box-shadow: 0 32px 80px rgba(0,0,0,0.7);
    }
    .tour-dialog-icon { font-size: 32px; margin-bottom: 8px; }
    .tour-dialog-title { color: #e2e8f0; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
    .tour-dialog-sub { color: #9ca3af; font-size: 13px; line-height: 1.5; margin-bottom: 18px; }
    .tour-dialog-buttons { display: flex; flex-direction: column; gap: 8px; }
    .tour-dialog-take { background: linear-gradient(135deg, #7c3aed, #6d28d9); border: none; color: white; font-size: 14px; font-weight: 600; padding: 12px; border-radius: 12px; cursor: pointer; font-family: inherit; }
    .tour-dialog-skip { background: none; border: none; color: #6b7280; font-size: 12px; cursor: pointer; padding: 6px; font-family: inherit; }
    .tour-dialog-skip:hover { color: #9ca3af; }

    /* ── Locate me button ── */
    .locate-btn {
      position: fixed; bottom: calc(138px + env(safe-area-inset-bottom, 0px)); right: 10px;
      z-index: 10; width: 38px; height: 38px; border-radius: 2px;
      background: white; border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.2s; color: #666;
    }
    .locate-btn:hover { background: #f5f5f5; }
    .locate-btn.locating { color: #8b5cf6; animation: pulse-ring 1.2s ease infinite; }
    .locate-btn.located  { color: #3b82f6; }
    @keyframes pulse-ring {
      0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); }
      70%  { box-shadow: 0 0 0 10px rgba(139,92,246,0); }
      100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
    }

    /* ── Area Stats button ── */
    .area-stats-btn {
      position: fixed;
      bottom: calc(242px + env(safe-area-inset-bottom, 0px));
      right: 10px; z-index: 10;
      width: 38px;
      background: white; border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s; color: #555;
      padding: 5px 2px 5px; border-radius: 2px;
    }
    .area-stats-btn:hover { background: #f0eeff; color: #7c3aed; }
    .area-stats-btn.active { background: #7c3aed; color: #fff; box-shadow: 0 0 8px rgba(124,58,237,0.5); }
    .area-stats-label { font-size: 8px; font-weight: 700; color: inherit; margin-top: 3px; line-height: 1.1; text-align: center; letter-spacing: 0.01em; }

    /* ── Show Transit button ── */
    .transit-btn {
      position: fixed;
      bottom: calc(294px + env(safe-area-inset-bottom, 0px));
      right: 10px; z-index: 10;
      width: 38px;
      background: white; border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s; color: #555;
      padding: 5px 2px 5px; border-radius: 2px;
    }
    .transit-btn:hover { background: #f0eeff; color: #7c3aed; }
    .transit-btn.active { background: #7c3aed; color: #fff; box-shadow: 0 0 8px rgba(124,58,237,0.5); }

    /* .seeking-btn CSS removed 2026-05-02 — button itself was removed earlier;
       the green-btn + sat-btn slots below were shifted down 52px each to close
       the empty slot at bottom:290px. */

    /* ── Greenery overlay button ── */
    .green-btn {
      position: fixed;
      bottom: calc(190px + env(safe-area-inset-bottom, 0px));
      right: 10px; z-index: 10;
      width: 38px;
      background: white; border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s; color: #555;
      padding: 5px 2px 5px; border-radius: 2px;
    }
    .green-btn:hover { background: #ecfdf5; color: #16a34a; }
    .green-btn.active { background: #16a34a; color: #fff; box-shadow: 0 0 8px rgba(22,163,74,0.5); }

    /* ── Satellite / map-type toggle button ── */
    .sat-btn {
      position: fixed;
      bottom: calc(242px + env(safe-area-inset-bottom, 0px));
      right: 10px; z-index: 10;
      width: 38px;
      background: white; border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s; color: #555;
      padding: 5px 2px 5px; border-radius: 2px;
    }
    .sat-btn:hover { background: #eff6ff; color: #2563eb; }
    .sat-btn.active { background: #2563eb; color: #fff; box-shadow: 0 0 8px rgba(37,99,235,0.5); }

    /* ── Hide / Show rent pins toggle ── */
    .hide-pins-btn {
      position: fixed;
      bottom: calc(190px + env(safe-area-inset-bottom, 0px));
      right: 10px; z-index: 10;
      width: 38px;
      background: white; border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s; color: #555;
      padding: 5px 2px 5px; border-radius: 2px;
    }
    .hide-pins-btn:hover { background: #f1f5f9; color: #475569; }
    .hide-pins-btn.active { background: #475569; color: #fff; box-shadow: 0 0 8px rgba(71,85,105,0.5); }

    /* ── My Vibe button (top of right-side stack, NEW 2026-06-17) ── */
    .vibe-btn {
      position: fixed;
      bottom: calc(450px + env(safe-area-inset-bottom, 0px));
      right: 10px; z-index: 10;
      width: 38px;
      background: white; border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; transition: box-shadow 0.2s, background 0.2s; color: #555;
      padding: 5px 2px 5px; border-radius: 2px;
    }
    .vibe-btn:hover { background: #f5f3ff; }
    .vibe-btn-emoji { font-size: 16px; line-height: 1; }
    /* purple "untouched" dot — draws the eye until a vibe is set or skipped */
    .vibe-btn-dot {
      position: absolute; top: -3px; right: -3px;
      width: 9px; height: 9px; border-radius: 50%;
      background: #8b5cf6; box-shadow: 0 0 0 2px #fff; display: none;
    }
    .vibe-btn-dot.show { display: block; animation: pulse-ring 1.4s ease infinite; }
    /* saved-vibe color ring (box-shadow → no layout shift) */
    .vibe-btn.has-vibe { box-shadow: 0 0 0 2px var(--vibe-ring, #7c3aed), 0 1px 6px rgba(0,0,0,0.35); }

    /* ── To-Let Spotted (2026-07-03) ─────────────────────────────────── */
    .tolet-marker { position: absolute; cursor: pointer; z-index: 4; display: flex; flex-direction: column; align-items: center; }
    .tolet-label {
      background: #b45309; color: #fef3c7; border: 1px solid #f59e0b;
      border-radius: 10px; padding: 3px 9px; font-size: 11px; font-weight: 700;
      white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.45); letter-spacing: 0.02em;
    }
    .tolet-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #b45309; margin-top: -1px; }
    /* map-tap chooser — bottom sheet on mobile, centered card on desktop */
    .chooser-tile {
      display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
      background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px; padding: 12px 14px; cursor: pointer; font-family: inherit;
    }
    .chooser-tile:active { transform: scale(0.985); }
    .chooser-tile .ct-title { color: #f1f5f9; font-size: 14.5px; font-weight: 600; }
    .chooser-tile .ct-sub { color: #94a3b8; font-size: 12px; line-height: 1.45; }
    .ct-new { background: #f59e0b; color: #1c1917; font-size: 9px; font-weight: 800; border-radius: 6px; padding: 1px 6px; vertical-align: 2px; margin-left: 6px; letter-spacing: 0.04em; }
    @media (max-width: 640px) {
      #map-chooser .modal-card, #more-tools-sheet .modal-card { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; border-radius: 20px 20px 0 0; margin: 0; }
    }

    /* ── Right-rail declutter (2026-07-08): Locate / Hide pins / Area stats moved
       into the "More tools" bottom sheet. Kept in the DOM (display:none) so their
       existing handlers still resolve getElementById(). ── */
    .locate-btn, .hide-pins-btn, .area-stats-btn { display: none !important; }
    /* Spot a To-Let pinned to its own offset (was sharing .vibe-btn's 450px slot) */
    #tolet-btn { bottom: calc(346px + env(safe-area-inset-bottom, 0px)); }
    .more-tools-btn {
      position: fixed;
      bottom: calc(138px + env(safe-area-inset-bottom, 0px));
      right: 10px; z-index: 10;
      width: 38px;
      background: white; border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s; color: #555;
      padding: 5px 2px 5px; border-radius: 2px;
    }
    .more-tools-btn:hover { background: #f1f5f9; color: #334155; }
    .more-tools-btn .more-dot {
      position: absolute; top: 3px; right: 3px;
      width: 8px; height: 8px; border-radius: 50%;
      background: #475569; border: 1.5px solid white;
    }
    .ct-on { background: #475569; color: #fff; font-size: 9px; font-weight: 800; border-radius: 6px; padding: 1px 6px; vertical-align: 2px; margin-left: 6px; letter-spacing: 0.04em; }

    /* ── My Vibe picker modal ── */
    .vibe-card { max-width: 460px; }
    .vibe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
    .vibe-hint { color: #fbbf24; font-size: 12px; font-weight: 600; margin-top: 4px; }
    .vibe-section-note { color: #9ca3af; font-size: 11px; line-height: 1.45; margin: 0 0 8px; }
    .vibe-grid { display: grid; gap: 8px; margin: 8px 0 4px; }
    .vibe-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .vibe-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .vibe-chip {
      position: relative; min-height: 74px;
      background: #0d0d1a; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
      padding: 10px 4px 7px; cursor: pointer; transition: all 0.15s; user-select: none;
    }
    .vibe-chip:hover { border-color: rgba(139,92,246,0.5); }
    .vibe-chip.reserved { opacity: 0.3; cursor: default; pointer-events: none; }
    .vibe-chip.w7  { background: rgba(124,58,237,0.18); border-color: #7c3aed; }
    .vibe-chip.w10 { background: #7c3aed; border-color: #c4b5fd; box-shadow: 0 0 10px rgba(124,58,237,0.5); }
    .vibe-chip-icon { font-size: 22px; line-height: 1; }
    .vibe-chip-label { font-size: 10px; font-weight: 700; color: #cbd5e1; letter-spacing: 0.01em; white-space: normal; text-align: center; line-height: 1.12; }
    .vibe-chip.w7 .vibe-chip-label, .vibe-chip.w10 .vibe-chip-label { color: #fff; }
    .vibe-chip-dots { font-size: 9px; line-height: 8px; height: 8px; color: #a78bfa; letter-spacing: 1px; }
    .vibe-chip.w10 .vibe-chip-dots { color: #fff; }

    .vibe-section-label { color: #9ca3af; font-size: 12px; font-weight: 600; margin: 16px 0 8px; }
    .vibe-board-pills, .vibe-ft-pills { display: flex; gap: 6px; flex-wrap: wrap; }
    .vibe-pill {
      padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 600;
      background: #0d0d1a; border: 1px solid rgba(255,255,255,0.12); color: #9ca3af;
      cursor: pointer; transition: all 0.15s; white-space: nowrap;
    }
    .vibe-pill:hover { border-color: rgba(139,92,246,0.5); }
    .vibe-pill.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
    .vibe-pill.disabled { opacity: 0.28; cursor: not-allowed; pointer-events: none; }

    /* Forward row that opens the fine-tune second dialog */
    .vibe-forward-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin-top: 16px; padding: 12px 14px;
      background: #0d0d1a; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
      cursor: pointer; transition: border-color 0.15s, background 0.15s;
    }
    .vibe-forward-row:hover { border-color: rgba(139,92,246,0.5); background: rgba(124,58,237,0.08); }
    .vibe-forward-label { color: #e2e8f0; font-size: 13px; font-weight: 600; }
    .vibe-forward-sub { color: #9ca3af; font-size: 11px; margin-top: 2px; line-height: 1.35; }
    .vibe-forward-chev { color: #a78bfa; font-size: 22px; font-weight: 700; line-height: 1; flex-shrink: 0; }
    /* Second dialog stacks above the picker (picker = z 100) */
    #vibe-finetune-modal { z-index: 112; }
    .vibe-ft-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; flex-wrap: wrap; }
    .vibe-ft-cat { font-size: 12px; color: #e2e8f0; font-weight: 600; min-width: 78px; }
    .vibe-ft-dist { font-size: 11px; color: #8b5cf6; min-width: 42px; }
    .vibe-ft-row .vibe-ft-pills { margin-left: auto; }
    .vibe-ft-note { font-size: 11px; color: #6b7280; margin-left: auto; font-style: italic; }

    .vibe-counter { font-size: 12px; color: #9ca3af; text-align: center; margin: 14px 0 12px; }
    .vibe-counter b { color: #c4b5fd; }
    .vibe-actions { display: flex; gap: 10px; margin-top: 20px; }
    .vibe-skip {
      flex: 0 0 auto; padding: 12px 22px; border-radius: 12px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      color: #9ca3af; font-size: 13px; cursor: pointer; font-family: inherit;
    }
    .vibe-skip:hover { color: #fff; }
    .vibe-go {
      flex: 1; padding: 12px; border-radius: 12px;
      background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
      font-size: 14px; font-weight: 600; border: none; cursor: pointer; font-family: inherit;
      transition: opacity 0.15s;
    }
    .vibe-go:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ── Copernicus attribution ── */
    #sentinel-attr {
      display: none; position: fixed;
      bottom: calc(8px + env(safe-area-inset-bottom, 0px));
      left: 8px; z-index: 11;
      background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
      color: rgba(255,255,255,0.75); font-size: 10px; line-height: 1;
      padding: 4px 8px; border-radius: 4px;
      pointer-events: none; white-space: nowrap;
    }

    /* ── Legal modals ── */
    .legal-section { margin-bottom: 14px; }
    .legal-h { color: #e2e8f0; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
    .legal-p { color: #9ca3af; font-size: 12px; line-height: 1.6; margin: 0 0 4px; }
    .legal-ul { color: #9ca3af; font-size: 12px; line-height: 1.6; margin: 0 0 4px; padding-left: 16px; }
    .legal-ul li { margin-bottom: 2px; }
    .legal-date { color: #6b7280; font-size: 11px; margin-bottom: 12px; }

    /* ── Green Cover modal ── */
    #green-modal {
      display: none; position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      align-items: flex-end; justify-content: center;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #green-modal.open { display: flex; }
    #green-modal-card {
      background: #0f0f1e;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px 20px 0 0;
      padding: 24px 20px 28px;
      width: 100%; max-width: 480px;
    }

    /* ── Hide-pins first-time explainer modal ── */
    #hide-pins-modal {
      display: none; position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      align-items: flex-end; justify-content: center;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #hide-pins-modal.open { display: flex; }
    #hide-pins-modal-card {
      background: #0f0f1e;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px 20px 0 0;
      padding: 24px 20px 28px;
      width: 100%; max-width: 480px;
    }

    /* ── Seeking modal ── */
    #seeking-modal {
      display: none; position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      align-items: flex-end; justify-content: center;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #seeking-modal.open { display: flex; }
    #seeking-modal-card {
      background: #0f0f1e;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px 20px 0 0;
      padding: 24px 20px 28px;
      width: 100%; max-width: 480px;
    }

    /* ── Seeker pin ── */
    .seeker-pin-label {
      background: rgba(13,148,136,0.15); border: 1.5px dashed #0d9488; color: #5eead4;
      padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
      white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
    }
    .seeker-caret { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #0d9488; margin:0 auto; }

    /* Seeker form chips */
    .schip {
      padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 500;
      border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
      background: #0d0d1a; color: #9ca3af; transition: all 0.15s; user-select: none;
    }
    .schip:hover { border-color: rgba(255,255,255,0.2); color: white; }
    .schip.active { background: #0d9488; border-color: #0d9488; color: white; }

    /* ── Transit modal ── */
    #transit-modal {
      display: none; position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      align-items: flex-end; justify-content: center;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #transit-modal.open { display: flex; }
    #transit-modal-card {
      background: #0f0f1e;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px 20px 0 0;
      padding: 24px 20px 28px;
      width: 100%; max-width: 480px;
    }
    .transit-legend-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .transit-line-thick { width: 32px; height: 5px; border-radius: 3px; flex-shrink: 0; }
    .transit-line-thin  { width: 32px; height: 2px; border-radius: 2px; flex-shrink: 0; }

    /* ── Message Board ── */
    #msg-board {
      position: fixed;
      /* 140px clears mobile bottom ad (120px after 2026-06-10 CTR fix —
         100px ad + 16px Sponsored label band + breathing) and desktop
         728×90 leaderboard (90px) with 20-50px breathing gap. Don't
         lower without re-checking both ad slot heights — they sit at
         bottom:0 with z-index:9. */
      bottom: calc(140px + env(safe-area-inset-bottom, 0px));
      left: 50%; transform: translateX(-50%);
      z-index: 10; max-width: 400px;
      width: calc(100% - 32px);
    }
    #msg-board-inner {
      background: rgba(10,10,20,0.88);
      border: 1px solid rgba(139,92,246,0.25);
      border-left: 3px solid #8b5cf6;
      border-radius: 12px; padding: 10px 12px 10px 14px;
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 4px 24px rgba(0,0,0,0.5);
      display: flex; align-items: flex-start; gap: 10px;
    }
    #msg-board-content { flex: 1; min-width: 0; }
    #msg-board-label {
      font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
      color: #8b5cf6; text-transform: uppercase; margin-bottom: 3px;
    }
    #msg-board-text { color: #d1d5db; font-size: 12px; line-height: 1.55; }
    #msg-board-close {
      background: none; border: none; color: #4a5568; font-size: 20px;
      cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
      margin-top: -1px; font-family: inherit; transition: color 0.15s;
    }
    #msg-board-close:hover { color: #9ca3af; }

    /* ── Measure toast ── */
    .measure-toast {
      position: fixed;
      bottom: calc(80px + env(safe-area-inset-bottom, 0px));
      left: 50%; transform: translateX(-50%);
      z-index: 50; display: none;
      align-items: center; gap: 12px;
      background: #1e1e35;
      border: 1px solid rgba(139,92,246,0.4);
      border-radius: 14px; padding: 10px 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55);
      white-space: nowrap;
    }
    .measure-toast-icon { font-size: 14px; flex-shrink: 0; }
    .measure-toast-text { color: #e2e8f0; font-size: 13px; font-weight: 500; }
    .measure-cancel-btn {
      background: none; border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px; color: #9ca3af; font-size: 12px;
      padding: 4px 10px; cursor: pointer; transition: all 0.15s;
      font-family: inherit;
    }
    .measure-cancel-btn:hover { color: white; border-color: rgba(255,255,255,0.35); }

    /* ── Measure floating "View Stats" button ── */
    .measure-find-btn {
      position: fixed; z-index: 50; display: none;
      background: linear-gradient(135deg, #7c3aed, #6d28d9);
      color: white; border: none; border-radius: 12px;
      padding: 10px 22px; font-size: 14px; font-weight: 600;
      cursor: pointer; box-shadow: 0 4px 20px rgba(124,58,237,0.5);
      transform: translateX(-50%); transition: all 0.15s;
      white-space: nowrap; font-family: inherit;
    }
    .measure-find-btn:hover { background: linear-gradient(135deg, #6d28d9, #5b21b6); box-shadow: 0 6px 24px rgba(124,58,237,0.65); }

    /* ── Area Stats modal ── */
    .area-gated-toggle {
      display: flex; gap: 6px; margin-bottom: 20px;
      background: rgba(255,255,255,0.04); border-radius: 10px; padding: 4px;
    }
    .agt-btn {
      flex: 1; padding: 7px 10px; border-radius: 7px; font-size: 12px; font-weight: 600;
      background: none; border: none; color: #6b7280; cursor: pointer;
      transition: all 0.15s; font-family: inherit; text-align: center;
    }
    .agt-btn.active { background: #7c3aed; color: white; }
    .area-bhk-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px; border-radius: 12px; background: #0d0d1a;
      border: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px;
    }
    .area-bhk-label { color: #9ca3af; font-size: 13px; font-weight: 600; }
    .area-bhk-count { color: #4a5568; font-size: 11px; margin-top: 2px; }
    .area-bhk-avg { color: white; font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
    .area-bhk-range { color: #4a5568; font-size: 10px; margin-top: 2px; text-align: right; }
    .area-summary-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; border-radius: 10px;
      background: rgba(139,92,246,0.07); border: 1px solid rgba(139,92,246,0.15);
      margin-bottom: 16px;
    }
    .area-summary-label { color: #a78bfa; font-size: 12px; font-weight: 600; }
    .area-summary-val { color: #c4b5fd; font-size: 14px; font-weight: 700; }

    /* Google autocomplete */
    .pac-container { background: #1a1a2e !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important; margin-top: 6px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; overflow: hidden; }
    .pac-item { background: #1a1a2e !important; color: #9ca3af !important; border-top: 1px solid rgba(255,255,255,0.05) !important; padding: 8px 12px !important; font-size: 13px !important; cursor: pointer; }
    .pac-item:hover, .pac-item-selected { background: #2d2d4e !important; }
    .pac-item-query { color: #e2e8f0 !important; font-size: 13px !important; }
    .pac-icon { display: none !important; }
    .pac-matched { color: #818cf8 !important; }

    /* ── Cluster marker ── */
    .cluster-wrap {
      position: absolute;
      transform: translate(-50%, -100%);
      display: flex; flex-direction: column; align-items: center;
      cursor: pointer;
      transition: transform 0.1s;
    }
    .cluster-wrap:hover { transform: translate(-50%, -104%); }
    .cluster-marker {
      background: #1e1e35;
      border: 1.5px solid rgba(255,255,255,0.18);
      border-radius: 10px;
      padding: 6px 10px 5px;
      text-align: center;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      min-width: 72px;
    }
    .cluster-row1 { display: flex; align-items: center; gap: 5px; justify-content: center; }
    .cluster-count { font-size: 12px; font-weight: 700; color: #e2e8f0; }
    .cluster-sep { color: rgba(255,255,255,0.25); font-size: 10px; }
    .cluster-rent { font-size: 11px; color: #94a3b8; }
    .cluster-tags { display: flex; align-items: center; gap: 5px; justify-content: center; margin-top: 2px; font-size: 10px; color: #cbd5e1; line-height: 1; }
    .cluster-tag-sep { color: rgba(255,255,255,0.2); }
    .cluster-caret {
      width: 8px; height: 8px;
      transform: rotate(45deg);
      margin-top: -5px;
      background: #1e1e35;
      border-right: 1.5px solid rgba(255,255,255,0.18);
      border-bottom: 1.5px solid rgba(255,255,255,0.18);
      flex-shrink: 0;
    }
    /* ── Flatmate tag on pin ── */
    .pin-flatmate-tag { font-size: 9px; font-weight: 700; color: white; background: #0d9488; border-radius: 4px; padding: 2px 5px; margin-bottom: 2px; white-space: nowrap; }
    /* ── Available / Room Avail tags on pin ── */
    .pin-available-tag { font-size: 9px; font-weight: 700; color: white; background: #22c55e; border-radius: 4px; padding: 2px 5px; margin-bottom: 2px; white-space: nowrap; }
    .pin-room-avail-tag { font-size: 9px; font-weight: 700; color: white; background: #22c55e; border-radius: 4px; padding: 2px 5px; margin-bottom: 2px; white-space: nowrap; }
    /* ── Report count tag on pin ── */
    .pin-report-tag { font-size: 9px; font-weight: 700; color: white; background: #dc2626; border-radius: 4px; padding: 2px 5px; margin-bottom: 2px; white-space: nowrap; }
    /* ── Above area avg tag on pin ── */
    .pin-above-avg-tag { font-size: 9px; font-weight: 600; color: #1a1a2e; background: #fbbf24; border-radius: 4px; padding: 2px 5px; margin-bottom: 2px; white-space: nowrap; }

    /* ── Own-pin tag ── */
    .pin-own-tag { font-size: 9px; font-weight: 700; color: #1a1a2e; background: rgba(255,255,255,0.92); border-radius: 4px; padding: 2px 6px; margin-bottom: 2px; white-space: nowrap; }

    /* ── CTA Bar (Find Flat or Tenants) ── */
    .cta-bar {
      position: fixed; bottom: 82px; left: 50%; transform: translateX(-50%);
      z-index: 10; display: flex; align-items: center; gap: 10px;
      padding: 10px 18px; border-radius: 16px;
      background: rgba(8,8,18,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(167,139,250,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      cursor: pointer; transition: border-color 0.2s, transform 0.15s; white-space: nowrap;
    }
    .cta-bar:hover { border-color: rgba(167,139,250,0.6); transform: translateX(-50%) scale(1.02); }
    .cta-bar-icon { font-size: 16px; }
    .cta-bar-text { color: #e2e8f0; font-size: 13px; font-weight: 600; }
    .cta-bar-arrow { color: #a78bfa; font-size: 12px; font-weight: 600; }
    .cta-bar-new { position: absolute; top: -8px; left: -8px; background: #a78bfa; color: #1a1a2e; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em; animation: newPulse 2s ease-in-out infinite; }
    @keyframes newPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
    @keyframes dpShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* ── L2 Dialog cards ── */
    .l2-card {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 14px 16px; border-radius: 12px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
      cursor: pointer; transition: background 0.15s, border-color 0.15s; margin-bottom: 10px;
    }
    .l2-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
    .l2-card-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
    .l2-card-title { color: #e2e8f0; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
    .l2-card-sub { color: #6b7280; font-size: 12px; line-height: 1.4; }

    /* ── Flat Hunt button (right panel) ── */
    .flat-hunt-btn {
      position: fixed; right: 12px; z-index: 10;
      display: flex; align-items: center; gap: 6px;
      padding: 8px 14px; border-radius: 12px;
      background: rgba(8,8,18,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      color: #cbd5e1; font-size: 12px; font-weight: 600; cursor: pointer;
      transition: background 0.15s, border-color 0.15s; font-family: inherit;
    }
    .flat-hunt-btn:hover { background: rgba(8,8,18,0.9); border-color: rgba(34,197,94,0.4); }
    .flat-hunt-btn.active { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.1); }

    /* ── Seeker pin overlay (Flat Hunt view) ── */
    .seeker-marker {
      position: absolute; display: flex; flex-direction: column; align-items: center;
      pointer-events: auto; cursor: pointer; will-change: transform;
    }
    .seeker-label {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 10px; border-radius: 8px;
      background: rgba(6,182,212,0.15); border: 1.5px dashed #06b6d4;
      color: #22d3ee; font-size: 11px; font-weight: 600; white-space: nowrap;
    }
    .seeker-caret {
      width: 8px; height: 8px; transform: rotate(45deg); margin-top: -5px;
      background: rgba(6,182,212,0.15); border-right: 1.5px dashed #06b6d4; border-bottom: 1.5px dashed #06b6d4;
    }
    /* ── Seeker cluster (Flat Hunt view) ── */
    .seeker-cluster-wrap { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; }
    .seeker-cluster-marker {
      padding: 6px 12px; border-radius: 10px;
      background: rgba(6,182,212,0.18); border: 1.5px solid rgba(6,182,212,0.5);
      text-align: center;
    }
    .seeker-cluster-count { color: #22d3ee; font-size: 12px; font-weight: 700; }
    .seeker-cluster-avg { color: #67e8f9; font-size: 10px; font-weight: 500; }
    .seeker-cluster-caret {
      width: 8px; height: 8px; transform: rotate(45deg); margin: -5px auto 0;
      background: rgba(6,182,212,0.18); border-right: 1.5px solid rgba(6,182,212,0.5); border-bottom: 1.5px solid rgba(6,182,212,0.5);
    }

    /* ── List my flat CTA inside pin form ── */
    .list-flat-cta {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px; border-radius: 12px; margin-top: 10px;
      background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.2);
      cursor: pointer; transition: background 0.15s;
    }
    .list-flat-cta:hover { background: rgba(34,197,94,0.12); }

    /* ── Flatmate interest section in detail modal ── */
    .flatmate-detail-box { margin-top: 14px; padding: 12px 14px; background: rgba(13,148,136,0.1); border: 1px solid rgba(13,148,136,0.3); border-radius: 12px; display: none; }
    .flatmate-detail-box.visible { display: block; }
    .listed-seeker-cta { margin-top: 14px; padding: 12px 14px; background: rgba(13,148,136,0.1); border: 1px solid rgba(13,148,136,0.3); border-radius: 12px; cursor: pointer; display: none; align-items: center; gap: 10px; transition: background 0.15s, border-color 0.15s; }
    .listed-seeker-cta.visible { display: flex; }
    .listed-seeker-cta:hover { background: rgba(13,148,136,0.15); border-color: rgba(13,148,136,0.5); }
    .listed-seeker-cta-icon { font-size: 22px; flex-shrink: 0; }
    .listed-seeker-cta-body { flex: 1; min-width: 0; }
    .listed-seeker-cta-title { color: #5eead4; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
    .listed-seeker-cta-sub { color: #6b7280; font-size: 11px; line-height: 1.4; }
    .listed-seeker-cta-arrow { color: #5eead4; font-size: 16px; flex-shrink: 0; }

    /* ── Watchlist CTA (below pin detail's "See flats available" pill) ── */
    /* ── Combined "Not for rent" + watchlist CTA block (2026-05-10) ──
       Shown on plain rent pins (non-listings). Top half is informational
       (gray, not clickable except for the "See flats available" link).
       Bottom half is the watchlist CTA — entire row clickable. */
    .rent-only-block { margin-top: 10px; border: 1px solid rgba(148,163,184,0.22); border-radius: 12px; display: none; overflow: hidden; }
    .rent-only-block.visible { display: block; }
    .rent-only-top { padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; color: #94a3b8; font-size: 13px; line-height: 1.5; }
    .rent-only-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
    .rent-only-text { flex: 1; min-width: 0; }
    .rent-only-headline { color: #cbd5e1; font-weight: 600; margin-bottom: 2px; }
    .rent-only-body { color: #94a3b8; }
    .rent-only-link { display: inline-block; margin-top: 4px; color: #5eead4; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
    .rent-only-divider { height: 1px; background: rgba(148,163,184,0.18); margin: 0 14px; }
    .rent-only-cta { padding: 12px 14px; background: rgba(167,139,250,0.06); display: flex; gap: 10px; align-items: center; cursor: pointer; transition: background 0.15s; }
    .rent-only-cta:hover { background: rgba(167,139,250,0.12); }
    .rent-only-cta.watching { background: rgba(34,197,94,0.06); cursor: default; }
    .rent-only-cta.watching:hover { background: rgba(34,197,94,0.06); }
    .rent-only-cta-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
    .rent-only-cta-body { flex: 1; min-width: 0; }
    .rent-only-cta-title { color: #c4b5fd; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
    .rent-only-cta.watching .rent-only-cta-title { color: #86efac; }
    .rent-only-cta-sub { color: #6b7280; font-size: 11px; line-height: 1.4; }
    .rent-only-cta-arrow { color: #c4b5fd; font-size: 16px; flex-shrink: 0; }
    .rent-only-cta.watching .rent-only-cta-arrow { display: none; }

    /* Watch modal (shares modal-backdrop + modal-card patterns) */
    #watch-modal .modal-card { max-width: 380px; }
    .watch-duration-row { display: flex; gap: 6px; margin-top: 6px; }
    .watch-duration-chip { flex: 1; padding: 8px 0; border-radius: 10px; background: #0d0d1a; border: 1px solid rgba(255,255,255,0.10); color: #9ca3af; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s; user-select: none; font-family: inherit; }
    .watch-duration-chip:hover { color: white; border-color: rgba(255,255,255,0.20); }
    .watch-duration-chip.active { background: #7c3aed; border-color: #7c3aed; color: white; }
    .watch-input { width: 100%; padding: 10px 12px; background: #0d0d1a; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #e2e8f0; font-size: 14px; font-family: inherit; box-sizing: border-box; }
    .watch-input:focus { border-color: rgba(124,58,237,0.6); outline: none; }
    .watch-label { display: block; color: #9ca3af; font-size: 12px; font-weight: 600; margin: 12px 0 6px 0; }
    .watch-label .req { color: #ef4444; margin-left: 2px; }
    .watch-fineprint { color: #6b7280; font-size: 11px; line-height: 1.5; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
    .watch-submit { width: 100%; margin-top: 14px; padding: 12px; border-radius: 10px; background: linear-gradient(135deg,#7c3aed,#a78bfa); color: white; font-size: 14px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
    .watch-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .watch-error { color: #f87171; font-size: 12px; margin-top: 8px; display: none; }
    .flatmate-detail-label { color: #2dd4bf; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; }
    .flatmate-detail-sub { color: #6b7280; font-size: 12px; }
    .flatmate-interest-btn { margin-top: 10px; width: 100%; padding: 9px; border-radius: 10px; background: rgba(13,148,136,0.2); color: #5eead4; border: 1px solid rgba(13,148,136,0.4); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; }
    .flatmate-interest-btn:hover { background: rgba(13,148,136,0.35); }

    /* ── Flatmate owner row in detail modal ── */
    .flatmate-owner-row { display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; background:rgba(13,148,136,0.08); border:1px solid rgba(13,148,136,0.2); border-radius:10px; }
    .flatmate-owner-row input[type=checkbox] { width:15px; height:15px; accent-color:#0d9488; flex-shrink:0; cursor:pointer; }
    .flatmate-owner-row label { font-size:12px; color:#5eead4; cursor:pointer; }
    .owner-email-save-row { display:flex; gap:8px; align-items:center; margin-top:8px; }
    .owner-email-save-btn { padding:8px 12px; border-radius:10px; background:rgba(13,148,136,0.2); color:#5eead4; border:1px solid rgba(13,148,136,0.3); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition: background 0.15s; }
    .owner-email-save-btn:hover { background:rgba(13,148,136,0.35); }

    /* ── Flatmate checkbox row in form ── */
    .flatmate-checkbox-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:12px 14px; background:rgba(13,148,136,0.08); border:1px solid rgba(13,148,136,0.2); border-radius:12px; cursor:pointer; }
    .flatmate-checkbox-row input[type=checkbox] { width:16px; height:16px; accent-color:#0d9488; flex-shrink:0; cursor:pointer; }
    .flatmate-checkbox-row label { font-size:13px; color:#5eead4; line-height:1.4; cursor:pointer; }

    /* ── Rating section (clickable trigger) ── */
    .rating-section { cursor: pointer; border-radius: 10px; margin-top: 14px; padding: 10px 0 4px; border-top: 1px solid rgba(255,255,255,0.06); transition: background 0.15s; }
    .rating-section:hover { background: rgba(255,255,255,0.02); }
    .rating-section-inner { display:flex; align-items:center; justify-content:space-between; }
    .rating-trigger-left { flex: 1; }

    /* ── Rating modal dimensions ── */
    .rating-dim-block { margin-bottom: 20px; }
    .rating-dim-label { color: #e2e8f0; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
    .rating-dim-sub { color: #4b5563; font-size: 11px; margin-bottom: 10px; }
    .rating-stars-row { display: flex; gap: 8px; }
    .rating-star2 { font-size: 28px; cursor: pointer; color: #374151; transition: color 0.1s, transform 0.1s; line-height: 1; user-select: none; }
    .rating-star2:hover, .rating-star2.active { color: #fbbf24; }
    .rating-star2:hover { transform: scale(1.15); }
    .rating-submit-hint { color: #4b5563; font-size: 11px; text-align: center; margin-top: 8px; }