/* ═══ Lagoon Liquid Glass — Gas Prices page (Phase 7, board Q) ═══
   Loaded after the page's own <style>. Remove the <link> to roll back. */
:root {
  --v3-fill: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 55%, rgba(255,255,255,.14));
  --v3-tint: rgba(6, 34, 30, .34);
  --v3-rim: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(255,255,255,.12), inset 0 0 22px rgba(255,255,255,.06);
  --v3-shadow: 0 18px 40px rgba(2,20,18,.34);
  --v3-font: 'Sora', 'Outfit', system-ui, sans-serif;
  --v3-gold: #ffd27a;
  --v3-spring: cubic-bezier(.34,1.56,.64,1);
}
body {
  color: #fff;
  background-color: #06231f;
  background-image:
    linear-gradient(180deg, rgba(3,22,18,0) 0%, rgba(3,22,18,0) 34%, rgba(3,22,18,.6) 70%, rgba(3,22,18,.86) 100%),
    radial-gradient(11rem 11rem at 84% 7%, rgba(255,238,190,.85), rgba(255,190,110,.45) 45%, rgba(255,150,80,0) 72%),
    radial-gradient(26rem 18rem at 92% 8%, rgba(255,160,90,.45), transparent 66%),
    radial-gradient(23rem 15rem at 6% 34%, rgba(0,205,140,.3), transparent 62%),
    linear-gradient(180deg, #123f5c 0%, #0c5f60 40%, #053a2a 100%);
  background-attachment: fixed;
}
.section-title, .report-title, .hero h1, .fuel-price { font-family: var(--v3-font); }
.section-title { color: #fff; font-size: 22px; }
.section-sub { color: rgba(255,255,255,.82); }
.scroll-progress { background: linear-gradient(90deg, #fff0b8, #ffd27a); }

/* nav → floating capsule */
nav { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  height: 46px; padding: 0; margin: 18px auto 0; width: min(calc(100% - 36px), 1160px); top: 12px; border-radius: 0; }
.nav-logo { height: 46px; padding: 0 18px; border-radius: 999px; background: var(--v3-fill), var(--v3-tint);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--v3-rim), var(--v3-shadow); }
.nav-logo em { color: var(--v3-gold); }
.nav-link { height: 46px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; color: #fff;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--v3-rim); }
@media (max-width: 640px) { nav { top: 8px; width: calc(100% - 36px); margin: 18px auto 0; border-radius: 0; } .nav-link:not([style]) { display: none; } .nav-logo span { display: none; } }

/* hero */
.hero { background: none; margin-top: 0; padding: 40px 18px 36px; }
.hero::before { display: none; }
.hero-eyebrow { background: var(--v3-fill), var(--v3-tint); border: 0; color: var(--v3-gold); box-shadow: var(--v3-rim);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); }
.hero h1 { color: #fff; font-weight: 700; letter-spacing: -.5px; }
.hero h1 em { color: var(--v3-gold); font-style: normal; }
.hero-sub { color: rgba(255,255,255,.88); }
.last-updated, .hero-share-btn { color: #fff; border: 0; background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
.hero-share-btn { border-radius: 999px; min-height: 48px; padding: 0 22px; transition: transform .4s var(--v3-spring); }
.hero-share-btn:active { transform: scale(.96); }

/* glass cards (map card stays without backdrop-filter: Leaflet/WebKit bug) */
.price-card, .chart-card, .report-card, .takeaway-card, .calc-card, .table-card, .insight-card {
  background: var(--v3-fill), var(--v3-tint); border: 0; color: #fff; border-radius: 32px;
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: var(--v3-rim), var(--v3-shadow);
}
.price-card::before { height: 0; }
.price-card::after, .chart-card::after, .insight-card::after, .table-card::after, .calc-card::after { opacity: 0; }
.price-card:hover, .chart-card:hover, .insight-card:hover { transform: translateY(-3px); }
.map-card { background: rgba(8,40,36,.82); border: 0; border-radius: 32px; overflow: hidden; box-shadow: var(--v3-rim), var(--v3-shadow); }
#stationMap { border-radius: 0; }

/* price card contents */
.fuel-icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; font-size: 26px; border-radius: 50%;
  background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.5); }
.fuel-name, .fuel-ex, .fuel-tank, .fuel-pump, .fuel-tank strong, .fuel-ex strong { color: rgba(255,255,255,.85); }
.fuel-price { color: #fff; font-size: 40px; font-weight: 700; }
.fuel-price .currency { color: var(--v3-gold); }
.fuel-pump strong { color: var(--v3-gold); }
.price-card div[style*="text-3"] { color: rgba(255,255,255,.75) !important; }
.change-badge { border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; }
.change-badge.up { background: rgba(255,120,120,.28); color: #ffd6d6; }
.change-badge.down { background: rgba(110,231,160,.28); color: #c9ffe0; }

/* toggles & tabs → glass capsule with gold active */
.tank-toggle, .price-tabs, .chart-toggle { background: var(--v3-fill), var(--v3-tint); border: 0; padding: 4px; box-shadow: var(--v3-rim);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); }
.tank-btn, .price-tab, .chart-tab { color: #fff; min-height: 40px; padding: 0 16px; transition: transform .4s var(--v3-spring), background .2s; }
.tank-btn:active, .price-tab:active, .chart-tab:active { transform: scale(.94); }
.tank-btn.active, .price-tab.active, .chart-tab.active { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); color: #1a1405; font-weight: 700; }

/* map overlay controls, station panels */
.map-locate-btn { background: var(--v3-fill), rgba(6,34,30,.7); color: #fff; box-shadow: var(--v3-rim), 0 8px 20px rgba(2,20,18,.4); width: 48px; height: 48px; }
.map-status-bar, .cheapest-panel { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.14); }
.cheapest-header, .cr-name { color: #fff; } .cheapest-note, .cr-meta, .cheapest-empty, .cheapest-close { color: rgba(255,255,255,.75); }
.cheapest-row { border-color: rgba(255,255,255,.14); }
.cr-rank { background: rgba(255,210,122,.22); color: var(--v3-gold); } .cr-price { color: var(--v3-gold); }
.cheapest-fuel-pill { background: rgba(255,255,255,.12); color: #fff; border: 0; }
.cheapest-fuel-pill.active { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); color: #1a1405; }

/* report form */
.report-card { padding: 22px; }
.selected-station { background: rgba(255,255,255,.12); border: 0; border-radius: 22px; color: #fff; }
.report-form label { color: #fff; font-weight: 600; }
.report-form input:not([type=hidden]), .report-form select, .map-overlay-search input {
  min-height: 52px; border: 0; border-radius: 20px; padding: 0 16px; color: #fff; font-size: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05)), rgba(6,34,30,.3);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.1);
}
.report-form select option { color: #111; }
.report-form input::placeholder, .map-overlay-search input::placeholder { color: rgba(255,255,255,.65); }
.report-form input:focus, .report-form select:focus, .map-overlay-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,210,122,.45), inset 0 1px 1px rgba(255,255,255,.5); }
.report-submit { min-height: 54px; border-radius: 999px; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); color: #1a1405; font-weight: 700; font-size: 16px;
  box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); transition: transform .4s var(--v3-spring); }
.report-submit:hover { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); }
.report-submit:active { transform: scale(.97); }
.report-submit:disabled { background: rgba(255,255,255,.16); color: rgba(255,255,255,.8); box-shadow: none; }
.report-note, .last-report { color: rgba(255,255,255,.85); }
.station-search-results { background: rgba(8,40,36,.96); color: #fff; border-radius: 20px; }

.takeaway-card { border-radius: 32px; } .takeaway-text { color: #fff; }
footer { border-radius: 32px 32px 0 0; }
.hero-share-btn:focus-visible, .tank-btn:focus-visible, .price-tab:focus-visible, .chart-tab:focus-visible, .report-submit:focus-visible { outline: 3px solid rgba(255,210,122,.7); outline-offset: 2px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } .price-card { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (prefers-reduced-transparency: reduce) { .price-card, .chart-card, .report-card, .takeaway-card, .nav-logo, .nav-link { background: #123b27; -webkit-backdrop-filter: none; backdrop-filter: none; } }
html { background: #06231f; }
.ss-text, .ss-body, .ss-icon { color: rgba(255,255,255,.92); }
#stationMap { background: #0b4a45; }
.nav-link[style*="gold"] { color: var(--v3-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN — task-first layout: slim header · Prices / Stations / Trends tabs ·
   fuel picker + big pump price · fill-up calculator · report sheet
   ═══════════════════════════════════════════════════════════════════════════ */
nav { display: none; }
body { padding-bottom: 40px; }
.g-top { display: flex; align-items: center; gap: 12px; width: min(calc(100% - 28px), 1040px); margin: calc(14px + env(safe-area-inset-top, 0px)) auto 0; }
.g-back, .g-share { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; padding: 0; min-height: 0;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--v3-rim), var(--v3-shadow); border: 0; cursor: pointer; transition: transform .4s var(--v3-spring); }
.g-back:active, .g-share:active { transform: scale(.92); }
.g-top-t { flex: 1; min-width: 0; }
.g-top h1 { margin: 0; font: 700 clamp(20px, 5.6vw, 28px)/1.1 var(--v3-font); letter-spacing: -.02em; color: #fff; }
.g-top h1 em { color: var(--v3-gold); font-style: normal; }
.g-top .last-updated { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 0; background: none; box-shadow: none; font-size: 12.5px; color: rgba(255,255,255,.88); }
.g-sub { width: min(calc(100% - 28px), 1040px); margin: 10px auto 0; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
.g-stale { width: min(calc(100% - 28px), 1040px); margin: 10px auto 0; padding: 8px 14px; border-radius: 18px; font-size: 13px; color: var(--v3-gold); background: rgba(244,195,0,.14); }

.g-tabs { position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 40; display: flex; gap: 4px; width: min(calc(100% - 28px), 1040px); margin: 14px auto 0; padding: 4px; border-radius: 999px;
  background: var(--v3-fill), rgba(6,34,30,.62); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--v3-rim), var(--v3-shadow); }
.g-tab { flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; background: none; color: #fff; font: 600 15px var(--v3-font); cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .4s var(--v3-spring); }
.g-tab:active { transform: scale(.95); }
.g-tab.active { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 6px 16px rgba(244,195,0,.32), inset 0 1px 1px rgba(255,255,255,.7); }
.g-tab:focus-visible, .g-fuelchip:focus-visible, .g-chip:focus-visible, .g-row:focus-visible, .g-seg button:focus-visible { outline: 3px solid rgba(255,210,122,.7); outline-offset: 2px; }

.g-wrap { width: min(calc(100% - 28px), 1040px); max-width: none; margin: 14px auto 0; padding: 0; }
.g-panel { display: flex; flex-direction: column; gap: 14px; animation: g-in .35s ease both; }
.g-panel[hidden] { display: none; }
@keyframes g-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.g-card, .g-hero-card { border-radius: 30px; padding: 18px; background: var(--v3-fill), var(--v3-tint); color: #fff; border: 0;
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06); box-shadow: var(--v3-rim), var(--v3-shadow); }
.g-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.g-card-hd h2 { margin: 0; font: 600 18px var(--v3-font); color: #fff; }
.g-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 1px rgba(255,255,255,.3); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.g-seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #fff; font: 600 13.5px var(--v3-font); cursor: pointer; transition: background .2s, color .2s; }
.g-seg button.active { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); }

.g-take { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 24px; }
.g-take .takeaway-icon { font-size: 22px; } .g-take .takeaway-text { margin: 0; font-size: 14px; line-height: 1.4; }

/* fuel picker + hero price */
.g-fuelhero { display: flex; flex-direction: column; gap: 10px; }
.g-picker { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 4px; scroll-snap-type: x proximity; }
.g-picker::-webkit-scrollbar { display: none; }
.g-fuelchip { flex: none; scroll-snap-align: start; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; font: 600 14.5px var(--v3-font); cursor: pointer;
  background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); transition: transform .4s var(--v3-spring), background .2s; }
.g-fuelchip:active { transform: scale(.94); }
.g-fuelchip.active { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 8px 20px rgba(244,195,0,.3), inset 0 1px 1px rgba(255,255,255,.7); }
.g-hero-card { position: relative; overflow: hidden; padding: 20px 20px 16px; }
.g-hero-card:hover { transform: none; }
.g-hero-lab { font: 600 13.5px var(--v3-font); color: rgba(255,255,255,.85); }
.g-hero-price { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 6px; font: 700 clamp(56px, 18vw, 84px)/1 var(--v3-font); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.g-hero-price .currency { font-size: .38em; color: var(--v3-gold); letter-spacing: 0; align-self: flex-start; margin-top: .22em; }
.g-hero-price small { font: 500 15px var(--v3-font); letter-spacing: 0; color: rgba(255,255,255,.8); margin-left: 6px; }
.g-delta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 700 13.5px var(--v3-font); background: rgba(255,255,255,.16); color: #fff; }
.g-delta em { font-style: normal; font-weight: 500; opacity: .85; }
.g-delta.up { background: rgba(255,120,120,.28); color: #ffd6d6; } .g-delta.down { background: rgba(110,231,160,.28); color: #c9ffe0; }
.g-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.82); }
.g-hero-meta b { color: #fff; } .g-hero-meta b.up { color: #ffb4b4; } .g-hero-meta b.down { color: #b6f3cf; }
.g-spark { display: block; width: 100%; height: 56px; margin-top: 12px; overflow: visible; }
.g-spark-fill { fill: rgba(255,210,122,.16); } .g-spark-line { fill: none; stroke: var(--v3-gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.g-spark-dot { fill: #fff; stroke: var(--v3-gold); stroke-width: 2; }

/* calculator */
.g-calc-in { display: flex; flex-direction: column; gap: 10px; }
.g-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.g-chip { flex: 1 1 0; min-width: 64px; min-height: 44px; border: 0; border-radius: 999px; color: #fff; font: 600 14.5px var(--v3-font); cursor: pointer; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.35); transition: transform .35s var(--v3-spring); }
.g-chip:active { transform: scale(.94); }
.g-chip.active { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); }
.g-calc-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 0 16px; min-height: 52px; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 1px rgba(255,255,255,.35); font-size: 14px; color: rgba(255,255,255,.9); }
.g-calc-field input { width: 46%; min-width: 0; height: 40px; border: 0; border-radius: 999px; padding: 0 14px; text-align: right; color: #fff; font: 700 17px var(--v3-font); background: rgba(6,34,30,.35); }
.g-calc-field input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,210,122,.45); }
.g-calc-out { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 14px; padding: 16px; border-radius: 24px; text-align: center; background: rgba(6,34,30,.4); box-shadow: inset 0 1px 1px rgba(255,255,255,.2); }
.g-calc-out span, .g-calc-out em { font-size: 13.5px; font-style: normal; color: rgba(255,255,255,.85); }
.g-calc-out strong { font: 700 clamp(34px, 11vw, 46px)/1.1 var(--v3-font); color: var(--v3-gold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* all fuels list */
.g-list { display: flex; flex-direction: column; gap: 2px; }
.g-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 10px; border: 0; border-radius: 22px; background: none; color: #fff; text-align: left; cursor: pointer; font-family: inherit; transition: background .2s; }
.g-row + .g-row { box-shadow: 0 -1px 0 rgba(255,255,255,.1); }
.g-row.active { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.3); }
.g-row-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255,255,255,.14); }
.g-row-n { flex: 1; min-width: 0; display: flex; flex-direction: column; } .g-row-n b { font: 600 15.5px var(--v3-font); } .g-row-n small { font-size: 12.5px; color: rgba(255,255,255,.78); }
.g-row-p { display: flex; flex-direction: column; align-items: flex-end; } .g-row-p b { font: 700 17px var(--v3-font); color: var(--v3-gold); font-variant-numeric: tabular-nums; }
.g-row-p small { font-size: 12.5px; font-weight: 600; } .g-row-p small.up { color: #ffb4b4; } .g-row-p small.down { color: #b6f3cf; } .g-row-p small.same { color: rgba(255,255,255,.7); }
.g-community { grid-template-columns: 1fr; gap: 10px; }
.g-community .price-card { box-shadow: inset 0 1px 1px rgba(255,255,255,.3); border-radius: 24px; padding: 16px; background: rgba(255,255,255,.1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.g-foot { margin: 10px 4px 0; font-size: 12.5px; color: rgba(255,255,255,.75); }

/* stations */
.g-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.g-act, .map-locate-btn.g-act { position: static !important; flex: 1; width: auto; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; font: 700 15px var(--v3-font); cursor: pointer;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--v3-rim), var(--v3-shadow); transition: transform .4s var(--v3-spring); }
.g-act:active { transform: scale(.95); }
.g-act-gold, .map-locate-btn.g-act-gold { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); }
.g-wrap .locator-section { margin: 0; padding: 0; }
.g-wrap .map-card { margin: 0; }
#stationMap { height: clamp(320px, 58vh, 560px); }
.map-status-bar { padding: 12px 16px; font-size: 13.5px; transition: background .3s; }
.map-status-bar.g-nudge { background: rgba(255,210,122,.25); color: #fff; }
.g-report-open { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin-top: 12px; min-height: 64px; padding: 10px 16px; border: 0; border-radius: 30px; color: #fff; font: 700 16px var(--v3-font); cursor: pointer;
  background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim), var(--v3-shadow); transition: transform .4s var(--v3-spring); }
.g-report-open small { font: 500 12.5px system-ui, sans-serif; color: rgba(255,255,255,.82); }
.g-report-open:active { transform: scale(.97); }

/* the report sheet */
.g-sheet-ov { position: fixed; inset: 0; z-index: 90; background: rgba(2,20,18,.55); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.g-sheet-ov.open { opacity: 1; pointer-events: auto; }
.g-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-width: 560px; margin: 0 auto; max-height: calc(100dvh - 40px); overflow-y: auto; border-radius: 32px 32px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%); transition: transform .45s cubic-bezier(.22,1,.36,1); background: linear-gradient(180deg, #14506a, #0a4a48 60%, #053a2a); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 -18px 50px rgba(2,20,18,.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.g-sheet.open { transform: none; }
.g-sheet-grab { display: flex; justify-content: center; padding: 4px 0 8px; } .g-sheet-grab span { width: 38px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.4); }
.g-sheet-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.g-sheet .report-title { margin: 0; font: 600 20px var(--v3-font); color: #fff; }
.g-sheet-x { width: 40px; height: 40px; border: 0; border-radius: 50%; color: #fff; font-size: 15px; cursor: pointer; background: rgba(255,255,255,.14); }
.g-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-sheet .report-form { display: flex; flex-direction: column; gap: 12px; }
.g-sheet .report-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
body.g-sheet-open { overflow: hidden; }

/* trends */
.g-trendchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g-trendchip { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 24px; color: #fff; background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
.g-trendchip span { font-size: 13.5px; color: rgba(255,255,255,.88); } .g-trendchip b { font: 700 19px var(--v3-font); } .g-trendchip small { font-size: 12px; color: rgba(255,255,255,.75); }
.g-trendchip.up b { color: #ffb4b4; } .g-trendchip.down b { color: #b6f3cf; } .g-trendchip.same b { color: #fff; }
.g-chart { background: none; box-shadow: none; padding: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.g-chart .chart-wrap { height: 300px; }

@media (min-width: 900px) {
  .g-panel#gpanel-prices { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
  #gpanel-prices .g-take, #gpanel-prices .g-all { grid-column: 1 / -1; }
  .g-trendchips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 360px) { .g-tab { font-size: 13.5px; gap: 3px; } .g-form-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .g-panel, .g-sheet, .g-sheet-ov { animation: none; transition: none; } }
@media (prefers-reduced-transparency: reduce) { .g-card, .g-hero-card, .g-tabs, .g-back, .g-share { background: #123b27; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* polish pass */
.g-top .last-updated, .g-top .last-updated * { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; }
.g-top .last-updated { align-items: flex-start; line-height: 1.3; }
.g-top .last-updated .dot, .g-top .last-updated #lastUpdatedDot { flex: none; margin-top: 4px; }
.g-act { white-space: nowrap; font-size: 14.5px; padding: 0 10px; }
.g-sheet #selectedStationDisplay, .g-sheet .selected-station { background: rgba(255,255,255,.16); color: #fff; }
.g-sheet #selectedStationText { color: #fff; opacity: 1; }
.g-sheet input, .g-sheet select { color: #fff; }
.g-sheet input::placeholder { color: rgba(255,255,255,.7); }
.g-sheet select option { color: #111; }

/* free-entry amount + ask Yaad Brain */
.g-seg button { padding: 0 12px; }
.g-calc-field { min-height: 60px; }
.g-calc-field span { font-weight: 600; }
.g-calc-field input { width: 55%; height: 46px; font-size: 22px; }
.g-calc-out em { display: block; }
.g-ask-form { display: flex; gap: 8px; margin-bottom: 10px; }
.g-ask-form input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 0; border-radius: 999px; color: #fff; font: 500 16px var(--v3-font); background: rgba(6,34,30,.4); box-shadow: inset 0 1px 1px rgba(255,255,255,.25); }
.g-ask-form input::placeholder { color: rgba(255,255,255,.7); }
.g-ask-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,210,122,.45); }
.g-ask-form button { flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%; font-size: 18px; color: #1a1405; cursor: pointer; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); }
.g-ask-chips .g-chip { flex: 1 1 auto; font-size: 13.5px; padding: 0 12px; }

/* one-tap confirm in station popups */
.st-confirm-box { margin: 8px 0 4px; padding: 8px; border-radius: 14px; background: rgba(0,0,0,.06); }
.st-confirm-t { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.st-confirm-row { display: flex; flex-wrap: wrap; gap: 6px; }
.st-confirm { min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; font: 700 13px var(--v3-font, system-ui); color: #1a1405; cursor: pointer; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); transition: transform .3s var(--v3-spring); }
.st-confirm:active { transform: scale(.94); } .st-confirm:disabled { opacity: .6; }

/* station search sits ABOVE the map (not over it) so it never covers the map or its buttons */
.g-wrap .map-frame { display: flex; flex-direction: column; }
.g-wrap .map-overlay-search { order: -1; width: 100% !important; max-width: none !important; left: auto; right: auto; top: auto; margin: 0 0 10px; padding: 0; background: none; box-shadow: none; }
.g-wrap .map-overlay-search { position: relative !important; }
.g-wrap .map-overlay-search input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 44px 0 20px; border: 0; border-radius: 999px; color: #fff; font: 500 16px var(--v3-font, system-ui);
  background: var(--v3-fill), rgba(6,34,30,.72); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--v3-rim), var(--v3-shadow); }
.g-wrap .map-overlay-search input::placeholder { color: rgba(255,255,255,.75); }
.g-wrap .map-overlay-search input:focus { outline: none; box-shadow: var(--v3-rim), 0 0 0 3px rgba(255,210,122,.5); }
.g-wrap .station-search-clear { color: #fff; right: 16px; top: 26px; }
.g-wrap .station-search-results { z-index: 600; background: rgba(8,40,36,.97); border: 0; border-radius: 22px; }
.g-wrap .station-search-item { color: #fff; border-bottom-color: rgba(255,255,255,.1); }
.g-wrap .station-search-item .ssi-name { color: #fff; } .g-wrap .station-search-item .ssi-meta { color: rgba(255,255,255,.75); }
.g-wrap .station-search-item:hover, .g-wrap .station-search-item.active { background: rgba(255,255,255,.12); }
#stationMap { z-index: 0; border-radius: 28px; overflow: hidden; }
.g-pin { background: none; border: 0; }
.g-pin span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50% 50% 50% 8%; transform: rotate(-45deg); background: linear-gradient(145deg, #ffcf6b, #f08a1c); box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.7); border: 2px solid #fff; }
.g-pin i { transform: rotate(45deg); font-style: normal; font-size: 16px; }

/* selected-station card (below the map; replaces the cramped popup) */
.g-stcard { position: relative; margin-top: 12px; padding: 18px; border-radius: 30px; color: #fff; background: var(--v3-fill), var(--v3-tint);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06); box-shadow: var(--v3-rim), var(--v3-shadow); animation: g-in .3s ease both; }
.g-stcard[hidden] { display: none; }
.g-stcard h3 { margin: 0 44px 2px 0; font: 700 18px/1.25 var(--v3-font); color: #fff; }
.g-stcard-sub { margin: 0 0 12px; font-size: 13.5px; color: rgba(255,255,255,.82); text-transform: capitalize; }
.g-stcard-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16); font-size: 15px; cursor: pointer; }
.g-stp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-stp { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 20px; background: rgba(6,34,30,.4); box-shadow: inset 0 1px 1px rgba(255,255,255,.2); }
.g-stp span { font: 600 13px var(--v3-font); color: rgba(255,255,255,.85); }
.g-stp b { font: 700 19px var(--v3-font); color: var(--v3-gold); font-variant-numeric: tabular-nums; }
.g-stp small { font-size: 11.5px; color: rgba(255,255,255,.72); }
.g-stcard-note { margin: 10px 2px 0; font-size: 12.5px; color: rgba(255,255,255,.78); }
.g-stcard .st-confirm-box { background: rgba(255,255,255,.1); border-radius: 22px; padding: 12px; margin-top: 12px; }
.g-stcard .st-confirm-t { color: #fff; font-size: 13px; }
.g-stcard-acts { display: flex; gap: 10px; margin-top: 14px; }
.g-stcard-acts .g-act { height: 50px; text-decoration: none; }
/* sheet: readable "change station" link */
.g-sheet .ss-change, .g-sheet #ssChangeLink { color: #ffd27a !important; font-weight: 700; }
.g-sheet #selectedStationText { color: #fff; }

/* report sheet: truly hidden until opened (iOS Safari's moving toolbar made it peek) */
.g-sheet-ov:not(.open) { visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.g-sheet:not(.open) { visibility: hidden; pointer-events: none; transform: translateY(calc(100% + 240px)); transition: transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s; }
.g-sheet.open, .g-sheet-ov.open { visibility: visible; }

/* station card tiles with survey / national / ex-refinery */
.g-stp-grid { grid-template-columns: 1fr; }
.g-stp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-stp-d { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.14); }
.g-stp-d.up { color: #ffb4b4; } .g-stp-d.down { color: #b6f3cf; }
.g-stp dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; }
.g-stp dt { color: rgba(255,255,255,.72); } .g-stp dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .g-stp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-stp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-stp { padding: 10px 12px; }
.g-stp-top { flex-direction: column; align-items: flex-start; gap: 2px; }
.g-stp b { font-size: 18px; }
.g-stp dl { font-size: 12px; gap: 2px 6px; }
.g-stp b { white-space: nowrap; font-size: 17px; }
.g-stp dt { white-space: nowrap; }
@media (max-width: 360px) { .g-stp b { font-size: 16px; } .g-stp dl { font-size: 11.5px; } }
.g-stcard-acts { flex-wrap: wrap; } .g-stcard-acts .g-act { min-width: 130px; padding: 0 12px; font-size: 14px; }

/* desktop grid: let every card shrink to its column (the fuel picker used to run under the calculator) */
.g-panel > * { min-width: 0; }
.g-fuelhero { min-width: 0; max-width: 100%; }
@media (min-width: 900px) {
  .g-panel#gpanel-prices { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  #gpanel-prices .g-fuelhero { grid-column: 1; }
  #gpanel-prices .g-calc { grid-column: 2; grid-row: span 2; }
  #gpanel-prices .g-ask { grid-column: 1 / -1; }
  .g-picker { margin: 0; padding: 2px 0 4px; flex-wrap: wrap; overflow: visible; }
}

/* ═══ Stations — premium map card ═══
   One glass card: a search pill on top, the map inset below with rounded corners, glass zoom, gold clusters. */
.g-wrap .map-card { padding: 10px; border-radius: 36px; overflow: visible;
  background: var(--v3-fill), rgba(6,34,30,.72); box-shadow: var(--v3-rim), var(--v3-shadow); }
.g-wrap .map-frame { display: flex; flex-direction: column; gap: 10px; }
.g-wrap .map-overlay-search { margin: 0; z-index: 700; }
.g-wrap .map-overlay-search .g-search-ic { position: absolute; left: 18px; top: 26px; transform: translateY(-50%); color: #ffd45c; pointer-events: none; z-index: 1; }
.g-wrap .map-overlay-search input { height: 52px; padding: 0 46px 0 48px; background: rgba(255,255,255,.1); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .3s, background .3s; }
.g-wrap .map-overlay-search input:focus { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 0 3px rgba(255,210,122,.5); }
.g-wrap .station-search-clear { top: 26px; right: 12px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 13px; display: none; }
.g-wrap .station-search-clear.show { display: grid; place-items: center; }
.g-wrap .station-search-results { top: calc(100% + 8px); border-radius: 24px; padding: 6px; background: rgba(7,36,32,.98); box-shadow: 0 24px 50px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.2); max-height: 300px; }
.g-wrap .station-search-item { border: 0; border-radius: 16px; padding: 12px 14px; }
.g-wrap #stationMap { border-radius: 28px; height: clamp(340px, 56vh, 560px); background: #e6e2d6; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.g-wrap #stationMap .leaflet-tile-pane { filter: saturate(.82) contrast(1.03) brightness(1.02); }
.g-wrap #stationMap .leaflet-tile { outline: 1px solid transparent; }
.g-wrap .leaflet-control-zoom { border: 0 !important; border-radius: 20px; overflow: hidden; margin: 12px 0 0 12px; background: rgba(8,40,36,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.3); }
.g-wrap .leaflet-control-zoom a { width: 42px; height: 42px; line-height: 42px; background: transparent !important; color: #fff !important; font-size: 22px; border: 0 !important; }
.g-wrap .leaflet-control-zoom a + a { border-top: 1px solid rgba(255,255,255,.16) !important; }
.g-wrap .leaflet-control-attribution { background: rgba(8,40,36,.55) !important; color: rgba(255,255,255,.7); font-size: 9.5px; border-radius: 10px 0 0 0; padding: 1px 6px; }
.g-wrap .leaflet-control-attribution a { color: #ffd88a; }
.g-wrap .marker-cluster-small, .g-wrap .marker-cluster-medium, .g-wrap .marker-cluster-large { background: rgba(255,212,92,.28); }
.g-wrap .marker-cluster div { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); color: #2a1d00; font: 800 13px var(--v3-font, system-ui);
  box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.8); }
.g-wrap .marker-cluster span { line-height: 30px; }
.g-wrap .map-status-bar { padding: 0 8px; }
.g-wrap .map-status-bar:empty { display: none; }
.g-wrap .map-status-bar:not(:empty) { margin-top: 10px; padding: 10px 14px; border-radius: 18px; background: rgba(255,255,255,.1); color: #fff; }
.g-wrap .cheapest-panel { margin-top: 10px; }

/* station card — type in the price you saw */
.st-own { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.st-confirm-box > .st-own:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.st-own-l { display: block; margin-bottom: 8px; font: 700 13.5px var(--v3-font, system-ui); color: #fff; }
.st-own-row { display: flex; gap: 8px; align-items: stretch; }
.st-own-fuel { flex: none; height: 46px; padding: 0 12px; border: 0; border-radius: 999px; color: #fff; font: 700 14px var(--v3-font, system-ui); background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.3); }
.st-own-fuel option { color: #111; }
.st-own-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px; border-radius: 999px; background: rgba(0,0,0,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.st-own-in b { color: #ffd45c; font: 800 14px var(--v3-font, system-ui); }
.st-own-price { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: none; color: #fff; font: 700 17px var(--v3-font, system-ui); }
.st-own-price::placeholder { color: rgba(255,255,255,.4); }
.st-own-in:focus-within { box-shadow: inset 0 1px 3px rgba(0,0,0,.35), 0 0 0 3px rgba(255,210,122,.5); }
.st-own-price.bad { color: #ffb4b4; }
.st-own-go { flex: none; height: 46px; padding: 0 18px; border: 0; border-radius: 999px; font: 800 14px var(--v3-font, system-ui); color: #1a1405; cursor: pointer; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); transition: transform .3s var(--v3-spring); }
.st-own-go:active { transform: scale(.94); } .st-own-go:disabled { opacity: .6; }
@media (max-width: 360px) { .st-own-row { flex-wrap: wrap; } .st-own-in { flex-basis: 100%; order: 3; } .st-own-fuel { flex: 1; } }

/* ═══ live visit counter (home + gas) ═══ */
.live-strip { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 12px !important; border-radius: 999px !important; font: 600 12.5px var(--v3-font, system-ui); color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.1) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.28) !important; width: fit-content; }
.live-strip[hidden] { display: none !important; }
.live-strip b { color: #ffe08a; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-sep { opacity: .5; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #5df2a0; box-shadow: 0 0 0 0 rgba(93,242,160,.7); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(93,242,160,.65); } 70%, 100% { box-shadow: 0 0 0 8px rgba(93,242,160,0); } }
.lv-bump { animation: lv-bump .5s ease; }
@keyframes lv-bump { 40% { transform: scale(1.25); } }
.g-live { margin: 2px 4px 14px; }
@media (prefers-reduced-motion: reduce) { .live-dot, .lv-bump { animation: none; } }

/* ═══ floating gas assistant ═══ */
.gfc { position: fixed; right: 0; bottom: 0; z-index: 80; font-family: var(--v3-font, system-ui); }
.gfc-fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); height: 58px; padding: 0 20px 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; cursor: pointer;
  color: #1a1405; font: 800 15px var(--v3-font, system-ui); background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300);
  box-shadow: 0 14px 32px rgba(244,195,0,.38), 0 4px 10px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.75); transition: transform .45s var(--v3-spring), opacity .25s; }
.gfc-fab:active { transform: scale(.94); }
.gfc-fab-ic { font-size: 22px; line-height: 1; }
.gfc-open .gfc-fab { transform: scale(.0); opacity: 0; pointer-events: none; }
.gfc-panel { position: fixed; right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: min(600px, 74dvh); display: flex; flex-direction: column; overflow: hidden; color: #fff;
  border-radius: 34px; background: var(--v3-fill), rgba(6,34,30,.94); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--v3-rim), 0 30px 70px rgba(0,0,0,.5); transform: translateY(calc(100% + 60px)) scale(.96); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s, visibility 0s linear .5s; }
.gfc-open .gfc-panel { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.gfc-panel.gfc-typing { border-radius: 28px; transition: none; }
@media (min-width: 700px) { .gfc-panel { left: auto; width: 400px; right: 20px; bottom: 20px; } .gfc-fab { right: 20px; bottom: 20px; } }
.gfc-hd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 18px; }
.gfc-ttl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gfc-ttl b { display: block; font-size: 16px; } .gfc-ttl small { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
.gfc-orb { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 3px; background: radial-gradient(circle at 35% 30%, #3a8f78, #0e3f37); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 0 0 2px rgba(255,212,92,.5); }
.gfc-orb i { width: 3.5px; height: 16px; border-radius: 3px; background: #ffe9a8; transform: scaleY(.45); animation: v3-eq 1.7s ease-in-out infinite; }
.gfc-orb i:nth-child(2) { animation-delay: -.5s; } .gfc-orb i:nth-child(3) { animation-delay: -1s; }
.gfc:not(.gfc-open) .gfc-orb i { animation-play-state: paused; }
.gfc-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #fff; font-size: 15px; cursor: pointer; background: rgba(255,255,255,.12); }
.gfc-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.gfc-msg { display: flex; flex-direction: column; max-width: 88%; animation: g-in .3s ease both; }
.gfc-me { align-self: flex-end; align-items: flex-end; } .gfc-ai { align-self: flex-start; align-items: flex-start; }
.gfc-b { padding: 11px 15px; border-radius: 22px; font-size: 15px; line-height: 1.45; word-break: break-word; }
.gfc-ai .gfc-b { background: rgba(255,255,255,.12); border-bottom-left-radius: 8px; box-shadow: inset 0 1px 1px rgba(255,255,255,.18); }
.gfc-me .gfc-b { color: #1a1405; font-weight: 600; background: linear-gradient(145deg, #fff0b8, #ffd45c 60%, #f4c300); border-bottom-right-radius: 8px; }
.gfc-cta { margin-top: 6px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 14px; color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); }
.gfc-dots { display: inline-flex; gap: 4px; padding: 4px 0; } .gfc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .5; animation: gfc-dot 1s ease-in-out infinite; }
.gfc-dots i:nth-child(2) { animation-delay: .15s; } .gfc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gfc-dot { 40% { transform: translateY(-4px); opacity: 1; } }
.gfc-chips { flex: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 14px 8px; }
.gfc-chips::-webkit-scrollbar { display: none; }
.gfc-chip { flex: none; white-space: nowrap; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; color: #fff; font: 700 13.5px var(--v3-font, system-ui); cursor: pointer; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 1px rgba(255,255,255,.22); }
.gfc-chip:active { transform: scale(.95); }
.gfc-form { flex: none; display: flex; gap: 8px; padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px) * 0); }
.gfc-in { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 0; border-radius: 999px; outline: 0; color: #fff; font: 500 16px var(--v3-font, system-ui); background: rgba(0,0,0,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.gfc-in::placeholder { color: rgba(255,255,255,.5); }
.gfc-in:focus { box-shadow: inset 0 1px 3px rgba(0,0,0,.35), 0 0 0 3px rgba(255,210,122,.45); }
.gfc-send { flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%; font-size: 22px; font-weight: 800; color: #1a1405; cursor: pointer; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); transition: opacity .2s, transform .3s var(--v3-spring); }
.gfc-send:disabled { opacity: .4; } .gfc-send:not(:disabled):active { transform: scale(.92); }
body:has(.g-sheet.open) .gfc { display: none; }
@media (prefers-reduced-motion: reduce) { .gfc-panel, .gfc-fab { transition: none; } .gfc-orb i, .gfc-dots i { animation: none; } }

/* ═══ station card — "Get there" tiles + share ═══ */
.g-nav { margin-top: 14px; padding: 12px; border-radius: 26px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 1px rgba(255,255,255,.2); }
.g-nav-h { margin: 2px 4px 10px; font: 800 12px var(--v3-font, system-ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.g-nav-row { display: flex; gap: 8px; }
.g-navt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 11px; border-radius: 22px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.1); box-shadow: inset 0 1px 1px rgba(255,255,255,.28); transition: transform .4s var(--v3-spring), background .2s; }
.g-navt:active { transform: scale(.94); background: rgba(255,255,255,.18); }
.g-navt b { font: 700 12.5px var(--v3-font, system-ui); white-space: nowrap; }
.g-navt-ic { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); }
.g-navt.google .g-navt-ic { background: linear-gradient(145deg, #5b9bff, #2f6fe4); }
.g-navt.apple .g-navt-ic { background: linear-gradient(145deg, #5fd48a, #1f9d57); }
.g-navt.waze .g-navt-ic { background: linear-gradient(145deg, #5fdcff, #1db4e8); }
.g-act-wa, .g-stcard-acts .g-act-wa { color: #fff; background: linear-gradient(145deg, #3fe27c, #17b457); box-shadow: 0 10px 24px rgba(23,180,87,.35), inset 0 1px 1px rgba(255,255,255,.5); }
.g-act-wa svg { flex: none; }

/* share sheet */
.g-share-ov { display: flex; align-items: flex-end; justify-content: center; z-index: 95; }
.g-share-sheet { width: 100%; max-width: 560px; padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 32px 32px 0 0; color: #fff; transform: translateY(105%); transition: transform .45s cubic-bezier(.22,1,.36,1);
  background: linear-gradient(180deg, #14506a, #0a4a48 60%, #053a2a); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 -18px 50px rgba(2,20,18,.5); }
.g-share-ov.open .g-share-sheet { transform: none; }
.g-grab { width: 38px; height: 4px; margin: 6px auto 10px; border-radius: 4px; background: rgba(255,255,255,.4); }
.g-share-sheet h3 { margin: 0 0 10px; font: 700 20px var(--v3-font, system-ui); }
.g-share-pre { margin: 0 0 12px; padding: 14px 16px; max-height: 32dvh; overflow: auto; white-space: pre-wrap; word-break: break-word; border-radius: 22px; font: 500 14px/1.5 var(--v3-font, system-ui); color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.26); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.g-share-wa { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 999px; text-decoration: none; font: 800 16px var(--v3-font, system-ui); color: #fff;
  background: linear-gradient(145deg, #3fe27c, #17b457); box-shadow: 0 12px 28px rgba(23,180,87,.38), inset 0 1px 1px rgba(255,255,255,.55); transition: transform .4s var(--v3-spring); }
.g-share-wa:active { transform: scale(.96); }
.g-share-row { display: flex; gap: 8px; margin-top: 10px; }
.g-share-row button { flex: 1; height: 48px; border: 0; border-radius: 999px; color: #fff; font: 700 14px var(--v3-font, system-ui); cursor: pointer; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.25); }
.g-share-row button[hidden] { display: none; }
@media (min-width: 700px) { .g-share-ov { align-items: center; } .g-share-sheet { border-radius: 32px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .4s var(--v3-spring), opacity .25s; } .g-share-ov.open .g-share-sheet { opacity: 1; } }
body:has(.g-share-ov.open) .gfc { display: none; }
.gfc-fab.gfc-away { transform: translateY(90px) scale(.9); opacity: 0; }
.g-wrap { padding-bottom: 96px; }

/* "Get there" bar — sits directly under the map */
.g-mapbar { margin: 10px 0 0; padding: 12px; border-radius: 28px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 1px rgba(255,255,255,.22); animation: g-in .3s ease both; }
.g-mapbar[hidden] { display: none; }
.g-mapbar-h { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0 4px 10px; }
.g-mapbar-h span { flex: none; font: 800 11.5px var(--v3-font, system-ui); letter-spacing: .12em; text-transform: uppercase; color: #ffd45c; }
.g-mapbar-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px var(--v3-font, system-ui); color: #fff; }
.g-mapbar .g-navt { padding: 10px 4px 9px; gap: 6px; border: 0; font: inherit; cursor: pointer; }
.g-mapbar .g-navt b { font-size: 12px; }
.g-mapbar .g-navt-ic { width: 42px; height: 42px; border-radius: 15px; }
.g-navt.wa .g-navt-ic { background: linear-gradient(145deg, #3fe27c, #17b457); }
.g-nav-row { display: flex; gap: 8px; }