:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #132033;
  --muted: #6d7a8c;
  --line: #e3e8ed;
  --surface: #ffffff;
  --soft: #f4f7f5;
  --green: #12b76a;
  --green-dark: #078348;
  --red: #f04452;
  --amber: #e8a522;
  --navy: #081a2f;
  --blue: #1777ff;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--soft); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#app { width: 100%; height: 100%; }

.sidebar {
  position: fixed;
  z-index: 1000;
  inset: 16px auto 16px 16px;
  width: 400px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(19, 32, 51, .09);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(9, 28, 48, .18);
  backdrop-filter: blur(22px);
  overflow: hidden;
}

.brandbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.brandmark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), transparent 40%),
    var(--navy);
  box-shadow: inset 0 0 0 2px rgba(18,183,106,.5), 0 8px 24px rgba(8,26,47,.2);
}
.brandmark span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--green);
  color: var(--navy);
  font-weight: 950;
  font-size: 16px;
}
.brandcopy { min-width: 0; }
.brandcopy strong { display: block; font-size: 22px; letter-spacing: -.04em; }
.brandcopy strong span { color: var(--green-dark); }
.brandcopy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.iconbutton {
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 0;
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  font-size: 22px;
}

.view { display: none; min-height: 0; flex: 1; }
.view.active { display: flex; flex-direction: column; }
.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 16px 8px;
  padding: 5px 5px 5px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7f9fa;
  transition: border .18s, box-shadow .18s;
}
.searchbox:focus-within {
  border-color: rgba(18,183,106,.55);
  box-shadow: 0 0 0 4px rgba(18,183,106,.1);
}
.searchicon { color: var(--muted); font-size: 21px; }
.searchbox input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}
.nearby, .ghostbutton {
  border: 0;
  border-radius: 12px;
  font-weight: 800;
}
.nearby {
  padding: 9px 12px;
  color: #fff;
  background: var(--navy);
}
.nearby.active { background: var(--green); }
.fuelchips {
  display: flex;
  gap: 7px;
  padding: 0 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fuelchips::-webkit-scrollbar { display: none; }
.fuelchips button {
  flex: none;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: #526074;
  font-size: 12px;
  font-weight: 800;
}
.fuelchips button.active {
  border-color: var(--navy);
  color: #fff;
  background: var(--navy);
}
.listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-top: 1px solid var(--line);
}
.listhead small, .eyebrow {
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}
.listhead h1 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.03em; }
.ghostbutton { padding: 9px 11px; color: var(--green-dark); background: #e8f8f0; font-size: 11px; }
.stationlist, .feedlist {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 82px;
  overscroll-behavior: contain;
}

.stationcard {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin: 8px 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(19,32,51,.04);
  transition: transform .16s, border .16s, box-shadow .16s;
}
.stationcard:hover, .stationcard.selected {
  border-color: rgba(18,183,106,.5);
  box-shadow: 0 10px 28px rgba(19,32,51,.09);
  transform: translateY(-1px);
}
.brandicon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--brand-fg, #fff);
  background: var(--brand-bg, #e9edf2);
  font-size: 12px;
  font-weight: 950;
}
.stationinfo { min-width: 0; }
.stationtop { display: flex; align-items: center; gap: 7px; }
.stationtop h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
.statebadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}
.statebadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.statebadge.available { color: #087648; background: #dff7ea; }
.statebadge.available::before { background: var(--green); }
.statebadge.unavailable { color: #b42331; background: #ffe5e8; }
.statebadge.unavailable::before { background: var(--red); }
.statebadge.stale { color: #8a5c00; background: #fff1cf; }
.statebadge.stale::before { background: var(--amber); }
.statebadge.unknown { color: #647184; background: #edf1f4; }
.statebadge.unknown::before { background: #8c99a8; }
.stationinfo p {
  margin: 4px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 12px;
}
.stationmeta { display: flex; gap: 8px; align-items: center; margin-top: 7px; color: #556277; font-size: 11px; }
.stationmeta strong { color: var(--ink); }
.cardaside { text-align: right; }
.cardaside strong { display: block; white-space: nowrap; font-size: 14px; }
.cardaside small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }

.skeleton {
  height: 92px;
  margin: 8px 0;
  border-radius: 19px;
  background: linear-gradient(100deg, #edf1f2 20%, #f8fafa 40%, #edf1f2 60%);
  background-size: 220% 100%;
  animation: shine 1.4s linear infinite;
}
@keyframes shine { to { background-position-x: -220%; } }
.empty {
  padding: 36px 20px;
  color: var(--muted);
  text-align: center;
}

.tabbar {
  position: fixed;
  z-index: 1150;
  left: 16px;
  bottom: 16px;
  width: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 68px;
  padding: 6px 8px calc(6px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  border-radius: 0 0 28px 28px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
}
.tabbar button {
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: #7a8798;
  font-size: 10px;
  font-weight: 800;
}
.tabbar button span { font-size: 22px; font-weight: 500; }
.tabbar button.active { color: var(--green-dark); }

.mapstage { position: fixed; inset: 0; }
#map { width: 100%; height: 100%; background: #eaf1ec; }
.leaflet-control-attribution { font-size: 9px; }
.leaflet-control-zoom {
  overflow: hidden;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(8,26,47,.18) !important;
}
.leaflet-control-zoom a { border: 0 !important; }
.maptop { position: absolute; z-index: 700; top: 18px; right: 18px; display: flex; gap: 10px; }
.mapactions { position: absolute; z-index: 700; right: 18px; bottom: 32px; }
.floating {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(19,32,51,.1);
  border-radius: 15px;
  color: var(--ink);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(8,26,47,.18);
  backdrop-filter: blur(18px);
  font-size: 21px;
}
.statuslegend {
  display: flex;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid rgba(19,32,51,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(8,26,47,.12);
  backdrop-filter: blur(18px);
  font-size: 10px;
  font-weight: 800;
}
.statuslegend span { display: flex; align-items: center; gap: 5px; }
.statuslegend i { width: 8px; height: 8px; border-radius: 50%; }
.statuslegend i.available { background: var(--green); }
.statuslegend i.unavailable { background: var(--red); }
.statuslegend i.stale { background: var(--amber); }
.statuslegend i.unknown { background: #8996a6; }
.mapstatus {
  position: absolute;
  z-index: 690;
  left: 432px;
  bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(8,26,47,.12);
  backdrop-filter: blur(14px);
  font-size: 11px;
}
.mapstatus strong { color: var(--green-dark); }
.mapstatus span { color: var(--muted); }

.fuelpin {
  width: 32px !important;
  height: 40px !important;
  border: 0 !important;
  background: transparent !important;
}
.fuelpin-body {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 10%;
  transform: rotate(-45deg);
  background: var(--pin);
  box-shadow: 0 5px 14px rgba(8,26,47,.38), 0 0 0 5px var(--glow);
  transition: transform .18s, box-shadow .18s;
}
.fuelpin-body svg { width: 14px; height: 14px; transform: rotate(45deg); fill: #fff; }
.fuelpin.selected .fuelpin-body {
  transform: rotate(-45deg) scale(1.16);
  box-shadow: 0 7px 20px rgba(8,26,47,.44), 0 0 0 10px var(--glow);
}
.clustericon {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  background: transparent !important;
}
.clusterbubble {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 4px solid var(--cluster);
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 6px 16px rgba(8,26,47,.38);
  font-size: 12px;
  font-weight: 950;
}

.stationsheet {
  position: fixed;
  z-index: 1200;
  top: 16px;
  bottom: 16px;
  left: 432px;
  width: 410px;
  padding: 28px 18px 18px;
  overflow-y: auto;
  transform: translateX(-30px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(19,32,51,.09);
  border-radius: 28px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 80px rgba(8,26,47,.22);
  backdrop-filter: blur(24px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.stationsheet.open { transform: none; opacity: 1; pointer-events: auto; }
.sheetgrab {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 46px;
  height: 5px;
  border-radius: 4px;
  background: #d3dbe2;
  transform: translateX(-50%);
}
.sheetclose {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 13px;
  background: var(--soft);
  color: #6a7789;
  font-size: 22px;
}
.detailhead { display: grid; grid-template-columns: 58px 1fr; gap: 13px; align-items: center; padding-right: 40px; }
.detailbrand { width: 58px; height: 58px; border-radius: 18px; font-size: 15px; }
.detailhead h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.detailhead p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.detailstatus { display: flex; align-items: center; gap: 8px; margin: 17px 0 12px; }
.distancepill { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 750; }
.fuelgrid {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
}
.fuelline {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px 13px;
  background: #fff;
}
.fuelline + .fuelline { margin-top: 1px; }
.fueldot { width: 8px; height: 8px; border-radius: 50%; background: #8996a6; }
.fuelline.available .fueldot { background: var(--green); }
.fuelline.unavailable .fueldot { background: var(--red); }
.fuelline.stale .fueldot { background: var(--amber); }
.fuelline b { font-size: 14px; }
.fuelline strong { font-size: 13px; }
.fuelline small { grid-column: 2/-1; margin-top: -4px; color: var(--muted); font-size: 10px; }
.queuestatus {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 13px 0;
  padding: 13px;
  border-radius: 17px;
  background: #fff0e8;
  color: #9a3e18;
}
.queuestatus span { font-size: 23px; }
.queuestatus strong, .queuestatus small { display: block; }
.queuestatus small { margin-top: 2px; color: #a65b3d; }
.sourcenote {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 13px;
  color: #1c67bb;
  background: #eaf4ff;
  font-size: 11px;
  font-weight: 750;
}
.detailactions { display: grid; grid-template-columns: 1.35fr .8fr; gap: 8px; margin-top: 13px; }
.detailactions button {
  border: 0;
  border-radius: 14px;
  padding: 13px 10px;
  font-weight: 900;
}
.reportbutton { color: #fff; background: var(--blue); }
.routebutton { color: #205da2; background: #eaf3ff; }
.favoritebutton { grid-column: 1/-1; color: #5a687a; background: #f1f4f6; }
.favoritebutton.on { color: #bd2c48; background: #ffe9ee; }
.reporthistory { margin-top: 18px; }
.reporthistory h3 { margin: 0 0 9px; font-size: 16px; }
.historyitem { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; padding: 12px 2px; border-top: 1px solid var(--line); }
.historyitem i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
.historyitem p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.historyitem time { color: var(--muted); font-size: 10px; }

.sectionhead { padding: 22px 20px 14px; }
.sectionhead h1 { margin: 5px 0; font-size: 25px; }
.sectionhead p { margin: 0; color: var(--muted); font-size: 13px; }
.feeditem {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  margin: 8px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.feeditem > i { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; }
.feeditem strong { font-size: 14px; }
.feeditem p { margin: 4px 0; color: #4d5b6e; font-size: 12px; }
.feeditem small, .feeditem time { color: var(--muted); font-size: 10px; }
.feeditem time { white-space: nowrap; }

#profileView { overflow-y: auto; padding: 18px 16px 92px; }
.profilehero { display: grid; grid-template-columns: 58px 1fr; gap: 13px; align-items: center; padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #081a2f, #173653); }
.profilehero h1 { margin: 4px 0 1px; font-size: 21px; }
.profilehero p { margin: 0; color: #bac8d6; font-size: 12px; }
.avatar { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: var(--green); color: var(--navy); font-size: 23px; font-weight: 950; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.metrics div { padding: 13px 6px; border: 1px solid var(--line); border-radius: 17px; background: #fff; text-align: center; }
.metrics strong, .metrics span { display: block; }
.metrics strong { font-size: 14px; }
.metrics span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.profilecard { margin-top: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.channelcard { display: grid; grid-template-columns: 46px 1fr; gap: 11px; background: linear-gradient(145deg, #ecf8f2, #edf4ff); }
.channelicon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#45c7ec,#842df0); font-size: 11px; font-weight: 950; }
.channelcard p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.channelbuttons { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.channelbuttons button { border: 0; border-radius: 13px; padding: 11px 7px; color: #fff; background: var(--green); font-size: 11px; font-weight: 850; }
.channelbuttons button:last-child { background: var(--navy); }
.cardheading { display: flex; align-items: center; justify-content: space-between; }
.cardheading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.cardheading > span { color: var(--green); font-size: 25px; }
.favoriteitem { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.favoriteitem small { color: var(--muted); }
.settingrow { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; }
.settingrow + .settingrow { border-top: 1px solid var(--line); }
.settingicon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--green); font-size: 18px; }
.settingrow strong, .settingrow small { display: block; }
.settingrow small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.settingrow button { border: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 800; }
.disclaimer { margin: 12px 2px; padding: 13px; border-radius: 16px; color: #77601f; background: #fff5cf; font-size: 11px; }
.disclaimer p { margin: 3px 0 0; }

dialog {
  width: min(480px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 30px 100px rgba(8,26,47,.32);
}
dialog::backdrop { background: rgba(8,26,47,.55); backdrop-filter: blur(5px); }
dialog form { position: relative; padding: 27px 22px 20px; }
.dialoghandle { position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; border-radius: 4px; background: #d6dde3; transform: translateX(-50%); }
.dialogclose { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 12px; background: var(--soft); font-size: 20px; }
dialog h2 { margin: 6px 42px 4px 0; font-size: 24px; letter-spacing: -.04em; }
.dialoghint { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
fieldset { margin: 0 0 15px; padding: 0; border: 0; }
legend, .fieldlabel { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 850; }
.fueloptions, .statusoptions { display: flex; flex-wrap: wrap; gap: 7px; }
.fueloptions input, .statusoptions input { position: absolute; opacity: 0; pointer-events: none; }
.fueloptions span, .statusoptions span { display: block; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; color: #536175; background: #fff; font-size: 12px; font-weight: 800; }
.fueloptions input:checked + span { border-color: var(--green); color: var(--green-dark); background: #e7f8ef; }
.statusoptions input[value="available"]:checked + span { border-color: var(--green); color: var(--green-dark); background: #e7f8ef; }
.statusoptions input[value="unavailable"]:checked + span { border-color: var(--red); color: #b42331; background: #ffe8eb; }
select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
  color: var(--ink);
  background: #f8faf9;
}
select { height: 46px; margin-bottom: 15px; padding: 0 12px; }
textarea { min-height: 92px; resize: vertical; padding: 12px; }
.primarybutton { width: 100%; margin-top: 14px; padding: 14px; border: 0; border-radius: 14px; color: #fff; background: var(--green); font-weight: 900; }
.primarybutton:disabled { opacity: .55; }
.privacy { margin: 9px 0 0; color: var(--muted); text-align: center; font-size: 10px; }
.toast {
  position: fixed;
  z-index: 2000;
  left: 50%;
  bottom: 24px;
  max-width: min(440px, calc(100% - 28px));
  padding: 12px 16px;
  border-radius: 13px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 10px 36px rgba(8,26,47,.25);
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  font-size: 12px;
  font-weight: 750;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.mobile-only { display: none; }

@media (max-width: 760px) {
  .mobile-only { display: grid; }
  .sidebar {
    inset: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    transform: translateX(-105%);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .tabbar {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-height: 68px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(8,26,47,.1);
  }
  .sidebar.open, .sidebar:has(.view:not(#mapView).active) { transform: none; }
  .brandbar { min-height: 68px; padding: 10px 14px; }
  .brandmark { width: 44px; height: 44px; border-radius: 14px; }
  .brandmark span { width: 29px; height: 29px; font-size: 14px; }
  .brandcopy strong { font-size: 19px; }
  .mapstage { inset: 0; }
  .maptop { top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; justify-content: space-between; }
  .statuslegend { margin-left: auto; gap: 7px; padding: 9px 10px; font-size: 9px; }
  .statuslegend span:nth-child(3) { display: none; }
  .mapactions { right: 12px; bottom: calc(82px + var(--safe-bottom)); }
  .mapstatus { left: 12px; right: 12px; bottom: calc(16px + var(--safe-bottom)); justify-content: space-between; }
  .stationsheet {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: calc(82dvh - var(--safe-bottom));
    padding: 28px 17px calc(18px + var(--safe-bottom));
    border-radius: 26px;
    transform: translateY(105%);
  }
  .stationsheet.open { transform: none; }
  .detailhead h2 { font-size: 21px; }
  .detailactions button { min-height: 50px; }
  .leaflet-control-zoom { margin-right: 12px !important; margin-bottom: calc(136px + var(--safe-bottom)) !important; }
  dialog {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: 26px 26px 0 0;
  }
  dialog[open] { animation: dialogin .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes dialogin { from { transform: translateY(35%); opacity: 0; } }
  .toast { bottom: calc(18px + var(--safe-bottom)); }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .sidebar { width: 360px; }
  .tabbar { width: 360px; }
  .stationsheet { left: 376px; width: 370px; }
  .mapstatus { left: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* v16: mobile performance */
@media (max-width: 760px) {
  .sidebar,
  .stationsheet,
  .mapstatus,
  .statuslegend,
  .tabbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .sidebar {
    background: #ffffff;
    box-shadow: none;
  }

  .stationsheet {
    background: #ffffff;
    box-shadow: 0 -8px 28px rgba(8, 26, 47, .12);
  }

  .fuelpin-body {
    box-shadow: 0 4px 10px rgba(8, 26, 47, .30), 0 0 0 3px var(--glow);
  }

  .clusterbubble {
    box-shadow: 0 4px 10px rgba(8, 26, 47, .28);
  }
}