:root {
            --amber: #f59e0b;
            --amber-deep: #d97706;
            --amber-soft: #fef3c7;
            --amber-line: #fcd34d;
            --ink: #251a12;
            --ink-soft: #7c6f64;
            --cream: #fdfaf4;
            --surface: #ffffff;
            --line: #ece3d5;
            --tier-exc: #22c55e;
            --tier-vgood: #86efac;
            --tier-good: #eab308;
            --tier-avg: #f97316;
            --tier-below: #ef4444;
            --radius: 12px;
            --radius-lg: 20px;
            --shadow-float: 0 4px 16px rgba(37, 26, 18, 0.14), 0 1px 3px rgba(37, 26, 18, 0.10);
            --shadow-sheet: 0 -10px 44px rgba(37, 26, 18, 0.28);
            --font-display: "Plus Jakarta Sans", "Inter", sans-serif;
            --font-body: "Inter", sans-serif;
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-body);
            color: var(--ink);
            background: var(--cream);
            overscroll-behavior: none;
        }

        h1, h2, h3, h4 { font-family: var(--font-display); }

        #map {
            position: fixed;
            inset: 0;
            z-index: 1;
        }

        /* ================= Floating top bar ================= */
        .topbar {
            position: fixed;
            top: calc(var(--safe-top) + 10px);
            left: 0;
            right: 0;
            z-index: 1100;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: none; /* children re-enable */
            padding: 0 10px;
        }

        .search-pill {
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 auto;
            width: 100%;
            max-width: 560px;
            background: var(--surface);
            border-radius: 999px;
            box-shadow: var(--shadow-float);
            border: 1px solid var(--line);
            padding: 6px 8px;
            transition: box-shadow 0.2s;
        }

        .search-pill:focus-within {
            box-shadow: 0 4px 20px rgba(245, 158, 11, 0.30), 0 1px 3px rgba(37, 26, 18, 0.10);
            border-color: var(--amber-line);
        }

        .pill-icon-btn {
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--ink);
            transition: background 0.15s;
            padding: 0;
        }

        .pill-icon-btn:hover { background: var(--amber-soft); }

        .hamburger-lines {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .hamburger-lines span {
            display: block;
            width: 18px;
            height: 2px;
            border-radius: 2px;
            background: var(--ink);
        }

        #location-search {
            flex: 1 1 auto;
            min-width: 0;
            border: none;
            outline: none;
            background: transparent;
            font-family: var(--font-body);
            font-size: 15px;
            color: var(--ink);
            padding: 8px 4px;
        }

        #location-search::placeholder { color: var(--ink-soft); }

        #pill-auth-btn {
            background: var(--amber);
            transition: background 0.15s, transform 0.15s;
        }

        #pill-auth-btn:hover { background: var(--amber-deep); }
        #pill-auth-btn:active { transform: scale(0.94); }

        #pill-auth-btn img {
            width: 22px;
            height: 22px;
            border-radius: 4px;
            display: block;
        }

        /* Logged-in state: show the user's Untappd avatar filling the pill button */
        #pill-auth-btn.has-avatar {
            background: transparent;
            padding: 0;
        }

        #pill-auth-btn.has-avatar:hover { background: var(--amber-soft); }

        #pill-auth-icon.avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--amber-line);
        }

        /* Filter chips row */
        .chips-row {
            pointer-events: auto;
            display: flex;
            gap: 6px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 2px 2px 6px;
            margin: 0 auto;
            width: 100%;
            max-width: 560px;
        }

        .chips-row::-webkit-scrollbar { display: none; }

        .chip {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 11px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: var(--surface);
            box-shadow: 0 2px 8px rgba(37, 26, 18, 0.12);
            font-family: var(--font-display);
            font-size: 12px;
            font-weight: 600;
            color: var(--ink);
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
            -webkit-tap-highlight-color: transparent;
        }

        .chip:active { transform: scale(0.96); }

        .chip.active {
            background: var(--amber);
            border-color: var(--amber-deep);
            color: #fff;
        }

        .chip-badge {
            display: none;
            background: #ef4444;
            color: white;
            border-radius: 999px;
            padding: 1px 7px;
            font-size: 11px;
            font-weight: 700;
        }

        .chip.active .chip-badge { background: rgba(255, 255, 255, 0.28); }

        /* Status toast - small overlay at the bottom of the screen */
        #status {
            pointer-events: none;
            position: fixed;
            bottom: calc(var(--safe-bottom) + 14px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 1050;
            font-size: 11px;
            font-weight: 500;
            color: var(--ink);
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 3px 10px;
            max-width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        body.sheet-open #status { display: none; }

        #status:empty { display: none; }

        /* ================= Hamburger menu ================= */
        .hamburger-menu {
            position: fixed;
            top: calc(var(--safe-top) + 64px);
            left: 10px;
            background: var(--surface);
            box-shadow: var(--shadow-float);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            z-index: 1200;
            display: none;
            min-width: 230px;
            overflow: hidden;
        }

        .hamburger-menu.show { display: block; animation: menu-pop 0.16s ease-out; }

        @keyframes menu-pop {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hamburger-menu-brand {
            padding: 14px 16px;
            background: linear-gradient(120deg, var(--amber) 0%, var(--amber-deep) 100%);
            color: #fff;
            font-family: var(--font-display);
            font-weight: 800;
            font-size: 17px;
            letter-spacing: -0.01em;
        }

        .hamburger-menu-brand small {
            display: block;
            font-family: var(--font-body);
            font-weight: 500;
            font-size: 11px;
            opacity: 0.9;
            margin-top: 2px;
        }

        .hamburger-menu-item {
            padding: 13px 16px;
            border-bottom: 1px solid var(--line);
            cursor: pointer;
            transition: background 0.15s;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 500;
        }

        .hamburger-menu-item:last-child { border-bottom: none; }
        .hamburger-menu-item:hover { background: var(--amber-soft); }

        .hamburger-menu-item img { width: 20px; height: 20px; }
        .hamburger-menu-item img.avatar { border-radius: 50%; object-fit: cover; }

        /* ================= Leaflet control positioning ================= */
        .leaflet-top.leaflet-right {
            top: calc(var(--safe-top) + 104px);
        }

        .leaflet-touch .leaflet-bar {
            border: 1px solid var(--line);
            box-shadow: var(--shadow-float);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .leaflet-touch .leaflet-bar a {
            color: var(--ink);
        }

        /* ================= Legend ================= */
        .legend {
            position: fixed;
            bottom: calc(var(--safe-bottom) + 18px);
            right: 10px;
            background: var(--surface);
            padding: 14px;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            box-shadow: var(--shadow-float);
            z-index: 1050;
            transition: opacity 0.2s;
        }

        body.sheet-open .legend { opacity: 0; pointer-events: none; }

        .legend h4 {
            margin: 0 0 10px 0;
            font-size: 14px;
        }

        .legend-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            width: 100%;
            text-align: left;
            white-space: nowrap;
        }

        .legend-toggle .legend-toggle-arrow {
            display: inline-block;
            transition: transform 0.2s;
            margin-left: 4px;
            font-size: 10px;
        }

        .legend.collapsed .legend-toggle .legend-toggle-arrow { transform: rotate(180deg); }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 5px 0;
            font-size: 12px;
        }

        .legend-circle {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid rgba(37, 26, 18, 0.55);
        }

        /* ================= Generic buttons ================= */
        button {
            font-family: var(--font-body);
            -webkit-tap-highlight-color: transparent;
        }

        .btn-primary {
            padding: 13px 18px;
            background: var(--amber);
            color: #fff;
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 700;
            transition: background 0.15s, transform 0.1s;
        }

        .btn-primary:hover { background: var(--amber-deep); }
        .btn-primary:active { transform: scale(0.98); }
        .btn-primary:disabled { background: #d6cfc4; cursor: not-allowed; }

        .btn-ghost {
            padding: 13px 18px;
            background: transparent;
            color: var(--ink-soft);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            cursor: pointer;
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 600;
            transition: background 0.15s;
        }

        .btn-ghost:hover { background: var(--cream); }

        .filter-btn-secondary {
            padding: 9px 14px;
            background: var(--surface);
            color: var(--ink);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
        }

        .filter-btn-secondary:hover { background: var(--cream); }
        .filter-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

        .no-tap-highlight { -webkit-tap-highlight-color: transparent; }

        .no-select {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* ================= Bottom sheets (shared) ================= */
        .sheet {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            max-width: 680px;
            background: var(--surface);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            box-shadow: var(--shadow-sheet);
            display: flex;
            flex-direction: column;
            transform: translateY(103%);
            transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.24, 1);
        }

        .sheet.dragging { transition: none; }

        .sheet-grip {
            flex: 0 0 auto;
            padding: 10px 0 6px;
            cursor: grab;
            touch-action: none;
        }

        .sheet-grip::before {
            content: "";
            display: block;
            width: 44px;
            height: 5px;
            border-radius: 999px;
            background: #ddd3c4;
            margin: 0 auto;
        }

        /* ================= Venue sheet ================= */
        #venue-sheet {
            height: 88dvh;
            z-index: 1600;
        }

        #venue-sheet.open.half { transform: translateY(44dvh); }
        #venue-sheet.open.full { transform: translateY(0); }

        .venue-sheet-header {
            flex: 0 0 auto;
            padding: 2px 16px 12px;
            border-bottom: 1px solid var(--line);
        }

        .venue-title-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .venue-title-row h2 {
            flex: 1 1 auto;
            margin: 0;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.01em;
            line-height: 1.25;
        }

        .venue-title-row h2 a {
            color: var(--ink);
            text-decoration: none;
        }

        .venue-title-row h2 a::after {
            content: " ↗";
            font-size: 13px;
            color: var(--amber-deep);
            font-weight: 700;
        }

        .venue-rating-badge {
            flex: 0 0 auto;
            font-family: var(--font-display);
            font-weight: 800;
            font-size: 16px;
            padding: 6px 12px;
            border-radius: 10px;
            color: #fff;
        }

        .sheet-close {
            flex: 0 0 auto;
            background: var(--cream);
            border: 1px solid var(--line);
            color: var(--ink-soft);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
        }

        .sheet-close:hover { background: var(--amber-soft); }

        #modal-beer-count {
            margin: 6px 0 0;
            font-size: 13px;
            color: var(--ink-soft);
        }

        .sheet-toolbar {
            flex: 0 0 auto;
            display: flex;
            gap: 8px;
            padding: 10px 16px;
            border-bottom: 1px solid var(--line);
            align-items: center;
            flex-wrap: wrap;
            background: var(--cream);
        }

        .sheet-search {
            flex: 1 1 140px;
            min-width: 120px;
            padding: 9px 12px;
            border: 1px solid var(--line);
            border-radius: 999px;
            font-family: var(--font-body);
            font-size: 14px;
            background: var(--surface);
            color: var(--ink);
            outline: none;
        }

        .sheet-search:focus { border-color: var(--amber); }

        #modal-sort {
            flex: 0 0 auto;
            padding: 9px 10px;
            border: 1px solid var(--line);
            border-radius: 999px;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 500;
            background: var(--surface);
            color: var(--ink);
            cursor: pointer;
            outline: none;
            max-width: 46%;
        }

        #modal-filter-row {
            display: none;
        }

        #modal-filter-row.available {
            display: inline-flex;
        }

        .sheet-filter-chip {
            align-items: center;
            gap: 6px;
            padding: 8px 13px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: var(--surface);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            color: var(--ink);
            transition: background 0.15s, color 0.15s;
        }

        .sheet-filter-chip input { display: none; }

        .sheet-filter-chip:has(input:checked) {
            background: var(--amber);
            border-color: var(--amber-deep);
            color: #fff;
        }

        .sheet-body {
            flex: 1 1 auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 12px 12px calc(var(--safe-bottom) + 20px);
            background: var(--cream);
        }

        /* Beer cards */
        .beer-card {
            display: flex;
            gap: 12px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 12px;
            margin-bottom: 10px;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .beer-card:hover {
            border-color: var(--amber-line);
            box-shadow: 0 2px 10px rgba(37, 26, 18, 0.08);
        }

        .rating-badge {
            flex: 0 0 auto;
            width: 54px;
            height: 54px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-weight: 800;
            font-size: 16.5px;
            color: #fff;
        }

        .tier-exc-bg   { background: var(--tier-exc); }
        .tier-vgood-bg { background: var(--tier-vgood); color: #14532d; }
        .tier-good-bg  { background: var(--tier-good); color: #422006; }
        .tier-avg-bg   { background: var(--tier-avg); }
        .tier-below-bg { background: var(--tier-below); }
        .tier-none-bg  { background: #d6cfc4; color: #574f45; }

        .rating-badge.my-rating {
            outline: 2px solid var(--amber-deep);
            outline-offset: 2px;
        }

        .beer-main { flex: 1 1 auto; min-width: 0; }

        .beer-name {
            display: block;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 15px;
            line-height: 1.3;
            color: var(--ink);
            text-decoration: none;
            overflow-wrap: anywhere;
        }

        .beer-name:hover { color: var(--amber-deep); }

        .beer-brewery {
            display: inline-block;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink-soft);
            text-decoration: none;
            margin-top: 1px;
        }

        .beer-brewery:hover { color: var(--amber-deep); text-decoration: underline; }

        .beer-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 7px;
        }

        .beer-chip {
            font-size: 11.5px;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 999px;
            background: var(--cream);
            border: 1px solid var(--line);
            color: var(--ink-soft);
            white-space: nowrap;
        }

        .beer-chip.rel {
            border: none;
            color: #fff;
        }

        /* Re-assert tier backgrounds: .beer-chip's cream background otherwise
           wins by source order (equal specificity, defined later) */
        .beer-chip.rel.tier-exc-bg   { background: var(--tier-exc); }
        .beer-chip.rel.tier-vgood-bg { background: var(--tier-vgood); color: #14532d; }
        .beer-chip.rel.tier-good-bg  { background: var(--tier-good); color: #422006; }
        .beer-chip.rel.tier-avg-bg   { background: var(--tier-avg); }
        .beer-chip.rel.tier-below-bg { background: var(--tier-below); }
        .beer-chip.rel.tier-none-bg  { background: #d6cfc4; color: #574f45; }

        .beer-meta {
            margin-top: 7px;
            font-size: 12px;
            color: var(--ink-soft);
        }

        .sheet-empty {
            text-align: center;
            color: var(--ink-soft);
            padding: 36px 20px;
            font-size: 14px;
        }

        .untappd-attrib {
            text-align: center;
            font-size: 11.5px;
            color: var(--ink-soft);
            padding: 14px 0 4px;
        }

        .untappd-attrib a { color: var(--amber-deep); }

        /* ================= Beer card actions (checkin / wishlist) ================= */
        .beer-actions {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: center;
        }

        .action-btn {
            width: 38px;
            height: 38px;
            padding: 0;
            border: none;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: filter 0.15s, transform 0.05s;
        }

        .action-btn img { width: 22px; height: 22px; }
        .action-btn:hover { filter: brightness(1.15); }
        .action-btn:active { transform: scale(0.94); }
        .action-btn:disabled { opacity: 0.5; cursor: default; }
        .action-btn.checkin { background: #1b8811; }
        .action-btn.wishlist-add { background: #020202; }
        .action-btn.wishlist-rm { background: #ff9494; }

        /* ================= Checkin sheet ================= */
        .checkin-modal {
            display: none;
            position: fixed;
            z-index: 1700;
            inset: 0;
            background: rgba(37, 26, 18, 0.5);
            opacity: 0;
            transition: opacity 0.25s;
        }

        .checkin-modal.show { display: block; }
        .checkin-modal.visible { opacity: 1; }

        #checkin-sheet {
            height: auto;
            max-height: 86dvh;
            z-index: 1710;
        }

        .checkin-modal.visible #checkin-sheet { transform: translateY(0); }

        .checkin-body {
            padding: 14px 16px calc(var(--safe-bottom) + 20px);
            overflow-y: auto;
            background: var(--cream);
        }

        .checkin-beer-name {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 16px;
        }

        .checkin-beer-context {
            font-size: 13px;
            color: var(--ink-soft);
            margin-top: 2px;
        }

        .checkin-rating-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 14px;
        }

        .checkin-rating-row input[type="range"] {
            flex: 1 1 auto;
            accent-color: #1b8811;
        }

        .checkin-rating-value {
            flex: 0 0 auto;
            min-width: 74px;
            text-align: right;
            font-family: var(--font-display);
            font-weight: 800;
            font-size: 15px;
        }

        .checkin-shout {
            width: 100%;
            margin-top: 12px;
            padding: 10px 12px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            font-family: var(--font-body);
            font-size: 14px;
            background: var(--surface);
            resize: vertical;
            min-height: 64px;
            outline: none;
        }

        .checkin-shout:focus { border-color: var(--amber); }

        .checkin-submit {
            width: 100%;
            margin-top: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            border: none;
            border-radius: 999px;
            background: #1b8811;
            color: #fff;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
        }

        .checkin-submit img { width: 20px; height: 20px; }
        .checkin-submit:hover { filter: brightness(1.1); }
        .checkin-submit:disabled { opacity: 0.6; cursor: default; }

        .checkin-error {
            margin-top: 10px;
            font-size: 13px;
            color: var(--tier-below);
            display: none;
        }

        /* Action toast: stays visible above open sheets, unlike #status */
        #action-toast {
            pointer-events: none;
            position: fixed;
            bottom: calc(var(--safe-bottom) + 24px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 2000;
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: rgba(37, 26, 18, 0.92);
            border-radius: 999px;
            padding: 8px 16px;
            max-width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.25s;
        }

        #action-toast.show { opacity: 1; }
        #action-toast.error { background: #b91c1c; }

        /* ================= Filter sheet ================= */
        .filter-modal {
            display: none;
            position: fixed;
            z-index: 1500;
            inset: 0;
            background: rgba(37, 26, 18, 0.5);
            opacity: 0;
            transition: opacity 0.25s;
        }

        .filter-modal.show { display: block; }
        .filter-modal.visible { opacity: 1; }

        #filter-sheet {
            height: 92dvh;
            z-index: 1510;
        }

        .filter-modal.visible #filter-sheet { transform: translateY(0); }

        .filter-sheet-header {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 2px 16px 12px;
            border-bottom: 1px solid var(--line);
        }

        .filter-sheet-header h2 {
            margin: 0;
            font-size: 19px;
            font-weight: 800;
        }

        .filter-modal-body {
            padding: 14px 14px 20px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            flex: 1;
            background: var(--cream);
        }

        .filter-search {
            width: 100%;
            padding: 11px 14px;
            border: 1px solid var(--line);
            border-radius: 999px;
            font-family: var(--font-body);
            font-size: 14px;
            margin-bottom: 12px;
            box-sizing: border-box;
            background: var(--surface);
            outline: none;
        }

        .filter-search:focus { border-color: var(--amber); }

        .filter-favorites {
            margin-bottom: 12px;
            padding: 12px;
            background: var(--amber-soft);
            border-radius: var(--radius);
            border: 1px solid var(--amber-line);
        }

        .filter-favorites label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
        }

        .filter-favorites-actions {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            flex-wrap: wrap;
        }

        /* Section containers */
        .filter-section-container {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 14px;
            background: var(--surface);
        }

        .filter-section-toggle { margin-bottom: 12px; }

        .filter-section-toggle label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 16px;
        }

        .filter-section-header {
            font-family: var(--font-display);
            font-size: 16px;
            font-weight: 800;
            margin: 0;
            color: var(--ink);
        }

        .filter-section-content { margin-left: 4px; }

        /* Switch-styled checkboxes */
        input[type="checkbox"].switch {
            appearance: none;
            -webkit-appearance: none;
            width: 42px;
            height: 24px;
            border-radius: 999px;
            background: #ded5c7;
            position: relative;
            cursor: pointer;
            transition: background 0.2s;
            flex-shrink: 0;
            margin: 0;
        }

        input[type="checkbox"].switch::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.25);
            transition: transform 0.2s;
        }

        input[type="checkbox"].switch:checked { background: var(--amber); }
        input[type="checkbox"].switch:checked::after { transform: translateX(18px); }

        /* Regular checkboxes */
        .filter-style-item input[type="checkbox"],
        .filter-subcategory-header input[type="checkbox"] {
            accent-color: var(--amber);
        }

        .filter-competition-section {
            margin-top: 12px;
            padding: 12px;
            background: var(--amber-soft);
            border-radius: var(--radius);
            border: 1px solid var(--amber-line);
        }

        .filter-competition-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
        }

        .filter-competition-info {
            margin-top: 8px;
            font-size: 0.9em;
            color: var(--ink-soft);
        }

        .filter-wishlist-section {
            margin-bottom: 12px;
            padding: 12px;
            background: #fff7ed;
            border-radius: var(--radius);
            border: 1px solid var(--amber-line);
        }

        .filter-wishlist-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
        }

        .filter-wishlist-info {
            margin: 8px 0;
            padding: 8px 10px;
            background: var(--cream);
            border-radius: 8px;
            font-size: 13px;
            color: var(--ink-soft);
        }

        .filter-category {
            margin-bottom: 10px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .filter-category-header {
            background: var(--cream);
            padding: 12px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
        }

        .filter-category-header:hover { background: var(--amber-soft); }
        .filter-category-header.active { background: var(--amber-soft); }

        .filter-category-title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 14.5px;
        }

        .filter-category-arrow { transition: transform 0.2s; color: var(--ink-soft); font-size: 11px; }
        .filter-category-header.active .filter-category-arrow { transform: rotate(90deg); }

        .filter-category-items {
            display: none;
            padding: 8px;
            max-height: 460px;
            overflow-y: auto;
        }

        .filter-category-items.show { display: block; }

        .filter-subcategory {
            margin: 5px 0 5px 12px;
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden;
        }

        .filter-subcategory-header {
            background: var(--cream);
            padding: 8px 12px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
            font-size: 13px;
        }

        .filter-subcategory-header:hover { background: var(--amber-soft); }
        .filter-subcategory-header.active { background: var(--amber-soft); }

        .filter-subcategory-arrow { transition: transform 0.2s; font-size: 10px; color: var(--ink-soft); }
        .filter-subcategory-header.active .filter-subcategory-arrow { transform: rotate(90deg); }

        .filter-subcategory-items {
            display: none;
            padding: 5px;
            max-height: 250px;
            overflow-y: auto;
        }

        .filter-subcategory-items.show { display: block; }

        .filter-style-item {
            padding: 9px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            border-radius: 8px;
        }

        .filter-style-item:hover { background: var(--cream); }

        .filter-style-item input[type="checkbox"] {
            cursor: pointer;
            width: 18px;
            height: 18px;
        }

        .filter-style-item label {
            cursor: pointer;
            flex: 1;
            font-size: 14px;
        }

        .filter-favorite-star {
            cursor: pointer;
            font-size: 18px;
            opacity: 0.25;
            transition: opacity 0.2s;
        }

        .filter-favorite-star.active { opacity: 1; }

        .filter-toggle-row {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
        }

        .filter-hint {
            margin-top: 5px;
            margin-left: 0;
            font-size: 0.85em;
            color: var(--ink-soft);
        }

        /* Venue type pills */
        .venue-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .venue-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 9px 14px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: var(--cream);
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }

        .venue-pill input { display: none; }

        .venue-pill:has(input:checked) {
            background: var(--amber);
            border-color: var(--amber-deep);
            color: #fff;
        }

        .filter-modal-footer {
            padding: 12px 16px calc(var(--safe-bottom) + 12px);
            background: var(--surface);
            border-top: 1px solid var(--line);
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }

        .filter-modal-footer .btn-ghost { flex: 0 0 auto; }
        .filter-modal-footer .btn-primary { flex: 1 1 auto; }

        .abv-inputs {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .abv-inputs label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
        }

        .abv-inputs input[type="number"] {
            width: 64px;
            padding: 6px 8px;
            border: 1px solid var(--line);
            border-radius: 8px;
            font-family: var(--font-body);
        }

        #competition-select {
            width: 100%;
            padding: 10px;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            font-family: var(--font-body);
            background: var(--surface);
        }

        .text-muted { color: var(--ink-soft); }

        /* Google Places autocomplete dropdown */
        .pac-container {
            z-index: 2100 !important;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            box-shadow: var(--shadow-float);
            font-family: var(--font-body);
            margin-top: 6px;
        }

        .pac-item { padding: 8px 10px; font-size: 13px; cursor: pointer; }
        .pac-item:hover { background: var(--amber-soft); }

        .google-logo-control { margin-bottom: 2px; }

        /* ================= Responsive ================= */
        @media (max-width: 768px) {
            .legend { padding: 10px; }
            .legend-toggle { display: block; }
            .legend h4 { display: none; }
            .legend.collapsed { padding: 8px 12px; }
            .legend.collapsed .legend-body { display: none; }
        }

        @media (min-width: 769px) {
            #venue-sheet, #filter-sheet {
                border-radius: var(--radius-lg);
                bottom: 12px;
            }
        }