:root {
            --evb-text: #111827;
            --evb-muted: #6B7280;
            --evb-line: #E5E7EB;
            --evb-green: #16883F;
            --evb-yellow: #FACC15;
            --evb-soft: #F7F8F4;
        }

        html,
        body {
            margin: 0;
            min-height: 100%;
            overflow-x: hidden;
            background: #F4F6F2;
        }

        body > .offcanvas:not(.show),
        body > .modal:not(.show) {
            visibility: hidden;
        }

        .dropdown-menu:not(.show) {
            display: none;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .evb-range-page,
        #mapShell.evb-range-page {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            inset: 0 !important;
            z-index: 1 !important;

            width: 100vw !important;
            max-width: none !important;
            height: 100dvh !important;
            min-height: 100dvh !important;

            margin: 0 !important;
            padding: 0 !important;

            overflow: hidden !important;
            background: #EAF2E3;
        }

        #evbRangeMap {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            inset: 0 !important;

            width: 100vw !important;
            max-width: none !important;
            height: 100dvh !important;

            margin: 0 !important;
            padding: 0 !important;
        }

        #evbRangeMap.mapboxgl-map,
        #evbRangeMap .mapboxgl-canvas-container,
        #evbRangeMap .mapboxgl-canvas {
            width: 100% !important;
            height: 100% !important;
        }

        /*
         * Nav is an overlay, not a layout block.
         * It must not reserve white space above the map.
         */
        .evb-range-nav-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 7000 !important;

            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;

            pointer-events: none;
            background: transparent !important;
        }

        .evb-range-nav-overlay > * {
            pointer-events: auto;
        }

        .evb-range-page:after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: rgba(245, 247, 243, .12);
        }

        .evb-range-card {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 40;
            width: min(455px, calc(100vw - 32px));
            transform: translate(-50%, -50%);
            border: 1px solid rgba(17,24,39,.08);
            border-radius: 24px;
            background: rgba(255,255,255,.985);
            box-shadow: 0 20px 60px rgba(15,23,42,.14);
            overflow: hidden;
            backdrop-filter: blur(14px);
            transition:
                width .2s ease,
                top .2s ease,
                left .2s ease,
                transform .2s ease;
        }

        body.evb-range-built .evb-range-card {
            top: 72px;
            left: 12px;
            width: 340px;
            transform: none;
        }

        body.evb-range-built .evb-range-head {
            padding-bottom: 11px;
        }

        body.evb-range-built .evb-range-body {
            padding-top: 10px;
        }

        .evb-range-head {
            padding: 17px 20px 13px;
            border-bottom: 1px solid var(--evb-line);
        }

        .evb-range-eyebrow {
            color: var(--evb-green);
            font-size: 10px;
            font-weight: 950;
            letter-spacing: .12em;
        }

        .evb-range-title-row {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-top: 5px;
        }

        .evb-range-title {
            margin: 0;
            color: var(--evb-text);
            font-size: 24px;
            font-weight: 950;
            line-height: 1.05;
            letter-spacing: -.03em;
        }

        .evb-range-plus {
            min-height: 25px;
            padding: 0 9px;
            display: inline-flex;
            align-items: center;
            border: 1px solid #F2C62B;
            border-radius: 999px;
            background: #FFF7D2;
            color: #7A5900;
            font-size: 10px;
            font-weight: 950;
        }

        .evb-range-subtitle {
            margin-top: 6px;
            color: var(--evb-muted);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.35;
        }

        .evb-range-body {
            padding: 14px 18px 18px;
        }

        .evb-range-usage {
            min-height: 38px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 11px;
            border: 1px solid var(--evb-line);
            border-radius: 11px;
            background: #F9FAFB;
            color: #4B5563;
            font-size: 11px;
            font-weight: 800;
        }

        .evb-range-usage-dot {
            width: 8px;
            height: 8px;
            flex: 0 0 8px;
            border-radius: 50%;
            background: #F59E0B;
        }

        .evb-range-usage-dot.is-premium {
            background: #16A34A;
        }

        .evb-range-origin-search {
            position: relative;
            margin-top: 10px;
        }

        .evb-range-search-field {
            position: relative;
            min-height: 48px;
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr) 40px;
            align-items: center;
            gap: 8px;
            padding: 0 5px 0 13px;
            border: 1px solid #DDE1E7;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 5px 16px rgba(15,23,42,.055);
            transition: border-color .16s ease, box-shadow .16s ease;
        }

        .evb-range-search-field:focus-within {
            border-color: #16883F;
            box-shadow: 0 0 0 3px rgba(22,136,63,.10), 0 7px 20px rgba(15,23,42,.08);
        }

        .evb-range-search-icon {
            width: 22px;
            height: 22px;
            color: #6B7280;
        }

        .evb-range-origin-input {
            width: 100%;
            min-width: 0;
            height: 46px;
            padding: 0;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--evb-text);
            font-size: 14px;
            font-weight: 800;
            -webkit-appearance: none;
            appearance: none;
        }

        .evb-range-origin-input::-webkit-search-cancel-button {
            display: none;
        }

        .evb-range-origin-input::placeholder {
            color: #9CA3AF;
            font-weight: 700;
            opacity: 1;
        }

        .evb-range-search-locate {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 0;
            border-radius: 10px;
            background: #F3F4F6;
            color: #111827;
            cursor: pointer;
            transition: background .16s ease, transform .16s ease;
        }

        .evb-range-search-locate:hover,
        .evb-range-search-locate:focus-visible {
            background: #E8F5EC;
            color: #166534;
            outline: none;
        }

        .evb-range-search-locate:active {
            transform: scale(.96);
        }

        .evb-range-search-locate.is-loading,
        .evb-range-search-locate:disabled {
            opacity: .58;
            pointer-events: none;
            cursor: wait;
        }

        .evb-range-search-locate svg {
            width: 20px;
            height: 20px;
        }

        .evb-range-origin-suggestions {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            z-index: 7300;
            max-height: min(342px, 48dvh);
            margin: 0;
            padding: 4px 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            list-style: none;
            border: 1px solid rgba(17,24,39,.12);
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 16px 34px rgba(15,23,42,.18);
        }

        .evb-range-origin-suggestions[hidden] {
            display: none !important;
        }

        .evb-range-origin-search.is-open .evb-range-search-field {
            border-bottom-left-radius: 9px;
            border-bottom-right-radius: 9px;
        }

        .evb-range-origin-suggestion {
            width: 100%;
            min-height: 52px;
            display: block;
            padding: 8px 12px 8px 13px;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--evb-text);
            text-align: left;
            cursor: pointer;
        }

        .evb-range-origin-suggestion:hover,
        .evb-range-origin-suggestion:focus-visible,
        .evb-range-origin-suggestion:active {
            background: #F3F4F6;
            outline: none;
        }

        .evb-range-origin-suggestions > li + li {
            border-top: 1px solid rgba(17,24,39,.055);
        }

        .evb-range-origin-suggestion__title {
            display: block;
            overflow: hidden;
            color: #111827;
            font-size: 13px;
            font-weight: 900;
            line-height: 1.22;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .evb-range-origin-suggestion__meta {
            display: block;
            margin-top: 3px;
            overflow: hidden;
            color: #7B8190;
            font-size: 10.5px;
            font-weight: 650;
            line-height: 1.22;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .evb-range-origin-empty {
            padding: 12px 13px;
            color: #6B7280;
            font-size: 10.5px;
            font-weight: 750;
        }

        .evb-range-origin-hint {
            margin-top: 6px;
            padding: 0 2px;
            color: #9CA3AF;
            font-size: 9px;
            font-weight: 700;
            line-height: 1.35;
        }

        .evb-range-origin-hint.is-error {
            color: #B91C1C;
        }

        #evbRangeFormContent[hidden] {
            display: none !important;
        }

        .evb-range-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 10px;
        }

        .evb-range-field--wide {
            grid-column: 1 / -1;
        }

        .evb-range-label {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 5px;
        }

        .evb-range-label strong {
            color: var(--evb-text);
            font-size: 11px;
            font-weight: 900;
        }

        .evb-range-label span {
            color: #9CA3AF;
            font-size: 9px;
            font-weight: 750;
        }

        .evb-range-input {
            height: 43px;
            display: flex;
            align-items: center;
            border: 1px solid #DDE1E7;
            border-radius: 10px;
            background: #fff;
            overflow: hidden;
        }

        .evb-range-input input {
            width: 100%;
            min-width: 0;
            height: 100%;
            padding: 0 12px;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--evb-text);
            font-size: 15px;
            font-weight: 950;
        }

        .evb-range-input span {
            flex: 0 0 auto;
            padding-right: 12px;
            color: var(--evb-muted);
            font-size: 10px;
            font-weight: 850;
            white-space: nowrap;
        }

        .evb-range-baseline {
            margin-top: 5px;
            color: #9CA3AF;
            font-size: 9px;
            font-weight: 700;
        }

        .evb-range-preview {
            margin-top: 11px;
            padding: 12px 13px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            border: 1px solid #E1E5DF;
            border-radius: 13px;
            background: var(--evb-soft);
        }

        .evb-range-preview strong {
            color: var(--evb-text);
            font-size: 28px;
            font-weight: 950;
            line-height: 1;
            white-space: nowrap;
        }

        .evb-range-preview span {
            color: #6B7280;
            font-size: 10px;
            font-weight: 750;
            line-height: 1.3;
            text-align: right;
        }

        .evb-range-cap {
            margin-top: 7px;
            color: #8A6400;
            font-size: 9.5px;
            font-weight: 750;
            line-height: 1.3;
        }

        .evb-range-build {
            width: 100%;
            height: 46px;
            margin-top: 12px;
            border: 0;
            border-radius: 11px;
            background: var(--evb-green);
            color: #fff;
            font-size: 13px;
            font-weight: 950;
            cursor: pointer;
        }

        .evb-range-build:disabled {
            opacity: .68;
            cursor: wait;
        }

        .evb-range-result {
            position: relative;
            margin-top: 12px;
            padding: 12px 13px;
            border: 1px solid #D5E8DB;
            border-radius: 13px;
            background: #F2F8F4;
        }

        .evb-range-result__close {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 4;
            width: 28px;
            height: 28px;
            min-width: 28px;
            min-height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid rgba(15,23,42,.10);
            border-radius: 9px;
            background: rgba(255,255,255,.96);
            color: #64748b;
            font-size: 21px;
            line-height: 1;
            font-weight: 500;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(15,23,42,.07);
        }

        .evb-range-result__close:hover,
        .evb-range-result__close:focus-visible {
            color: #111827;
            border-color: rgba(15,23,42,.22);
            background: #fff;
            outline: none;
        }

        .evb-range-result__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-right: 30px;
        }

        .evb-range-result small {
            color: #4B7B5A;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        .evb-range-result strong {
            display: block;
            margin-top: 3px;
            color: var(--evb-text);
            font-size: 24px;
            font-weight: 950;
            line-height: 1;
        }

        .evb-range-result__meta {
            color: var(--evb-muted);
            font-size: 10px;
            font-weight: 750;
            text-align: right;
            line-height: 1.3;
        }

        .evb-range-stations {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(22,136,63,.13);
        }

        .evb-range-toggle-row {
            min-height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .evb-range-toggle-row strong {
            color: var(--evb-text);
            font-size: 11px;
            font-weight: 900;
        }

        .evb-range-toggle-copy > span {
            display: block;
            margin-top: 2px;
            color: #9CA3AF;
            font-size: 9px;
            font-weight: 700;
        }

        .evb-range-toggle-copy {
            min-width: 0;
        }

        .evb-range-station-controls {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .evb-range-switch {
            position: relative;
            width: 44px;
            height: 24px;
            flex: 0 0 44px;
            display: inline-flex;
            align-items: center;
            line-height: 0;
        }

        .evb-range-switch input {
            position: absolute;
            inset: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }

        .evb-range-switch-ui {
            position: absolute;
            inset: 0;
            display: block !important;
            margin: 0 !important;
            border-radius: 999px;
            background: #D1D5DB;
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
            pointer-events: none;
            transition: background .16s ease;
        }

        .evb-range-switch-ui:after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 4px rgba(15,23,42,.20);
            transition: transform .16s ease;
        }

        .evb-range-switch input:checked + .evb-range-switch-ui {
            background: var(--evb-green);
        }

        .evb-range-switch input:checked + .evb-range-switch-ui:after {
            transform: translateX(20px);
        }

        .evb-range-switch input:focus-visible + .evb-range-switch-ui {
            outline: 2px solid rgba(22,136,63,.28);
            outline-offset: 2px;
        }

        .evb-range-filters {
            margin-top: 10px;
        }

        .evb-range-filter-title {
            margin-bottom: 6px;
            color: #6B7280;
            font-size: 9.5px;
            font-weight: 850;
        }

        .evb-range-chip-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .evb-range-chip {
            min-height: 34px;
            padding: 0 10px;
            border: 1px solid #DDE1E7;
            border-radius: 9px;
            background: #fff;
            color: #374151;
            font-size: 9.5px;
            font-weight: 850;
            cursor: pointer;
        }

        .evb-range-chip.is-active {
            border-color: #16883F;
            background: #EFF8F2;
            color: #166534;
            box-shadow: inset 0 0 0 1px #16883F;
        }

        .evb-range-station-count {
            margin-top: 8px;
            color: var(--evb-muted);
            font-size: 9.5px;
            font-weight: 800;
        }

        .evb-range-status {
            margin-top: 9px;
            padding: 8px 10px;
            border-radius: 9px;
            background: #F3F4F6;
            color: #4B5563;
            font-size: 10px;
            font-weight: 750;
        }

        .evb-range-status.is-error {
            background: #FEF2F2;
            color: #B91C1C;
        }

        .evb-range-premium {
            margin-top: 10px;
            padding: 11px;
            border: 1px solid #F2CF4B;
            border-radius: 11px;
            background: #FFF9DE;
        }

        .evb-range-premium strong {
            color: var(--evb-text);
            font-size: 11px;
            font-weight: 950;
        }

        .evb-range-premium p {
            margin: 4px 0 8px;
            color: #725D13;
            font-size: 9.5px;
            font-weight: 700;
        }

        .evb-range-premium a {
            display: inline-flex;
            height: 32px;
            padding: 0 10px;
            align-items: center;
            border-radius: 8px;
            background: #111827;
            color: #fff;
            font-size: 9.5px;
            font-weight: 900;
            text-decoration: none;
        }


        /* ====================================================
         * SAME EVBOOST MAP PINS AS PLANNER / MAIN MAP
         * ==================================================== */
        .evb-range-html-marker {
            pointer-events: auto !important;
        }

        .evb-main-map-pin-marker {
            width: auto !important;
            height: auto !important;
            cursor: pointer !important;
            pointer-events: auto !important;
        }

        /* Mapbox owns transform on the marker element for geographic positioning. */
        .evb-main-map-pin-marker img {
            display: block !important;
            pointer-events: none !important;
            user-select: none !important;
            filter: none !important;
            transform-origin: 50% 100%;
            transition: transform .12s ease;
        }

        .evb-main-map-pin-marker:hover img,
        .evb-main-map-pin-marker.is-selected img {
            transform: translateY(-2px) scale(1.08);
        }

        /*
         * Map is deliberately locked while the setup form is open.
         * Native Mapbox +/- controls become visible only after Build.
         */
        .evb-range-page .mapboxgl-ctrl-bottom-right
        .mapboxgl-ctrl-group {
            display: none;
        }

        body.evb-range-built
        .evb-range-page
        .mapboxgl-ctrl-bottom-right
        .mapboxgl-ctrl-group {
            display: block;
        }

        body.evb-range-built
        .evb-range-page
        .mapboxgl-ctrl-bottom-right {
            right: 12px;
            bottom: 34px;
        }

        /* ====================================================
         * NORMAL EVBOOST LOCATION SHEET ON RANGE
         * Left = compact Range result, right = station details.
         * ==================================================== */
        @media (min-width: 769px) {
            #mapShell #evbLocationSheetRoot[data-context="range"] {
                position: absolute !important;
                inset: 0 !important;
                z-index: 6900 !important;
                pointer-events: none !important;
            }

            #evbLocationSheetRoot[data-context="range"]
            .evb-location-sheet-backdrop {
                display: none !important;
                opacity: 0 !important;
                pointer-events: none !important;
                background: transparent !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            #evbLocationSheetRoot[data-context="range"]
            .evb-location-sheet {
                position: absolute !important;
                left: auto !important;
                right: 12px !important;
                top: 72px !important;
                bottom: 12px !important;

                width: var(--evb-location-sheet-desktop-width, 420px) !important;
                max-width: calc(100vw - 24px) !important;
                height: auto !important;
                max-height: calc(100dvh - 84px) !important;

                display: flex !important;
                flex-direction: column !important;

                border-radius: 16px !important;
                background: #f8fafc !important;
                border: 1px solid rgba(15, 23, 42, .08) !important;
                box-shadow: 0 18px 50px rgba(15, 23, 42, .18) !important;

                transform: none !important;
                pointer-events: auto !important;
                overflow: hidden !important;
                z-index: 6901 !important;
            }

            #evbLocationSheetRoot[data-context="range"]
            .evb-location-scroll {
                flex: 1 1 auto !important;
                min-height: 0 !important;
                overflow-y: auto !important;
                overscroll-behavior: contain !important;
            }

            #evbLocationSheetRoot[data-context="range"]
            .evb-location-cta,
            #evbLocationSheetRoot[data-context="range"]
            .evb-location-cta-v3 {
                position: static !important;
            }
        }

        .evb-range-origin-marker {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 4px solid #fff;
            border-radius: 50%;
            background: #111827;
            box-shadow: 0 6px 18px rgba(15,23,42,.30);
        }

        .evb-range-origin-marker__dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--evb-yellow);
        }

        .evb-range-station-card {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 300px;
            z-index: 45;
            padding: 15px;
            border: 1px solid rgba(17,24,39,.10);
            border-radius: 18px;
            background: rgba(255,255,255,.985);
            box-shadow: 0 18px 50px rgba(15,23,42,.18);
        }

        .evb-range-station-card__close {
            position: absolute;
            top: 9px;
            right: 9px;
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 50%;
            background: #F3F4F6;
            color: #6B7280;
            font-size: 18px;
        }

        .evb-range-station-card__eyebrow {
            color: var(--evb-green);
            font-size: 8.5px;
            font-weight: 950;
            letter-spacing: .08em;
        }

        .evb-range-station-card h3 {
            margin: 6px 34px 0 0;
            color: var(--evb-text);
            font-size: 17px;
            font-weight: 950;
        }

        .evb-range-station-card p {
            margin: 6px 0 0;
            color: var(--evb-muted);
            font-size: 10px;
            font-weight: 700;
        }

        .evb-range-station-card__metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-top: 12px;
        }

        .evb-range-station-card__metrics div {
            padding: 8px;
            border: 1px solid var(--evb-line);
            border-radius: 9px;
            background: #F9FAFB;
        }

        .evb-range-station-card__metrics span {
            display: block;
            color: #9CA3AF;
            font-size: 8px;
            font-weight: 700;
        }

        .evb-range-station-card__metrics strong {
            display: block;
            margin-top: 3px;
            color: var(--evb-text);
            font-size: 12px;
            font-weight: 950;
        }

        .evb-range-station-card__map-link {
            margin-top: 10px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #111827;
            color: #fff;
            font-size: 9.5px;
            font-weight: 900;
            text-decoration: none;
        }


        .evb-range-build.is-auth-locked {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            cursor: pointer;
        }

        .evb-range-build.is-auth-locked .evb-range-auth-lock {
            width: 17px;
            height: 17px;
            display: inline-flex;
            flex: 0 0 17px;
        }

        .evb-range-build.is-auth-locked .evb-range-auth-lock svg {
            width: 17px;
            height: 17px;
            display: block;
        }

        .evb-range-result__range-note {
            margin-top: 3px;
            color: #7C3AED;
            font-size: 9px;
            font-weight: 800;
        }

        .evb-range-result__actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-top: 10px;
        }

        .evb-range-result__actions button {
            height: 34px;
            border-radius: 8px;
            font-size: 9.5px;
            font-weight: 900;
            cursor: pointer;
        }

        .evb-range-result__edit {
            border: 1px solid var(--evb-line);
            background: #fff;
            color: var(--evb-text);
        }

        .evb-range-result__rebuild {
            border: 1px solid var(--evb-green);
            background: var(--evb-green);
            color: #fff;
        }

        body.evb-range-built .evb-range-result {
            margin-top: 0;
        }

        body.evb-range-built .evb-range-result strong {
            font-size: 28px;
        }

        @media (max-width: 768px) {
            .evb-range-page,
            #mapShell.evb-range-page {
                top: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100dvh !important;
                min-height: 100dvh !important;
            }

            /*
             * Mobile layout must match Planner:
             * navigation first, form below it.
             * Keep the navbar as an overlay above the map, but reserve
             * physical space for the Range card so the two never overlap.
             */
            .evb-range-card,
            body.evb-range-built .evb-range-card {
                top: calc(72px + env(safe-area-inset-top));
                left: 10px;
                right: 10px;
                bottom: auto;
                width: auto;
                max-height: calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                transform: none;
                overflow-x: hidden;
                overflow-y: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
            }

            .evb-range-station-card {
                top: calc(72px + env(safe-area-inset-top));
                left: 10px;
                right: 10px;
                width: auto;
                max-height: calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                overflow-y: auto;
            }
        }

        @media (max-width: 500px) {
            .evb-range-title {
                font-size: 22px;
            }

            .evb-range-grid {
                grid-template-columns: 1fr;
            }

            .evb-range-field--wide {
                grid-column: auto;
            }

            .evb-range-preview {
                align-items: flex-start;
                flex-direction: column;
            }

            .evb-range-preview span {
                text-align: left;
            }
        }


        /*
         * While the start point is not selected, autocomplete must be able
         * to render OUTSIDE the compact card. Previously the card's
         * overflow:hidden/auto clipped the suggestion list at its bottom.
         */
        body.evb-range-origin-pending .evb-range-card,
        body.evb-range-origin-pending:not(.evb-range-built) .evb-range-card {
            overflow: visible !important;
            max-height: none !important;
        }

        body.evb-range-origin-pending .evb-range-body,
        body.evb-range-origin-pending .evb-range-origin-search {
            overflow: visible !important;
        }

        body.evb-range-origin-pending .evb-range-origin-search {
            z-index: 120;
        }

        body.evb-range-origin-pending .evb-range-origin-suggestions {
            z-index: 7400;
        }

        @media (max-width: 768px) {
            body.evb-range-origin-pending .evb-range-card {
                top: calc(72px + env(safe-area-inset-top));
                left: 10px;
                right: 10px;
                width: auto;
            }

            body.evb-range-origin-pending .evb-range-origin-suggestions {
                max-height: min(360px, calc(100dvh - 285px - env(safe-area-inset-bottom)));
            }
        }

        /* ================================================================
         * RANGE v14 — Chargetrip-style result state
         * After building, never glue the setup form to the result card.
         * Show only one compact bottom card: stations toggle + close/reset.
         * ================================================================ */
        body.evb-range-built .evb-range-card {
            top: auto;
            right: auto;
            bottom: 22px;
            left: 24px;
            width: min(390px, calc(100vw - 48px));
            max-height: none;
            transform: none;
            overflow: visible;
            border-radius: 20px;
            background: rgba(255,255,255,.985);
            box-shadow: 0 18px 50px rgba(15,23,42,.20);
        }

        body.evb-range-built .evb-range-head,
        body.evb-range-built #evbRangeOriginSearch,
        body.evb-range-built #evbRangeUsage,
        body.evb-range-built #evbRangeSettings,
        body.evb-range-built #evbRangeStatus,
        body.evb-range-built #evbRangePremiumGate {
            display: none !important;
        }

        body.evb-range-built .evb-range-body {
            padding: 0;
            overflow: visible;
        }

        body.evb-range-built #evbRangeFormContent {
            display: block !important;
        }

        body.evb-range-built .evb-range-result {
            display: block !important;
            margin: 0;
            padding: 16px 16px 14px;
            border: 0;
            border-radius: 20px;
            background: #fff;
        }

        .evb-range-result__summary {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            padding-right: 38px;
        }

        .evb-range-result__summary small {
            display: block;
            color: #4B7B5A;
            font-size: 9px;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .evb-range-result__summary strong,
        body.evb-range-built .evb-range-result__summary strong {
            display: block;
            margin-top: 4px;
            color: var(--evb-text);
            font-size: 25px;
            font-weight: 950;
            line-height: 1;
        }

        .evb-range-result__range-note {
            margin: 0 0 2px;
            color: #7C3AED;
            font-size: 9px;
            font-weight: 850;
            text-align: right;
            white-space: nowrap;
        }

        body.evb-range-built .evb-range-stations {
            margin-top: 13px;
            padding-top: 13px;
            border-top: 1px solid rgba(15,23,42,.09);
        }

        body.evb-range-built .evb-range-toggle-row {
            min-height: 48px;
        }

        body.evb-range-built .evb-range-toggle-row strong {
            font-size: 13px;
        }

        body.evb-range-built .evb-range-toggle-copy > span {
            margin-top: 3px;
            font-size: 10px;
        }

        body.evb-range-built .evb-range-result__close {
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
            border-radius: 50%;
            background: #F3F4F6;
            box-shadow: none;
        }

        @media (max-width: 768px) {
            body.evb-range-built .evb-range-card {
                top: calc(88px + env(safe-area-inset-top)) !important;
                right: 10px !important;
                bottom: auto !important;
                left: 10px !important;
                width: auto !important;
                max-height: calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
                transform: none !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                border-radius: 18px;
            }

            body.evb-range-built .evb-range-result {
                border-radius: 18px;
            }
        }