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

  /* ── DARK MODE (default) ── */
  :root{
    --green:#4ade80;--green-dark:#16a34a;--green-dim:#166534;
    --amber:#fbbf24;--bg:#0f1a12;--panel:#141f17;--panel2:#1a2b1e;
    --border:#2a3f2e;--text:#e8f5e9;--muted:#6b9e76;--red:#f87171;
  }

  /* ── LIGHT MODE ── */
  :root[data-theme="light"]{
    --bg:#f0f7f1;--panel:#ffffff;--panel2:#e8f3ea;
    --border:#c2ddc8;--text:#1a2e1e;--muted:#4a7a54;
    --green:#16a34a;--green-dark:#15803d;--green-dim:#166534;
    --amber:#d97706;--red:#dc2626;
  }
  body{font-family:"DM Sans",system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

  /* ── HEADER ── */
  header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;z-index:1000}
  .logo{display:flex;align-items:center;gap:10px}
  .logo h1{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:700;color:var(--text)}
  .logo p{font-size:11px;color:var(--muted);font-weight:300}
  .header-right{display:flex;align-items:center;gap:10px}
  .counter{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border);border-radius:20px;padding:6px 14px}
  .counter-nums{font-family:"Playfair Display",Georgia,serif;font-size:18px;font-weight:700;color:var(--green)}
  .counter-label{font-size:11px;color:var(--muted);font-weight:300}
  .progress-ring-wrap{width:32px;height:32px}
  svg.ring{transform:rotate(-90deg)}
  .ring-bg{fill:none;stroke:var(--border);stroke-width:3}
  .ring-fill{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 0.6s ease}

  /* auth buttons */
  .auth-btn{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;font-family:"DM Sans",system-ui,sans-serif;font-size:13px;font-weight:500;padding:7px 13px;cursor:pointer;transition:all 0.2s}
  .btn-login{background:transparent;color:var(--muted)}
  .btn-login:hover{border-color:var(--green-dim);color:var(--green)}
  .btn-signup{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
  .btn-signup:hover{background:var(--green-dim)}
  .btn-logout{background:transparent;color:var(--muted);border-color:var(--border);font-size:12px;padding:5px 10px}
  .btn-logout:hover{color:var(--red);border-color:var(--red)}
  .user-chip{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--muted)}
  .user-avatar{width:22px;height:22px;border-radius:50%;background:var(--green-dark);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
  .user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .user-avatar.has-photo{background:transparent}

  /* ── MAP ── */
  /* min-height:0 is critical: flex items default to min-height:auto and refuse
   to shrink below content size, which can blow the 100vh layout apart and push
   the footer/ads off-layout. This pins the map to exactly the leftover space. */
  #map{flex:1;min-height:0;width:100%}
  .map-search-wrap{
    position:relative;z-index:800;
    padding:8px 12px;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .map-search-inner{
    display:flex;align-items:center;gap:8px;
    background:var(--panel2);border:1px solid var(--border);
    border-radius:22px;padding:0 14px;
    transition:border-color 0.2s;
  }
  .map-search-inner:focus-within{border-color:var(--green);}
  .map-search-icon{color:var(--green);font-size:15px;flex-shrink:0;}
  .map-search-input{
    flex:1;background:transparent;border:none;outline:none;
    color:var(--text);font-size:14px;font-family:"DM Sans",sans-serif;
    padding:10px 0;
  }
  .map-search-input::placeholder{color:var(--muted);}
  .map-search-clear{
    background:transparent;border:none;color:var(--muted);
    font-size:18px;cursor:pointer;padding:0 0 0 4px;
    display:none;line-height:1;
  }
  .map-search-results{
    position:absolute;top:calc(100% - 4px);left:12px;right:12px;
    background:var(--panel2);border:1px solid var(--border);border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.6);
    max-height:240px;overflow-y:auto;z-index:900;display:none;
  }
  .map-search-result-item{
    padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);
    display:flex;flex-direction:column;gap:2px;
  }
  .map-search-result-item:last-child{border-bottom:none;}
  .map-search-result-item:hover,.map-search-result-item:active{background:var(--panel);}
  .map-search-result-name{color:var(--text);font-size:14px;font-weight:600;}
  .map-search-result-addr{color:var(--muted);font-size:12px;}

  /* ── THEME TOGGLE ── */
  .theme-toggle{
    width:36px;height:36px;border-radius:50%;
    background:var(--panel2);border:1px solid var(--border);
    color:var(--muted);font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.2s;flex-shrink:0;
  }
  .theme-toggle:hover{border-color:var(--green);color:var(--green)}

  /* ── POPUP ── */
  .leaflet-popup-content-wrapper{background:var(--panel)!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:0 8px 32px rgba(0,0,0,0.6)!important;padding:0!important;min-width:290px}
  .leaflet-popup-content{margin:0!important;width:100%!important}
  .leaflet-popup-tip-container{display:none}
  .leaflet-popup-close-button{color:var(--muted)!important;font-size:18px!important;top:10px!important;right:12px!important}
  .leaflet-popup-close-button:hover{color:var(--text)!important}
  .popup{padding:16px}
  .popup-name{font-family:"Playfair Display",Georgia,serif;font-size:17px;font-weight:700;margin-bottom:3px;padding-right:20px;color:var(--text)}
  .popup-addr{font-size:12px;color:var(--muted);margin-bottom:10px}
  .popup-divider{border:none;border-top:1px solid var(--border);margin:10px 0}
  .popup-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
  .popup-row-label{font-size:11px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.6px}

  /* visited toggle */
  .visited-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
  .toggle-track{width:40px;height:22px;background:var(--border);border-radius:11px;position:relative;transition:background 0.25s}
  .toggle-track.on{background:var(--green-dark)}
  .toggle-thumb{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:left 0.25s}
  .toggle-track.on .toggle-thumb{left:21px}
  .visited-label{font-size:13px;font-weight:500}

  /* stars */
  .stars{display:flex;gap:3px}
  .star{font-size:20px;cursor:pointer;color:var(--border);transition:color 0.15s,transform 0.1s}
  .star.lit{color:var(--amber)}
  .star:hover{transform:scale(1.2)}
  .star.readonly{cursor:default}
  .star.readonly:hover{transform:none}

  /* drinks */
  .drinks-section{margin-bottom:4px}
  .drink-row{display:flex;align-items:center;gap:5px;margin-bottom:6px}
  .drink-select{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-size:16px;padding:8px 6px;outline:none;min-height:44px;-webkit-appearance:menulist}
  .drink-select:focus{border-color:var(--green-dim)}
  .drink-price{background:var(--panel2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-size:12px;width:65px;padding:5px 6px;outline:none}
  .drink-price:focus{border-color:var(--green-dim)}
  .drink-remove{background:transparent;border:none;font-size:14px;cursor:pointer;padding:8px;min-width:44px;min-height:44px;transition:opacity 0.15s;opacity:0.5;line-height:1;display:flex;align-items:center;justify-content:center}
  .drink-remove:hover{opacity:1}
  .add-drink-btn{background:rgba(74,222,128,0.08);border:1px solid rgba(74,222,128,0.25);border-radius:10px;color:#4ade80;font-size:13px;font-weight:600;font-family:"DM Sans",system-ui,sans-serif;padding:11px 10px;cursor:pointer;width:100%;min-height:44px;transition:all 0.2s;margin-bottom:4px;box-sizing:border-box;display:block;-webkit-tap-highlight-color:rgba(74,222,128,0.3);user-select:none}
  .add-drink-btn:hover{border-color:var(--green-dim);color:var(--green)}
  .price-currency{font-size:12px;color:var(--muted);flex-shrink:0}
  .drink-readonly{font-size:13px;color:var(--text);padding:3px 0}
  .drink-readonly span{color:var(--green);font-weight:500}

  /* notes */
  .notes-area{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-size:13px;padding:8px;resize:none;outline:none;min-height:55px;margin-bottom:8px}
  .notes-area:focus{border-color:var(--green-dim)}
  .notes-readonly{font-size:13px;color:var(--text);padding:4px 0;line-height:1.5;margin-bottom:8px;font-style:italic;opacity:0.8}

  /* save btn */
  .save-btn{width:100%;background:var(--green-dark);border:none;border-radius:10px;color:#fff;font-family:"DM Sans",system-ui,sans-serif;font-size:14px;font-weight:500;padding:10px;cursor:pointer;margin-top:10px;transition:background 0.2s}
  .save-btn:hover{background:var(--green-dim)}
  .save-btn.saved{background:#2d6a4f}

  /* guest lock banner */
  .guest-banner{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .guest-banner p{font-size:12px;color:var(--muted)}
  .guest-banner button{background:var(--green-dark);border:none;border-radius:7px;color:#fff;font-family:"DM Sans",system-ui,sans-serif;font-size:12px;padding:5px 12px;cursor:pointer;white-space:nowrap}

  /* legend */
  .legend{position:absolute;bottom:24px;left:16px;z-index:900;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--muted)}
  .legend-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
  .legend-row:last-child{margin-bottom:0}
  .legend-dot{width:12px;height:12px;border-radius:50%}

  /* toast */
  .toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:var(--green-dark);color:#fff;font-size:13px;border-radius:20px;padding:8px 18px;z-index:9999;opacity:0;transition:opacity 0.3s;pointer-events:none}
  .toast.show{opacity:1}

  /* ── AUTH MODAL ── */
  .auth-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:6000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .auth-backdrop.open{opacity:1;pointer-events:all}
  .modal{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:32px;width:360px;max-width:92vw;box-shadow:0 24px 64px rgba(0,0,0,0.7)}
  .modal-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:24px}
  .modal-logo h2{font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:700}
  .modal-logo p{font-size:12px;color:var(--muted)}
  .modal-tabs{display:flex;background:var(--panel2);border-radius:10px;padding:3px;margin-bottom:20px}
  .modal-tab{flex:1;text-align:center;padding:7px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted);transition:all 0.2s}
  .modal-tab.active{background:var(--green-dark);color:#fff}
  .modal-field{margin-bottom:14px}
  .modal-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
  .modal-field input{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:9px;color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-size:14px;padding:9px 12px;outline:none;transition:border-color 0.2s}
  .modal-field input:focus{border-color:var(--green-dim)}
  .modal-submit{width:100%;background:var(--green-dark);border:none;border-radius:10px;color:#fff;font-family:"DM Sans",system-ui,sans-serif;font-size:14px;font-weight:600;padding:11px;cursor:pointer;margin-top:4px;transition:background 0.2s}
  .modal-submit:hover{background:var(--green-dim)}
  .modal-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:12px}
  .modal-divider::before,.modal-divider::after{content:"";flex:1;border-top:1px solid var(--border)}
  .google-btn{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-size:14px;font-weight:500;padding:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:border-color 0.2s}
  .google-btn:hover{border-color:var(--muted)}
  .modal-error{font-size:12px;color:var(--red);margin-top:8px;min-height:16px}
  .modal-close{position:absolute;top:14px;right:16px;background:transparent;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
  .modal-close:hover{color:var(--text)}
  .auth-modal-box{position:relative;background:var(--panel);border-radius:16px;padding:28px;width:100%;max-width:400px;box-shadow:0 24px 80px rgba(0,0,0,0.7);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;margin:auto}

  /* loading */
  #loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:14px}
  #loading p{color:var(--muted);font-size:14px}
  .spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin 0.8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ── PASSPORT ── */
  .passport-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:4000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s ease;padding:20px}
  .passport-backdrop.open{opacity:1;pointer-events:all}
  .passport-tap-wrap{display:flex;flex-direction:column;align-items:center;width:100%;max-width:380px}
  .tap-nozzle{display:flex;flex-direction:column;align-items:center}
  .tap-body{width:18px;height:22px;background:linear-gradient(180deg,#1a2b1e,#2a3f2e);border-radius:4px 4px 0 0;border:1.5px solid #4ade80;border-bottom:none}
  .tap-head{width:30px;height:10px;background:linear-gradient(180deg,#2a3f2e,#1a2b1e);border-radius:3px;border:1.5px solid #4ade80;margin-top:-1px}
  .tap-stream{width:6px;height:0px;background:linear-gradient(180deg,#4ade80,rgba(74,222,128,0.2));border-radius:3px;transition:height 0.45s cubic-bezier(0.4,0,0.6,1)}
  /* ── FRIEND PROFILE MODAL ── */
  .friend-profile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(6px)}
  .friend-profile-card{width:100%;max-width:380px;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overflow-x:hidden;background:linear-gradient(160deg,#0c1510 0%,#111b14 50%,#182318 100%);border:1px solid #2a3f2e;border-radius:20px;position:relative;box-shadow:0 40px 100px rgba(0,0,0,0.95),inset 0 1px 0 rgba(74,222,128,0.15);animation:fpSlideUp 0.35s cubic-bezier(0.22,1,0.36,1)}
  @keyframes fpSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
  .friend-profile-banner{background:linear-gradient(90deg,#052e16,#14532d);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:1px;color:#4ade80;text-transform:uppercase}
  .friend-profile-inner{padding:20px}
  .friend-profile-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  .friend-profile-av{width:68px;height:68px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#15803d,#4ade80);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#052e16;box-shadow:0 0 0 3px rgba(74,222,128,0.2),0 4px 20px rgba(0,0,0,0.5);overflow:hidden}
  .friend-profile-name{font-size:20px;font-weight:800;color:#e8f5e9;letter-spacing:-0.3px}
  .friend-profile-sub{font-size:12px;color:#6b9e7a;margin-top:2px}
  .friend-profile-rank{display:inline-block;margin-top:6px;background:rgba(74,222,128,0.15);border:1px solid rgba(74,222,128,0.3);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;color:#4ade80}
  .friend-profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
  .fp-stat{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:10px 12px;text-align:center}
  .fp-stat-val{font-size:22px;font-weight:800;color:#4ade80}
  .fp-stat-label{font-size:10px;color:#6b9e7a;text-transform:uppercase;letter-spacing:0.5px;margin-top:2px}
  .fp-stat.wide{grid-column:1/-1;display:flex;align-items:center;gap:10px;text-align:left}
  .fp-divider{border:none;border-top:1px solid rgba(74,222,128,0.1);margin:14px 0}
  .fp-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .fp-progress-title{font-size:12px;color:#6b9e7a;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
  .fp-progress-pct{font-size:12px;color:#4ade80;font-weight:700}
  .fp-progress-bar{height:6px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden}
  .fp-progress-fill{height:100%;background:linear-gradient(90deg,#15803d,#4ade80);border-radius:99px;transition:width 0.8s cubic-bezier(0.22,1,0.36,1)}
  .fp-chat-btn{width:100%;margin-top:14px;padding:11px;background:rgba(74,222,128,0.15);border:1px solid rgba(74,222,128,0.4);color:#4ade80;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s}
  .fp-chat-btn:hover{background:rgba(74,222,128,0.28)}
  .fp-remove-btn{width:100%;margin-top:8px;padding:10px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s}
  .fp-remove-btn:hover{background:rgba(239,68,68,0.2)}
  .friend-profile-overlay{display:none}
  .friend-profile-overlay.open{display:flex}

  .passport-card{width:100%;background:linear-gradient(160deg,#0c1510 0%,#111b14 50%,#182318 100%);border:1px solid #2a3f2e;border-radius:20px;overflow:hidden;position:relative;box-shadow:0 40px 100px rgba(0,0,0,0.95),inset 0 1px 0 rgba(74,222,128,0.15);clip-path:inset(100% 0 0 0 round 20px);transition:none}
  .passport-card.poured{clip-path:inset(0% 0 0 0 round 20px);transition:clip-path 0.8s cubic-bezier(0.22,1,0.36,1)}
  .passport-shimmer{position:absolute;inset:0;background:linear-gradient(135deg,rgba(74,222,128,0.07) 0%,transparent 60%);pointer-events:none;z-index:0}
  .passport-banner{background:linear-gradient(90deg,#15803d,#4ade80 50%,#15803d);padding:11px 18px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
  .passport-banner span{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#052e16}
  .passport-close{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,0.3);border:none;color:#052e16;font-size:18px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;line-height:1}
  .passport-close:hover{background:rgba(0,0,0,0.6);color:#fff;transform:scale(1.1)}
  .passport-inner{position:relative;z-index:1;padding:22px}
  .passport-profile{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  .passport-avatar{width:58px;height:58px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#15803d,#4ade80);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#052e16;box-shadow:0 0 0 3px rgba(74,222,128,0.2),0 4px 20px rgba(0,0,0,0.5);overflow:hidden;cursor:pointer;position:relative}
  .passport-avatar .pp-av-inner{width:58px;height:58px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}
  .passport-avatar .pp-cam-hint{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0;transition:opacity 0.2s;z-index:2;pointer-events:none}
  .passport-avatar:hover .pp-cam-hint,.passport-avatar:active .pp-cam-hint{opacity:1}
  .passport-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .passport-name{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:700;color:#e8f5e9;line-height:1.2}
  .passport-since{font-size:11px;color:#6b9e76;margin-top:2px}
  .passport-rank-pill{display:inline-flex;align-items:center;gap:4px;margin-top:6px;background:linear-gradient(90deg,#78350f,#b45309);border-radius:20px;padding:3px 11px;font-size:11px;font-weight:700;color:#fef3c7}
  .pp-divider{border:none;border-top:1px solid rgba(74,222,128,0.1);margin:14px 0}
  .passport-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
  .pp-stat{background:rgba(0,0,0,0.35);border:1px solid rgba(74,222,128,0.1);border-radius:14px;padding:13px 14px}
  .pp-stat-val{font-family:"Playfair Display",Georgia,serif;font-size:26px;font-weight:700;color:#4ade80;line-height:1}
  .pp-stat-label{font-size:10px;color:#6b9e76;margin-top:5px;text-transform:uppercase;letter-spacing:0.5px}
  .pp-stat.wide{grid-column:1/-1;display:flex;align-items:center;gap:12px}
  .pp-stat.wide .pp-stat-val{font-size:15px;color:#e8f5e9}
  .pp-stat-icon{font-size:24px}
  .pp-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
  .pp-progress-title{font-size:11px;color:#6b9e76;text-transform:uppercase;letter-spacing:0.5px}
  .pp-progress-pct{font-size:14px;font-weight:700;color:#4ade80}
  .pp-progress-bar{height:8px;background:rgba(0,0,0,0.5);border-radius:4px;overflow:hidden;border:1px solid rgba(74,222,128,0.1)}
  .pp-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#15803d,#4ade80);border-radius:4px;transition:width 1.1s cubic-bezier(0.4,0,0.2,1) 0.6s;box-shadow:0 0 10px rgba(74,222,128,0.4)}
  .btn-passport{
    display:flex;align-items:center;gap:7px;
    background:linear-gradient(135deg,rgba(22,101,52,0.4),rgba(74,222,128,0.15));
    border:1px solid rgba(74,222,128,0.3);
    border-radius:22px;
    color:#4ade80;
    font-family:"DM Sans",system-ui,sans-serif;font-size:12px;font-weight:600;
    padding:6px 14px 6px 8px;
    cursor:pointer;
    transition:all 0.25s ease;
    letter-spacing:0.2px;
    backdrop-filter:blur(4px);
  }
  .btn-passport:hover{
    background:linear-gradient(135deg,rgba(22,101,52,0.7),rgba(74,222,128,0.25));
    border-color:rgba(74,222,128,0.6);
    box-shadow:0 0 12px rgba(74,222,128,0.2);
    transform:translateY(-1px);
  }
  .btn-passport:active{transform:translateY(0)}
  .btn-passport.active{
    background:linear-gradient(135deg,rgba(22,101,52,0.8),rgba(74,222,128,0.3));
    border-color:#4ade80;
    box-shadow:0 0 16px rgba(74,222,128,0.3);
  }
  :root[data-theme="light"] .btn-passport{background:#fff;border-color:#15803d;color:#15803d;background-image:none;backdrop-filter:none}
  :root[data-theme="light"] .btn-passport:hover{background:#f0fdf4;box-shadow:none}
  :root[data-theme="light"] .btn-passport.active{background:#15803d;color:#fff}
  .btn-passport-icon{
    width:22px;height:22px;border-radius:50%;
    background:linear-gradient(135deg,#15803d,#4ade80);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;flex-shrink:0;
  }
  @media(max-width:600px){
    .passport-backdrop{align-items:flex-end;padding:0}
    .passport-tap-wrap{max-width:100%}
    .tap-nozzle,.tap-stream{display:none}
    .passport-card{border-radius:20px 20px 0 0}
    .passport-card.poured{clip-path:inset(0% 0 0 0 round 20px 20px 0 0)}
  }


  /* ── PUB CRAWL ── */
  .crawl-btn{
    display:flex;align-items:center;gap:7px;
    background:linear-gradient(135deg,rgba(217,119,6,0.3),rgba(251,191,36,0.15));
    border:1px solid rgba(251,191,36,0.35);
    border-radius:22px;color:#fbbf24;
    font-family:"DM Sans",system-ui,sans-serif;font-size:12px;font-weight:600;
    padding:6px 14px 6px 8px;cursor:pointer;
    transition:all 0.25s ease;letter-spacing:0.2px;
  }
  .crawl-btn:hover{background:linear-gradient(135deg,rgba(217,119,6,0.5),rgba(251,191,36,0.25));border-color:rgba(251,191,36,0.6);box-shadow:0 0 12px rgba(251,191,36,0.2);transform:translateY(-1px)}
  .crawl-btn:active{transform:translateY(0)}
  .crawl-btn.active{border-color:#fbbf24;box-shadow:0 0 16px rgba(251,191,36,0.3)}
  .crawl-btn-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#b45309,#fbbf24);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}

  /* Panel */
  .crawl-panel{
    position:fixed;top:0;right:0;bottom:0;width:340px;
    background:linear-gradient(160deg,#0c1510,#111b14,#182318);
    border-left:1px solid #2a3f2e;
    z-index:3500;
    display:flex;flex-direction:column;
    transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
    box-shadow:-8px 0 40px rgba(0,0,0,0.6);
  }
  .crawl-panel.open{transform:translateX(0)}

  .crawl-panel-header{
    background:linear-gradient(90deg,#92400e,#d97706 50%,#92400e);
    padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  }
  .crawl-panel-title{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#1c0a00}
  .crawl-panel-close{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,0.3);border:none;color:#1c0a00;font-size:16px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0}
  .crawl-panel-close:hover{background:rgba(0,0,0,0.6);color:#fff}

  .crawl-panel-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}

  /* Search */
  .crawl-search-wrap{position:relative}
  .crawl-search{width:100%;background:rgba(0,0,0,0.35);border:1px solid #2a3f2e;border-radius:10px;color:#e8f5e9;font-family:"DM Sans",system-ui,sans-serif;font-size:13px;padding:9px 12px 9px 34px;outline:none;transition:border-color 0.2s}
  .crawl-search:focus{border-color:#4ade80}
  .crawl-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none}
  .crawl-search-results{background:#0c1510;border:1px solid #2a3f2e;border-radius:10px;margin-top:4px;max-height:180px;overflow-y:auto;display:none}
  .crawl-search-results.show{display:block}
  .crawl-result-item{padding:9px 12px;font-size:13px;color:#e8f5e9;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(42,63,46,0.5);transition:background 0.15s}
  .crawl-result-item:last-child{border-bottom:none}
  .crawl-result-item:hover{background:rgba(74,222,128,0.08)}
  .crawl-result-item.added{color:#6b9e76;cursor:default}
  .crawl-add-icon{font-size:16px;color:#4ade80}

  /* Stop list */
  .crawl-stops-label{font-size:11px;color:#6b9e76;text-transform:uppercase;letter-spacing:0.6px;font-weight:600}
  .crawl-stops{display:flex;flex-direction:column;gap:6px}
  .crawl-stop{
    background:rgba(0,0,0,0.35);border:1px solid #2a3f2e;border-radius:12px;
    padding:10px 12px;display:flex;align-items:center;gap:10px;
    cursor:grab;user-select:none;transition:border-color 0.2s,box-shadow 0.2s;
  }
  .crawl-stop:active{cursor:grabbing}
  .crawl-stop.dragging{opacity:0.5;border-color:#4ade80;box-shadow:0 4px 20px rgba(74,222,128,0.2)}
  .crawl-stop.drag-over{border-color:#fbbf24;box-shadow:0 0 0 1px #fbbf24}
  .crawl-stop-num{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#b45309,#fbbf24);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#1c0a00;flex-shrink:0}
  .crawl-stop-name{flex:1;font-size:13px;font-weight:500;color:#e8f5e9}
  .crawl-stop-addr{font-size:11px;color:#6b9e76;margin-top:1px}
  .crawl-stop-remove{background:transparent;border:none;color:#6b9e76;font-size:18px;cursor:pointer;padding:0 2px;transition:color 0.15s;line-height:1;flex-shrink:0}
  .crawl-stop-remove:hover{color:#f87171}
  .crawl-drag-handle{color:#2a3f2e;font-size:14px;cursor:grab;flex-shrink:0}

  .crawl-empty{text-align:center;padding:24px 16px;color:#6b9e76;font-size:13px}
  .crawl-empty-icon{font-size:32px;margin-bottom:8px}

  /* Actions */
  .crawl-actions{padding:14px 16px;border-top:1px solid #2a3f2e;display:flex;flex-direction:column;gap:8px;flex-shrink:0}
  .crawl-start-btn{width:100%;background:linear-gradient(90deg,#92400e,#d97706);border:none;border-radius:12px;color:#fff;font-family:"DM Sans",system-ui,sans-serif;font-size:14px;font-weight:700;padding:12px;cursor:pointer;transition:opacity 0.2s;letter-spacing:0.3px}
  .crawl-start-btn:hover{opacity:0.9}
  .crawl-start-btn:disabled{opacity:0.4;cursor:not-allowed}
  .crawl-clear-btn{width:100%;background:transparent;border:1px solid #2a3f2e;border-radius:12px;color:#6b9e76;font-family:"DM Sans",system-ui,sans-serif;font-size:13px;padding:9px;cursor:pointer;transition:all 0.2s}
  .crawl-clear-btn:hover{border-color:#f87171;color:#f87171}

  /* Active crawl overlay on map */
  .crawl-active-bar{
    position:fixed;bottom:0;left:0;right:0;
    background:linear-gradient(90deg,#0c1510,#111b14);
    border-top:1px solid #d97706;
    padding:12px 16px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    z-index:9500;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    box-shadow:0 -4px 20px rgba(0,0,0,0.5);
    transform:translateY(110%);
    transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
    pointer-events:none;
  }
  .crawl-active-bar.show{transform:translateY(0);pointer-events:all;}
  .crawl-active-info{display:flex;align-items:center;gap:10px}
  .crawl-active-label{font-size:12px;color:#fbbf24;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
  .crawl-active-stop{font-size:14px;font-weight:700;color:#e8f5e9}
  .crawl-active-progress{font-size:11px;color:#6b9e76}
  .crawl-next-btn{background:linear-gradient(90deg,#92400e,#d97706);border:none;border-radius:10px;color:#fff;font-family:"DM Sans",system-ui,sans-serif;font-size:13px;font-weight:700;padding:11px 16px;cursor:pointer;white-space:nowrap;min-height:44px}
  .crawl-end-btn{background:transparent;border:1px solid #2a3f2e;border-radius:10px;color:#6b9e76;font-family:"DM Sans",system-ui,sans-serif;font-size:13px;padding:11px 12px;cursor:pointer;min-height:44px}
  .crawl-end-btn:hover{border-color:#f87171;color:#f87171}
  .crawl-info-btn{background:rgba(74,222,128,0.15);border:1px solid rgba(74,222,128,0.4);border-radius:10px;color:#4ade80;font-family:"DM Sans",system-ui,sans-serif;font-size:13px;font-weight:600;padding:11px 12px;cursor:pointer;transition:all 0.2s;white-space:nowrap;min-height:44px}
  .crawl-info-btn:hover{background:rgba(74,222,128,0.25);border-color:#4ade80}

  /* Current crawl stop pulses via icon swap — no CSS needed */

  @media(max-width:600px){
    .crawl-panel{
      top:auto;right:0;left:0;bottom:0;width:100%;height:85vh;
      border-left:none;border-top:1px solid #2a3f2e;border-radius:20px 20px 0 0;
      transform:translateY(100%);
    }
    .crawl-panel.open{transform:translateY(0)}
    .crawl-panel-header{border-radius:20px 20px 0 0}
  }


  /* ── ROULETTE ── */
  .roulette-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:4500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
  .roulette-backdrop.open{opacity:1;pointer-events:all}

  .roulette-card{
    background:linear-gradient(160deg,#0c1510,#111b14,#182318);
    border:1px solid #2a3f2e;border-radius:24px;
    padding:36px 32px 32px;width:320px;max-width:92vw;
    text-align:center;position:relative;
    box-shadow:0 40px 100px rgba(0,0,0,0.9),inset 0 1px 0 rgba(74,222,128,0.1);
  }
  .roulette-close{position:absolute;top:14px;right:16px;background:transparent;border:none;color:#6b9e76;font-size:22px;cursor:pointer;line-height:1;transition:color 0.2s}
  .roulette-close:hover{color:#e8f5e9}

  .roulette-title{font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:700;color:#e8f5e9;margin-bottom:4px}
  .roulette-sub{font-size:12px;color:#6b9e76;margin-bottom:28px}

  /* The pint glass container */
  .roulette-glass-wrap{position:relative;width:100px;height:130px;margin:0 auto 28px;cursor:pointer}
  .roulette-glass-wrap:hover .roulette-glass{filter:drop-shadow(0 0 12px rgba(74,222,128,0.5))}

  /* SVG pint glass */
  .roulette-glass{width:100px;height:130px;transition:filter 0.2s}
  .roulette-glass.shaking{animation:glass-shake 0.12s ease-in-out}
  .roulette-glass.spinning{animation:glass-spin 0.5s ease-in-out infinite alternate}

  @keyframes glass-shake{
    0%{transform:rotate(0deg) scale(1)}
    15%{transform:rotate(-8deg) scale(1.05)}
    30%{transform:rotate(8deg) scale(1.08)}
    45%{transform:rotate(-10deg) scale(1.06)}
    60%{transform:rotate(10deg) scale(1.1)}
    75%{transform:rotate(-7deg) scale(1.07)}
    90%{transform:rotate(5deg) scale(1.04)}
    100%{transform:rotate(0deg) scale(1)}
  }
  @keyframes glass-spin{
    0%{transform:rotate(-12deg) scale(1.05) translateY(-3px)}
    100%{transform:rotate(12deg) scale(1.1) translateY(3px)}
  }

  /* Foam bubbles that appear during shake */
  .roulette-bubbles{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:60px;height:30px;pointer-events:none;opacity:0;transition:opacity 0.3s}
  .roulette-bubbles.show{opacity:1}
  .bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,0.7);animation:bubble-rise 0.8s ease-out forwards}
  @keyframes bubble-rise{0%{opacity:0.8;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(0.3)}}

  .roulette-tap-hint{font-size:12px;color:#6b9e76;margin-bottom:20px;transition:opacity 0.3s}
  .roulette-tap-hint.hide{opacity:0}

  /* Result area */
  .roulette-result{
    background:rgba(0,0,0,0.35);border:1px solid rgba(74,222,128,0.15);
    border-radius:16px;padding:16px;margin-bottom:18px;
    min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    transition:all 0.3s;
  }
  .roulette-result.reveal{border-color:rgba(74,222,128,0.4);box-shadow:0 0 20px rgba(74,222,128,0.1)}
  .roulette-pub-name{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:700;color:#4ade80;margin-bottom:4px;opacity:0;transform:translateY(8px);transition:all 0.5s ease 0.1s}
  .roulette-pub-addr{font-size:12px;color:#6b9e76;opacity:0;transition:all 0.5s ease 0.2s}
  .roulette-pub-name.show,.roulette-pub-addr.show{opacity:1;transform:translateY(0)}
  .roulette-placeholder{font-size:13px;color:#2a3f2e}

  .roulette-go-btn{
    width:100%;background:linear-gradient(90deg,#15803d,#4ade80);
    border:none;border-radius:12px;color:#052e16;
    font-family:"DM Sans",system-ui,sans-serif;font-size:14px;font-weight:700;
    padding:12px;cursor:pointer;transition:all 0.2s;
    opacity:0;pointer-events:none;letter-spacing:0.3px;
  }
  .roulette-go-btn.show{opacity:1;pointer-events:all}
  .roulette-go-btn:hover{box-shadow:0 0 20px rgba(74,222,128,0.3);transform:translateY(-1px)}

  /* Header button */
  .roulette-btn{
    display:flex;align-items:center;gap:7px;
    background:linear-gradient(135deg,rgba(109,40,217,0.3),rgba(167,139,250,0.15));
    border:1px solid rgba(167,139,250,0.35);
    border-radius:22px;color:#a78bfa;
    font-family:"DM Sans",system-ui,sans-serif;font-size:12px;font-weight:600;
    padding:6px 14px 6px 8px;cursor:pointer;
    transition:all 0.25s ease;letter-spacing:0.2px;
  }
  .roulette-btn:hover{background:linear-gradient(135deg,rgba(109,40,217,0.5),rgba(167,139,250,0.25));border-color:rgba(167,139,250,0.6);box-shadow:0 0 12px rgba(167,139,250,0.2);transform:translateY(-1px)}
  .roulette-btn-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#6d28d9,#a78bfa);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}

  @media(max-width:600px){
    .roulette-card{padding:28px 20px 24px}
  }


  /* ── ATMOSPHERE TAGS & FILTERS ── */
  .filter-btn{
    display:flex;align-items:center;gap:7px;
    background:linear-gradient(135deg,rgba(14,116,144,0.3),rgba(34,211,238,0.15));
    border:1px solid rgba(34,211,238,0.35);
    border-radius:22px;color:#22d3ee;
    font-family:"DM Sans",system-ui,sans-serif;font-size:12px;font-weight:600;
    padding:6px 14px 6px 8px;cursor:pointer;
    transition:all 0.25s ease;letter-spacing:0.2px;
  }
  .filter-btn:hover{background:linear-gradient(135deg,rgba(14,116,144,0.5),rgba(34,211,238,0.25));border-color:rgba(34,211,238,0.6);box-shadow:0 0 12px rgba(34,211,238,0.2);transform:translateY(-1px)}
  .filter-btn.active{border-color:#22d3ee;box-shadow:0 0 16px rgba(34,211,238,0.3)}
  .filter-btn-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#0e7490,#22d3ee);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
  .filter-active-dot{width:7px;height:7px;border-radius:50%;background:#22d3ee;position:absolute;top:4px;right:4px;display:none}
  .filter-btn{position:relative}
  .filter-btn .filter-active-dot.show{display:block}
  /* Light mode: crawl / roulette / filter panel buttons — dark green outline */
  :root[data-theme="light"] .crawl-btn,
  :root[data-theme="light"] .roulette-btn,
  :root[data-theme="light"] .filter-btn{
    background:#fff;border-color:#15803d;color:#15803d;
    background-image:none;box-shadow:none;
  }
  :root[data-theme="light"] .crawl-btn:hover,
  :root[data-theme="light"] .roulette-btn:hover,
  :root[data-theme="light"] .filter-btn:hover{background:#f0fdf4;border-color:#15803d;box-shadow:none;}
  :root[data-theme="light"] .crawl-btn.active,
  :root[data-theme="light"] .filter-btn.active{background:#15803d;color:#fff;border-color:#15803d;}
  :root[data-theme="light"] .crawl-btn-icon,
  :root[data-theme="light"] .roulette-btn-icon,
  :root[data-theme="light"] .filter-btn-icon{background:#15803d;}

  /* Panel */
  .filter-panel{
    position:fixed;top:0;left:0;bottom:0;width:300px;
    background:linear-gradient(160deg,#0c1510,#111b14,#182318);
    border-right:1px solid #2a3f2e;
    z-index:3500;display:flex;flex-direction:column;
    transform:translateX(-100%);
    transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
    box-shadow:8px 0 40px rgba(0,0,0,0.6);
  }
  .filter-panel.open{transform:translateX(0)}

  .filter-panel-header{
    background:linear-gradient(90deg,#0e7490,#22d3ee 50%,#0e7490);
    padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  }
  .filter-panel-title{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#082f49}
  .filter-panel-close{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,0.25);border:none;color:#082f49;font-size:16px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
  .filter-panel-close:hover{background:rgba(0,0,0,0.5);color:#fff}

  .filter-panel-body{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:20px}

  /* Tag grid */
  .filter-section-label{font-size:11px;color:#6b9e76;text-transform:uppercase;letter-spacing:0.6px;font-weight:600;margin-bottom:10px}
  .filter-tags{display:flex;flex-wrap:wrap;gap:8px}
  .filter-tag{
    display:flex;align-items:center;gap:6px;
    background:rgba(0,0,0,0.3);border:1px solid #2a3f2e;
    border-radius:20px;padding:7px 13px;
    font-size:13px;font-weight:500;color:#6b9e76;
    cursor:pointer;transition:all 0.2s;user-select:none;
  }
  .filter-tag:hover{border-color:#22d3ee;color:#22d3ee}
  .filter-tag.active{background:rgba(14,116,144,0.25);border-color:#22d3ee;color:#22d3ee;box-shadow:0 0 8px rgba(34,211,238,0.15)}
  .filter-tag-emoji{font-size:15px}

  /* Visited filter */
  .filter-visited-row{display:flex;align-items:center;justify-content:space-between}
  .filter-visited-label{font-size:13px;color:#e8f5e9;font-weight:500}
  .filter-visited-sub{font-size:11px;color:#6b9e76;margin-top:2px}
  .fv-toggle-track{width:40px;height:22px;background:var(--border);border-radius:11px;position:relative;transition:background 0.25s;cursor:pointer;flex-shrink:0}
  .fv-toggle-track.on{background:var(--green-dark)}
  .fv-toggle-thumb{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:left 0.25s}
  .fv-toggle-track.on .fv-toggle-thumb{left:21px}

  /* Active filter summary bar on map */
  .filter-bar{
    position:fixed;bottom:0;left:0;right:0;
    background:linear-gradient(90deg,#082f49,#0e7490);
    border-top:1px solid #22d3ee;
    padding:8px 16px;z-index:2000;
    display:none;align-items:center;justify-content:space-between;gap:10px;
  }
  .filter-bar.show{display:flex}
  .filter-bar-label{font-size:12px;color:#22d3ee;font-weight:600}
  .filter-bar-tags{display:flex;gap:6px;flex-wrap:wrap;flex:1}
  .filter-bar-tag{font-size:11px;background:rgba(34,211,238,0.15);border:1px solid rgba(34,211,238,0.3);border-radius:10px;padding:2px 8px;color:#22d3ee}
  .filter-bar-clear{background:transparent;border:1px solid rgba(34,211,238,0.4);border-radius:8px;color:#22d3ee;font-family:"DM Sans",system-ui,sans-serif;font-size:11px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:all 0.2s}
  .filter-bar-clear:hover{background:rgba(34,211,238,0.1)}

  /* Tag chips in popup */
  .pub-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
  .pub-tag{font-size:11px;background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.25);border-radius:10px;padding:3px 8px;color:#22d3ee;display:flex;align-items:center;gap:3px}
  .tag-remove{background:none;border:none;color:#22d3ee;cursor:pointer;font-size:13px;padding:0;line-height:1;opacity:0.6}
  .tag-remove:hover{opacity:1}
  .add-tag-btn{font-size:11px;background:transparent;border:1px dashed #2a3f2e;border-radius:10px;padding:3px 8px;color:#6b9e76;cursor:pointer;transition:all 0.2s}
  .add-tag-btn:hover{border-color:#22d3ee;color:#22d3ee}
  .tag-picker{display:none;flex-wrap:wrap;gap:5px;margin-top:6px}
  .tag-picker.show{display:flex}
  .tag-option{font-size:11px;background:rgba(0,0,0,0.3);border:1px solid #2a3f2e;border-radius:10px;padding:4px 9px;color:#6b9e76;cursor:pointer;transition:all 0.15s}
  .tag-option:hover{border-color:#22d3ee;color:#22d3ee}
  .tag-option.selected{background:rgba(14,116,144,0.2);border-color:#22d3ee;color:#22d3ee}

  @media(max-width:600px){
    .filter-panel{top:0;left:0;right:0;bottom:auto;width:100%;height:auto;max-height:90vh;border-right:none;border-bottom:1px solid #2a3f2e;border-radius:0 0 20px 20px;transform:translateY(-100%)}
    .filter-panel.open{transform:translateY(0)}
  }


  /* ── PRICE HISTORY CHART ── */
  .chart-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:6000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s ease;padding:20px}
  .chart-backdrop.open{opacity:1;pointer-events:all}
  .chart-modal{
    background:linear-gradient(160deg,#0c1510,#111b14,#182318);
    border:1px solid #2a3f2e;border-radius:20px;
    width:480px;max-width:96vw;
    box-shadow:0 40px 100px rgba(0,0,0,0.9);
    overflow:hidden;
  }
  .chart-header{background:linear-gradient(90deg,#0e7490,#22d3ee 50%,#0e7490);padding:13px 18px;display:flex;align-items:center;justify-content:space-between}
  .chart-header-title{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#082f49}
  .chart-close{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,0.25);border:none;color:#082f49;font-size:16px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
  .chart-close:hover{background:rgba(0,0,0,0.5);color:#fff}
  .chart-body{padding:18px}
  .chart-pub-name{font-family:"Playfair Display",Georgia,serif;font-size:18px;font-weight:700;color:#e8f5e9;margin-bottom:4px}
  .chart-sub{font-size:12px;color:#6b9e76;margin-bottom:14px}

  /* Drink filter pills */
  .chart-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
  .chart-filter-pill{font-size:11px;font-weight:600;border-radius:16px;padding:4px 11px;cursor:pointer;border:1px solid #2a3f2e;background:rgba(0,0,0,0.3);color:#6b9e76;transition:all 0.2s}
  .chart-filter-pill.active{background:rgba(34,211,238,0.15);border-color:#22d3ee;color:#22d3ee}
  .chart-filter-pill:hover{border-color:#22d3ee;color:#22d3ee}

  /* Canvas wrapper */
  .chart-canvas-wrap{position:relative;height:200px;margin-bottom:10px}
  canvas#price-chart{width:100%!important}

  /* No data state */
  .chart-no-data{text-align:center;padding:40px 20px;color:#6b9e76;font-size:13px}
  .chart-no-data-icon{font-size:32px;margin-bottom:8px}

  /* Chart button in popup */
  .chart-popup-btn{
    width:100%;background:rgba(14,116,144,0.15);
    border:1px solid rgba(34,211,238,0.25);border-radius:9px;
    color:#22d3ee;font-family:"DM Sans",system-ui,sans-serif;
    font-size:12px;font-weight:600;padding:7px;
    cursor:pointer;transition:all 0.2s;margin-top:6px;
  }
  .chart-popup-btn:hover{background:rgba(14,116,144,0.3);border-color:#22d3ee}


  /* ── HAMBURGER / MOBILE MENU ── */
  .hamburger-btn{
    display:none; /* shown on mobile only */
    width:38px;height:38px;border-radius:10px;
    background:rgba(0,0,0,0.3);border:1px solid #2a3f2e;
    align-items:center;justify-content:center;flex-direction:column;gap:5px;
    cursor:pointer;flex-shrink:0;
  }
  .hamburger-btn span{display:block;width:18px;height:2px;background:#4ade80;border-radius:1px;transition:all 0.3s}
  .hamburger-btn.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .hamburger-btn.open span:nth-child(2){opacity:0;transform:translateX(-8px)}
  .hamburger-btn.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

  .mobile-menu{
    display:none; /* shown on mobile only */
    position:fixed;
    left:0;right:0;
    top:0;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    gap:8px;
    padding:12px;
    padding-top:calc(env(safe-area-inset-top, 0px) + 60px);
    z-index:1001;
    opacity:0;pointer-events:none;
    transition:opacity 0.25s ease;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
  }
  .mobile-menu.open{opacity:1;pointer-events:all;}

  .mobile-menu-row{display:flex;gap:8px}
  .mobile-menu-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    background:var(--panel2);border:1px solid var(--border);border-radius:12px;
    color:var(--text);
    font-family:"DM Sans",system-ui,sans-serif;font-size:13px;font-weight:600;
    padding:11px 10px;cursor:pointer;transition:all 0.2s;
  }
  .mobile-menu-btn:active{transform:scale(0.97)}
  .mobile-menu-divider{border:none;border-top:1px solid var(--border);margin:2px 0}
  /* Light mode: all mobile menu buttons get dark green outline */
  :root[data-theme="light"] .mobile-menu-btn{
    background:#fff;border-color:#15803d;color:#15803d;
  }
  :root[data-theme="light"] .mobile-menu-btn:hover{background:#f0fdf4}
  .mobile-menu-auth{display:flex;gap:8px}
  .mobile-menu-auth .auth-btn{flex:1;justify-content:center;font-size:13px;padding:10px}


  /* ── OPENING HOURS ── */
  .opening-hours{background:rgba(0,0,0,0.25);border:1px solid #2a3f2e;border-radius:10px;padding:9px 12px;margin-bottom:10px;font-size:12px}
  .opening-hours-label{font-size:10px;color:#6b9e76;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;font-weight:600}
  .opening-hours-text{color:#e8f5e9;line-height:1.5}
  .opening-hours-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;margin-bottom:4px}
  .status-open{color:#4ade80}.status-closed{color:#f87171}
  .status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .dot-open{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,0.6)}
  .dot-closed{background:#f87171}


  /* ── CITY SELECTOR ── */
  .city-selector{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.35);border:1px solid #2a3f2e;border-radius:22px;padding:5px 14px;transition:all 0.2s}
  .city-selector:hover{border-color:#4ade80}
  .city-select{background:transparent;border:none;outline:none;color:#e8f5e9;font-family:"DM Sans",system-ui,sans-serif;font-size:16px;font-weight:600;cursor:pointer;max-width:130px}
  .city-select option{background:#111b14;color:#e8f5e9}


  /* ── CRAWL SHARING ── */
  .crawl-share-btn{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.3);
    border-radius:12px;color:#4ade80;
    font-family:"DM Sans",system-ui,sans-serif;font-size:13px;font-weight:600;
    padding:9px;cursor:pointer;transition:all 0.2s;
  }
  .crawl-share-btn:hover{background:rgba(74,222,128,0.22);border-color:#4ade80}
  .crawl-share-btn:disabled{opacity:0.35;cursor:not-allowed}

  /* Shared crawl banner */
  .shared-crawl-banner{
    position:fixed;top:0;left:0;right:0;z-index:5000;
    background:linear-gradient(90deg,#15803d,#4ade80 50%,#15803d);
    padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
    gap:12px;box-shadow:0 4px 20px rgba(0,0,0,0.5);
    transform:translateY(-100%);transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
  }
  .shared-crawl-banner.show{transform:translateY(0)}
  .shared-crawl-banner-info{flex:1;min-width:0}
  .shared-crawl-banner-title{font-size:12px;font-weight:800;color:#052e16;letter-spacing:0.5px;text-transform:uppercase}
  .shared-crawl-banner-stops{font-size:13px;font-weight:700;color:#052e16;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shared-crawl-load-btn{
    background:rgba(0,0,0,0.2);border:none;border-radius:10px;
    color:#052e16;font-family:"DM Sans",system-ui,sans-serif;
    font-size:12px;font-weight:700;padding:7px 14px;cursor:pointer;
    white-space:nowrap;transition:background 0.2s;flex-shrink:0;
  }
  .shared-crawl-load-btn:hover{background:rgba(0,0,0,0.35)}
  .shared-crawl-dismiss{background:transparent;border:none;color:#052e16;font-size:20px;cursor:pointer;padding:0 2px;flex-shrink:0}


  /* ── BEST PINT NEARBY ── */
  .nearby-btn{
    display:flex;align-items:center;gap:7px;
    background:linear-gradient(135deg,rgba(234,88,12,0.3),rgba(251,146,60,0.15));
    border:1px solid rgba(251,146,60,0.35);
    border-radius:22px;color:#fb923c;
    font-family:"DM Sans",system-ui,sans-serif;font-size:12px;font-weight:600;
    padding:6px 14px 6px 8px;cursor:pointer;
    transition:all 0.25s ease;letter-spacing:0.2px;position:relative;
  }
  .nearby-btn:hover{background:linear-gradient(135deg,rgba(234,88,12,0.5),rgba(251,146,60,0.25));border-color:rgba(251,146,60,0.6);box-shadow:0 0 12px rgba(251,146,60,0.2);transform:translateY(-1px)}
  .nearby-btn:active{transform:translateY(0)}
  .nearby-btn-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ea580c,#fb923c);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
  .nearby-btn.locating{opacity:0.7;pointer-events:none}
  .nearby-btn.locating .nearby-btn-icon{animation:spin 1s linear infinite}
  :root[data-theme="light"] .nearby-btn{background:#fff;border-color:#15803d;color:#15803d;background-image:none}
  :root[data-theme="light"] .nearby-btn:hover{background:#f0fdf4;box-shadow:none}
  :root[data-theme="light"] .nearby-btn-icon{background:#15803d}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Nearby result toast — richer than normal toast */
  .nearby-result{
    position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
    background:linear-gradient(135deg,#0c1510,#182318);
    border:1px solid rgba(251,146,60,0.4);
    border-radius:16px;padding:14px 18px;
    display:flex;align-items:center;gap:14px;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
    z-index:3000;min-width:260px;max-width:340px;
    opacity:0;pointer-events:none;
    transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
  }
  .nearby-result.show{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
  .nearby-result-icon{font-size:28px;flex-shrink:0}
  .nearby-result-label{font-size:10px;color:#fb923c;text-transform:uppercase;letter-spacing:0.5px;font-weight:600;margin-bottom:3px}
  .nearby-result-name{font-family:"Playfair Display",Georgia,serif;font-size:16px;font-weight:700;color:#e8f5e9;line-height:1.2}
  .nearby-result-dist{font-size:11px;color:#6b9e76;margin-top:3px}
  .nearby-result-go{background:#16a34a;border:none;border-radius:10px;color:#fff;font-family:"DM Sans",system-ui,sans-serif;font-size:12px;font-weight:700;padding:7px 12px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity 0.2s}
  .nearby-result-go:hover{opacity:0.85}


  /* ── MOBILE PUB SHEET (Bootstrap offcanvas override) ── */
  #pub-offcanvas{
    background:linear-gradient(180deg,#0c1510 0%,#111b14 100%) !important;
    border-top:1px solid #2a3f2e !important;
    border-radius:20px 20px 0 0 !important;
    max-height:82vh !important;
    padding-bottom:env(safe-area-inset-bottom,12px);
    z-index:3500 !important;
  }
  #pub-offcanvas .offcanvas-header{
    border-bottom:1px solid #1a2d1e;
    padding:6px 18px 12px;
  }
  #pub-offcanvas .offcanvas-title{
    font-family:"Playfair Display",Georgia,serif;
    font-size:20px;font-weight:700;color:#e8f5e9;line-height:1.2;
  }
  #pub-offcanvas .btn-close{
    filter:invert(1);opacity:0.5;
  }
  #pub-offcanvas .offcanvas-body{
    padding:14px 18px;color:#a0b8a4;
  }
  .sheet-handle{width:40px;height:4px;background:#2a3f2e;border-radius:2px;margin:10px auto 2px}
  .sheet-addr{font-size:12px;color:#6b9e76;margin-top:2px}
  .sheet-status-open{color:#4ade80;font-size:12px;font-weight:600}
  .sheet-status-closed{color:#f87171;font-size:12px;font-weight:600}
  /* Visited button */
  .btn-visited{
    background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.3);
    color:#4ade80;border-radius:12px;font-weight:600;font-size:13px;
    padding:10px 8px;width:100%;transition:all 0.2s;
  }
  .btn-visited.active-visited{background:rgba(74,222,128,0.3);border-color:#4ade80;}
  .btn-visited:hover{background:rgba(74,222,128,0.22);color:#4ade80;}
  /* Crawl button */
  .btn-crawl{
    background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.3);
    color:#4ade80;border-radius:12px;font-weight:600;font-size:13px;
    padding:10px 8px;width:100%;transition:all 0.2s;
  }
  .btn-crawl:hover{background:rgba(74,222,128,0.22);color:#4ade80;}
  /* Favourite button */
  .btn-fave{
    background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.3);
    color:#4ade80;border-radius:12px;font-weight:600;font-size:13px;
    padding:10px 8px;width:100%;transition:all 0.2s;
  }
  .btn-fave.active-fave{background:rgba(74,222,128,0.3);border-color:#4ade80;}
  .btn-fave:hover{background:rgba(74,222,128,0.22);}
  /* Price / Who buttons */
  .btn-sheet-action{
    border-radius:12px;font-size:13px;font-weight:600;padding:10px 8px;
    width:100%;transition:all 0.2s;
    background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.3);color:#4ade80;
  }
  .btn-price{
    background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.3);color:#4ade80;
  }
  .btn-price:hover{background:rgba(74,222,128,0.22);}
  .btn-who{
    background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.3);color:#4ade80;
  }
  .btn-who:hover{background:rgba(74,222,128,0.22);}
  /* Light mode overrides — dark green outline */
  :root[data-theme="light"] .btn-visited,
  :root[data-theme="light"] .btn-crawl,
  :root[data-theme="light"] .btn-fave,
  :root[data-theme="light"] .btn-sheet-action,
  :root[data-theme="light"] .btn-price,
  :root[data-theme="light"] .btn-who{
    background:#fff;border-color:#15803d;color:#15803d;
  }
  :root[data-theme="light"] .btn-visited:hover,
  :root[data-theme="light"] .btn-crawl:hover,
  :root[data-theme="light"] .btn-fave:hover,
  :root[data-theme="light"] .btn-sheet-action:hover,
  :root[data-theme="light"] .btn-price:hover,
  :root[data-theme="light"] .btn-who:hover{background:#f0fdf4;}
  :root[data-theme="light"] .btn-visited.active-visited,
  :root[data-theme="light"] .btn-fave.active-fave{background:#15803d;color:#fff;border-color:#15803d;}
  /* Hours pill */
  .sheet-hours{
    background:rgba(0,0,0,0.3);border:1px solid #1a2d1e;
    border-radius:10px;padding:10px 12px;font-size:12px;color:#a0b8a4;
    margin-bottom:4px;
  }
  /* Stars */
  .sheet-stars span{font-size:24px;cursor:pointer;line-height:1;color:#fbbf24;}
  /* Section label */
  .sheet-section-label{
    font-size:11px;color:#6b9e76;font-weight:600;
    text-transform:uppercase;letter-spacing:0.6px;margin-bottom:6px;display:block;
  }
  /* Gender ratio inside sheet */
  .sheet-ratio-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#1a2d1e;margin-bottom:6px}
  .sheet-ratio-male{background:linear-gradient(90deg,#3b82f6,#60a5fa);transition:width 0.6s}
  .sheet-ratio-female{background:linear-gradient(90deg,#f472b6,#fb7185);transition:width 0.6s}
  .sheet-ratio-counts{display:flex;justify-content:space-between;font-size:11px;color:#6b9e76}
  /* Divider */
  .sheet-divider{border-color:#1a2d1e;margin:12px 0;}


  /* ── GENDER RATIO ── */
  .gender-ratio-wrap{margin:10px 0 4px;border-top:1px solid #1a2d1e;padding-top:12px}
  .gender-ratio-label{font-size:11px;color:#6b9e76;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
  .gender-ratio-label span{font-size:10px;color:#3a5c40;font-weight:400;font-style:italic;text-transform:none;letter-spacing:0}
  .gender-ratio-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#1a2d1e;margin-bottom:6px}
  .gender-ratio-male{background:linear-gradient(90deg,#3b82f6,#60a5fa);transition:width 0.6s ease}
  .gender-ratio-female{background:linear-gradient(90deg,#f472b6,#fb7185);transition:width 0.6s ease}
  .gender-ratio-counts{display:flex;justify-content:space-between;font-size:11px;color:#6b9e76}
  .gender-ratio-low{font-size:11px;color:#3a5c40;text-align:center;padding:4px 0;font-style:italic}
  .popup-actions-row{display:flex;gap:8px;margin-top:12px}
  .popup-action-btn{flex:1;border-radius:10px;border:1px solid rgba(74,222,128,0.3);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;padding:9px 6px;cursor:pointer;transition:all 0.2s;text-align:center;background:rgba(74,222,128,0.1);color:#4ade80}
  .popup-action-btn:active{opacity:0.75}
  .popup-action-btn:hover{background:rgba(74,222,128,0.2)}
  .popup-action-btn.chart-btn{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.3);color:#4ade80}
  .popup-action-btn.chart-btn:hover{background:rgba(74,222,128,0.2)}
  :root[data-theme="light"] .popup-action-btn,
  :root[data-theme="light"] .popup-action-btn.chart-btn{background:#fff;border-color:#15803d;color:#15803d}
  :root[data-theme="light"] .popup-action-btn:hover,
  :root[data-theme="light"] .popup-action-btn.chart-btn:hover{background:#f0fdf4}
  :root[data-theme="light"] .popup-visited-active,
  :root[data-theme="light"] .popup-fave-active{background:#15803d!important;color:#fff!important;border-color:#15803d!important}


  /* ── LOCATE ME BUTTON ── */
  /* ── MAP BUTTON ROW (suggest + locate) ── */
  .map-btn-row{
    position:fixed;
    bottom:24px;
    right:12px;
    z-index:1000;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    pointer-events:all;
  }
  .locate-btn{
    width:40px;height:40px;border-radius:50%;
    background:var(--panel);border:1px solid var(--border);
    color:var(--green);font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 12px rgba(0,0,0,0.25);
    transition:all 0.2s;flex-shrink:0;
  }
  .locate-btn:hover{background:var(--panel2);border-color:var(--green);box-shadow:0 0 12px rgba(74,222,128,0.3)}
  .locate-btn:active{transform:scale(0.92)}
  .locate-btn.locating{animation:spin 1s linear infinite;pointer-events:none;opacity:0.7}




  /* ── Z-INDEX FIXES ── */
  .offcanvas-backdrop{z-index:3400 !important}
  .offcanvas{z-index:3500 !important}

  /* ── SUGGEST A PUB ── */
  .suggest-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,0.85);
    z-index:5500;display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity 0.3s;padding:20px;
  }
  .suggest-backdrop.open{opacity:1;pointer-events:all}
  .suggest-panel{
    background:linear-gradient(180deg,#0c1510 0%,#0f1d13 100%);
    border:1px solid #2a3f2e;border-radius:20px;
    width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
    padding:28px;position:relative;
    box-shadow:0 24px 80px rgba(0,0,0,0.7);
  }
  .suggest-close{
    position:absolute;top:16px;right:16px;background:rgba(255,255,255,0.06);
    border:none;color:#6b9e76;font-size:18px;width:32px;height:32px;
    border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background 0.2s;
  }
  .suggest-close:hover{background:rgba(255,255,255,0.12);color:#e8f5e9}
  .suggest-title{font-family:"Playfair Display",Georgia,serif;font-size:24px;font-weight:700;color:#e8f5e9;margin:0 0 4px}
  .suggest-subtitle{font-size:13px;color:#6b9e76;margin:0 0 24px}
  /* Pin drop zone */
  .suggest-map-wrap{
    border-radius:14px;overflow:hidden;border:1px solid #2a3f2e;
    height:200px;margin-bottom:8px;position:relative;cursor:crosshair;
  }
  .suggest-map-hint{
    position:absolute;top:10px;left:50%;transform:translateX(-50%);
    background:rgba(12,21,16,0.85);border:1px solid #2a3f2e;
    color:#a0b8a4;font-size:12px;padding:5px 12px;border-radius:20px;
    pointer-events:none;z-index:10;white-space:nowrap;
    transition:opacity 0.3s;
  }
  .suggest-coords{
    font-size:11px;color:#3a5c40;text-align:center;margin-bottom:16px;
    min-height:16px;
  }
  /* Form fields */
  .suggest-field{margin-bottom:16px}
  .suggest-label{
    display:block;font-size:11px;color:#6b9e76;font-weight:600;
    text-transform:uppercase;letter-spacing:0.6px;margin-bottom:6px;
  }
  .suggest-input{
    width:100%;background:rgba(0,0,0,0.3);border:1px solid #2a3f2e;
    border-radius:10px;padding:11px 14px;color:#e8f5e9;
    font-family:"DM Sans",sans-serif;font-size:14px;
    outline:none;transition:border-color 0.2s;box-sizing:border-box;
  }
  .suggest-input:focus{border-color:#4ade80;background:rgba(0,0,0,0.4)}
  .suggest-input::placeholder{color:#3a5c40}
  .suggest-input option{background:#0c1510;color:#e8f5e9}
  textarea.suggest-input{resize:vertical;min-height:72px}
  .suggest-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .suggest-btn{
    width:100%;background:linear-gradient(135deg,#16a34a,#15803d);
    color:#fff;border:none;border-radius:12px;padding:13px;
    font-family:"DM Sans",sans-serif;font-size:15px;font-weight:700;
    cursor:pointer;transition:opacity 0.2s;margin-top:4px;letter-spacing:0.3px;
  }
  .suggest-btn:hover{opacity:0.88}
  .suggest-btn:disabled{opacity:0.45;cursor:not-allowed}
  .suggest-success-wrap{text-align:center;padding:32px 0}
  .suggest-success-icon{font-size:48px;margin-bottom:12px}
  .suggest-success-title{font-family:"Playfair Display",serif;font-size:22px;color:#e8f5e9;margin:0 0 8px}
  .suggest-success-msg{font-size:14px;color:#6b9e76}
  /* Floating suggest button on map */
  .suggest-map-btn{
    background:var(--panel);border:1px solid var(--border);
    color:var(--green);font-size:12px;font-weight:600;
    padding:8px 14px;border-radius:20px;cursor:pointer;
    font-family:"DM Sans",sans-serif;
    box-shadow:0 2px 12px rgba(0,0,0,0.25);
    display:flex;align-items:center;gap:6px;
    transition:all 0.2s;white-space:nowrap;height:40px;box-sizing:border-box;
  }
  .suggest-map-btn:hover{background:var(--panel2);border-color:var(--green);box-shadow:0 0 12px rgba(74,222,128,0.3)}


  /* ── FRIENDS PANEL ── */
  .friends-panel{
    position:fixed;inset:0;z-index:3100;display:flex;align-items:flex-end;
    background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);
  }
  .friends-panel-inner{
    background:var(--panel);border:1px solid var(--border);
    border-radius:20px 20px 0 0;width:100%;max-width:500px;
    margin:0 auto;padding:20px 20px 32px;
    max-height:85vh;overflow-y:auto;
    box-shadow:0 -8px 40px rgba(0,0,0,0.5);
  }
  .friends-panel-title{
    font-family:'Playfair Display',Georgia,serif;
    font-size:18px;font-weight:700;color:var(--text);
    margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;
  }
  .friends-add-row{display:flex;gap:8px;margin-bottom:18px}
  .friends-add-row input{
    flex:1;background:var(--panel2);border:1px solid var(--border);
    color:var(--text);border-radius:10px;padding:9px 12px;font-size:14px;
    font-family:'DM Sans',sans-serif;outline:none;
  }
  .friends-add-row input:focus{border-color:var(--green)}
  .friends-add-btn{
    background:var(--green-dark);border:none;color:#fff;
    border-radius:10px;padding:9px 16px;font-weight:600;font-size:14px;
    cursor:pointer;white-space:nowrap;transition:opacity 0.2s;
  }
  .friends-add-btn:hover{opacity:0.85}
  .friend-row{
    display:flex;align-items:center;gap:12px;
    padding:10px 0;border-bottom:1px solid var(--border);
  }
  .friend-avatar{
    width:36px;height:36px;border-radius:50%;
    background:var(--green-dark);display:flex;align-items:center;
    justify-content:center;font-size:14px;font-weight:700;color:#fff;
    flex-shrink:0;overflow:hidden;
  }
  .friend-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .friend-info{flex:1}
  .friend-name{font-size:14px;font-weight:600;color:var(--text)}
  .friend-stats{font-size:12px;color:var(--muted)}
  .friend-remove{
    background:none;border:1px solid var(--border);border-radius:8px;
    color:var(--muted);font-size:11px;padding:4px 8px;cursor:pointer;
  }
  .friend-remove:hover{color:#f87171;border-color:#f87171}
  .friends-empty{text-align:center;color:var(--muted);font-size:14px;padding:20px 0}

  /* ── COOKIE BANNER ── */
  .cookie-banner{
    position:fixed;bottom:0;left:0;right:0;z-index:9500;
    background:linear-gradient(135deg,#0c1510,#111b14);
    border-top:1px solid #2a3f2e;
    padding:16px 20px;
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    transform:translateY(100%);
    transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
    box-shadow:0 -8px 32px rgba(0,0,0,0.5);
    pointer-events:none;
  }
  .cookie-banner.show{transform:translateY(0);pointer-events:all;}
  .cookie-text{flex:1;min-width:200px;font-size:12px;color:#a0b8a4;line-height:1.5}
  .cookie-text a{color:#4ade80}
  .cookie-btns{display:flex;gap:8px;flex-shrink:0}
  .cookie-accept{
    background:linear-gradient(135deg,#16a34a,#15803d);
    color:#fff;border:none;border-radius:10px;
    padding:8px 18px;font-family:'DM Sans',sans-serif;
    font-size:13px;font-weight:700;cursor:pointer;
  }
  .cookie-decline{
    background:transparent;border:1px solid #2a3f2e;
    color:#6b9e76;border-radius:10px;
    padding:8px 14px;font-family:'DM Sans',sans-serif;
    font-size:13px;cursor:pointer;
  }

  /* Hide overlapping elements during crawl */
  .crawl-active .map-btn-row{opacity:0.3;pointer-events:none}
  .crawl-active .suggest-map-btn{pointer-events:none;opacity:0}


  /* Footer links */
  .app-footer{
    position:fixed;bottom:4px;left:50%;transform:translateX(-50%);
    z-index:500;display:flex;gap:14px;
    font-size:10px;color:#2a3f2e;
    pointer-events:all;
    transition:opacity 0.2s;
  }
  .crawl-active .app-footer{opacity:0;pointer-events:none}
  .app-footer a{color:#2a3f2e;text-decoration:none;transition:color 0.2s}
  .app-footer a:hover{color:#6b9e76}


  /* ── OVERALL PASSPORT ── */
  .overall-passport-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,0.85);
    z-index:5200;display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity 0.3s;padding:20px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .overall-passport-backdrop.open{opacity:1;pointer-events:all}
  .overall-passport-panel{
    background:linear-gradient(180deg,#0c1510 0%,#0f1d13 100%);
    border:1px solid #2a3f2e;border-radius:20px;
    width:100%;max-width:500px;
    padding:0;position:relative;
    box-shadow:0 24px 80px rgba(0,0,0,0.7);
    margin:auto;
  }
  .overall-passport-header{
    background:linear-gradient(135deg,#0f2d1a,#1a3d24);
    border-radius:20px 20px 0 0;padding:24px 24px 20px;
    border-bottom:1px solid #2a3f2e;
    display:flex;align-items:center;justify-content:space-between;
  }
  .overall-passport-title{
    font-family:'Playfair Display',Georgia,serif;
    font-size:22px;font-weight:700;color:#e8f5e9;
  }
  .overall-passport-close{
    background:rgba(255,255,255,0.07);border:none;color:#6b9e76;
    font-size:20px;width:34px;height:34px;border-radius:50%;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .overall-passport-body{padding:20px 24px 28px}
  .op-total-bar{
    background:rgba(0,0,0,0.3);border:1px solid #1a2d1e;
    border-radius:14px;padding:16px;margin-bottom:16px;text-align:center;
  }
  .op-total-num{
    font-family:'Playfair Display',Georgia,serif;
    font-size:48px;font-weight:700;color:#4ade80;line-height:1;
  }
  .op-total-label{font-size:13px;color:#6b9e76;margin-top:4px}
  .op-city-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .op-city-card{
    background:rgba(0,0,0,0.25);border:1px solid #1a2d1e;
    border-radius:12px;padding:12px 14px;
    display:flex;align-items:center;gap:10px;
  }
  .op-city-card.has-visits{border-color:rgba(74,222,128,0.3);background:rgba(74,222,128,0.05)}
  .op-city-emoji{font-size:20px;flex-shrink:0}
  .op-city-info{flex:1;min-width:0}
  .op-city-name{font-size:13px;font-weight:600;color:#e8f5e9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .op-city-count{font-size:11px;color:#6b9e76;margin-top:2px}
  .op-city-bar{height:3px;background:#1a2d1e;border-radius:2px;margin-top:6px;overflow:hidden}
  .op-city-bar-fill{height:100%;background:linear-gradient(90deg,#16a34a,#4ade80);border-radius:2px;transition:width 0.6s ease}
  .op-overall-progress{margin-top:4px}
  .op-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .op-progress-label{font-size:12px;color:#6b9e76;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
  .op-progress-pct{font-size:13px;color:#4ade80;font-weight:700}
  .op-progress-track{height:8px;background:#1a2d1e;border-radius:4px;overflow:hidden}
  .op-progress-fill{height:100%;background:linear-gradient(90deg,#16a34a,#4ade80);border-radius:4px;transition:width 0.6s ease}


  /* ── TOUCH DRINK UI ── */
  .touch-drink-ui{padding:4px 0}
  .touch-drink-logged{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #1a2d1e;font-size:13px;color:#e8f5e9}
  .touch-drink-logged:last-of-type{border-bottom:none}
  .touch-drink-name{font-weight:600;color:#4ade80}
  .touch-drink-price{color:#6b9e76}
  .touch-drink-del{background:transparent;border:none;font-size:16px;cursor:pointer;padding:4px 8px;opacity:0.6}
  .touch-add-section{margin-top:10px}
  .touch-drink-select{width:100%;background:var(--panel2);border:1px solid #2a3f2e;border-radius:10px;color:#e8f5e9;font-size:16px;padding:10px 12px;outline:none;min-height:44px;-webkit-appearance:menulist;box-sizing:border-box;margin-bottom:8px}
  .touch-price-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
  .touch-price-input{flex:1;background:var(--panel2);border:1px solid #2a3f2e;border-radius:10px;color:#e8f5e9;font-size:16px;padding:10px 12px;outline:none;min-height:44px;box-sizing:border-box;-webkit-appearance:none}
  .touch-confirm-btn{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;min-height:44px;font-family:'DM Sans',sans-serif}


  /* ── PWA SAFE AREA FIX ── */
  @supports (padding: env(safe-area-inset-bottom)) {
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }


  /* ── ADSENSE ── */
  /* Ad containers are COLLAPSED by default (zero height, zero margin) and only
     expand once Google confirms a real ad has filled (data-ad-status="filled",
     which adds the .ad-filled class via the observer script in index.html).
     Collapsing with max-height (not display:none) keeps the slot's width
     measurable, so AdSense can still size and fill it. Result: the map is
     never covered by an empty white strip while ads load, fail, or are blocked. */
  .adsense-banner, .adsense-bar{
    width:100%; margin:0 auto;
    max-height:0!important; overflow:hidden!important;
    background:transparent!important; flex-shrink:0; text-align:center;
    transition:max-height .3s ease;
  }
  .adsense-banner{ max-width:728px; }
  .adsense-banner.ad-filled{
    max-height:96px!important; margin:6px auto;
  }
  .adsense-bar.ad-filled{
    max-height:60px!important;
  }
  .adsense-banner ins.adsbygoogle,
  .adsense-banner iframe{
    display:block; margin:0 auto;
    max-height:90px!important; background:transparent!important;
  }
  /* When Google has no ad to serve, collapse the slot instead of showing a white box */
  ins.adsbygoogle[data-ad-status="unfilled"]{ display:none!important; }
  /* Hidden entirely when running as an installed PWA */
  @media (display-mode: standalone) {
    .adsense-banner{ display:none!important; }
    .adsense-bar{ display:none!important; }
  }

  /* ── RESPONSIVE / MOBILE ── */

  /* On mobile the popup should slide up from the bottom like a sheet */
  @media (max-width: 600px) {

    /* ── MOBILE HEADER ── */
    header{padding:8px 12px 8px 12px;flex-wrap:nowrap;gap:0;justify-content:space-between;align-items:center}
    .logo svg{width:28px;height:28px}
    .logo h1{font-size:15px}
    .logo p{display:none}

    /* On mobile header-right: hide everything except hamburger + theme toggle */
    .header-right{gap:8px;align-items:center;flex-shrink:0}
    .filter-btn,.roulette-btn,.nearby-btn,.crawl-btn,.btn-passport,.btn-explore,
    #auth-guest,#auth-user,.counter{display:none!important}

    /* City selector constrained */
    .city-selector{padding:5px 10px;flex:1;min-width:0;max-width:calc(100vw - 110px)}
    .city-select{max-width:100%;font-size:14px;width:100%}

    /* Hamburger and theme toggle always visible */
    .hamburger-btn{display:flex!important}
    .theme-toggle{display:flex!important}

    /* Mobile menu drawer */
    .mobile-menu{display:flex!important}

    /* Map fills remaining height */
    #map{touch-action:pan-x pan-y pinch-zoom}
    /* Prevent iOS/Android zoom on input focus */
    input, select, textarea { font-size:16px !important; }

    /* Map fills remaining height */
    #map{touch-action:pan-x pan-y pinch-zoom}
    /* Prevent iOS zoom on input focus */
    input, select, textarea {
      font-size:16px !important;
    }


    /* Popup becomes a bottom sheet on mobile */
    .leaflet-popup{
      position:fixed!important;
      bottom:0!important;
      left:0!important;
      right:0!important;
      top:auto!important;
      width:100%!important;
      transform:none!important;
      margin:0!important;
    }
    .leaflet-popup-content-wrapper{
      border-radius:18px 18px 0 0!important;
      width:100%!important;
      min-width:unset!important;
      max-height:72vh;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
    }
    .leaflet-popup-content{
      width:100%!important;
      max-width:100%!important;
    }
    .leaflet-popup-tip-container{display:none!important}

    /* Popup drag handle hint */
    .popup::before{
      content:"";
      display:block;
      width:36px;height:4px;
      background:var(--border);
      border-radius:2px;
      margin:0 auto 12px;
    }

    /* Bigger tap targets inside popup */
    .toggle-track{width:46px;height:26px}
    .toggle-thumb{width:20px;height:20px}
    .toggle-track.on .toggle-thumb{left:22px}
    .star{font-size:24px}
    .drink-select{font-size:14px;padding:8px 7px}
    .drink-price{font-size:14px;padding:8px 7px;width:75px}
    .add-drink-btn{padding:11px 10px;font-size:13px;min-height:44px}
    .add-drink-btn:active{background:rgba(74,222,128,0.25);transform:scale(0.98)}
    .notes-area{font-size:14px;min-height:70px}
    .save-btn{padding:13px;font-size:15px}

    /* Auth modal fills screen on mobile */
    .auth-backdrop{align-items:flex-start;padding-top:16px}
    .modal{
      width:100%;
      max-width:100%;
      border-radius:18px 18px 0 0;
      padding:24px 20px 32px;
      max-height:92vh;
      overflow-y:auto;
    }
    .modal-field input{font-size:16px;padding:11px 12px} /* prevents iOS zoom */
    .modal-submit{padding:13px;font-size:15px}
    .google-btn{padding:12px;font-size:14px}

    /* Legend smaller on mobile */
    .legend{bottom:16px;left:10px;padding:7px 10px;font-size:11px}
  }

  /* Tablet tweaks */
  @media (min-width:601px) and (max-width:900px) {
    .logo p{display:none}
    .leaflet-popup-content-wrapper{min-width:270px}
  }

  /* Make sure touch scroll works inside popup */
  .leaflet-popup-content-wrapper{-webkit-overflow-scrolling:touch}
/* ── AD SLOTS ── */
.popup-ad-slot{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.07);min-height:100px;width:100%;overflow:hidden}
.passport-ad-slot{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.07);min-height:100px;width:100%;overflow:hidden}

/* ── EXPLORE BUTTON (desktop header) ── */
.btn-explore{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,rgba(74,222,128,0.12),rgba(74,222,128,0.06));border:1px solid rgba(74,222,128,0.35);border-radius:10px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--green);cursor:pointer;transition:all 0.2s;text-decoration:none;font-family:'DM Sans',system-ui,sans-serif;white-space:nowrap}
.btn-explore:hover{background:linear-gradient(135deg,rgba(74,222,128,0.25),rgba(74,222,128,0.12));border-color:rgba(74,222,128,0.6);box-shadow:0 0 12px rgba(74,222,128,0.2);transform:translateY(-1px)}
.btn-explore:active{transform:translateY(0)}
.btn-explore-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#15803d,#4ade80);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
:root[data-theme="light"] .btn-explore{background:#fff;border-color:#15803d;color:#15803d}
:root[data-theme="light"] .btn-explore:hover{background:#f0fdf4;box-shadow:none}
:root[data-theme="light"] .btn-explore-icon{background:#15803d}
/* What's On — amber accent variant of the Explore button */
.btn-whatson{background:linear-gradient(135deg,rgba(251,191,36,0.12),rgba(251,191,36,0.05));border-color:rgba(251,191,36,0.35);color:var(--amber)}
.btn-whatson:hover{background:linear-gradient(135deg,rgba(251,191,36,0.25),rgba(251,191,36,0.1));border-color:rgba(251,191,36,0.6);box-shadow:0 0 12px rgba(251,191,36,0.2)}
:root[data-theme="light"] .btn-whatson{background:#fff;border-color:#b45309;color:#b45309}
:root[data-theme="light"] .btn-whatson:hover{background:#fffbeb;box-shadow:none}

/* ── PUB SHEET — DESKTOP & TABLET LAYOUT ── */
/* On larger screens the sheet sits centred like a modal, not full-width */
@media (min-width: 600px) {
  #pub-sheet-wrap {
    left: 50% !important;
    right: auto !important;
    width: 480px !important;
    border-radius: 22px 22px 0 0 !important;
    max-height: 82vh !important;
  }
  #pub-sheet-backdrop {
    background: rgba(0,0,0,0.65) !important;
  }
}