:root {
  color: #fff;
  font-synthesis: none;
  --brand-red: #ff3b30;
  --control-glass: linear-gradient(145deg, #202023e0, #0a0a0ce6);
  --control-border: #45454b;
  --control-text: #f6eff0;
  --control-active: var(--brand-red);
  --control-active-border: var(--brand-red);
  background: #050505;
  font-family:
    SF Pro Display,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    system-ui,
    sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  background-color: #0b0709;
  background-image:
    linear-gradient(135deg, #16090b 0%, #250d11 34%, #09090c 72%, #17070a 100%),
    radial-gradient(at 14% 10%, rgba(116, 31, 26, 0.42) 0, transparent 29%),
    radial-gradient(at 88% 31%, rgba(88, 24, 25, 0.35) 0, transparent 31%),
    radial-gradient(at 31% 74%, rgba(63, 20, 22, 0.32) 0, transparent 28%),
    radial-gradient(at 76% 91%, rgba(93, 24, 27, 0.32) 0, transparent 30%);
  background-position:
    0 0,
    0 0,
    0 0,
    0 0;
  background-repeat: repeat, repeat, repeat, repeat;
  background-size:
    100% 100%,
    auto,
    auto,
    auto,
    auto;
  background-attachment: fixed;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box;
  min-height: 100%;
}
body {
  background: transparent;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
.app-shell {
  background: 0 0;
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.app-content {
  z-index: 1;
  padding: calc(10px + env(safe-area-inset-top)) 20px
    calc(105px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  position: relative;
}
.brand-header {
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  margin: 2px 0 18px;
  display: flex;
}
.brand-wordmark {
  letter-spacing: -1.45px;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  height: 46px;
  margin: 0;
  font-size: 29px;
  font-weight: 760;
  line-height: 1;
  display: flex;
}
.brand-wordmark img {
  object-fit: contain;
  filter: drop-shadow(0 5px 9px #0009);
  width: 42px;
  height: 42px;
  margin-right: 0;
}
.brand-wordmark span {
  color: #fff;
}
.brand-wordmark strong {
  color: #ff3b30;
}
.round-button {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  background: #14141661;
  border: 1px solid #343438;
  border-radius: 50%;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 10px;
  display: grid;
  box-shadow: inset 0 1px #ffffff14;
}
.round-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 100%;
  height: 100%;
}
.detail-close {
  font-size: 29px;
  line-height: 20px;
}
.location {
  align-items: center;
  gap: 10px;
  margin: 0 4px 17px;
  display: flex;
}
.location > span {
  font-size: 22px;
}
.location small,
.location strong {
  display: block;
}
.location small {
  color: #aaa;
  margin-bottom: 1px;
  font-size: 10px;
}
.location strong {
  font-size: 12px;
}
.price-hero {
  -webkit-backdrop-filter: blur(42px) saturate(150%);
  backdrop-filter: blur(42px) saturate(150%);
  color: #fff;
  background: linear-gradient(135deg, #30303470, #0a0a0c8c);
  border: 1px solid #45454a;
  border-radius: 27px;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px 18px 17px;
  display: flex;
  box-shadow:
    inset 0 1px #ffffff26,
    0 18px 43px #0008;
}
.price-hero > span {
  font-size: 14px;
  font-weight: 550;
}
.price-hero > strong {
  color: #ff3b30;
  letter-spacing: -2.8px;
  margin: 4px 0;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.13;
}
.price-hero small {
  color: #bdbdc1;
  justify-content: space-between;
  align-self: stretch;
  font-size: 11px;
  display: flex;
}
.price-hero i {
  flex: 1;
}
.dashboard-section {
  margin-top: 19px;
}
.dashboard-section h2,
.detail-chart h2,
.detail-prices h2 {
  letter-spacing: -0.48px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.glass-card {
  -webkit-backdrop-filter: blur(30px) saturate(135%);
  backdrop-filter: blur(30px) saturate(135%);
  background: linear-gradient(135deg, #1e1e2080, #0a0a0bb3);
  border: 1px solid #323236;
  border-radius: 27px;
  box-shadow:
    inset 0 1px #ffffff18,
    0 16px 36px #0007;
}
.chart-block {
  padding: 18px 17px 15px;
}
.chart-range {
  background: #08080a7a;
  border: 1px solid #343438;
  border-radius: 12px;
  gap: 2px;
  margin-top: 12px;
  padding: 3px;
  display: inline-flex;
}
.chart-range button {
  color: #aaa;
  background: 0 0;
  border: 0;
  border-radius: 8px;
  min-width: 48px;
  padding: 5px 7px;
  font-size: 10px;
  font-weight: 630;
}
.fuel-chart {
  margin-top: 10px;
}
.chart-legend {
  color: #a9a9ad;
  gap: 13px;
  margin: 0 0 4px;
  font-size: 10px;
  display: flex;
}
.chart-legend span {
  align-items: center;
  gap: 5px;
  display: flex;
}
.chart-legend i {
  border-radius: 99px;
  width: 14px;
  height: 2px;
  display: block;
}
.fuel-chart svg {
  width: 100%;
  height: 112px;
  overflow: visible;
}
.chart-grid {
  fill: none;
  stroke: #29292c;
  stroke-width: 0.7px;
}
.chart-column {
  fill: #ff3b30;
  opacity: 0.13;
}
.chart-average {
  fill: none;
  stroke: #d4d4d8;
  opacity: 0.68;
  stroke-width: 1.35px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 3;
}
.chart-line {
  fill: none;
  stroke: #ff3b30;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-days {
  color: #b1b1b5;
  justify-content: space-between;
  margin-top: -2px;
  font-size: 10px;
  display: flex;
}
.comparison-card {
  padding: 18px 17px 15px;
}
.comparison-row {
  grid-template-columns: 85px 1fr 66px;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  font-size: 12px;
  display: grid;
}
.comparison-row span {
  color: #f0f0f2;
  font-weight: 520;
}
.comparison-row i {
  background: #252527;
  border-radius: 999px;
  height: 9px;
  display: block;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #0008;
}
.comparison-row i b {
  background: linear-gradient(90deg, #ff3b30, #ff5148);
  border-radius: 999px;
  height: 100%;
  display: block;
  box-shadow: 0 0 12px #ff3b3055;
}
.comparison-row:last-child i b {
  box-shadow: none;
  background: #9a9a9e;
}
.comparison-row strong {
  color: #f0f0f2;
  text-align: right;
  font-size: 14px;
  font-weight: 690;
}
.comparison-row:first-of-type strong {
  color: #ff3b30;
}
.fuel-advice-card {
  padding: 18px 17px 16px;
  position: relative;
  overflow: hidden;
}
.fuel-advice-card:before {
  content: "";
  filter: blur(8px);
  pointer-events: none;
  background: radial-gradient(circle, #ff3b303b, #0000 68%);
  border-radius: 999px;
  width: 150px;
  height: 150px;
  position: absolute;
  inset: -40% -20% auto auto;
}
.fuel-advice-card small {
  color: #a8a8ad;
  margin-bottom: 7px;
  font-size: 10px;
  display: block;
  position: relative;
}
.fuel-advice-card h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
}
.fuel-advice-card strong {
  color: var(--brand-red);
  text-shadow: 0 0 18px #ff3b3047;
  margin-bottom: 9px;
  font-size: 28px;
  font-weight: 760;
  line-height: 1.02;
  display: block;
  position: relative;
}
.fuel-advice-card p {
  color: #f1eeee;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  position: relative;
}
.fuel-advice-card span {
  color: #aaaab0;
  margin-top: 9px;
  font-size: 10px;
  line-height: 1.35;
  display: block;
  position: relative;
}
.fuel-advice-card.is-good {
  border-color: #ff3b3075;
}
.fuel-advice-card.is-wait strong {
  color: #ff7a72;
}
.fuel-advice-card.is-neutral strong {
  color: #f0f0f2;
  text-shadow: none;
}
.favorites-block {
  padding: 0 17px 12px;
  overflow: hidden;
}
.favorites-block > header,
.detail-prices > header {
  justify-content: space-between;
  align-items: center;
  height: 53px;
  display: flex;
}
.favorites-block > header button {
  color: #ff3b30;
  background: 0 0;
  border: 0;
  padding: 0;
  font-size: 11px;
}
.favorites-block .station-card {
  background: #0808098a;
  border: 1px solid #313135;
  border-radius: 18px;
  margin: 5px 0 0;
  padding: 10px;
  box-shadow: inset 0 1px #ffffff0a;
}
.station-card {
  color: #fff;
  text-align: left;
  background: 0 0;
  border: 1px solid #0000;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  display: grid;
}
.result-list .station-card {
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: linear-gradient(135deg, #1e1e2085, #0a0a0bad);
  border-color: #313135;
  border-radius: 18px;
  margin: 7px 0;
  padding: 12px;
  box-shadow:
    inset 0 1px #ffffff14,
    0 10px 24px #0005;
}
.station-logo {
  border-radius: 9px;
  place-items: center;
  width: 27px;
  height: 27px;
  font-size: 13px;
  font-weight: 800;
  display: grid;
}
.station-copy strong,
.station-copy small,
.station-value strong,
.station-value small {
  display: block;
}
.station-copy strong {
  font-size: 13px;
  font-weight: 670;
}
.station-copy small,
.station-value small {
  color: #aaa;
  margin-top: 2px;
  font-size: 10px;
}
.station-value {
  text-align: right;
}
.station-value strong {
  color: #ff3b30;
  font-size: 16px;
  font-weight: 760;
}
.station-value small {
  color: #bbb;
}
.fuel-tab-bar {
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  z-index: 5;
  background: #1212149c;
  border: 1px solid #38383c;
  border-radius: 29px;
  justify-content: space-between;
  gap: 7px;
  width: min(100% - 32px, 448px);
  height: 72px;
  padding: 8px 14px;
  display: flex;
  position: fixed;
  transform: translate(-50%);
  box-shadow:
    inset 0 1px #ffffff1c,
    0 18px 40px #0009;
}
.fuel-tab-bar button {
  color: #b5b5ba;
  background: 0 0;
  border: 0;
  border-radius: 19px;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 6px;
  display: flex;
}
.fuel-tab-bar svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 21px;
  height: 21px;
}
.fuel-tab-bar small {
  font-size: 10px;
}
.fuel-tab-bar button.is-active {
  color: #ff3b30;
  background: linear-gradient(135deg, #43171477, #1e111233);
  box-shadow: inset 0 1px #ff8f891f;
}
.fuel-filter {
  z-index: 2;
  gap: 5px;
  display: flex;
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
}
.fuel-filter button {
  color: #e7e7e9;
  background: #1d1d1f;
  border: 0;
  border-radius: 13px;
  padding: 7px 11px;
  font-size: 11px;
}
.fuel-filter .is-active {
  color: #fff;
  background: #ff3b30;
}
.fuel-map {
  background: #0d0e10;
  border: 1px solid #343438;
  border-radius: 24px;
  height: 270px;
  margin-top: 14px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px #ffffff12,
    0 14px 31px #0007;
}
.fuel-map-canvas {
  position: absolute;
  inset: 0;
}
.map-price-marker {
  color: #fff;
  background: #2d0a0be0;
  border: 1px solid #ff746d;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 750;
  box-shadow:
    0 6px 18px #000a,
    0 0 16px #ff3b304d;
}
.map-price-marker.is-selected {
  background: #ff3b30;
  transform: scale(1.08);
}
.fuel-map [data-map-fallback] {
  color: #b9b9be;
  margin: 0;
  padding: 18px;
  font-size: 12px;
}
.fuel-map .leaflet-container {
  background: #0b0c0e;
  font-family: inherit;
}
.fuel-map .leaflet-tile-pane {
  filter: saturate(0.78) brightness(0.94) contrast(1.03);
}
.fuel-map .leaflet-control-attribution {
  color: #777;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #050506b8;
  border-radius: 8px 0 0;
  font-size: 8px;
}
.fuel-map .leaflet-control-attribution a {
  color: #aaa;
}
.fuel-map-marker {
  background: 0 0;
  border: 0;
}
.fuel-map.is-compact {
  border-radius: 18px;
  height: 148px;
  margin: 0;
}
.fuel-map.is-compact .leaflet-control-attribution {
  display: none;
}
.search-field {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: #aaa;
  background: #19191ba3;
  border: 1px solid #343438;
  border-radius: 18px;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 14px;
  display: flex;
  box-shadow: inset 0 1px #ffffff14;
}
.search-field input {
  color: #fff;
  background: 0 0;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
}
.result-list {
  margin-top: 15px;
}
.empty-state,
.screen-lead {
  color: #aaa;
  margin: 4px 0 16px;
  font-size: 13px;
}
.menu-card {
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: #141416b8;
  border: 1px solid #303034;
  border-radius: 19px;
  margin-bottom: 16px;
  padding: 0 14px;
  box-shadow: inset 0 1px #ffffff0c;
}
.menu-card button {
  color: #fff;
  text-align: left;
  background: 0 0;
  border: 0;
  border-bottom: 1px solid #292929;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-size: 14px;
  display: flex;
}
.menu-card button:last-child {
  border-bottom: 0;
}
.menu-card span {
  color: #999;
  font-size: 18px;
  line-height: 12px;
}
.menu-card em {
  color: #8c8c90;
  font-size: 11px;
  font-style: normal;
}
.menu-card.muted {
  opacity: 0.8;
}
.detail-view {
  background: 0 0;
  min-height: 100%;
}
.detail-fuel {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  background: #18181a9e;
  border: 1px solid #323236;
  border-radius: 17px;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 18px;
  padding: 14px;
  font-size: 13px;
  display: flex;
}
.detail-price {
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  background: linear-gradient(135deg, #1e1e2080, #0a0a0bb3);
  border: 1px solid #323236;
  border-radius: 22px;
  padding: 18px;
  box-shadow:
    inset 0 1px #ffffff16,
    0 14px 30px #0006;
}
.detail-price span,
.detail-price small {
  color: #aaa;
  font-size: 11px;
  display: block;
}
.detail-price strong {
  letter-spacing: -1.4px;
  margin: 5px 0;
  font-size: 31px;
  display: block;
}
.detail-price b {
  float: right;
  color: #ff3b30;
}
.detail-chart {
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  background: linear-gradient(135deg, #1e1e2080, #0a0a0bb3);
  border: 1px solid #323236;
  border-radius: 22px;
  margin: 20px 0;
  padding: 18px;
  box-shadow:
    inset 0 1px #ffffff16,
    0 14px 30px #0006;
}
.detail-prices {
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  background: linear-gradient(135deg, #1e1e2080, #0a0a0bb3);
  border: 1px solid #323236;
  border-radius: 22px;
  padding: 0 16px;
  overflow: hidden;
  box-shadow:
    inset 0 1px #ffffff16,
    0 14px 30px #0006;
}
.detail-prices header span {
  color: #aaa;
  font-size: 10px;
}
.detail-prices p {
  border-top: 1px solid #292929;
  justify-content: space-between;
  margin: 0;
  padding: 13px 0;
  font-size: 13px;
  display: flex;
}
.detail-prices p strong {
  font-size: 13px;
}
@media (width>=720px) {
  body {
    background: #060606;
  }
  .app-shell {
    box-shadow:
      0 0 0 1px #242424,
      0 28px 80px #000;
  }
  .fuel-tab-bar {
    border-radius: 16px 16px 0 0;
  }
}
.station-value .price-change {
  color: #bbb;
  font-size: 9px;
  font-weight: 620;
}
.price-change.is-lower {
  color: #9ee2bc;
}
.detail-chart .chart-range {
  margin-top: 12px;
}
.brand-wordmark {
  color: inherit;
  text-align: left;
  background: 0 0;
  border: 0;
  padding: 0;
}
.header-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}
.detail-close {
  padding: 9px;
  font-size: 0;
  line-height: 1;
}
.round-button:active,
.refresh-pill:active,
.brand-wordmark:active {
  transform: scale(0.96);
}
.location {
  justify-content: flex-start;
}
.location .refresh-pill {
  margin-left: auto;
}
.refresh-pill {
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  color: #c8c8cc;
  background: #0b0b0d8a;
  border: 1px solid #303034;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  font-size: 9px;
  font-weight: 620;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffff0e;
}
.refresh-pill svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 13px;
  height: 13px;
}
.detail-price .refresh-pill {
  margin-top: 14px;
}
.glass-card {
  -webkit-backdrop-filter: blur(34px) saturate(125%);
  backdrop-filter: blur(34px) saturate(125%);
  background: linear-gradient(145deg, #0d0d108f, #040406b8);
  border-color: #2c2c31;
}
.price-hero {
  background: linear-gradient(145deg, #1414187a, #040406ad);
  border-color: #36363b;
}
.result-list .station-card,
.detail-price,
.detail-chart,
.detail-prices {
  background: linear-gradient(145deg, #0c0c0f87, #040406b3);
  border-color: #2c2c31;
}
.chart-layout {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  display: grid;
}
.chart-scale {
  color: #85858b;
  white-space: nowrap;
  text-align: right;
  flex-direction: column;
  justify-content: space-between;
  height: 112px;
  padding: 6px 0 8px;
  font-size: 8px;
  line-height: 1;
  display: flex;
}
.chart-scroll {
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  min-width: 0;
  padding-bottom: 3px;
  overflow-x: auto;
}
.chart-scroll::-webkit-scrollbar {
  display: none;
}
.chart-canvas {
  width: var(--chart-width);
  min-width: 100%;
}
.chart-canvas svg {
  width: 100%;
  height: 112px;
  display: block;
  overflow: visible;
}
.chart-labels {
  color: #96969c;
  align-items: start;
  margin-top: 1px;
  font-size: 8px;
  line-height: 1.15;
  display: grid;
}
.chart-labels span {
  text-align: center;
  white-space: nowrap;
}
.chart-grid {
  stroke: #252529;
}
.detail-chart .fuel-chart {
  margin-top: 12px;
}
.chart-fixed {
  width: 100%;
  min-width: 0;
  padding-bottom: 3px;
  overflow: hidden;
}
.chart-fixed .chart-canvas {
  width: 100%;
  min-width: 0;
}
.fuel-chart.is-detail .chart-grid {
  stroke: #29292d;
  stroke-width: 0.55px;
}
.fuel-chart.is-detail .chart-labels {
  color: #a0a0a5;
  font-size: 8px;
}
.fuel-chart.is-detail .chart-canvas svg {
  touch-action: pan-y;
  cursor: crosshair;
  height: 188px;
}
.fuel-chart.is-detail .chart-labels {
  margin-top: 4px;
  font-size: 8px;
}
.chart-selection-line {
  stroke: #ff8b84;
  stroke-width: 1px;
  stroke-dasharray: 2 3;
}
.chart-selection-point {
  stroke: #08080a;
  stroke-width: 1.6px;
}
.chart-selection-readout {
  color: #c8c8cc;
  background: #ff3b3014;
  border: 1px solid #3a3032;
  border-radius: 12px;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
  margin: 10px 0 5px;
  padding: 8px 10px;
  font-size: 9px;
  display: flex;
}
.chart-selection-readout strong {
  color: #ff6c64;
  font-size: 10px;
}
.chart-selection-readout span + span:before {
  content: "·";
  color: #777;
  margin-right: 9px;
}
.map-location-button {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #ececef;
  text-align: left;
  background: #0d0d1094;
  border: 1px solid #353539;
  border-radius: 15px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 13px;
  font-size: 12px;
}
.map-message {
  color: #a8a8ad;
  margin: 8px 3px 0;
  font-size: 11px;
}
.result-list .station-result {
  background: linear-gradient(145deg, #0c0c0f87, #040406b3);
  border: 1px solid #313135;
  border-radius: 18px;
  margin: 8px 0;
  box-shadow:
    inset 0 1px #ffffff14,
    0 10px 24px #0005;
}
.result-list .station-result .station-card {
  box-shadow: none;
  background: 0 0;
  border: 0;
  margin: 0;
}
.station-card.is-selected {
  background: #ff3b3014;
  outline: 1px solid #ff665f;
}
.route-chooser {
  padding: 0 12px 11px;
}
.route-trigger,
.route-options a {
  color: #fff;
  background: #ffffff0f;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 11px;
  text-decoration: none;
}
.route-trigger {
  text-align: left;
  width: 100%;
}
.route-options {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
  display: grid;
}
.route-options span {
  color: #a7a7ac;
  grid-column: 1/-1;
  font-size: 10px;
}
.route-options a {
  text-align: center;
}
.detail-card {
  -webkit-backdrop-filter: blur(34px) saturate(125%);
  backdrop-filter: blur(34px) saturate(125%);
  background: linear-gradient(145deg, #0d0d1094, #040406bd);
  border: 1px solid #2d2d32;
  border-radius: 23px;
  margin: 0 0 16px;
  box-shadow:
    inset 0 1px #ffffff16,
    0 16px 34px #0007;
}
.station-detail-card {
  padding: 17px;
}
.station-identity {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  display: grid;
}
.station-identity .station-logo {
  border-radius: 13px;
  width: 42px;
  height: 42px;
  font-size: 18px;
}
.station-identity small,
.detail-prices header small {
  color: #8f8f95;
  margin: 1px 0 2px;
  font-size: 9px;
  display: block;
}
.station-identity h2 {
  letter-spacing: -0.35px;
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}
.station-address {
  color: #b1b1b6;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.35;
}
.station-meta {
  color: #a5a5aa;
  align-items: center;
  gap: 8px;
  margin: 13px 0 14px;
  font-size: 10px;
  display: flex;
}
.station-meta span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}
.station-meta span + span:before {
  content: "";
  background: #5d5d62;
  border-radius: 50%;
  width: 3px;
  height: 3px;
}
.station-meta .is-open {
  color: #9ee2bc;
}
.station-meta .is-open:before,
.station-meta .is-closed:before {
  content: "";
  background: #53c98a;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 8px #53c98a66;
}
.station-meta .is-closed {
  color: #ff8b84;
}
.station-meta .is-closed:before {
  background: #ff645c;
  box-shadow: 0 0 8px #ff3b3055;
}
.station-mini-map {
  margin-top: 2px;
}
.station-route {
  margin-top: 10px;
}
.station-route .route-chooser {
  padding: 0;
}
.station-route .route-trigger {
  color: #fff;
  background: linear-gradient(135deg, #ff3b302e, #50141426);
  border-color: #4a2b2c;
  justify-content: center;
  align-items: center;
  font-weight: 680;
  display: flex;
}
.detail-prices {
  padding: 16px;
  overflow: visible;
}
.detail-prices > header {
  height: auto;
  margin-bottom: 13px;
}
.detail-prices > header h2 {
  margin: 0;
  font-size: 16px;
}
.detail-prices > header > span {
  color: #89898f;
  font-size: 9px;
}
.detail-price-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}
.detail-price-card {
  color: #fff;
  text-align: left;
  background: #06060880;
  border: 1px solid #303035;
  border-radius: 15px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 0;
  min-height: 86px;
  padding: 11px 9px;
  display: flex;
  box-shadow: inset 0 1px #ffffff0b;
}
.detail-price-card > span {
  color: #a4a4aa;
  white-space: nowrap;
  font-size: 9px;
}
.detail-price-card > strong {
  letter-spacing: -0.65px;
  white-space: nowrap;
  width: 100%;
  font-size: 17px;
  line-height: 1;
}
.detail-price-card > small {
  color: #a8a8ad;
  font-size: 8px;
}
.detail-price-card.is-selected {
  background: linear-gradient(145deg, #ff3b3024, #2d0a0b40);
  border-color: #75302e;
  box-shadow:
    inset 0 1px #ff9a941c,
    0 0 20px #ff3b3014;
}
.detail-price-card.is-selected > span,
.detail-price-card.is-selected > strong {
  color: #ff5a51;
}
.detail-price-card:active {
  transform: scale(0.97);
}
.detail-freshness {
  border-top: 1px solid #29292d;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding-top: 12px;
  display: flex;
}
.freshness-copy {
  color: #919197;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 9px;
  display: flex;
}
.detail-freshness .refresh-pill {
  flex: none;
  margin: 0 0 0 auto;
}
.detail-chart {
  margin: 0;
  padding: 16px;
}
.detail-chart > header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}
.detail-chart > header h2 {
  margin: 0;
}
.detail-chart > header > span {
  color: #8f8f95;
  font-size: 9px;
}
.detail-chart .chart-layout {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px;
}
.detail-chart .chart-scale {
  font-size: 7px;
}
.detail-chart .chart-legend {
  margin-top: 9px;
}
.fuel-map .leaflet-control-attribution {
  opacity: 0.24;
  background: #03030480;
  padding: 1px 3px;
  font-size: 6px;
  line-height: 1.1;
}
.fuel-map .leaflet-control-attribution:hover {
  opacity: 0.5;
}
.station-logo {
  overflow: hidden;
}
.station-logo .brand-name {
  letter-spacing: -0.35px;
  white-space: nowrap;
  max-width: 100%;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
  display: block;
}
.station-logo.aral {
  color: #0c397b;
  background: linear-gradient(135deg, #f5f7ff, #b6c8ef);
}
.station-logo.aral .brand-name {
  letter-spacing: 0.25px;
}
.station-logo.shell {
  color: #cf1620;
  background: linear-gradient(135deg, #ffd833, #e7a90a);
}
.station-logo.total {
  color: #1b4180;
  background: linear-gradient(135deg, #f8f8f8, #d7e7ff);
}
.station-identity .station-logo .brand-name {
  font-size: 8px;
}
.chart-context {
  color: #949499;
  margin: 4px 0 0;
  font-size: 9px;
}
.chart-line {
  stroke: #ad534d;
}
.fuel-chart circle {
  fill: #ad534d;
}
.chart-selection-today {
  fill: #b95b55;
}
.fuel-preference {
  margin: 0 0 16px;
  padding: 17px;
}
.fuel-preference > small {
  color: #8f8f95;
  font-size: 9px;
}
.fuel-preference h2 {
  letter-spacing: -0.35px;
  margin: 4px 0 13px;
  font-size: 16px;
}
.fuel-preference [data-fuel-preference] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}
.fuel-preference button {
  color: #b9b9be;
  background: #06060880;
  border: 1px solid #303035;
  border-radius: 13px;
  min-height: 42px;
  padding: 7px 5px;
  font-size: 10px;
}
.fuel-preference button.is-active {
  color: #ffaaa4;
  background: linear-gradient(145deg, #ad534d33, #280f1052);
  border-color: #70403e;
  box-shadow: inset 0 1px #ffb2aa1c;
}
.chart-block {
  overflow: hidden;
}
.fuel-chart svg,
.chart-canvas svg {
  height: 224px;
}
.chart-scale {
  color: #9d9093;
  height: 224px;
  padding: 12px 0 18px;
  font-size: 9px;
}
.chart-grid {
  stroke: #4b3438;
  stroke-opacity: 0.56;
}
.chart-area {
  fill: url(#fuel-chart-area);
}
.chart-line {
  stroke: #ff3342;
  stroke-width: 3.25px;
  filter: drop-shadow(0 0 7px #ff3342b8);
}
.chart-average {
  stroke: #ffb0b6;
  stroke-width: 1.9px;
  opacity: 0.94;
  stroke-dasharray: 2 6;
}
.chart-selection-readout {
  color: #f4dfe0;
  background: linear-gradient(135deg, #69141d85, #130c0eeb);
  border-color: #753137;
  box-shadow:
    0 10px 22px #0008,
    inset 0 1px #ffafb51c;
}
.fuel-chart.is-detail .chart-canvas svg {
  height: 236px;
}
.fuel-chart.is-detail .chart-scale {
  height: 236px;
  padding: 15px 0 19px;
}
.fuel-chart.is-detail .chart-line,
.fuel-chart.is-detail .chart-average {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-labels,
.fuel-chart.is-detail .chart-labels {
  color: #b9abaf;
  font-size: 9px;
}
.chart-range,
.refresh-pill,
.map-location-button,
.route-trigger,
.route-options a {
  color: #f5ecec;
  background: linear-gradient(145deg, #2a1d20eb, #0c0a0ce0);
  border-color: #4a3639;
  box-shadow:
    inset 0 1px #ffffff14,
    0 8px 20px #0006;
}
.chart-range button.is-active {
  color: #fff;
  background: linear-gradient(145deg, #7d1e28, #441116);
  box-shadow:
    inset 0 1px #ffbdc126,
    0 0 13px #ee243433;
}
.fuel-preference,
.nearby-radius {
  margin: 0 0 16px;
  padding: 17px;
}
.nearby-radius > small {
  color: #8f8f95;
  font-size: 9px;
}
.nearby-radius h2 {
  letter-spacing: -0.35px;
  margin: 4px 0 13px;
  font-size: 16px;
}
.nearby-radius [data-nearby-radius] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}
.nearby-radius button {
  color: #c6b9bc;
  background: linear-gradient(145deg, #1b1618db, #080708c2);
  border: 1px solid #3b3033;
  border-radius: 13px;
  min-height: 42px;
  padding: 7px 5px;
  font-size: 10px;
}
.nearby-radius button.is-active {
  color: #fff;
  background: linear-gradient(145deg, #b024307a, #400e14b3);
  border-color: #a42e38;
  box-shadow:
    inset 0 1px #ffbbc020,
    0 0 14px #e9283530;
}
@media (prefers-reduced-motion: no-preference) {
  .glass-card,
  .price-hero,
  .station-result,
  .fuel-map,
  .detail-card {
    animation: 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both fueldash-rise;
  }
  .map-price-marker {
    animation: 0.28s cubic-bezier(0.2, 0.9, 0.2, 1) both fueldash-pop;
  }
  .chart-line {
    animation: 2.6s ease-in-out infinite alternate fueldash-glow;
  }
}
@keyframes fueldash-rise {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fueldash-pop {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fueldash-glow {
  0% {
    filter: drop-shadow(0 0 4px #ff334273);
  }
  to {
    filter: drop-shadow(0 0 10px #ff3342e6);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.search-field svg {
  fill: none;
  stroke: #ff6a73;
  stroke-width: 2.05px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px #ff334255);
  flex: none;
  width: 21px;
  height: 21px;
}
.map-price-marker {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 86px;
  padding: 5px 8px;
  line-height: 1.05;
  display: flex;
}
.map-price-marker-price {
  letter-spacing: -0.2px;
  font-size: 11px;
  font-weight: 800;
}
.map-price-marker-name {
  color: #ffdedf;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 76px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.05;
  overflow: hidden;
}
.fuel-map-marker .map-price-marker {
  white-space: normal;
  width: auto;
}
.round-button,
.refresh-pill,
.map-location-button,
.route-trigger,
.route-options a,
.fuel-preference button,
.nearby-radius button,
.detail-price-card {
  border-color: var(--control-border);
  background: var(--control-glass);
  color: var(--control-text);
  box-shadow:
    inset 0 1px #ffffff18,
    0 8px 20px #0007;
}
.chart-range {
  border-color: var(--control-border);
  background: var(--control-glass);
  box-shadow:
    inset 0 1px #ffffff18,
    0 8px 20px #0007;
}
.chart-range button {
  color: #d8cdd0;
}
.chart-range button.is-active,
.fuel-preference button.is-active,
.nearby-radius button.is-active,
.detail-price-card.is-selected {
  border-color: var(--control-active-border);
  background: var(--control-active);
  color: #fff;
  box-shadow:
    inset 0 1px #ffd0d330,
    0 7px 18px #e9263938;
}
.fuel-preference button.is-active > span,
.fuel-preference button.is-active > strong,
.nearby-radius button.is-active > span,
.detail-price-card.is-selected > span,
.detail-price-card.is-selected > strong {
  color: #fff;
}
.detail-price-card.is-selected > small {
  color: #ffe2e4;
}
.station-route .route-trigger {
  border-color: var(--control-border);
  background: var(--control-glass);
  color: var(--control-text);
  box-shadow:
    inset 0 1px #ffffff18,
    0 8px 20px #0007;
}
.glass-card,
.price-hero,
.station-result,
.fuel-map,
.detail-card,
.map-price-marker,
.chart-line {
  animation: none !important;
}
.map-price-marker {
  transition:
    transform 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}
:where(button, .route-options a):active {
  transform: scale(0.975);
}
.route-options[hidden] {
  display: none !important;
}
.chart-line {
  stroke: var(--brand-red);
  filter: drop-shadow(0 0 7px #ff3b3099);
}
.chart-average {
  stroke: #fff;
  opacity: 0.48;
}
.legend-today {
  background: var(--brand-red);
  box-shadow: 0 0 10px #ff3b308a;
}
.legend-average {
  opacity: 0.48;
  background: #fff;
}
.fuel-chart circle,
.chart-selection-today {
  fill: var(--brand-red);
}
.chart-selection-average {
  fill: #fff;
}
.chart-selection-line {
  stroke: var(--brand-red);
}
.chart-selection-readout {
  background: #ff3b301a;
  border-color: #ff3b3073;
}
.chart-selection-readout strong {
  color: var(--brand-red);
}
.search-field svg {
  stroke: var(--brand-red);
  filter: drop-shadow(0 0 5px #ff3b3057);
}
.map-price-marker {
  background: #1e0c0ee6;
  border-color: #ff3b308c;
}
.map-price-marker.is-selected {
  background: var(--brand-red);
  border-color: var(--brand-red);
  box-shadow:
    0 8px 20px #000a,
    0 0 14px #ff3b3061;
}
.chart-range button.is-active,
.fuel-preference button.is-active,
.nearby-radius button.is-active,
.detail-price-card.is-selected {
  background: var(--brand-red);
  border-color: var(--brand-red);
  box-shadow:
    inset 0 1px #ffffff2e,
    0 7px 18px #ff3b3042;
}
.price-change.is-lower {
  color: #43f2bf;
  text-shadow: 0 0 8px #43f2bf52;
}
.price-change.is-higher {
  color: var(--brand-red);
}
.comparison-row i b {
  box-shadow: none;
  background: #66666c;
}
.comparison-row strong {
  color: #e9e4e5;
}
.comparison-row.is-lowest i b {
  background: var(--brand-red);
  box-shadow: 0 0 10px #ff3b3057;
}
.comparison-row.is-lowest strong {
  color: var(--brand-red);
}
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  top: 0;
  left: 0;
}
.leaflet-container {
  overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.leaflet-tile::selection {
  background: 0 0;
}
.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}
.leaflet-safari .leaflet-tile-container {
  -webkit-transform-origin: 0 0;
  width: 1600px;
  height: 1600px;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
  display: block;
}
.leaflet-container .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
  width: auto;
  padding: 0;
  max-width: none !important;
  max-height: none !important;
}
.leaflet-container img.leaflet-tile {
  mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
  touch-action: none;
  touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}
.leaflet-container {
  -webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
  -webkit-tap-highlight-color: #33b5e566;
}
.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}
.leaflet-tile-loaded {
  visibility: inherit;
}
.leaflet-zoom-box {
  box-sizing: border-box;
  z-index: 800;
  width: 0;
  height: 0;
}
.leaflet-overlay-pane svg {
  -moz-user-select: none;
}
.leaflet-pane {
  z-index: 400;
}
.leaflet-tile-pane {
  z-index: 200;
}
.leaflet-overlay-pane {
  z-index: 400;
}
.leaflet-shadow-pane {
  z-index: 500;
}
.leaflet-marker-pane {
  z-index: 600;
}
.leaflet-tooltip-pane {
  z-index: 650;
}
.leaflet-popup-pane {
  z-index: 700;
}
.leaflet-map-pane canvas {
  z-index: 100;
}
.leaflet-map-pane svg {
  z-index: 200;
}
.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}
.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}
.leaflet-control {
  z-index: 800;
  pointer-events: visiblePainted;
  pointer-events: auto;
  position: relative;
}
.leaflet-top,
.leaflet-bottom {
  z-index: 1000;
  pointer-events: none;
  position: absolute;
}
.leaflet-top {
  top: 0;
}
.leaflet-right {
  right: 0;
}
.leaflet-bottom {
  bottom: 0;
}
.leaflet-left {
  left: 0;
}
.leaflet-control {
  float: left;
  clear: both;
}
.leaflet-right .leaflet-control {
  float: right;
}
.leaflet-top .leaflet-control {
  margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
  margin-left: 10px;
}
.leaflet-right .leaflet-control {
  margin-right: 10px;
}
.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}
.leaflet-zoom-animated {
  transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
  will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
  transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}
.leaflet-interactive {
  cursor: pointer;
}
.leaflet-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
  cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
  pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: visiblePainted;
  pointer-events: auto;
}
.leaflet-container {
  outline-offset: 1px;
  background: #ddd;
}
.leaflet-container a {
  color: #0078a8;
}
.leaflet-zoom-box {
  background: #ffffff80;
  border: 2px dotted #38f;
}
.leaflet-container {
  font-family:
    Helvetica Neue,
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.75rem;
  line-height: 1.5;
}
.leaflet-bar {
  border-radius: 4px;
  box-shadow: 0 1px 5px #000000a6;
}
.leaflet-bar a {
  text-align: center;
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-decoration: none;
  display: block;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
  background-position: 50%;
  background-repeat: no-repeat;
  display: block;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
  border-bottom: none;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.leaflet-bar a.leaflet-disabled {
  cursor: default;
  color: #bbb;
  background-color: #f4f4f4;
}
.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  text-indent: 1px;
  font:
    700 18px Lucida Console,
    Monaco,
    monospace;
}
.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
  font-size: 22px;
}
.leaflet-control-layers {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 5px #0006;
}
.leaflet-control-layers-toggle {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
  width: 36px;
  height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
  background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}
.leaflet-control-layers-expanded {
  color: #333;
  background: #fff;
  padding: 6px 10px 6px 6px;
}
.leaflet-control-layers-scrollbar {
  padding-right: 5px;
  overflow: hidden scroll;
}
.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}
.leaflet-control-layers label {
  font-size: 1.08333em;
  display: block;
}
.leaflet-control-layers-separator {
  border-top: 1px solid #ddd;
  height: 0;
  margin: 5px -10px 5px -6px;
}
.leaflet-default-icon-path {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
}
.leaflet-container .leaflet-control-attribution {
  background: #fffc;
  margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
  color: #333;
  padding: 0 5px;
  line-height: 1.4;
}
.leaflet-control-attribution a {
  text-decoration: none;
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
  text-decoration: underline;
}
.leaflet-attribution-flag {
  width: 1em;
  height: 0.6669em;
  vertical-align: baseline !important;
  display: inline !important;
}
.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}
.leaflet-control-scale-line {
  white-space: nowrap;
  box-sizing: border-box;
  text-shadow: 1px 1px #fff;
  background: #fffc;
  border: 2px solid #777;
  border-top: none;
  padding: 2px 5px 1px;
  line-height: 1.1;
}
.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  background-clip: padding-box;
  border: 2px solid #0003;
}
.leaflet-popup {
  text-align: center;
  margin-bottom: 20px;
  position: absolute;
}
.leaflet-popup-content-wrapper {
  text-align: left;
  border-radius: 12px;
  padding: 1px;
}
.leaflet-popup-content {
  min-height: 1px;
  margin: 13px 24px 13px 20px;
  font-size: 1.08333em;
  line-height: 1.3;
}
.leaflet-popup-content p {
  margin: 1.3em 0;
}
.leaflet-popup-tip-container {
  pointer-events: none;
  width: 40px;
  height: 20px;
  margin-top: -1px;
  margin-left: -20px;
  position: absolute;
  left: 50%;
  overflow: hidden;
}
.leaflet-popup-tip {
  pointer-events: auto;
  width: 17px;
  height: 17px;
  margin: -10px auto 0;
  padding: 1px;
  transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  color: #333;
  background: #fff;
  box-shadow: 0 3px 14px #0006;
}
.leaflet-container a.leaflet-popup-close-button {
  text-align: center;
  color: #757575;
  background: 0 0;
  border: none;
  width: 24px;
  height: 24px;
  font:
    16px/24px Tahoma,
    Verdana,
    sans-serif;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 0;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
  color: #585858;
}
.leaflet-popup-scrolled {
  overflow: auto;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
  -ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  width: 24px;
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=.707107, M12=.707107, M21=-.707107, M22=.707107);
  margin: 0 auto;
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}
.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}
.leaflet-tooltip {
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 6px;
  position: absolute;
  box-shadow: 0 1px 3px #0006;
}
.leaflet-tooltip.leaflet-interactive {
  cursor: pointer;
  pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  pointer-events: none;
  content: "";
  background: 0 0;
  border: 6px solid #0000;
  position: absolute;
}
.leaflet-tooltip-bottom {
  margin-top: 6px;
}
.leaflet-tooltip-top {
  margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
  margin-left: -6px;
  left: 50%;
}
.leaflet-tooltip-top:before {
  border-top-color: #fff;
  margin-bottom: -12px;
  bottom: 0;
}
.leaflet-tooltip-bottom:before {
  border-bottom-color: #fff;
  margin-top: -12px;
  margin-left: -6px;
  top: 0;
}
.leaflet-tooltip-left {
  margin-left: -6px;
}
.leaflet-tooltip-right {
  margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  margin-top: -6px;
  top: 50%;
}
.leaflet-tooltip-left:before {
  border-left-color: #fff;
  margin-right: -12px;
  right: 0;
}
.leaflet-tooltip-right:before {
  border-right-color: #fff;
  margin-left: -12px;
  left: 0;
}
@media print {
  .leaflet-control {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* FuelDash r15: favorites, locations and freshness */
.location > div {
  min-width: 0;
}
.location em {
  color: #d0d0d4;
  font-size: 10px;
  font-style: normal;
  display: block;
  max-width: 46vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location > div > small:last-child {
  color: #85858b;
  margin-top: 2px;
}
.price-hero > b {
  font-size: 15px;
  line-height: 1.2;
  margin: 0 0 3px;
}
.price-hero > small:first-of-type {
  display: block;
  text-align: center;
  align-self: center;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.favorites-location {
  color: #96969d;
  font-size: 11px;
  margin: 4px 0 8px;
}
.station-card {
  position: relative;
  grid-template-columns: 31px minmax(0, 1fr) auto 34px;
  cursor: pointer;
}
.station-copy {
  min-width: 0;
}
.station-copy .station-location {
  color: #b6b6bc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin: 2px 0;
}
.favorite-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #3b3b40;
  background: #111115cc;
  color: #b8b8be;
  font-size: 21px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 2;
}
.favorite-toggle.is-favorite {
  color: #ff453a;
  border-color: #ff453a66;
  background: #ff453a14;
}
.detail-favorite {
  margin-left: auto;
  flex: 0 0 auto;
}
.station-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.freshness-copy span:first-child {
  color: #9b9ba1;
}
.empty-state {
  color: #9b9ba1;
  font-size: 12px;
  line-height: 1.45;
  padding: 12px 2px;
}
.station-value {
  min-width: 72px;
}
@media (max-width: 390px) {
  .station-card {
    grid-template-columns: 28px minmax(0, 1fr) auto 30px;
    gap: 8px;
  }
  .favorite-toggle {
    width: 30px;
    height: 30px;
  }
  .station-value small {
    font-size: 9px;
  }
  .location em {
    max-width: 40vw;
  }
}

/* FuelDash r27 – reliable hero map visibility, no map chrome and search stability */
.fuel-map .leaflet-control-attribution {
  display: none !important;
}
.search-field input {
  font-size: 16px !important;
  line-height: 1.2;
}
.hero-map-layer {
  z-index: 1 !important;
  opacity: 0.66 !important;
  background-color: #1b1215;
  background-image:
    linear-gradient(
      24deg,
      transparent 46%,
      rgba(255, 255, 255, 0.13) 47%,
      transparent 49%
    ),
    linear-gradient(
      138deg,
      transparent 43%,
      rgba(255, 255, 255, 0.1) 44%,
      transparent 46%
    ),
    repeating-linear-gradient(
      12deg,
      transparent 0 19px,
      rgba(255, 102, 94, 0.08) 20px 21px,
      transparent 22px 38px
    ),
    repeating-linear-gradient(
      102deg,
      transparent 0 26px,
      rgba(255, 255, 255, 0.055) 27px 28px,
      transparent 29px 54px
    );
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
}
.hero-map-layer .fuel-map {
  opacity: 0.82;
}
.hero-map-layer::after {
  z-index: 500;
  background:
    radial-gradient(
      circle at 50% 52%,
      transparent 0,
      rgba(5, 5, 6, 0.03) 46%,
      rgba(5, 5, 6, 0.25) 100%
    ),
    linear-gradient(180deg, rgba(5, 5, 6, 0.04), rgba(5, 5, 6, 0.24));
}
.price-hero {
  z-index: 2 !important;
  background: linear-gradient(
    145deg,
    rgba(31, 31, 34, 0.18),
    rgba(5, 5, 7, 0.34)
  ) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

/* FuelDash r26 – background reach, visible hero map and restrained controls */
.hero-map-layer {
  opacity: 0.46 !important;
  filter: saturate(0.78) brightness(1.18) contrast(0.96) !important;
}
.hero-map-layer::after {
  background:
    radial-gradient(
      circle at 50% 52%,
      transparent 0,
      rgba(5, 5, 6, 0.12) 46%,
      rgba(5, 5, 6, 0.42) 100%
    ),
    linear-gradient(180deg, rgba(5, 5, 6, 0.16), rgba(5, 5, 6, 0.42));
}
.price-hero {
  justify-content: center !important;
  padding: 40px 22px 54px !important;
  background: linear-gradient(
    145deg,
    rgba(31, 31, 34, 0.38),
    rgba(5, 5, 7, 0.52)
  ) !important;
}
.price-hero .hero-label {
  margin-bottom: 12px !important;
}
.price-hero .hero-price {
  margin-bottom: 7px !important;
}
.price-hero .hero-footer {
  position: absolute !important;
  right: 22px;
  bottom: 16px;
  left: 22px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fuel-advice-card::before,
.fuel-advice-card.is-now::before,
.fuel-advice-card.is-soon::before,
.fuel-advice-card.is-later::before {
  display: none !important;
}
.fuel-advice-card.is-now strong,
.fuel-advice-card.is-soon strong,
.fuel-advice-card.is-later strong {
  text-shadow: none !important;
}
.map-location-control {
  width: 37px;
  height: 37px;
  padding: 9px;
  opacity: 0.76;
  color: #ddd6d7;
  background: linear-gradient(
    145deg,
    rgba(34, 30, 32, 0.62),
    rgba(10, 10, 12, 0.58)
  );
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.map-location-control svg {
  fill: rgba(255, 100, 94, 0.07);
  stroke: #e68b85;
  stroke-width: 1.55;
}
@media (max-width: 390px) {
  .price-hero {
    padding: 36px 18px 51px !important;
  }
  .price-hero .hero-footer {
    right: 18px;
    bottom: 14px;
    left: 18px;
  }
}

/* FuelDash r27 final cascade */
.fuel-map .leaflet-control-attribution {
  display: none !important;
}
.search-field input {
  font-size: 16px !important;
  line-height: 1.2;
}
.hero-map-layer {
  z-index: 1 !important;
  opacity: 0.66 !important;
  background-color: #1b1215;
  background-image:
    linear-gradient(
      24deg,
      transparent 46%,
      rgba(255, 255, 255, 0.13) 47%,
      transparent 49%
    ),
    linear-gradient(
      138deg,
      transparent 43%,
      rgba(255, 255, 255, 0.1) 44%,
      transparent 46%
    ),
    repeating-linear-gradient(
      12deg,
      transparent 0 19px,
      rgba(255, 102, 94, 0.08) 20px 21px,
      transparent 22px 38px
    ),
    repeating-linear-gradient(
      102deg,
      transparent 0 26px,
      rgba(255, 255, 255, 0.055) 27px 28px,
      transparent 29px 54px
    );
}
.hero-map-layer .fuel-map {
  opacity: 0.82;
}
.hero-map-layer::after {
  z-index: 500;
  background:
    radial-gradient(
      circle at 50% 52%,
      transparent 0,
      rgba(5, 5, 6, 0.03) 46%,
      rgba(5, 5, 6, 0.25) 100%
    ),
    linear-gradient(180deg, rgba(5, 5, 6, 0.04), rgba(5, 5, 6, 0.24));
}
.price-hero {
  z-index: 2 !important;
  background: linear-gradient(
    145deg,
    rgba(31, 31, 34, 0.18),
    rgba(5, 5, 7, 0.34)
  ) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

/* FuelDash r27 final cascade */
.fuel-map .leaflet-control-attribution {
  display: none !important;
}
.search-field input {
  font-size: 16px !important;
  line-height: 1.2;
}
.hero-map-layer {
  z-index: 1 !important;
  opacity: 0.66 !important;
  background-color: #1b1215;
  background-image:
    linear-gradient(
      24deg,
      transparent 46%,
      rgba(255, 255, 255, 0.13) 47%,
      transparent 49%
    ),
    linear-gradient(
      138deg,
      transparent 43%,
      rgba(255, 255, 255, 0.1) 44%,
      transparent 46%
    ),
    repeating-linear-gradient(
      12deg,
      transparent 0 19px,
      rgba(255, 102, 94, 0.08) 20px 21px,
      transparent 22px 38px
    ),
    repeating-linear-gradient(
      102deg,
      transparent 0 26px,
      rgba(255, 255, 255, 0.055) 27px 28px,
      transparent 29px 54px
    );
}
.hero-map-layer .fuel-map {
  opacity: 0.82;
}
.hero-map-layer::after {
  z-index: 500;
  background:
    radial-gradient(
      circle at 50% 52%,
      transparent 0,
      rgba(5, 5, 6, 0.03) 46%,
      rgba(5, 5, 6, 0.25) 100%
    ),
    linear-gradient(180deg, rgba(5, 5, 6, 0.04), rgba(5, 5, 6, 0.24));
}
.price-hero {
  z-index: 2 !important;
  background: linear-gradient(
    145deg,
    rgba(31, 31, 34, 0.18),
    rgba(5, 5, 7, 0.34)
  ) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

/* FuelDash r16 live cleanup */
.station-logo {
  position: relative;
  background: #f4f4f6;
  border: 1px solid #ffffff1f;
  overflow: hidden;
}
.station-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
  box-sizing: border-box;
}
.station-logo .brand-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  color: #17171a;
  z-index: -1;
}
.favorite-toggle {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #3b3b40;
  background: linear-gradient(145deg, #1c1c20, #0d0d10);
  color: #aaaab2;
  box-shadow: inset 0 1px #ffffff14;
  display: grid;
  place-items: center;
  padding: 0;
}
.favorite-toggle svg {
  width: 20px;
  height: 20px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  transition:
    transform 0.18s ease,
    fill 0.18s ease,
    color 0.18s ease;
}
.favorite-toggle:active svg {
  transform: scale(0.88);
}
.favorite-toggle.is-favorite {
  color: #ff453a;
  border-color: #ff453a66;
  background: #ff453a12;
}
.favorite-toggle.is-favorite svg {
  fill: #ff453a;
  stroke: #ff453a;
}
.detail-favorite {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.detail-favorite svg {
  width: 23px;
  height: 23px;
}
.price-hero > b {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  font-size: 16px;
}
.price-hero .hero-place {
  color: #aaaab1;
  font-size: 13px;
  font-weight: 500;
}
.location em,
.favorites-location {
  display: none !important;
}
.live-error {
  margin-top: 12px;
  padding: 22px;
}

.user-location-marker {
  background: transparent !important;
  border: 0 !important;
}
.user-location-dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2f8cff;
  border: 4px solid #fff;
  box-shadow:
    0 0 0 5px rgba(47, 140, 255, 0.22),
    0 4px 16px rgba(0, 0, 0, 0.45);
}
.user-location-dot i {
  display: none;
}

/* FuelDash r19 refinements */
.price-hero {
  padding: 28px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  text-align: left !important;
}
.price-hero .hero-label {
  font-size: 1rem !important;
  color: #f4f4f6 !important;
  font-weight: 700 !important;
  text-align: center !important;
}
.price-hero .hero-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
}
.price-hero .hero-main b {
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
.price-hero .hero-main strong {
  font-size: 3rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.price-hero > small {
  display: block !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #aaa !important;
  line-height: 1.45 !important;
}
.dashboard-section {
  margin-top: 24px !important;
}
.favorites-block {
  margin-top: 26px !important;
}
.fuel-advice-card {
  margin-top: 24px !important;
}
.chart-block {
  margin-top: 24px !important;
}
.price-change.is-neutral {
  color: #999 !important;
}
.detail-opening {
  display: grid;
  gap: 18px;
}
.detail-opening header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.detail-opening .opening-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.detail-opening .opening-status strong.is-open {
  color: #52d39a;
}
.detail-opening .opening-status strong.is-closed {
  color: #ff4450;
}
.detail-opening p {
  margin: 0;
  color: #8e8e93;
  line-height: 1.45;
}
@media (max-width: 520px) {
  .price-hero {
    padding: 24px 22px !important;
    gap: 14px !important;
  }
  .price-hero .hero-main {
    gap: 14px !important;
  }
  .price-hero .hero-main b {
    font-size: 1.2rem !important;
  }
  .price-hero .hero-main strong {
    font-size: 2.55rem !important;
  }
}

/* FuelDash r20 layout, request-cache and readability fixes */
.location {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  margin: 2px 4px 19px !important;
}
.location > span {
  font-size: 22px !important;
}
.location-copy {
  min-width: 0 !important;
}
.location-copy > small {
  color: #9b9ba1 !important;
  margin: 0 0 3px !important;
  font-size: 10px !important;
}
.location-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.location-line strong {
  font-size: 15px !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.location-line span {
  color: #8d8d93 !important;
  font-size: 10px !important;
  flex: 0 0 auto !important;
}
.location .refresh-pill {
  flex: 0 0 auto !important;
}
.price-hero {
  padding: 24px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  text-align: center !important;
}
.price-hero .hero-label {
  font-size: 14px !important;
  color: #f4f4f6 !important;
  font-weight: 650 !important;
  text-align: center !important;
}
.price-hero > strong {
  display: block !important;
  color: #ff3b30 !important;
  letter-spacing: -2.8px !important;
  margin: 7px 0 4px !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}
.price-hero > b {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin: 0 0 11px !important;
  text-align: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.price-hero > small {
  display: flex !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  color: #bdbdc1 !important;
  justify-content: space-between !important;
  align-self: stretch !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.price-hero > small i {
  flex: 1 !important;
}
.fuel-advice-card:before {
  display: none !important;
}
.fuel-advice-card,
.fuel-advice-card.is-good {
  border-color: #323236 !important;
  box-shadow:
    inset 0 1px #ffffff18,
    0 16px 36px #0007 !important;
  background: linear-gradient(135deg, #1e1e2080, #0a0a0bb3) !important;
}
.fuel-advice-card strong {
  text-shadow: none !important;
}
.dashboard-favorite-card,
.favorites-screen-card {
  grid-template-columns: 42px minmax(0, 1fr) 40px !important;
  grid-template-areas: "logo copy favorite" "logo value value" !important;
  column-gap: 12px !important;
  row-gap: 7px !important;
  align-items: center !important;
  padding: 14px !important;
}
.dashboard-favorite-card .station-logo,
.favorites-screen-card .station-logo {
  grid-area: logo !important;
  width: 42px !important;
  height: 42px !important;
}
.dashboard-favorite-card .station-copy,
.favorites-screen-card .station-copy {
  grid-area: copy !important;
  min-width: 0 !important;
}
.dashboard-favorite-card .station-copy strong,
.favorites-screen-card .station-copy strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.dashboard-favorite-card .station-location,
.favorites-screen-card .station-location {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 3px 0 !important;
}
.dashboard-favorite-card .station-copy > small:last-child,
.favorites-screen-card .station-copy > small:last-child {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.dashboard-favorite-card .station-value,
.favorites-screen-card .station-value {
  grid-area: value !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
  text-align: left !important;
}
.dashboard-favorite-card .station-value strong,
.favorites-screen-card .station-value strong {
  font-size: 20px !important;
  white-space: nowrap !important;
}
.dashboard-favorite-card .station-value small,
.favorites-screen-card .station-value small {
  font-size: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: right !important;
}
.dashboard-favorite-card .favorite-toggle,
.favorites-screen-card .favorite-toggle {
  grid-area: favorite !important;
  width: 38px !important;
  height: 38px !important;
}
@media (max-width: 390px) {
  .location {
    column-gap: 8px !important;
  }
  .location-line {
    gap: 6px !important;
  }
  .location-line strong {
    font-size: 14px !important;
  }
  .location-line span {
    font-size: 9px !important;
  }
  .price-hero {
    padding: 22px 18px 19px !important;
  }
  .price-hero > strong {
    font-size: 44px !important;
  }
  .dashboard-favorite-card,
  .favorites-screen-card {
    grid-template-columns: 38px minmax(0, 1fr) 36px !important;
    padding: 12px !important;
    column-gap: 9px !important;
  }
  .dashboard-favorite-card .station-logo,
  .favorites-screen-card .station-logo {
    width: 38px !important;
    height: 38px !important;
  }
  .dashboard-favorite-card .favorite-toggle,
  .favorites-screen-card .favorite-toggle {
    width: 34px !important;
    height: 34px !important;
  }
}

/* FuelDash r21 search, sorting and map interaction */
.fuel-map .leaflet-tile-pane {
  filter: saturate(0.82) brightness(1.28) contrast(0.96) !important;
}
.user-location-dot {
  background: #ff3b30 !important;
  box-shadow:
    0 0 0 5px rgba(255, 59, 48, 0.22),
    0 4px 16px rgba(0, 0, 0, 0.45) !important;
}
.station-sort {
  display: flex;
  gap: 7px;
  margin: 13px 0 4px;
  padding: 4px;
  border: 1px solid #35353a;
  border-radius: 15px;
  background: #111114cc;
  box-shadow: inset 0 1px #ffffff12;
}
.station-sort button {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #aaaab1;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 650;
}
.station-sort button.is-active {
  background: #ff3b30;
  color: #fff;
  box-shadow: 0 5px 14px rgba(255, 59, 48, 0.2);
}
.result-list .station-card.is-selected {
  border-color: #ff4a40 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 59, 48, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.55) !important;
  background: linear-gradient(
    135deg,
    rgba(49, 22, 23, 0.78),
    rgba(10, 10, 11, 0.82)
  ) !important;
}
.station-detail-link {
  display: inline-flex !important;
  align-items: center;
  border: 0;
  background: transparent;
  color: #ff554b !important;
  padding: 0;
  margin: 4px 0 1px;
  font-size: 10px !important;
  font-weight: 650;
  line-height: 1.2;
}
.result-list .station-card {
  grid-template-columns: 38px minmax(0, 1fr) auto 36px !important;
  gap: 10px !important;
  padding: 13px !important;
}
.result-list .station-logo {
  width: 38px !important;
  height: 38px !important;
}
.result-list .station-copy > small:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-list .station-value {
  min-width: 64px;
}
.result-list .station-value .price-change {
  margin-top: 4px;
  font-size: 9px;
  white-space: nowrap;
}
.map-price-marker {
  background: rgba(63, 20, 21, 0.94) !important;
  border-color: #ff746d !important;
}
.map-price-marker.is-selected {
  background: #ff3b30 !important;
  transform: scale(1.12) !important;
  box-shadow:
    0 8px 22px #000b,
    0 0 20px rgba(255, 59, 48, 0.45) !important;
}
@media (max-width: 390px) {
  .station-sort button {
    font-size: 10px;
    padding: 8px 4px;
  }
  .result-list .station-card {
    grid-template-columns: 34px minmax(0, 1fr) auto 32px !important;
    gap: 8px !important;
    padding: 11px !important;
  }
  .result-list .station-logo {
    width: 34px !important;
    height: 34px !important;
  }
}

/* FuelDash r22 – focused card polish */
.price-hero {
  min-height: 250px !important;
  padding: 26px 26px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 0 !important;
}
.price-hero .hero-label {
  width: 100% !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f4f4f6 !important;
  margin: 0 0 28px !important;
}
.price-hero .hero-station {
  width: 100% !important;
  text-align: center !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 0 10px !important;
}
.price-hero .hero-price {
  display: block !important;
  text-align: center !important;
  font-size: 48px !important;
  line-height: 1 !important;
  color: #ff453a !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.price-hero .hero-footer {
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  color: #aaaab0 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
}
.price-hero .hero-footer span:first-child {
  text-align: left !important;
}
.price-hero .hero-footer span:last-child {
  text-align: right !important;
}

/* Cards sit slightly farther back and respond like native iOS surfaces. */
.price-hero,
.dashboard-section.glass-card,
.station-card,
.map-card,
.search-card {
  transform: scale(0.985);
  transform-origin: center;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.75, 0.25, 1),
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.price-hero:active,
.dashboard-section.glass-card:active,
.station-card:active,
.map-card:active,
.search-card:active {
  transform: scale(1.02);
}
@media (hover: hover) {
  .price-hero:hover,
  .dashboard-section.glass-card:hover,
  .station-card:hover,
  .map-card:hover,
  .search-card:hover {
    transform: scale(1.005);
  }
}
@media (max-width: 390px) {
  .price-hero {
    min-height: 236px !important;
    padding: 23px 21px 19px !important;
  }
  .price-hero .hero-label {
    margin-bottom: 24px !important;
  }
  .price-hero .hero-station {
    font-size: 17px !important;
  }
  .price-hero .hero-price {
    font-size: 44px !important;
  }
  .price-hero .hero-footer {
    padding-top: 20px !important;
  }
}

/* FuelDash r24 – compact "Günstigste Tankstelle" card only */
.price-hero {
  min-height: 198px !important;
  padding: 20px 22px 17px !important;
}
.price-hero .hero-label {
  margin-bottom: 17px !important;
}
.price-hero .hero-station {
  font-size: 17px !important;
  margin-bottom: 7px !important;
}
.price-hero .hero-price {
  font-size: 44px !important;
}
.price-hero .hero-footer {
  padding-top: 16px !important;
}
@media (max-width: 390px) {
  .price-hero {
    min-height: 188px !important;
    padding: 18px 18px 15px !important;
  }
  .price-hero .hero-label {
    margin-bottom: 14px !important;
  }
  .price-hero .hero-price {
    font-size: 41px !important;
  }
  .price-hero .hero-footer {
    padding-top: 13px !important;
  }
}

/* FuelDash r25 – hero map, unified station rows, map search and ambient light */
.hero-card-wrap {
  position: relative;
  min-height: 198px;
  border-radius: 27px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 43px #0008;
}
.hero-map-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  filter: saturate(0.65) contrast(0.92);
  pointer-events: none;
}
.hero-map-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 500;
  background:
    radial-gradient(
      circle at 50% 52%,
      transparent 0,
      rgba(5, 5, 6, 0.28) 46%,
      rgba(5, 5, 6, 0.72) 100%
    ),
    linear-gradient(180deg, rgba(5, 5, 6, 0.4), rgba(5, 5, 6, 0.72));
}
.hero-map-layer .fuel-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-map-layer .map-price-marker {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 3px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 50% !important;
  background: #ff453a !important;
  box-shadow:
    0 0 0 7px rgba(255, 69, 58, 0.16),
    0 0 20px rgba(255, 69, 58, 0.52) !important;
}
.hero-map-layer .map-price-marker span {
  display: none !important;
}
.price-hero {
  position: relative !important;
  z-index: 2 !important;
  min-height: 198px !important;
  background: linear-gradient(
    145deg,
    rgba(31, 31, 34, 0.6),
    rgba(5, 5, 7, 0.72)
  ) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.17),
    inset 0 -1px rgba(255, 255, 255, 0.035) !important;
}
.price-hero .hero-label {
  margin: 0 0 12px !important;
}
.price-hero .hero-price {
  order: 2;
  margin: 0 0 7px !important;
  text-shadow: 0 0 24px rgba(255, 69, 58, 0.2);
}
.price-hero .hero-station {
  order: 3;
  color: #a7a7ae !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  margin: 0 !important;
}
.price-hero .hero-footer {
  order: 4;
  padding-top: 14px !important;
}
.price-hero .hero-chevron {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 27px;
  height: 27px;
  padding: 7px;
  color: #b8b8bd;
  background: rgba(13, 13, 15, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dashboard-favorite-card,
.favorites-screen-card {
  grid-template-columns: 38px minmax(0, 1fr) auto 36px !important;
  grid-template-areas: none !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 13px !important;
}
.dashboard-favorite-card .station-logo,
.dashboard-favorite-card .station-copy,
.dashboard-favorite-card .station-value,
.dashboard-favorite-card .favorite-toggle,
.favorites-screen-card .station-logo,
.favorites-screen-card .station-copy,
.favorites-screen-card .station-value,
.favorites-screen-card .favorite-toggle {
  grid-area: auto !important;
}
.dashboard-favorite-card .station-logo,
.favorites-screen-card .station-logo {
  width: 38px !important;
  height: 38px !important;
}
.dashboard-favorite-card .station-value,
.favorites-screen-card .station-value {
  display: block !important;
  min-width: 64px !important;
  text-align: right !important;
}
.dashboard-favorite-card .station-value strong,
.favorites-screen-card .station-value strong {
  color: #ff453a !important;
  font-size: 19px !important;
}
.dashboard-favorite-card .station-value small,
.favorites-screen-card .station-value small {
  margin-top: 4px !important;
  text-align: right !important;
}
.dashboard-favorite-card .favorite-toggle,
.favorites-screen-card .favorite-toggle {
  width: 36px !important;
  height: 36px !important;
}

.map-location-control {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 10px;
  color: #f7f2f2;
  background: linear-gradient(
    145deg,
    rgba(34, 28, 30, 0.94),
    rgba(10, 9, 11, 0.94)
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 59, 48, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.map-location-control svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 59, 48, 0.14);
  stroke: #ff6a62;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fuel-advice-card::before {
  display: block !important;
  width: 180px;
  height: 180px;
  inset: -55% -22% auto auto;
  opacity: 0.8;
}
.fuel-advice-card.is-now {
  border-color: rgba(85, 230, 165, 0.32) !important;
}
.fuel-advice-card.is-now::before {
  background: radial-gradient(
    circle,
    rgba(85, 230, 165, 0.25),
    transparent 68%
  );
}
.fuel-advice-card.is-now strong {
  color: #55e6a5 !important;
  text-shadow: 0 0 20px rgba(85, 230, 165, 0.22) !important;
}
.fuel-advice-card.is-soon {
  border-color: rgba(255, 173, 74, 0.3) !important;
}
.fuel-advice-card.is-soon::before {
  background: radial-gradient(
    circle,
    rgba(255, 173, 74, 0.23),
    transparent 68%
  );
}
.fuel-advice-card.is-soon strong {
  color: #ffad4a !important;
  text-shadow: 0 0 20px rgba(255, 173, 74, 0.2) !important;
}
.fuel-advice-card.is-later {
  border-color: rgba(255, 95, 87, 0.3) !important;
}
.fuel-advice-card.is-later::before {
  background: radial-gradient(circle, rgba(255, 95, 87, 0.24), transparent 68%);
}
.fuel-advice-card.is-later strong {
  color: #ff5f57 !important;
  text-shadow: 0 0 20px rgba(255, 95, 87, 0.22) !important;
}

@media (max-width: 390px) {
  .hero-card-wrap,
  .price-hero {
    min-height: 188px !important;
  }
  .price-hero .hero-price {
    font-size: 41px !important;
  }
  .price-hero .hero-chevron {
    top: 13px;
    right: 13px;
    width: 25px;
    height: 25px;
  }
  .dashboard-favorite-card,
  .favorites-screen-card {
    grid-template-columns: 34px minmax(0, 1fr) auto 32px !important;
    gap: 8px !important;
    padding: 11px !important;
  }
  .dashboard-favorite-card .station-logo,
  .favorites-screen-card .station-logo {
    width: 34px !important;
    height: 34px !important;
  }
  .dashboard-favorite-card .favorite-toggle,
  .favorites-screen-card .favorite-toggle {
    width: 32px !important;
    height: 32px !important;
  }
}

/* FuelDash r26 final cascade overrides */
.hero-map-layer {
  opacity: 0.46 !important;
  filter: saturate(0.78) brightness(1.18) contrast(0.96) !important;
}
.hero-map-layer::after {
  background:
    radial-gradient(
      circle at 50% 52%,
      transparent 0,
      rgba(5, 5, 6, 0.12) 46%,
      rgba(5, 5, 6, 0.42) 100%
    ),
    linear-gradient(180deg, rgba(5, 5, 6, 0.16), rgba(5, 5, 6, 0.42));
}
.price-hero {
  justify-content: center !important;
  padding: 40px 22px 54px !important;
  background: linear-gradient(
    145deg,
    rgba(31, 31, 34, 0.38),
    rgba(5, 5, 7, 0.52)
  ) !important;
}
.price-hero .hero-footer {
  position: absolute !important;
  right: 22px;
  bottom: 16px;
  left: 22px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fuel-advice-card::before,
.fuel-advice-card.is-now::before,
.fuel-advice-card.is-soon::before,
.fuel-advice-card.is-later::before {
  display: none !important;
}
.fuel-advice-card.is-now strong,
.fuel-advice-card.is-soon strong,
.fuel-advice-card.is-later strong {
  text-shadow: none !important;
}
.map-location-control {
  width: 37px;
  height: 37px;
  padding: 9px;
  opacity: 0.76;
  color: #ddd6d7;
  background: linear-gradient(
    145deg,
    rgba(34, 30, 32, 0.62),
    rgba(10, 10, 12, 0.58)
  );
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.map-location-control svg {
  fill: rgba(255, 100, 94, 0.07);
  stroke: #e68b85;
  stroke-width: 1.55;
}
@media (max-width: 390px) {
  .price-hero {
    padding: 36px 18px 51px !important;
  }
  .price-hero .hero-footer {
    right: 18px;
    bottom: 14px;
    left: 18px;
  }
}