/* ===== r122-app.css ===== */

/* ===== assets/index-live-r45.css ===== */
: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: nowrap;
  align-items: center;
  gap: 0 7px;
  margin: 10px 0 5px;
  padding: 8px 10px;
  overflow: hidden;
  font-size: 8px;
  display: flex;
}
.chart-selection-readout strong {
  color: #ff6c64;
  font-size: 10px;
  white-space: nowrap;
}
.chart-selection-readout > :not(:first-child):before {
  content: "·";
  color: #777;
  margin-right: 7px;
}
.chart-selection-readout span { white-space: nowrap; }
.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;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 7px);
}
.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;
  }
}

/* ===== assets/r48-overrides.css ===== */
/* FuelDash r35 final cascade */
html {
  min-height: 100%;
  background: linear-gradient(165deg, #070708 0%, #12090b 52%, #080708 100%);
}

/* R43: chart interaction stays stable on touch devices. */
#app .chart-block.dashboard-section.glass-card,
#app .chart-block.dashboard-section.glass-card:active {
  transform: scale(0.985) !important;
}

#app .fuel-chart svg,
#app .fuel-chart.is-detail .chart-canvas svg {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* The hero price uses the same red as every other price in FuelDash. */
#app .fd-best__price {
  color: #ff3b30 !important;
}

/* Radius choices mirror the centered, single-line fuel choice controls. */
#app .nearby-radius [data-nearby-radius] {
  align-items: stretch;
}

#app .nearby-radius [data-nearby-radius] button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-inline: 4px;
  text-align: center;
  white-space: nowrap;
}

body {
  min-height: 100%;
  background: transparent !important;
}

.fuel-map .leaflet-control-attribution {
  display: none !important;
}

.search-field input {
  font-size: 16px !important;
  line-height: 1.2;
}

/* Completely isolated best-price component. No legacy Hero selector applies. */
#app .fd-best {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%);
  align-items: center;
  width: 100%;
  min-height: 304px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 27px;
  background: #09090b;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.12),
    0 18px 43px rgba(0, 0, 0, 0.52);
  clip-path: inset(0 round 27px);
  contain: paint;
}

#app .fd-best__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #100d0f;
  opacity: 0.46;
}

#app .fd-best__map .fuel-map,
#app .fd-best__map .fuel-map-canvas,
#app .fd-best__map .leaflet-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

#app .fd-best__map .leaflet-marker-pane,
#app .fd-best__map .leaflet-shadow-pane,
#app .fd-best__map .map-price-marker,
#app .fd-best__map .user-location-marker {
  display: none !important;
}

#app .fd-best::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 9, 0.94) 0%,
      rgba(7, 7, 9, 0.78) 48%,
      rgba(7, 7, 9, 0.22) 100%
    ),
    linear-gradient(180deg, rgba(5, 5, 7, 0.05), rgba(5, 5, 7, 0.38));
  content: "";
  pointer-events: none;
}

#app .fd-best__tap {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  appearance: none;
}

#app .fd-best__copy {
  position: relative;
  z-index: 3;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  min-width: 0;
  padding: 27px 8px 27px 22px;
  text-align: left;
  pointer-events: none;
}

#app .fd-best__label,
#app .fd-best__station {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .fd-best__label {
  color: rgba(255, 255, 255, 0.78);
}

#app .fd-best__trend {
  display: flex;
  align-items: baseline;
  align-self: flex-start;
  gap: 8px;
  margin-top: 13px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

#app .fd-best__trend.is-lower {
  color: #48ca88;
}

#app .fd-best__trend.is-higher {
  color: #ff3442;
}

#app .fd-best__trend.is-steady {
  color: rgba(255, 255, 255, 0.58);
}

#app .fd-best__trend i {
  color: rgba(255, 255, 255, 0.52);
  font-style: normal;
  font-weight: 500;
}

#app .fd-best__price {
  display: block;
  align-self: flex-start;
  margin: 5px 0 0;
  color: #ff2d3b;
  font-size: clamp(48px, 13.5vw, 62px);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-align: left;
  white-space: nowrap;
}

#app .fd-best__station {
  align-self: flex-start;
  width: 100%;
  margin-top: 44px;
  color: rgba(255, 255, 255, 0.92);
}

#app .fd-best__meta {
  display: block;
  align-self: flex-start;
  justify-self: start;
  margin-top: 9px;
  padding: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}

#app .fd-best__chevron {
  position: absolute;
  top: 15px;
  right: 14px;
  z-index: 5;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  pointer-events: none;
}

.search-suggestion-panel {
  position: relative;
  z-index: 800;
  display: grid;
  margin: 10px 4px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    rgba(31, 31, 34, 0.78),
    rgba(8, 8, 10, 0.88)
  );
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.12),
    0 13px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.search-suggestion-heading {
  padding: 9px 12px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.search-suggestion-panel[hidden] {
  display: none;
}

.search-suggestion-panel button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 7px 11px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff;
  text-align: left;
  background: transparent;
}

.search-suggestion-panel button:last-child {
  border-bottom: 0;
}

.search-suggestion-panel svg {
  width: 16px;
  fill: none;
  stroke: #ff3b45;
  stroke-width: 1.8;
}

.search-suggestion-panel span,
.search-suggestion-panel strong,
.search-suggestion-panel small {
  display: block;
  min-width: 0;
}

.search-suggestion-panel strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 630;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestion-panel small {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9.5px;
}

/* R60: searching must acknowledge work immediately without hiding the input. */
#app .search-suggestion-status,
#app .search-results-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  line-height: 1.35;
}

#app .search-suggestion-status {
  min-height: 38px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#app .search-suggestion-status.is-error {
  color: rgba(255, 202, 138, 0.82);
}

#app .search-suggestion-status .search-loading-spinner,
#app .search-results-loading .search-loading-spinner {
  width: 14px;
  height: 14px;
  border-width: 1.8px;
}

#app .search-results-loading {
  margin: 10px 4px 14px;
  padding: 11px 12px;
  background: rgba(255, 59, 69, 0.07);
  border: 1px solid rgba(255, 59, 69, 0.18);
  border-radius: 13px;
}

.map-location-control {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(25, 25, 28, 0.7) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.map-location-control svg {
  opacity: 0.78;
}

.dashboard-favorite-card,
.favorites-screen-card {
  grid-template-areas: none !important;
}

.fuel-advice-card::before,
.fuel-advice-card::after {
  display: none !important;
}

.about-build {
  align-items: center !important;
}

.about-build > em {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  color: #8c8c90 !important;
  font-size: 11px !important;
  font-style: normal;
  line-height: 1.25;
}

.about-build small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

@media (max-width: 370px) {
  #app .fd-best {
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
    min-height: 296px;
  }

  #app .fd-best__copy {
    padding-left: 19px;
  }

  #app .fd-best__label,
  #app .fd-best__station {
    font-size: 16px;
  }

  #app .fd-best__station {
    margin-top: 40px;
  }

  #app .fd-best__price {
    font-size: 47px;
  }
}

/* R40: the recommendation keeps its semantic text color, not its own surface. */
#app .fuel-advice-card,
#app .fuel-advice-card.is-now,
#app .fuel-advice-card.is-soon,
#app .fuel-advice-card.is-later,
#app .fuel-advice-card.is-good,
#app .fuel-advice-card.is-wait,
#app .fuel-advice-card.is-neutral {
  background: linear-gradient(145deg, #0d0d108f, #040406b8) !important;
  border-color: #2c2c31 !important;
  box-shadow:
    inset 0 1px #ffffff18,
    0 16px 36px #0007 !important;
}

#app .fuel-advice-card::before,
#app .fuel-advice-card::after {
  display: none !important;
}

#app .fuel-advice-card.is-now strong,
#app .fuel-advice-card.is-soon strong,
#app .fuel-advice-card.is-later strong,
#app .fuel-advice-card.is-good strong,
#app .fuel-advice-card.is-wait strong,
#app .fuel-advice-card.is-neutral strong {
  text-shadow: none !important;
}

#app .fuel-advice-card.is-now strong {
  color: #55e6a5 !important;
}

#app .fuel-advice-card.is-soon strong,
#app .fuel-advice-card.is-wait strong {
  color: #ffad4a !important;
}

#app .fuel-advice-card.is-later strong {
  color: #ff5f57 !important;
}

/* R35: compact, calm best-price card — final cascade over the earlier isolated variant. */
#app .location {
  margin-bottom: 14px !important;
}

#app .fd-best {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 228px;
  place-items: center;
}

#app .fd-best__map {
  opacity: 0.64;
}

#app .fd-best::after {
  background:
    linear-gradient(180deg, rgba(5, 5, 7, 0.26), rgba(5, 5, 7, 0.38)),
    radial-gradient(circle at 50% 50%, rgba(5, 5, 7, 0.56) 0%, rgba(5, 5, 7, 0.29) 58%, rgba(5, 5, 7, 0.1) 100%);
}

#app .fd-best__copy {
  grid-column: 1;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
  width: 100%;
  padding: 20px 22px;
  text-align: center;
}

#app .fd-best__label,
#app .fd-best__station {
  width: auto;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

#app .fd-best__trend {
  align-self: center;
  margin: 0;
  font-size: 12px;
  text-align: center;
}

#app .fd-best__price {
  align-self: center;
  margin: 0;
  color: #ff2d3b;
  font-size: clamp(48px, 13.5vw, 60px);
  text-align: center;
}

#app .fd-best__station {
  align-self: center;
  margin: 0;
}

#app .fd-best__meta {
  align-self: center;
  justify-self: center;
  margin: 0;
  text-align: center;
}

#app .fd-best + .dashboard-section {
  margin-top: 16px !important;
}

@media (max-width: 370px) {
  #app .fd-best {
    grid-template-columns: 1fr;
    min-height: 220px;
  }

  #app .fd-best__copy {
    padding: 18px;
  }

  #app .fd-best__label,
  #app .fd-best__station {
    font-size: 16px;
  }

  #app .fd-best__price {
    font-size: 47px;
  }
}

/* R45 performance: off-screen station rows do not participate in paint work. */
#app .result-list {
  contain: layout style;
}

#app .station-result {
  content-visibility: auto;
  contain-intrinsic-size: 96px;
}

#app .header-background-status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

#app .header-background-status b { font: inherit; }

#app .header-background-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.48);
  animation: fd-r61-pulse 1.15s ease-out infinite;
}

#app .search-loading-spinner {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 77, 87, 0.22);
  border-top-color: #ff4b57;
  border-radius: 50%;
  animation: fd-r60-spin .72s linear infinite;
}

@keyframes fd-r60-spin {
  to { transform: rotate(360deg); }
}

@keyframes fd-r61-pulse {
  70% { box-shadow: 0 0 0 7px rgba(255, 68, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 68, 80, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #app .search-loading-spinner { animation-duration: 2s; }
  #app .header-background-status i { animation-duration: 2s; }
}

#app .search-field,
#app .search-suggestion-panel {
  touch-action: manipulation;
}

/* R84.11: clear/submit search controls and station opening state */
#app .search-field { gap: 8px; }
#app .search-field input { align-self: stretch; }
#app .search-field-action { width: 21px; height: 21px; min-width: 21px; margin: 0; padding: 0 0 2px; border-radius: 50%; display: grid; place-items: center; align-self: center; flex: 0 0 21px; line-height: 1; transform: none; }
#app .search-field-action:active { transform: scale(.94); }
#app .search-field-clear { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); color: #b5b5bb; font-size: 15px; font-weight: 500; }
#app .station-opening-row { display: block; clear: both; min-height: 15px; margin: 5px 0 5px; }
#app .station-opening-row + small { display: block; margin-top: 4px; }
#app .station-opening { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: #a8a8ae; font-size: 10px; line-height: 1.15; }
#app .station-opening i { width: 7px; height: 7px; border-radius: 50%; background: #85858c; box-shadow: 0 0 7px rgba(133,133,140,.45); }
#app .station-opening.is-open { color: #55e6a5; }
#app .station-opening.is-open i { background: #55e6a5; box-shadow: 0 0 8px rgba(85,230,165,.55); }
#app .station-opening.is-closing { color: #f0b46a; }
#app .station-opening.is-closing i { background: #f2a64a; box-shadow: 0 0 8px rgba(242,166,74,.55); }
#app .station-opening.is-closed { color: #ff5f57; }
#app .station-opening.is-closed i { background: #ff5f57; box-shadow: 0 0 8px rgba(255,95,87,.55); }
#app .location-request { cursor: pointer; border-radius: 12px; outline: none; }
#app .location-request:focus-visible { box-shadow: 0 0 0 2px rgba(255,107,99,.7); }
#app .station-opening-hours { display: block; margin: -9px 0 13px; color: #a5a5aa; font-size: 10px; line-height: 1.35; }
#app .station-opening-hours > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; }
#app .station-opening-hours b { color: #e3e3e7; font-weight: 650; }
#app .station-opening-hours em { color: #d4d4d8; font-style: normal; font-variant-numeric: tabular-nums; }
#app .station-meta .is-open { color: #55e6a5; }
#app .station-meta .is-open:before { background: #55e6a5; box-shadow: 0 0 8px rgba(85,230,165,.4); }
#app .station-meta .is-closed { color: #ff5f57; }
#app .station-meta .is-closed:before { background: #ff5f57; box-shadow: 0 0 8px rgba(255,95,87,.4); }
#app .station-meta .is-closing { color: #f0b46a; }
#app .station-meta .is-closing:before { background: #f2a64a; box-shadow: 0 0 8px rgba(242,166,74,.4); }
#app .station-detail-link { display: inline-flex; margin-top: 3px; }
#app .station-detail-link + .station-opening-row { margin-top: 2px; }

/* R65: the primary-station decision is colored by its live recommendation. */
#app .primary-station-card.is-now {
  border-color: rgba(85, 230, 165, .38);
}

#app .primary-station-card.is-now .primary-station-card__copy small,
#app .primary-station-card.is-now .primary-station-card__price,
#app .primary-station-card.is-now .primary-station-card__insights > div:first-child > strong {
  color: #55e6a5 !important;
}

#app .primary-station-card.is-wait,
#app .primary-station-card.is-good,
#app .primary-station-card.is-soon {
  border-color: rgba(255, 173, 74, .4);
}

#app .primary-station-card.is-wait .primary-station-card__copy small,
#app .primary-station-card.is-wait .primary-station-card__price,
#app .primary-station-card.is-wait .primary-station-card__insights > div:first-child > strong,
#app .primary-station-card.is-good .primary-station-card__copy small,
#app .primary-station-card.is-good .primary-station-card__price,
#app .primary-station-card.is-good .primary-station-card__insights > div:first-child > strong,
#app .primary-station-card.is-soon .primary-station-card__copy small,
#app .primary-station-card.is-soon .primary-station-card__price,
#app .primary-station-card.is-soon .primary-station-card__insights > div:first-child > strong {
  color: #ffad4a !important;
}

#app .primary-station-card.is-later {
  border-color: rgba(255, 95, 87, .42);
}

#app .primary-station-card.is-later .primary-station-card__copy small,
#app .primary-station-card.is-later .primary-station-card__price,
#app .primary-station-card.is-later .primary-station-card__insights > div:first-child > strong {
  color: #ff5f57 !important;
}

#app .primary-station-card.is-neutral {
  border-color: rgba(240, 240, 242, .26);
}

#app .primary-station-card.is-neutral .primary-station-card__insights > div:first-child > strong {
  color: #f0f0f2 !important;
}

#app .tab-loading {
  display: grid;
  min-height: 42dvh;
  place-items: center;
}

#app .tab-loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 59, 48, .2);
  border-top-color: #ff3b30;
  border-radius: 50%;
  animation: fd-r60-spin .72s linear infinite;
}

/* R47: compact, non-duplicated primary station on the dashboard. */
#app .primary-station-card {
  margin: 14px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 59, 69, 0.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(29, 25, 27, 0.82), rgba(10, 10, 11, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 12px 28px rgba(0, 0, 0, 0.24);
}

#app .primary-station-card > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  color: #fff;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
}

#app .primary-station-card .station-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

#app .primary-station-card__copy {
  min-width: 0;
}

#app .primary-station-card__copy small,
#app .primary-station-card__copy strong,
#app .primary-station-card__copy > span {
  display: block;
}

#app .primary-station-card__copy small {
  margin-bottom: 2px;
  color: #ff535d;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#app .primary-station-card__copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 690;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .primary-station-card__copy > span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

#app .primary-station-card__price {
  color: #ff3b45;
  font-size: 18px;
  font-weight: 760;
  white-space: nowrap;
}

#app .primary-station-card > button > svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app .primary-station-badge {
  display: inline-flex !important;
  width: fit-content;
  margin: 0 0 4px;
  padding: 3px 7px;
  color: #ff5a64;
  font-size: 8px !important;
  font-weight: 730;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 59, 69, 0.1);
  border: 1px solid rgba(255, 59, 69, 0.24);
  border-radius: 999px;
}

#app .favorites-screen-card.is-primary-station {
  border-color: rgba(255, 59, 69, 0.3) !important;
}

#app .primary-station-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: -2px 0 14px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  font: inherit;
}

#app .primary-station-action.is-active {
  color: #fff;
  background: rgba(255, 59, 69, 0.09);
  border-color: rgba(255, 59, 69, 0.28);
}

#app .primary-station-action > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #ff4a54;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app .primary-station-action > span,
#app .primary-station-action strong,
#app .primary-station-action small {
  display: block;
}

#app .primary-station-action strong {
  font-size: 11px;
  font-weight: 680;
}

#app .primary-station-action small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 9px;
}

@media (hover: hover) {
  #app .primary-station-card > button:hover,
  #app .primary-station-action:hover {
    background-color: rgba(255, 255, 255, 0.045);
  }
}

/* R78: archive backfill stays local to the chart and never blocks details. */
#app .detail-history-status {
  min-height: 34px;
  margin-top: 12px;
  border: 1px solid rgba(255, 59, 48, .2);
  border-radius: 13px;
  background: rgba(255, 59, 48, .06);
  color: rgba(255, 255, 255, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
}

#app .detail-history-status.is-error {
  justify-content: space-between;
}

#app .detail-history-status button {
  border: 0;
  border-radius: 10px;
  background: rgba(255, 59, 48, .14);
  color: #ff5a51;
  padding: 7px 9px;
  font: inherit;
}

#app .detail-history-spinner {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 59, 48, .22);
  border-top-color: #ff3b30;
  border-radius: 50%;
  animation: detail-history-spin .72s linear infinite;
}

#app .detail-history-attribution {
  margin: 12px 2px 0;
  color: rgba(255, 255, 255, .42);
  font-size: 7px;
  line-height: 1.45;
  text-align: center;
}

#app .detail-history-attribution a {
  color: rgba(255, 90, 81, .78);
  text-decoration: none;
}

@keyframes detail-history-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #app .detail-history-spinner { animation-duration: 1.8s; }
}

/* R77: optional previous/next controls replace gesture navigation. */
#app .tab-stepper {
  position: fixed;
  left: 50%;
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 6;
  width: min(100% - 32px, 448px);
  height: 0;
  transform: translateX(-50%);
}

#app .tab-stepper__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 58px;
  overflow: hidden;
  background: rgba(18, 18, 20, .61);
  border: 1px solid #38383c;
  border-radius: 27px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 16px 34px rgba(0, 0, 0, .72);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .15s ease, transform .15s cubic-bezier(.22, .72, .25, 1);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
}

#app .tab-stepper.is-open .tab-stepper__controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#app .tab-stepper__controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 0 18px;
  color: var(--brand-red);
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 650;
}

#app .tab-stepper__controls button + button {
  border-left: 1px solid rgba(255, 255, 255, .08);
}

#app .tab-stepper__controls button:disabled {
  color: rgba(255, 255, 255, .28);
  cursor: default;
}

#app .tab-stepper__controls svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app .tab-stepper__toggle {
  position: absolute;
  bottom: -7px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  transform: translateX(-50%) !important;
  transition: bottom .15s cubic-bezier(.22, .72, .25, 1);
}

#app .tab-stepper__toggle > span {
  width: 28px;
  height: 3px;
  background: var(--brand-red);
  border-radius: 999px;
  box-shadow: 0 0 9px rgba(255, 59, 48, .35);
}

#app .tab-stepper.is-open .tab-stepper__toggle {
  bottom: 49px;
}

@media (prefers-reduced-motion: reduce) {
  #app .tab-stepper__controls,
  #app .tab-stepper__toggle {
    transition-duration: .01ms;
  }
}

/* R48: expanded primary station decision card. */
#app .primary-station-card {
  border-color: color-mix(in srgb, var(--brand-red) 30%, transparent);
}

#app .primary-station-card__head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#app .primary-station-card__copy small,
#app .primary-station-card__price,
#app .primary-station-badge,
#app .primary-station-action > svg {
  color: var(--brand-red) !important;
  stroke: var(--brand-red) !important;
}

#app .primary-station-card__insights {
  display: grid;
  gap: 13px;
  padding: 16px;
}

#app .primary-station-card__insights > div:first-child > small,
#app .primary-station-card__insights > div:first-child > strong,
#app .primary-station-card__insights > div:first-child > span {
  display: block;
}

#app .primary-station-card__insights > div:first-child > small {
  color: rgba(255, 255, 255, 0.43);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#app .primary-station-card__insights > div:first-child > strong {
  margin-top: 7px;
  color: var(--brand-red);
  font-size: 22px;
  line-height: 1.2;
}

#app .primary-station-card__insights > div:first-child > span {
  margin-top: 6px;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  line-height: 1.42;
}

#app .primary-station-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#app .primary-station-card__facts > span {
  min-width: 0;
  min-height: 72px;
  padding: 9px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}

#app .primary-station-card__facts small,
#app .primary-station-card__facts b {
  display: block;
}

#app .primary-station-card__facts small {
  min-height: 0;
  color: rgba(255, 255, 255, .4);
  font-size: 9px;
  line-height: 1.25;
}

#app .primary-station-card__facts b {
  margin-top: auto;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 370px) {
  #app .primary-station-card__facts {
    grid-template-columns: 1fr;
  }
  #app .primary-station-card__facts small { min-height: 0; }
}

/* R84.7: the detail recommendation uses the same 16px card rhythm as the rest of the detail view. */
#app .detail-view > .detail-advice-card {
  box-sizing: border-box;
  margin: 14px 0 16px !important;
  padding: 0 !important;
}

#app .detail-view > .detail-advice-card + .detail-chart {
  margin-top: 0 !important;
}

#app .primary-station-card .primary-station-card__insights > div:first-child > h2 {
  margin: 0;
  color: #fff;
  letter-spacing: -0.48px;
  font-size: 16px;
  font-weight: 700;
}

/* R84.30: recommendation card uses the detail-price dark surface while status remains semantic. */
#app .primary-station-card.is-now,
#app .primary-station-card.is-wait,
#app .primary-station-card.is-good,
#app .primary-station-card.is-soon,
#app .primary-station-card.is-later,
#app .primary-station-card.is-neutral {
  background: #06060880;
  box-shadow:
    inset 0 1px #ffffff0b,
    0 12px 28px rgba(0, 0, 0, .24);
}

#app .primary-station-card__facts > span {
  min-height: 60px;
  padding: 8px 9px;
  background: #06060880;
  border-color: #303035;
  box-shadow: inset 0 1px #ffffff0b;
}

/* R84.36: canonical station labels, balanced availability filter and quiet view transitions. */
#app .primary-station-card__facts > span {
  background: var(--control-glass);
  border-color: var(--control-border);
  box-shadow:
    inset 0 1px #ffffff18,
    0 8px 20px #0007;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

#app .search-availability-filter {
  display: flex;
  margin: 4px;
  padding: 0;
}

#app [data-search-availability-filter] + .result-list {
  margin-top: 0 !important;
}

#app [data-search-availability-filter] + .result-list > .station-result:first-child {
  margin-top: 4px;
}

#app .search-availability-filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 3px 0;
  color: #a8a8ae;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#app .search-availability-filter__box {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 4px;
  background: rgba(255, 255, 255, .025);
}

#app .search-availability-filter button.is-active {
  color: rgba(255, 255, 255, .82);
}

#app .search-availability-filter button.is-active .search-availability-filter__box {
  border-color: #ff786f;
  background: #ff3b30;
  box-shadow: 0 0 8px rgba(255, 59, 48, .28);
}

#app .search-availability-filter button.is-active .search-availability-filter__box::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  transform: translate(-55%, -62%) rotate(45deg);
}

@keyframes fd-r84-view-in {
  from { opacity: .01; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fd-r84-pop-in {
  from { opacity: .01; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  #app .app-content.is-view-enter > :not(.brand-header) {
    animation: fd-r84-view-in .18s cubic-bezier(.22, .72, .25, 1) both;
  }

  #app .route-options:not([hidden]),
  #app .search-suggestion-panel:not([hidden]) {
    animation: fd-r84-pop-in .14s ease-out both;
  }

  #app :where(.round-button, .refresh-pill, .route-trigger, .route-options a, .station-detail-link, .favorite-toggle, .detail-price-card, .search-field-action, .search-availability-filter button, .station-sort button, .fuel-tab-bar button):active {
    transform: translateY(1px) !important;
    filter: brightness(.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .app-content.is-view-enter > :not(.brand-header),
  #app .route-options:not([hidden]),
  #app .search-suggestion-panel:not([hidden]) {
    animation: none;
  }
}
.chart-range button.is-disabled,
.chart-range button:disabled {
  color: #746d70;
  background: transparent;
  box-shadow: none;
  cursor: default;
  opacity: 0.58;
  pointer-events: none;
}

/* R75: stable touch feedback without zooming surfaces. */
#app :where(button, .route-options a):active,
#app :where(.round-button, .refresh-pill, .brand-wordmark):active {
  transform: none !important;
}

#app :where(.price-hero, .dashboard-section.glass-card, .station-card, .map-card, .search-card),
#app :where(.price-hero, .dashboard-section.glass-card, .station-card, .map-card, .search-card):active,
#app .chart-block.dashboard-section.glass-card,
#app .chart-block.dashboard-section.glass-card:active {
  transform: none !important;
}

#app .favorite-toggle:active svg {
  transform: none !important;
}

#app .detail-price-card:active {
  transform: none !important;
}

/* R84.38: the supplied Hoyer wordmark has its own red edge-to-edge field. */
#app .station-logo.station-logo--hoyer img {
  padding: 0;
}

/* R76: unavailable fuel copy fits the same compact detail price tile. */
#app .detail-price-card.is-unavailable > strong {
  font-size: 10px !important;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  #app :where(.price-hero, .dashboard-section.glass-card, .station-card, .map-card, .search-card):hover,
  #app .chart-block.dashboard-section.glass-card:hover {
    transform: none !important;
  }
}

/* ===== assets/r87-price-alerts.css ===== */
.fd-alert-open{overflow:hidden}.fd-alert-modal{position:fixed;inset:0;z-index:2147483000;background:#09090b;display:block;overflow:auto;-webkit-overflow-scrolling:touch;padding:max(14px,env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));pointer-events:auto;touch-action:manipulation}.fd-alert-sheet{width:min(100%,560px);margin:0 auto;background:transparent;border:0;border-radius:0;padding:0;color:#fff;box-shadow:none;overflow:visible;pointer-events:auto}.fd-alert-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 2px 16px;position:sticky;top:0;z-index:4;background:linear-gradient(#09090b 76%,rgba(9,9,11,0))}.fd-alert-kicker{display:block;margin-bottom:5px;color:#ff453a;font-size:10px;font-weight:800;letter-spacing:.18em}.fd-alert-head h2{margin:0;font-size:25px;line-height:1.1;letter-spacing:-.025em}.fd-alert-close{display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.09);background:rgba(28,28,30,.92);color:#fff;width:38px;height:38px;border-radius:50%;padding:0;font-size:25px;line-height:1;pointer-events:auto;touch-action:manipulation}.fd-alert-status{padding:13px 14px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(20,20,22,.88);margin-bottom:12px;font-size:13px;line-height:1.4;color:#b8b8bd}.fd-alert-status[data-type=working]{color:#fff;border-color:rgba(255,255,255,.12)}.fd-alert-status[data-type=success]{color:#d8ffd9;border-color:rgba(52,199,89,.28);background:rgba(18,40,24,.9)}.fd-alert-status[data-type=error]{color:#ffd9d6;border-color:rgba(255,69,58,.32);background:rgba(46,18,17,.9)}.fd-alert-status[data-type=install]{color:#d1d1d6;border-color:rgba(255,255,255,.12);background:rgba(24,24,27,.94)}.fd-alert-grid{display:grid;gap:9px}.fd-alert-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px;background:rgba(20,20,22,.9);border:1px solid rgba(255,255,255,.07);border-radius:16px;box-shadow:inset 0 1px rgba(255,255,255,.035);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.fd-alert-row span{font-size:15px;font-weight:540;min-width:0}.fd-alert-row small{display:block;color:#8f8f95;margin-top:4px;font-size:11px;line-height:1.35;font-weight:400}.fd-alert-row input,.fd-alert-row select{pointer-events:auto;touch-action:manipulation}.fd-alert-row input[type=checkbox]{flex:0 0 auto;width:23px;height:23px;accent-color:#ff3b30}.fd-alert-row select,.fd-alert-row input[type=time],.fd-alert-row input[type=number]{background:#2a2a2e;color:#fff;border:1px solid rgba(255,255,255,.075);border-radius:11px;padding:9px 10px;max-width:138px;min-height:38px;font:inherit}.fd-alert-actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px;margin-top:15px}.fd-alert-actions button{position:relative;z-index:10;border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:14px 12px;min-height:50px;font-weight:750;font-size:13px;line-height:1.2;pointer-events:auto!important;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}.fd-alert-actions button:active{transform:scale(.985)}.fd-alert-actions button:disabled{opacity:.62;cursor:default;transform:none}.fd-alert-enable{background:#ff3b30;color:#fff;box-shadow:none}.fd-alert-test{background:#242428;color:#fff;box-shadow:none}.fd-alert-note{font-size:12px;line-height:1.5;color:#8e8e93;margin:15px 2px 0}.menu-card button[data-fd-price-alerts]{opacity:1!important;pointer-events:auto!important}.menu-card button[data-fd-price-alerts] em{color:#ff453a!important}@media (min-width:700px){.fd-alert-modal{padding:28px}.fd-alert-head{top:-1px}}
/* R88: fixed header, native tap behavior, and iOS install guidance */
.fd-alert-modal{padding:0 14px calc(28px + env(safe-area-inset-bottom));}
.fd-alert-sheet{padding-top:calc(78px + env(safe-area-inset-top));}
.fd-alert-head{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(calc(100% - 28px),560px);height:calc(66px + env(safe-area-inset-top));box-sizing:border-box;padding:calc(8px + env(safe-area-inset-top)) 2px 12px;z-index:2147483002;background:#09090b;border-bottom:1px solid rgba(255,255,255,.055);}
.fd-alert-actions{position:relative;z-index:2147483001;padding-bottom:2px;}
.fd-alert-actions button{touch-action:manipulation!important;-webkit-user-select:none;user-select:none;}
/* R88: per-favorite station selection */
.fd-alert-station-section{margin-top:18px}.fd-alert-station-section>header{display:flex;align-items:end;justify-content:space-between;padding:0 2px 9px}.fd-alert-station-section h3{margin:0;font-size:17px;letter-spacing:-.015em}.fd-alert-station-section header small{display:block;color:#8e8e93;font-size:11px;margin-top:3px}.fd-alert-all{margin-bottom:9px}.fd-alert-stations{display:grid;gap:7px;transition:opacity .18s ease}.fd-alert-stations.is-disabled{opacity:.58}.fd-alert-station{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 13px;background:rgba(20,20,22,.9);border:1px solid rgba(255,255,255,.07);border-radius:15px}.fd-alert-station input{order:3;margin-left:auto;flex:0 0 auto;width:23px;height:23px;accent-color:#ff3b30}.fd-alert-station img{width:38px;height:38px;object-fit:contain;flex:0 0 38px}.fd-alert-station span{min-width:0}.fd-alert-station strong{display:block;font-size:14px;line-height:1.2;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-alert-station small{display:block;margin-top:4px;color:#8e8e93;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-alert-empty{margin:0;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:rgba(20,20,22,.9);color:#8e8e93;font-size:12px;line-height:1.45}

/* ===== assets/r95-theme-tankbook.css ===== */
/* FuelDash R90 – isolated appearance and tankbook extension */

:root {
  --fd-r90-red: #ff3b30;
  --fd-r90-green: #248a3d;
  --fd-r90-dark-bg: #050505;
  --fd-r90-dark-surface: rgba(18, 18, 21, 0.88);
  --fd-r90-dark-border: rgba(255, 255, 255, 0.1);
  --fd-r90-light-bg: #f2f2f5;
  --fd-r90-light-surface: rgba(255, 255, 255, 0.8);
  --fd-r90-light-surface-strong: rgba(245, 245, 248, 0.94);
  --fd-r90-light-border: rgba(42, 42, 47, 0.14);
  --fd-r90-light-text: #141416;
  --fd-r90-light-muted: #626268;
}

#app button,
.fd-feature-page button,
.fd-feature-page input,
.fd-feature-page select,
.fd-feature-page textarea,
.fd-alert-modal button,
.fd-alert-modal input,
.fd-alert-modal select {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

body.fd-feature-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.menu-card.fd-menu-ready {
  opacity: 1;
}

.menu-card button[data-fd-appearance],
.menu-card button[data-fd-tankbook] {
  opacity: 1;
  pointer-events: auto;
}

.menu-card button[data-fd-appearance] em,
.menu-card button[data-fd-tankbook] em {
  color: var(--fd-r90-red);
  font-weight: 650;
}

/* Feature page foundation – matches FuelDash dark glass styling. */
.fd-feature-page {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 12% 2%, rgba(124, 28, 25, 0.24), transparent 30%),
    radial-gradient(circle at 92% 68%, rgba(89, 20, 22, 0.18), transparent 34%),
    #050505;
  color: #fff;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.fd-feature-page.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.fd-feature-shell {
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

.fd-feature-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: calc(14px + env(safe-area-inset-top)) 20px 15px;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.98) 76%, rgba(5, 5, 5, 0));
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}

.fd-feature-back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.82);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}

.fd-feature-back svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fd-feature-heading {
  min-width: 0;
}

.fd-feature-heading > small,
.fd-feature-card > small,
.fd-feature-card__head small,
.fd-tank-history__head small {
  display: block;
  margin-bottom: 4px;
  color: var(--fd-r90-red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.fd-feature-heading h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.85px;
}

.fd-feature-heading p {
  margin: 6px 0 0;
  color: #99999f;
  font-size: 11px;
  line-height: 1.35;
}

.fd-feature-content {
  padding: 10px 20px 0;
}

.fd-feature-card,
.fd-theme-choice,
.fd-tank-summary article,
.fd-tank-entry {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(145deg, rgba(25, 25, 29, 0.86), rgba(8, 8, 10, 0.92));
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  backdrop-filter: blur(28px) saturate(130%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.055), 0 18px 42px rgba(0, 0, 0, 0.27);
}

.fd-feature-card {
  border-radius: 24px;
  padding: 18px;
}

.fd-feature-card h2,
.fd-tank-history__head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: -0.38px;
}

.fd-feature-card > p {
  margin: 9px 0 0;
  color: #a4a4aa;
  font-size: 12px;
  line-height: 1.5;
}

.fd-theme-options {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.fd-theme-choice {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px;
  border-radius: 22px;
  color: #fff;
  text-align: left;
}

.fd-theme-choice.is-selected {
  border-color: rgba(255, 59, 48, 0.66);
  box-shadow: inset 0 0 0 1px rgba(255, 59, 48, 0.18), 0 14px 34px rgba(0, 0, 0, 0.22);
}

.fd-theme-choice__copy {
  min-width: 0;
}

.fd-theme-choice__copy strong,
.fd-theme-choice__copy small {
  display: block;
}

.fd-theme-choice__copy strong {
  font-size: 15px;
  letter-spacing: -0.2px;
}

.fd-theme-choice__copy small {
  margin-top: 5px;
  color: #96969c;
  font-size: 10px;
  line-height: 1.35;
}

.fd-theme-choice__check {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid #55555b;
  border-radius: 50%;
}

.fd-theme-choice.is-selected .fd-theme-choice__check {
  border-color: var(--fd-r90-red);
  background: var(--fd-r90-red);
}

.fd-theme-choice.is-selected .fd-theme-choice__check::after {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: '';
  transform: translateY(-1px) rotate(-45deg);
}

.fd-theme-preview {
  position: relative;
  display: block;
  width: 92px;
  height: 104px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: #08080a;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.fd-theme-preview.is-light {
  border-color: rgba(0, 0, 0, 0.13);
  background: #ededf1;
  color: #151517;
}

.fd-theme-preview__top {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 7px 5px;
  font-size: 7px;
}

.fd-theme-preview__top > i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--fd-r90-red);
}

.fd-theme-preview__top b {
  font-weight: 760;
}

.fd-theme-preview__top strong {
  color: var(--fd-r90-red);
}

.fd-theme-preview__card {
  display: grid;
  gap: 5px;
  margin: 4px 7px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(40, 40, 44, 0.86), rgba(13, 13, 15, 0.94));
}

.fd-theme-preview.is-light .fd-theme-preview__card {
  border-color: rgba(0, 0, 0, 0.12);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(220, 221, 226, 0.92));
}

.fd-theme-preview__card i {
  display: block;
  width: 72%;
  height: 4px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.26;
}

.fd-theme-preview__card i:nth-child(2) {
  width: 46%;
}

.fd-theme-preview__card em {
  width: 34%;
  height: 9px;
  margin-top: 3px;
  border-radius: 5px;
  background: var(--fd-r90-red);
}

.fd-theme-preview__nav {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  display: flex;
  justify-content: space-around;
  padding: 5px 4px;
  border-radius: 8px;
  background: rgba(28, 28, 31, 0.92);
}

.fd-theme-preview.is-light .fd-theme-preview__nav {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
}

.fd-theme-preview__nav i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.36;
}

.fd-theme-preview__nav i:first-child {
  background: var(--fd-r90-red);
  opacity: 1;
}

.fd-theme-preview__label {
  position: absolute;
  top: 7px;
  right: 6px;
  color: #8d8d93;
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase;
}

.fd-feature-note {
  margin: 13px 3px 0;
  color: #8e8e94;
  font-size: 11px;
  text-align: center;
}

/* Tankbook */
.fd-tank-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.fd-tank-summary article {
  min-width: 0;
  border-radius: 19px;
  padding: 14px;
}

.fd-tank-summary small,
.fd-tank-summary strong {
  display: block;
}

.fd-tank-summary small {
  color: #8f8f95;
  font-size: 9px;
}

.fd-tank-summary strong {
  margin-top: 6px;
  color: #fff;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.45px;
}

.fd-tank-summary article:last-child strong {
  color: var(--fd-r90-red);
}

.fd-feature-card__head,
.fd-tank-history__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fd-feature-card__head > span,
.fd-tank-history__head > span {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 6px 8px;
  color: #8f8f95;
  background: rgba(255, 255, 255, 0.035);
  font-size: 8px;
}

.fd-tank-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 16px;
}

.fd-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

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

.fd-field > span:first-child {
  color: #99999f;
  font-size: 9px;
  font-weight: 620;
}

.fd-field input,
.fd-field select,
.fd-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  outline: none;
  background: rgba(7, 7, 9, 0.68);
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.fd-field input,
.fd-field select {
  height: 44px;
  padding: 0 11px;
}

.fd-field textarea {
  min-height: 78px;
  padding: 11px;
  resize: vertical;
}

.fd-field input::placeholder,
.fd-field textarea::placeholder {
  color: #68686e;
}

.fd-field input:focus,
.fd-field select:focus,
.fd-field textarea:focus {
  border-color: rgba(255, 59, 48, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12);
}

.fd-field input[aria-invalid='true'],
.fd-field select[aria-invalid='true'],
.fd-field textarea[aria-invalid='true'] {
  border-color: var(--fd-r90-red);
}

.fd-field-affix {
  position: relative;
  display: block;
}

.fd-field-affix input {
  padding-right: 35px;
}

.fd-field-affix b {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #7f7f85;
  font-size: 10px;
  font-weight: 600;
  transform: translateY(-50%);
}

.fd-form-status {
  grid-column: 1 / -1;
  min-height: 16px;
  margin: 0;
  color: #8f8f95;
  font-size: 10px;
  line-height: 1.35;
}

.fd-form-status[data-type='success'] {
  color: #7fd296;
}

.fd-form-status[data-type='error'] {
  color: #ff7770;
}

.fd-tank-submit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid var(--fd-r90-red);
  border-radius: 15px;
  background: var(--fd-r90-red);
  color: #fff;
  font-size: 13px;
  font-weight: 760;
  box-shadow: 0 12px 25px rgba(255, 59, 48, 0.19);
}

.fd-tank-submit svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fd-tank-history {
  margin-top: 22px;
}

.fd-tank-history__head {
  padding: 0 2px 10px;
}

.fd-tank-list {
  display: grid;
  gap: 11px;
}

.fd-tank-entry {
  position: relative;
  border-radius: 22px;
  padding: 15px;
}

.fd-tank-entry__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 2px;
}

.fd-tank-entry__head small {
  display: block;
  color: #8f8f95;
  font-size: 9px;
}

.fd-tank-entry__head h3 {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.18px;
}

.fd-tank-entry__head > span {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 59, 48, 0.32);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 59, 48, 0.1);
  color: #ff6b62;
  font-size: 9px;
  font-weight: 700;
}

.fd-tank-entry__values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 13px;
}

.fd-tank-entry__values > span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 13px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.025);
}

.fd-tank-entry__values small,
.fd-tank-entry__values strong {
  display: block;
}

.fd-tank-entry__values small {
  color: #85858b;
  font-size: 8px;
}

.fd-tank-entry__values strong {
  margin-top: 4px;
  color: #fff;
  font-size: 12px;
  line-height: 1.15;
}

.fd-tank-entry__values > span:last-child strong {
  color: var(--fd-r90-red);
}

.fd-tank-entry > p {
  margin: 10px 0 0;
  color: #8f8f95;
  font-size: 10px;
  line-height: 1.4;
}

.fd-tank-delete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 11px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #8f8f95;
  font-size: 9px;
}

.fd-tank-delete svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fd-tank-empty {
  display: grid;
  justify-items: center;
  padding: 34px 24px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  color: #8f8f95;
  text-align: center;
}

.fd-tank-empty > span {
  font-size: 29px;
  filter: grayscale(0.3);
}

.fd-tank-empty strong {
  margin-top: 10px;
  color: #d8d8dc;
  font-size: 13px;
}

.fd-tank-empty p {
  max-width: 260px;
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.45;
}

/* Complete Lightmode surface layer. Dark remains untouched unless light is explicit. */
html[data-fd-theme="light"] {
  color: var(--fd-r90-light-text);
  background-color: var(--fd-r90-light-bg);
  background-image:
    radial-gradient(circle at 10% 3%, rgba(255, 59, 48, 0.13), transparent 31%),
    radial-gradient(circle at 91% 42%, rgba(136, 136, 148, 0.13), transparent 34%),
    linear-gradient(145deg, #f8f8fa 0%, #ededf1 54%, #f5f5f7 100%);
}

html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
body[data-fd-theme="light"] {
  background-color: var(--fd-r90-light-bg);
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] body {
  background: transparent;
}

html[data-fd-theme="light"] .fd-fast-shell {
  background: transparent;
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] .fd-fast-brand span {
  color: #111113;
}

html[data-fd-theme="light"] .fd-fast-brand strong {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] .fd-fast-kicker,
html[data-fd-theme="light"] .fd-fast-title,
html[data-fd-theme="light"] .fd-fast-line {
  background: rgba(35, 35, 40, 0.13);
}

html[data-fd-theme="light"] .fd-fast-line.is-price {
  background: rgba(255, 59, 48, 0.24);
}

html[data-fd-theme="light"] .fd-fast-card,
html[data-fd-theme="light"] .fd-fast-nav {
  border-color: var(--fd-r90-light-border);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 12px 28px rgba(60, 60, 67, 0.1);
}

html[data-fd-theme="light"] .fd-fast-nav span {
  color: #65656b;
}

html[data-fd-theme="light"] .fd-fast-nav span:first-child {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content,
html[data-fd-theme="light"] #app .detail-view {
  color: var(--fd-r90-light-text);
  background: transparent;
}

html[data-fd-theme="light"] #app .brand-wordmark,
html[data-fd-theme="light"] #app .brand-wordmark span {
  color: #111113;
}

html[data-fd-theme="light"] #app .brand-wordmark strong {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] #app .brand-wordmark img {
  filter: drop-shadow(0 4px 8px rgba(80, 20, 17, 0.18));
}

html[data-fd-theme="light"] #app :where(
  .location strong,
  .location-line strong,
  .dashboard-section h2,
  .detail-chart h2,
  .detail-prices h2,
  .station-copy strong,
  .station-identity h2,
  .primary-station-card__copy strong,
  .primary-station-card__facts b,
  .search-suggestion-panel strong,
  .route-options a,
  .detail-price-card > strong,
  .station-opening-hours b
) {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] #app :where(
  .location small,
  .location em,
  .screen-lead,
  .empty-state,
  .station-copy small,
  .station-value small,
  .station-location,
  .detail-prices header small,
  .station-identity small,
  .station-address,
  .detail-prices > header > span,
  .detail-chart > header > span,
  .freshness-copy,
  .primary-station-card__copy > span,
  .primary-station-card__facts small,
  .primary-station-action small,
  .detail-history-attribution,
  .search-suggestion-panel small,
  .station-opening-hours em,
  .chart-context
) {
  color: var(--fd-r90-light-muted);
}

html[data-fd-theme="light"] #app :where(
  .glass-card,
  .price-hero,
  .station-card,
  .result-list .station-card,
  .detail-card,
  .detail-price,
  .detail-chart,
  .detail-prices,
  .menu-card,
  .fuel-map,
  .search-field,
  .primary-station-card,
  .route-chooser,
  .search-suggestion-panel,
  .detail-history-status,
  .tab-stepper__controls
) {
  border-color: var(--fd-r90-light-border) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(226, 227, 232, 0.78)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.94), 0 15px 34px rgba(55, 55, 62, 0.11) !important;
}

html[data-fd-theme="light"] #app .price-hero {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] #app .price-hero :where(.hero-label, .hero-place, small, b) {
  color: var(--fd-r90-light-muted);
}

html[data-fd-theme="light"] #app .price-hero > strong,
html[data-fd-theme="light"] #app .price-hero .hero-price,
html[data-fd-theme="light"] #app .price-hero .hero-main strong {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] #app .round-button,
html[data-fd-theme="light"] #app .refresh-pill,
html[data-fd-theme="light"] #app .map-location-button,
html[data-fd-theme="light"] #app .route-trigger,
html[data-fd-theme="light"] #app .route-options a,
html[data-fd-theme="light"] #app .search-field-action,
html[data-fd-theme="light"] #app .station-detail-link,
html[data-fd-theme="light"] #app .primary-station-action,
html[data-fd-theme="light"] #app .tab-stepper__toggle,
html[data-fd-theme="light"] #app .tab-stepper__controls button {
  border-color: rgba(35, 35, 40, 0.14);
  background: rgba(241, 241, 244, 0.86);
  color: #242428;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.95);
}

html[data-fd-theme="light"] #app .refresh-pill,
html[data-fd-theme="light"] #app .route-trigger,
html[data-fd-theme="light"] #app .station-detail-link {
  color: #4e4e54;
}

html[data-fd-theme="light"] #app .fuel-tab-bar {
  border-color: rgba(30, 30, 35, 0.16);
  background: rgba(248, 248, 250, 0.86);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.98), 0 18px 38px rgba(55, 55, 62, 0.16);
}

html[data-fd-theme="light"] #app .fuel-tab-bar button {
  border: 0;
  background: transparent;
  color: #606066;
  box-shadow: none;
}

html[data-fd-theme="light"] #app .fuel-tab-bar button.is-active {
  background: rgba(255, 59, 48, 0.1);
  color: var(--fd-r90-red);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.74);
}

html[data-fd-theme="light"] #app .menu-card {
  opacity: 1;
}

html[data-fd-theme="light"] #app .menu-card button {
  border: 0;
  border-bottom: 1px solid rgba(38, 38, 43, 0.1);
  background: transparent;
  color: var(--fd-r90-light-text);
  box-shadow: none;
}

html[data-fd-theme="light"] #app .menu-card button:last-child {
  border-bottom: 0;
}

html[data-fd-theme="light"] #app .menu-card button :where(span, em) {
  color: #68686e;
}

html[data-fd-theme="light"] #app .menu-card button[data-fd-price-alerts] em,
html[data-fd-theme="light"] #app .menu-card button[data-fd-appearance] em,
html[data-fd-theme="light"] #app .menu-card button[data-fd-tankbook] em {
  color: var(--fd-r90-red) !important;
}

html[data-fd-theme="light"] #app .fuel-preference button,
html[data-fd-theme="light"] #app .nearby-radius button,
html[data-fd-theme="light"] #app .chart-range button,
html[data-fd-theme="light"] #app .fuel-filter button,
html[data-fd-theme="light"] #app .station-sort button,
html[data-fd-theme="light"] #app .search-availability-filter button,
html[data-fd-theme="light"] #app .detail-price-card {
  border-color: rgba(35, 35, 40, 0.13);
  background: rgba(226, 226, 231, 0.76);
  color: #202024;
  box-shadow: none;
}

html[data-fd-theme="light"] #app .chart-range,
html[data-fd-theme="light"] #app .fuel-filter,
html[data-fd-theme="light"] #app .station-sort,
html[data-fd-theme="light"] #app .search-availability-filter {
  border-color: rgba(35, 35, 40, 0.12);
  background: rgba(225, 225, 230, 0.68);
}

html[data-fd-theme="light"] #app :where(
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .chart-range button.is-active,
  .fuel-filter button.is-active,
  .station-sort button.is-active,
  .search-availability-filter button.is-active,
  .detail-price-card.is-selected
) {
  border-color: rgba(255, 59, 48, 0.72);
  background: rgba(255, 59, 48, 0.13);
  color: #171719;
  box-shadow: inset 0 0 0 1px rgba(255, 59, 48, 0.08);
}

html[data-fd-theme="light"] #app :where(
  .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,
  .detail-price-card.is-selected > small
) {
  color: #171719;
}

html[data-fd-theme="light"] #app .search-field input {
  color: #171719;
}

html[data-fd-theme="light"] #app .search-field input::placeholder {
  color: #77777d;
}

html[data-fd-theme="light"] #app .search-suggestion-panel,
html[data-fd-theme="light"] #app .route-options {
  border-color: var(--fd-r90-light-border);
  background: rgba(250, 250, 252, 0.97);
  color: var(--fd-r90-light-text);
  box-shadow: 0 18px 35px rgba(45, 45, 52, 0.17);
}

html[data-fd-theme="light"] #app .search-suggestion-panel button,
html[data-fd-theme="light"] #app .route-options a {
  color: var(--fd-r90-light-text);
  background: transparent;
}

html[data-fd-theme="light"] #app .station-card.is-selected,
html[data-fd-theme="light"] #app .favorites-screen-card.is-primary-station {
  border-color: rgba(255, 59, 48, 0.46) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 59, 48, 0.11), 0 14px 30px rgba(55, 55, 62, 0.1) !important;
}

html[data-fd-theme="light"] #app .favorite-toggle {
  border-color: rgba(35, 35, 40, 0.12);
  background: rgba(232, 232, 236, 0.82);
  color: #67676d;
}

html[data-fd-theme="light"] #app .favorite-toggle.is-favorite,
html[data-fd-theme="light"] #app .detail-favorite.is-favorite {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] #app .detail-price-card > span,
html[data-fd-theme="light"] #app .detail-price-card > small,
html[data-fd-theme="light"] #app .station-value .price-change,
html[data-fd-theme="light"] #app .detail-freshness,
html[data-fd-theme="light"] #app .station-meta span + span {
  color: var(--fd-r90-light-muted);
}

html[data-fd-theme="light"] #app .detail-price-card > strong,
html[data-fd-theme="light"] #app .station-value > strong,
html[data-fd-theme="light"] #app .fd-best__price {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] #app .primary-station-card__facts > span,
html[data-fd-theme="light"] #app .station-opening-hours > span,
html[data-fd-theme="light"] #app .chart-selection-readout,
html[data-fd-theme="light"] #app .detail-history-status {
  border-color: rgba(35, 35, 40, 0.1);
  background: rgba(225, 225, 230, 0.62);
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] #app .chart-scale,
html[data-fd-theme="light"] #app .chart-labels,
html[data-fd-theme="light"] #app .chart-selection-readout span,
html[data-fd-theme="light"] #app .chart-legend {
  color: #696970;
}

html[data-fd-theme="light"] #app .chart-grid {
  stroke: #c7c7cd;
}

html[data-fd-theme="light"] #app .chart-average,
html[data-fd-theme="light"] #app .chart-selection-average {
  stroke: #77777f;
}

html[data-fd-theme="light"] #app .chart-selection-line {
  stroke: #57575d;
}

html[data-fd-theme="light"] #app .fuel-map .leaflet-tile-pane {
  filter: invert(0.93) hue-rotate(180deg) saturate(0.7) brightness(1.07) contrast(0.91);
}

html[data-fd-theme="light"] #app .fuel-map .leaflet-container {
  background: #e6e6ea;
}

html[data-fd-theme="light"] #app .fuel-map .leaflet-control-attribution,
html[data-fd-theme="light"] #app .fuel-map .leaflet-control-attribution a {
  background: rgba(255, 255, 255, 0.82);
  color: #59595f;
}

html[data-fd-theme="light"] #app .map-price-marker {
  border-color: rgba(30, 30, 35, 0.18);
  background: rgba(255, 255, 255, 0.94);
  color: #161618;
  box-shadow: 0 7px 19px rgba(40, 40, 46, 0.18);
}

html[data-fd-theme="light"] #app .map-price-marker-price {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] #app .map-price-marker-name {
  color: #55555b;
}

html[data-fd-theme="light"] #app .search-availability-filter__box {
  border-color: #77777e;
  background: rgba(255, 255, 255, 0.56);
}

html[data-fd-theme="light"] #app .search-availability-filter button.is-active .search-availability-filter__box {
  border-color: var(--fd-r90-red);
  background: var(--fd-r90-red);
}

html[data-fd-theme="light"] #app .detail-history-attribution a {
  color: #55555c;
}

html[data-fd-theme="light"] #app .detail-history-status.is-error {
  border-color: rgba(255, 59, 48, 0.26);
  background: rgba(255, 59, 48, 0.08);
}

html[data-fd-theme="light"] #app .detail-history-status button {
  color: #18181b;
  background: transparent;
}

/* Price alerts are outside #app and need their own light overrides. */
html[data-fd-theme="light"] .fd-alert-modal {
  background: var(--fd-r90-light-bg);
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] .fd-alert-sheet {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] .fd-alert-head {
  background: linear-gradient(var(--fd-r90-light-bg) 78%, rgba(242, 242, 245, 0));
}

html[data-fd-theme="light"] .fd-alert-head h2,
html[data-fd-theme="light"] .fd-alert-row span,
html[data-fd-theme="light"] .fd-alert-station strong,
html[data-fd-theme="light"] .fd-alert-station-section h3 {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] .fd-alert-close,
html[data-fd-theme="light"] .fd-alert-row,
html[data-fd-theme="light"] .fd-alert-status,
html[data-fd-theme="light"] .fd-alert-station-section,
html[data-fd-theme="light"] .fd-alert-all,
html[data-fd-theme="light"] .fd-alert-station,
html[data-fd-theme="light"] .fd-alert-test {
  border-color: var(--fd-r90-light-border);
  background: rgba(255, 255, 255, 0.8);
  color: var(--fd-r90-light-text);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.94);
}

html[data-fd-theme="light"] .fd-alert-row small,
html[data-fd-theme="light"] .fd-alert-note,
html[data-fd-theme="light"] .fd-alert-station small,
html[data-fd-theme="light"] .fd-alert-station-section header small {
  color: var(--fd-r90-light-muted);
}

html[data-fd-theme="light"] .fd-alert-row select,
html[data-fd-theme="light"] .fd-alert-row input[type='time'],
html[data-fd-theme="light"] .fd-alert-row input[type='number'] {
  border-color: rgba(35, 35, 40, 0.13);
  background: #e5e5e9;
  color: #171719;
}

html[data-fd-theme="light"] .fd-alert-status[data-type='working'],
html[data-fd-theme="light"] .fd-alert-status[data-type='install'] {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] .fd-alert-status[data-type='success'] {
  border-color: rgba(36, 138, 61, 0.28);
  background: rgba(52, 199, 89, 0.1);
  color: #176e2e;
}

html[data-fd-theme="light"] .fd-alert-status[data-type='error'] {
  border-color: rgba(255, 59, 48, 0.28);
  background: rgba(255, 59, 48, 0.09);
  color: #a51e18;
}

html[data-fd-theme="light"] .fd-alert-enable {
  background: var(--fd-r90-red);
  color: #fff;
}

/* Feature pages in Lightmode. */
html[data-fd-theme="light"] .fd-feature-page {
  background:
    radial-gradient(circle at 10% 1%, rgba(255, 59, 48, 0.13), transparent 31%),
    radial-gradient(circle at 92% 62%, rgba(135, 135, 145, 0.13), transparent 34%),
    var(--fd-r90-light-bg);
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] .fd-feature-header {
  background: linear-gradient(180deg, rgba(242, 242, 245, 0.98) 76%, rgba(242, 242, 245, 0));
}

html[data-fd-theme="light"] .fd-feature-back {
  border-color: var(--fd-r90-light-border);
  background: rgba(255, 255, 255, 0.82);
  color: #202024;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 7px 18px rgba(55, 55, 62, 0.1);
}

html[data-fd-theme="light"] .fd-feature-heading p,
html[data-fd-theme="light"] .fd-feature-card > p,
html[data-fd-theme="light"] .fd-theme-choice__copy small,
html[data-fd-theme="light"] .fd-feature-note,
html[data-fd-theme="light"] .fd-field > span:first-child,
html[data-fd-theme="light"] .fd-tank-entry__head small,
html[data-fd-theme="light"] .fd-tank-entry > p,
html[data-fd-theme="light"] .fd-tank-empty,
html[data-fd-theme="light"] .fd-form-status {
  color: var(--fd-r90-light-muted);
}

html[data-fd-theme="light"] .fd-feature-card,
html[data-fd-theme="light"] .fd-theme-choice,
html[data-fd-theme="light"] .fd-tank-summary article,
html[data-fd-theme="light"] .fd-tank-entry {
  border-color: var(--fd-r90-light-border);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 227, 232, 0.8));
  color: var(--fd-r90-light-text);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 17px 38px rgba(55, 55, 62, 0.11);
}

html[data-fd-theme="light"] .fd-theme-choice {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] .fd-theme-choice__check {
  border-color: #77777d;
}

html[data-fd-theme="light"] .fd-theme-choice.is-selected .fd-theme-choice__check {
  border-color: var(--fd-r90-red);
}

html[data-fd-theme="light"] .fd-tank-summary small,
html[data-fd-theme="light"] .fd-tank-entry__values small,
html[data-fd-theme="light"] .fd-feature-card__head > span,
html[data-fd-theme="light"] .fd-tank-history__head > span {
  color: var(--fd-r90-light-muted);
}

html[data-fd-theme="light"] .fd-tank-summary strong,
html[data-fd-theme="light"] .fd-tank-entry__head h3,
html[data-fd-theme="light"] .fd-tank-entry__values strong,
html[data-fd-theme="light"] .fd-tank-empty strong {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] .fd-tank-summary article:last-child strong,
html[data-fd-theme="light"] .fd-tank-entry__values > span:last-child strong {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] .fd-feature-card__head > span,
html[data-fd-theme="light"] .fd-tank-history__head > span,
html[data-fd-theme="light"] .fd-tank-entry__values > span {
  border-color: rgba(35, 35, 40, 0.1);
  background: rgba(221, 221, 226, 0.56);
}

html[data-fd-theme="light"] .fd-field input,
html[data-fd-theme="light"] .fd-field select,
html[data-fd-theme="light"] .fd-field textarea {
  border-color: rgba(35, 35, 40, 0.13);
  background: rgba(238, 238, 242, 0.92);
  color: #171719;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}

html[data-fd-theme="light"] .fd-field input::placeholder,
html[data-fd-theme="light"] .fd-field textarea::placeholder {
  color: #85858b;
}

html[data-fd-theme="light"] .fd-field-affix b {
  color: #69696f;
}

html[data-fd-theme="light"] .fd-tank-delete {
  border: 0;
  background: transparent;
  color: #66666c;
  box-shadow: none;
}

html[data-fd-theme="light"] .fd-tank-empty {
  border-color: rgba(35, 35, 40, 0.14);
}

@media (min-width: 720px) {
  html[data-fd-theme="light"] body {
    background: var(--fd-r90-light-bg);
  }

  html[data-fd-theme="light"] #app .app-shell,
  html[data-fd-theme="light"] .fd-feature-shell {
    box-shadow: 0 0 0 1px rgba(35, 35, 40, 0.1), 0 28px 80px rgba(45, 45, 52, 0.16);
  }
}

@media (max-width: 370px) {
  .fd-feature-content,
  .fd-feature-header {
    padding-right: 15px;
    padding-left: 15px;
  }

  .fd-theme-choice {
    grid-template-columns: 78px minmax(0, 1fr) 20px;
    gap: 10px;
  }

  .fd-theme-preview {
    width: 78px;
  }

  .fd-tank-form {
    grid-template-columns: 1fr;
  }

  .fd-field-wide,
  .fd-form-status,
  .fd-tank-submit {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fd-feature-page {
    transition: none;
  }
}

/* R90 light-mode completeness pass for late legacy cascades. */
html[data-fd-theme="light"] #app .fd-best {
  border-color: var(--fd-r90-light-border);
  background: #f7f7f9;
  color: var(--fd-r90-light-text);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 18px 42px rgba(55, 55, 62, 0.14);
}

html[data-fd-theme="light"] #app .fd-best__map {
  background: #e4e4e8;
  opacity: 0.34;
}

html[data-fd-theme="light"] #app .fd-best::after {
  background:
    linear-gradient(90deg, rgba(250, 250, 252, 0.98) 0%, rgba(246, 246, 249, 0.88) 49%, rgba(246, 246, 249, 0.32) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(230, 230, 235, 0.2));
}

html[data-fd-theme="light"] #app .fd-best__label,
html[data-fd-theme="light"] #app .fd-best__station {
  color: #1a1a1d;
}

html[data-fd-theme="light"] #app .fd-best__meta,
html[data-fd-theme="light"] #app .fd-best__trend.is-steady,
html[data-fd-theme="light"] #app .fd-best__trend i {
  color: #66666d;
}

html[data-fd-theme="light"] #app .fd-best__chevron {
  stroke: #5f5f66;
}

html[data-fd-theme="light"] #app :where(
  .station-card,
  .detail-fuel,
  .detail-price-card,
  .search-suggestion-panel button,
  .primary-station-card > button,
  .primary-station-action,
  .primary-station-action.is-active,
  .map-location-control
) {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] #app .detail-fuel,
html[data-fd-theme="light"] #app .map-location-control {
  border-color: var(--fd-r90-light-border);
  background: rgba(245, 245, 248, 0.86);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.95);
}

html[data-fd-theme="light"] #app .primary-station-card > button > svg {
  stroke: #65656c;
}

html[data-fd-theme="light"] #app .primary-station-card__insights > div:first-child > small,
html[data-fd-theme="light"] #app .primary-station-card__insights > div:first-child > span,
html[data-fd-theme="light"] #app .primary-station-action small,
html[data-fd-theme="light"] #app .header-background-status,
html[data-fd-theme="light"] #app .search-suggestion-heading,
html[data-fd-theme="light"] #app .search-suggestion-status,
html[data-fd-theme="light"] #app .search-results-loading,
html[data-fd-theme="light"] #app .about-build small {
  color: var(--fd-r90-light-muted);
}

html[data-fd-theme="light"] #app .primary-station-card .primary-station-card__insights > div:first-child > h2 {
  color: var(--fd-r90-light-text);
}

html[data-fd-theme="light"] #app .primary-station-card.is-neutral .primary-station-card__insights > div:first-child > strong {
  color: #4d4d53 !important;
}

html[data-fd-theme="light"] #app .tab-stepper__controls button:disabled {
  color: #9a9aa0;
}

html[data-fd-theme="light"] #app .leaflet-tooltip {
  border-color: rgba(35, 35, 40, 0.14);
  background: rgba(255, 255, 255, 0.95);
  color: #1b1b1e;
  box-shadow: 0 8px 18px rgba(50, 50, 57, 0.13);
}

/* FuelDash R91 – light counterpart, fixed feature header, backups, statistics and cloud auth. */
:root {
  --fd-r91-light-bg: #f4f4f6;
  --fd-r91-light-surface: rgba(255, 255, 255, 0.84);
  --fd-r91-light-surface-strong: #ffffff;
  --fd-r91-light-border: rgba(28, 28, 31, 0.14);
  --fd-r91-light-text: #151517;
  --fd-r91-light-muted: #68686f;
}

/* Keep feature headers physically fixed. Only the content area scrolls. */
.fd-feature-page {
  overflow: hidden;
}

.fd-feature-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
}

.fd-feature-header {
  position: relative;
  top: auto;
  flex: 0 0 auto;
}

.fd-feature-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}

/* R91 removes the translucent rectangle and glow around the small red stepper handle. */
#app .tab-stepper__toggle,
html[data-fd-theme="light"] #app .tab-stepper__toggle {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app .tab-stepper__toggle > span,
html[data-fd-theme="light"] #app .tab-stepper__toggle > span {
  box-shadow: none !important;
}

/* New tankbook blocks. */
.fd-month-card,
.fd-cloud-card,
.fd-backup-card {
  margin-bottom: 14px;
}

.fd-month-head {
  align-items: center;
}

.fd-month-picker {
  flex: 0 0 auto;
}

.fd-month-picker input {
  width: 116px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  outline: none;
  background: rgba(7, 7, 9, 0.64);
  color: #fff;
  font: inherit;
  font-size: 10px;
}

.fd-month-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 15px;
}

.fd-month-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.fd-month-grid__wide {
  grid-column: 1 / -1;
}

.fd-month-grid small,
.fd-month-grid strong {
  display: block;
}

.fd-month-grid small {
  color: #89898f;
  font-size: 8px;
}

.fd-month-grid strong {
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.fd-month-grid article:nth-child(3) strong,
.fd-month-grid article:nth-child(4) strong {
  color: var(--fd-r90-red);
}

.fd-cloud-card > p,
.fd-backup-card > p {
  margin: 10px 0 0;
  color: #9b9ba1;
  font-size: 11px;
  line-height: 1.48;
}

.fd-auth-actions,
.fd-cloud-actions,
.fd-backup-actions {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.fd-auth-button,
.fd-cloud-actions button,
.fd-backup-actions button {
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  font: inherit;
}

.fd-auth-button {
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  font-size: 12px;
}

.fd-auth-button.is-apple {
  border-color: #fff;
  background: #fff;
  color: #050505;
}

.fd-auth-button.is-google {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.fd-auth-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 800;
}

.fd-cloud-footnote {
  display: block;
  margin-top: 10px;
  color: #7f7f85;
  font-size: 8px;
  line-height: 1.45;
}

.fd-cloud-account {
  font-weight: 650;
  word-break: break-word;
}

.fd-cloud-message {
  min-height: 15px;
}

.fd-cloud-message.is-success,
.fd-cloud-badge.is-success {
  color: #77d18d !important;
}

.fd-cloud-message.is-working,
.fd-cloud-badge.is-working {
  color: #d8b868 !important;
}

.fd-cloud-message.is-error,
.fd-cloud-badge.is-error {
  color: #ff7770 !important;
}

.fd-cloud-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}

.fd-cloud-actions button {
  justify-content: center;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  font-size: 10px;
  font-weight: 680;
}

.fd-cloud-actions button:first-child {
  border-color: rgba(255, 59, 48, 0.48);
  color: #ff6b62;
}

.fd-backup-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fd-backup-actions button {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 9px 6px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  text-align: center;
}

.fd-backup-actions button > span {
  color: var(--fd-r90-red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.fd-backup-actions button > strong {
  font-size: 8px;
  line-height: 1.25;
}

.fd-backup-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.fd-backup-status {
  min-height: 14px;
  margin: 9px 0 0;
  color: #8f8f95;
  font-size: 9px;
  line-height: 1.4;
}

.fd-backup-status[data-type="success"] {
  color: #77d18d;
}

.fd-backup-status[data-type="error"] {
  color: #ff7770;
}

/* The light theme is intentionally flat and endless: no red haze, glow or gradient. */
html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
body[data-fd-theme="light"] {
  min-height: 100%;
  background-color: var(--fd-r91-light-bg) !important;
  background-image: none !important;
  background-attachment: scroll !important;
  color: var(--fd-r91-light-text);
}

html[data-fd-theme="light"] body {
  background: var(--fd-r91-light-bg) !important;
}

html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content,
html[data-fd-theme="light"] #app .detail-view,
html[data-fd-theme="light"] .fd-fast-shell {
  background-color: var(--fd-r91-light-bg) !important;
  background-image: none !important;
}

html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-content {
  background: var(--fd-r91-light-bg) !important;
  color: var(--fd-r91-light-text);
}

html[data-fd-theme="light"] .fd-feature-header {
  border-bottom: 1px solid rgba(28, 28, 31, 0.08);
  background: var(--fd-r91-light-bg) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Selected fuel and radius choices mirror the dark theme's strong red state. */
html[data-fd-theme="light"] #app :where(
  .fuel-preference button.is-active,
  .nearby-radius button.is-active
) {
  border-color: var(--fd-r90-red) !important;
  background: var(--fd-r90-red) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html[data-fd-theme="light"] #app :where(
  .fuel-preference button.is-active > span,
  .fuel-preference button.is-active > strong,
  .nearby-radius button.is-active > span,
  .nearby-radius button.is-active > strong
) {
  color: #fff !important;
}

/* Remaining choice groups retain a restrained tint to preserve their existing hierarchy. */
html[data-fd-theme="light"] #app :where(
  .chart-range button.is-active,
  .fuel-filter button.is-active,
  .station-sort button.is-active,
  .search-availability-filter button.is-active,
  .detail-price-card.is-selected
) {
  border-color: rgba(255, 59, 48, 0.66);
  background: rgba(255, 59, 48, 0.12);
  color: var(--fd-r91-light-text);
}

html[data-fd-theme="light"] .fd-feature-card,
html[data-fd-theme="light"] .fd-theme-choice,
html[data-fd-theme="light"] .fd-tank-summary article,
html[data-fd-theme="light"] .fd-tank-entry {
  border-color: var(--fd-r91-light-border);
  background: var(--fd-r91-light-surface) !important;
  color: var(--fd-r91-light-text);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 12px 30px rgba(45, 45, 52, 0.09);
}

html[data-fd-theme="light"] #app :where(
  .glass-card,
  .price-hero,
  .station-card,
  .result-list .station-card,
  .detail-card,
  .detail-price,
  .detail-chart,
  .detail-prices,
  .menu-card,
  .fuel-map,
  .search-field,
  .primary-station-card,
  .route-chooser,
  .search-suggestion-panel,
  .detail-history-status,
  .tab-stepper__controls
) {
  border-color: var(--fd-r91-light-border) !important;
  background: var(--fd-r91-light-surface) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 12px 30px rgba(45, 45, 52, 0.09) !important;
}

html[data-fd-theme="light"] .fd-month-picker input,
html[data-fd-theme="light"] .fd-field input,
html[data-fd-theme="light"] .fd-field select,
html[data-fd-theme="light"] .fd-field textarea {
  border-color: rgba(28, 28, 31, 0.14);
  background: #eeeef1;
  color: var(--fd-r91-light-text);
}

html[data-fd-theme="light"] .fd-month-grid article,
html[data-fd-theme="light"] .fd-feature-card__head > span,
html[data-fd-theme="light"] .fd-tank-history__head > span,
html[data-fd-theme="light"] .fd-tank-entry__values > span {
  border-color: rgba(28, 28, 31, 0.1);
  background: rgba(228, 228, 232, 0.72);
}

html[data-fd-theme="light"] .fd-month-grid strong,
html[data-fd-theme="light"] .fd-cloud-actions button,
html[data-fd-theme="light"] .fd-backup-actions button {
  color: var(--fd-r91-light-text);
}

html[data-fd-theme="light"] .fd-month-grid small,
html[data-fd-theme="light"] .fd-cloud-card > p,
html[data-fd-theme="light"] .fd-backup-card > p,
html[data-fd-theme="light"] .fd-cloud-footnote,
html[data-fd-theme="light"] .fd-backup-status {
  color: var(--fd-r91-light-muted);
}

html[data-fd-theme="light"] .fd-auth-button.is-apple {
  border-color: #151517;
  background: #151517;
  color: #fff;
}

html[data-fd-theme="light"] .fd-auth-button.is-google,
html[data-fd-theme="light"] .fd-cloud-actions button,
html[data-fd-theme="light"] .fd-backup-actions button {
  border-color: rgba(28, 28, 31, 0.14);
  background: rgba(235, 235, 239, 0.92);
  box-shadow: none;
}

html[data-fd-theme="light"] .fd-cloud-actions button:first-child {
  border-color: rgba(255, 59, 48, 0.55);
  color: #c52b23;
}

html[data-fd-theme="light"] .fd-backup-actions button > span {
  color: var(--fd-r90-red);
}

html[data-fd-theme="light"] .fd-cloud-message.is-success,
html[data-fd-theme="light"] .fd-cloud-badge.is-success,
html[data-fd-theme="light"] .fd-backup-status[data-type="success"] {
  color: #1c7b37 !important;
}

html[data-fd-theme="light"] .fd-cloud-message.is-working,
html[data-fd-theme="light"] .fd-cloud-badge.is-working {
  color: #8b650b !important;
}

html[data-fd-theme="light"] .fd-cloud-message.is-error,
html[data-fd-theme="light"] .fd-cloud-badge.is-error,
html[data-fd-theme="light"] .fd-backup-status[data-type="error"] {
  color: #aa211b !important;
}

html[data-fd-theme="light"] #app .fuel-tab-bar {
  background: rgba(255, 255, 255, 0.9) !important;
}

html[data-fd-theme="light"] #app .tab-stepper__controls {
  background: rgba(255, 255, 255, 0.94) !important;
}

@media (max-width: 370px) {
  .fd-backup-actions {
    grid-template-columns: 1fr;
  }

  .fd-cloud-actions {
    grid-template-columns: 1fr;
  }

  .fd-month-picker input {
    width: 108px;
  }
}

/* FuelDash R92 – username/password account UI. */
.fd-auth-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 15px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.fd-auth-switch button {
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8f8f95;
  font: inherit;
  font-size: 10px;
  font-weight: 720;
}

.fd-auth-switch button.is-active {
  background: var(--fd-r90-red);
  color: #fff;
  box-shadow: 0 7px 18px rgba(255, 59, 48, 0.18);
}

.fd-auth-form {
  display: grid;
  gap: 11px;
  margin-top: 15px;
}

.fd-auth-form > label {
  display: grid;
  gap: 6px;
}

.fd-auth-form > label > span {
  color: #a4a4aa;
  font-size: 9px;
  font-weight: 650;
}

.fd-auth-form > label > small {
  color: #74747b;
  font-size: 8px;
  line-height: 1.4;
}

.fd-auth-form input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  outline: none;
  background: rgba(7, 7, 9, 0.64);
  color: #fff;
  font: inherit;
  font-size: 12px;
}

.fd-auth-form input:focus {
  border-color: rgba(255, 59, 48, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12);
}

.fd-auth-form input[aria-invalid='true'] {
  border-color: rgba(255, 89, 81, 0.9);
}

.fd-auth-form-status {
  min-height: 15px;
  margin: 0;
  color: #85858c;
  font-size: 9px;
  line-height: 1.45;
}

.fd-auth-form-status[data-type='success'] {
  color: #77d18d;
}

.fd-auth-form-status[data-type='working'] {
  color: #d8b868;
}

.fd-auth-form-status[data-type='error'] {
  color: #ff7770;
}

.fd-auth-primary {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--fd-r90-red);
  border-radius: 14px;
  background: var(--fd-r90-red);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  box-shadow: 0 10px 22px rgba(255, 59, 48, 0.18);
}

.fd-auth-link {
  justify-self: center;
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: #ff6b62;
  font: inherit;
  font-size: 9px;
  font-weight: 680;
}

.fd-auth-explanation {
  margin: 0;
  color: #96969d;
  font-size: 10px;
  line-height: 1.5;
}

html[data-fd-theme='light'] .fd-auth-switch {
  border-color: rgba(28, 28, 31, 0.12);
  background: rgba(228, 228, 232, 0.76);
}

html[data-fd-theme='light'] .fd-auth-switch button {
  color: #66666d;
}

html[data-fd-theme='light'] .fd-auth-switch button.is-active {
  background: var(--fd-r90-red);
  color: #fff;
}

html[data-fd-theme='light'] .fd-auth-form > label > span {
  color: #4f4f55;
}

html[data-fd-theme='light'] .fd-auth-form > label > small,
html[data-fd-theme='light'] .fd-auth-explanation {
  color: var(--fd-r91-light-muted);
}

html[data-fd-theme='light'] .fd-auth-form input {
  border-color: rgba(28, 28, 31, 0.14);
  background: #eeeef1;
  color: var(--fd-r91-light-text);
}

html[data-fd-theme='light'] .fd-auth-form-status[data-type='success'] {
  color: #1c7b37;
}

html[data-fd-theme='light'] .fd-auth-form-status[data-type='working'] {
  color: #8b650b;
}

html[data-fd-theme='light'] .fd-auth-form-status[data-type='error'] {
  color: #aa211b;
}

html[data-fd-theme='light'] .fd-auth-link {
  color: #c52b23;
}

/* FuelDash R94: narrowly scoped stabilization layer. No global typography/control overrides. */
:root {
  --fd-r94-light-bg: #f5f5f7;
  --fd-r94-surface: rgba(255,255,255,.94);
  --fd-r94-surface-soft: rgba(255,255,255,.78);
  --fd-r94-border: rgba(28,28,32,.12);
  --fd-r94-border-strong: rgba(28,28,32,.18);
  --fd-r94-text: #151517;
  --fd-r94-muted: #66666d;
  --fd-r94-red: #ff3b30;
}

html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content,
html[data-fd-theme="light"] #app .detail-view,
html[data-fd-theme="light"] .fd-feature-page {
  background-color: var(--fd-r94-light-bg) !important;
  background-image: none !important;
}

html[data-fd-theme="light"] body::before,
html[data-fd-theme="light"] body::after,
html[data-fd-theme="light"] #app::before,
html[data-fd-theme="light"] #app::after,
html[data-fd-theme="light"] #app .app-shell::before,
html[data-fd-theme="light"] #app .app-shell::after,
html[data-fd-theme="light"] #app .app-content::before,
html[data-fd-theme="light"] #app .app-content::after,
html[data-fd-theme="light"] .fd-feature-page::before,
html[data-fd-theme="light"] .fd-feature-page::after {
  content: none !important;
  display: none !important;
}

/* Preserve component typography; only set copy where a component was explicitly dark-themed. */
html[data-fd-theme="light"] #app .brand-wordmark span,
html[data-fd-theme="light"] #app .screen-title,
html[data-fd-theme="light"] #app .station-name,
html[data-fd-theme="light"] #app .station-copy strong,
html[data-fd-theme="light"] #app .detail-title,
html[data-fd-theme="light"] #app .menu-card button span {
  color: var(--fd-r94-text) !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] #app .brand-wordmark strong { color: var(--fd-r94-red) !important; }
html[data-fd-theme="light"] #app .screen-lead,
html[data-fd-theme="light"] #app .station-location,
html[data-fd-theme="light"] #app .station-copy small,
html[data-fd-theme="light"] #app .detail-subtitle {
  color: var(--fd-r94-muted) !important;
}

/* Consistent light glass surfaces. */
html[data-fd-theme="light"] #app :where(
  .glass-card,.price-hero,.station-card,.station-result,.dashboard-favorite-card,
  .favorites-screen-card,.menu-card,.fuel-preference,.nearby-radius,.detail-card,
  .detail-price-card,.route-options,.search-suggestion-panel,.primary-station-card,
  .recommendation-card,.history-card,.chart-block
) {
  background: var(--fd-r94-surface) !important;
  background-image: none !important;
  border-color: var(--fd-r94-border) !important;
  box-shadow: 0 10px 28px rgba(18,18,22,.055), inset 0 1px rgba(255,255,255,.9) !important;
}

/* Search/results: no text shimmer, no dark outline. */
html[data-fd-theme="light"] #app .search-field,
html[data-fd-theme="light"] #app .result-list :where(.station-card,.station-result) {
  background: var(--fd-r94-surface) !important;
  background-image: none !important;
  border: 1px solid var(--fd-r94-border) !important;
  box-shadow: 0 8px 24px rgba(18,18,22,.05) !important;
}
html[data-fd-theme="light"] #app .search-field input {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--fd-r94-text) !important;
}
html[data-fd-theme="light"] #app .station-detail-link {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  border: 0 !important;
}

/* Closed-station row stays transparent; only checkbox is colored. */
html[data-fd-theme="light"] #app .search-availability-filter,
html[data-fd-theme="light"] #app .search-availability-filter button,
html[data-fd-theme="light"] #app .closed-stations-filter,
html[data-fd-theme="light"] #app .closed-stations-filter label {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app .search-availability-filter button {
  color: var(--fd-r94-text) !important;
  border: 0 !important;
}

/* Active segmented controls. Scope each component; never style every .is-active button. */
html[data-fd-theme="light"] #app :where(
 .fuel-preference,.nearby-radius,.fuel-filter,.station-sort,.chart-range,.favorites-filter,.favorite-filter
) button {
  background: rgba(255,255,255,.82) !important;
  color: #4f4f56 !important;
  border: 1px solid var(--fd-r94-border-strong) !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app :where(
 .fuel-preference,.nearby-radius,.fuel-filter,.station-sort,.chart-range,.favorites-filter,.favorite-filter
) button:is(.is-active,[aria-pressed="true"],[aria-selected="true"]) {
  background: var(--fd-r94-red) !important;
  color: #fff !important;
  border-color: var(--fd-r94-red) !important;
}

/* Readable map markers. */
#app .map-price-marker,
#app .map-price-marker * {
  color: #fff !important;
  text-shadow: none !important;
}
#app .map-price-marker {
  background: rgba(78,20,20,.96) !important;
  border-color: rgba(255,116,108,.95) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.38) !important;
}
#app .map-price-marker.is-selected { background: var(--fd-r94-red) !important; }

/* Remove the translucent box around the nav step indicator only. */
#app :where(.tab-stepper,.tab-stepper__toggle) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
#app .tab-stepper__toggle span { background: var(--fd-r94-red) !important; box-shadow: none !important; }

/* Feature pages and tankbook: vertical-only, compact controls, no oversized buttons. */
.fd-feature-page,
.fd-feature-shell,
.fd-feature-content,
.fd-tankbook-layout,
.fd-tank-form,
.fd-tank-history,
.fd-tank-entry-list {
  max-width: 100%;
  overflow-x: hidden !important;
}
.fd-feature-page { overscroll-behavior-x: none; }
.fd-feature-content { box-sizing: border-box; }
.fd-tankbook-layout { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.fd-tankbook-layout [data-fd-tank-form] { order: -20; }
.fd-tankbook-layout [data-fd-month-summary] { order: -10; }
.fd-tankbook-layout .fd-tank-summary { order: 0; }
.fd-tankbook-layout .fd-tank-history { order: 10; }

.fd-feature-page button,
.fd-account-sheet button {
  min-height: 0;
  max-width: 100%;
}
.fd-tank-form button[type="submit"],
.fd-auth-primary,
.fd-account-card > button,
.fd-backup-actions button {
  width: 100%;
  min-height: 44px !important;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}
.fd-backup-actions {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 9px !important;
}
.fd-backup-actions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
html[data-fd-theme="light"] .fd-feature-page :where(.fd-feature-card,.fd-tank-summary article,.fd-month-grid article,.fd-tank-entry,.fd-tank-history,.fd-theme-choice,.fd-account-card) {
  background: var(--fd-r94-surface) !important;
  background-image: none !important;
  border-color: var(--fd-r94-border) !important;
  box-shadow: 0 9px 26px rgba(18,18,22,.055), inset 0 1px rgba(255,255,255,.9) !important;
}
html[data-fd-theme="light"] .fd-feature-page :where(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input) {
  color: var(--fd-r94-text) !important;
  background: rgba(255,255,255,.88) !important;
  background-image: none !important;
  border-color: var(--fd-r94-border-strong) !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-feature-page :where(.fd-feature-heading h1,.fd-feature-card h2,.fd-theme-choice strong,.fd-tank-entry strong,.fd-tank-summary strong,.fd-month-grid strong) {
  color: var(--fd-r94-text) !important;
}
html[data-fd-theme="light"] .fd-feature-page :where(.fd-feature-heading p,.fd-feature-card p,.fd-theme-choice small,.fd-tank-entry p,.fd-tank-entry small,.fd-tank-summary small,.fd-month-grid small) {
  color: var(--fd-r94-muted) !important;
}

@media (max-width: 390px) {
  .fd-backup-actions { grid-template-columns: 1fr !important; }
  .fd-backup-actions button { grid-column: auto !important; }
}

/* ===== assets/r96-component-polish.css ===== */
/* FuelDash R96 — final component-scoped continuity layer. */
:root {
  --fd-r96-dark-bg: #050505;
  --fd-r96-light-bg: #f5f5f7;
  --fd-r96-light-card: rgba(255, 255, 255, 0.96);
  --fd-r96-light-control: #f0f0f3;
  --fd-r96-light-control-hover: #e9e9ed;
  --fd-r96-light-border: #d3d3d9;
  --fd-r96-light-text: #151517;
  --fd-r96-light-muted: #66666d;
  --fd-r96-red: #ff3b30;
  --fd-r96-card-radius: 24px;
  --fd-r96-control-radius: 16px;
  --fd-r96-surface-gap: 16px;
}

html,
body,
#app,
.app-shell {
  min-height: 100%;
  background-color: var(--fd-page-bg, var(--fd-r96-dark-bg)) !important;
}

html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body,
html[data-fd-theme="dark"] #app,
html[data-fd-theme="dark"] .app-shell,
html[data-fd-theme="dark"] .fd-feature-page,
html[data-fd-theme="dark"] .fd-feature-shell,
html[data-fd-theme="dark"] .fd-feature-content {
  background-color: var(--fd-r96-dark-bg) !important;
}

html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] .app-shell,
html[data-fd-theme="light"] .app-content,
html[data-fd-theme="light"] .detail-view,
html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-content {
  background-color: var(--fd-r96-light-bg) !important;
  background-image: none !important;
}

/* Extend the feature background beyond the visual viewport edges. */
.fd-feature-page {
  inset: -1px 0 !important;
  min-height: calc(100dvh + 2px);
  overscroll-behavior: none;
}
.fd-feature-page::before,
.fd-feature-page::after {
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  height: 120px;
  content: "";
  background: inherit;
  pointer-events: none;
}
.fd-feature-page::before { top: -120px; }
.fd-feature-page::after { bottom: -120px; }

.fd-feature-header {
  background: var(--fd-page-bg, var(--fd-r96-dark-bg)) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-feature-header {
  border-bottom: 1px solid rgba(28, 28, 32, 0.08) !important;
}

/* True visually-hidden utility; prevents the month label from widening the layout. */
.fd-feature-page .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Detail view: one visual control family, based on the accepted route button. */
html[data-fd-theme="light"] #app .detail-view :where(
  .primary-station-action,
  .station-route .route-trigger
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 11px 16px !important;
  border: 1px solid var(--fd-r96-light-border) !important;
  border-radius: 18px !important;
  background: var(--fd-r96-light-control) !important;
  background-image: none !important;
  color: #4f4f56 !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-fd-theme="light"] #app .detail-view .primary-station-action {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
}
html[data-fd-theme="light"] #app .detail-view .primary-station-action :where(strong, small) {
  color: #4f4f56 !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] #app .detail-view .station-route .route-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 680 !important;
}
html[data-fd-theme="light"] #app .detail-view :where(.station-route, .route-chooser) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app .detail-view .station-route {
  margin-top: 12px !important;
}
html[data-fd-theme="light"] #app .detail-view :where(.detail-favorite, .detail-header .round-button) {
  border: 1px solid var(--fd-r96-light-border) !important;
  background: var(--fd-r96-light-control) !important;
  background-image: none !important;
  color: #55555c !important;
  box-shadow: none !important;
}

/* Convert the dark tile source into a genuinely light neutral map only in detail view. */
html[data-fd-theme="light"] #app .detail-view .station-mini-map .leaflet-container {
  background: #ececef !important;
}
html[data-fd-theme="light"] #app .detail-view .station-mini-map .leaflet-tile-pane {
  filter: invert(0.92) grayscale(1) saturate(0.12) brightness(1.14) contrast(0.78) !important;
}
html[data-fd-theme="light"] #app .detail-view .station-mini-map :where(.leaflet-control-attribution, .leaflet-control-attribution a) {
  color: #55555d !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

/* Tankbook: one vertical rhythm and no horizontal overflow. */
.fd-feature-page[data-fd-feature-view="tankbook"],
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fd-r96-surface-gap) !important;
  box-sizing: border-box !important;
  padding: 16px 20px calc(34px + env(safe-area-inset-bottom)) !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content > * {
  flex: 0 0 auto;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-feature-card,
  .fd-tank-history
) {
  overflow: hidden !important;
  border-radius: var(--fd-r96-card-radius) !important;
  padding: 18px !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-feature-card,
  .fd-tank-history,
  .fd-tank-summary article,
  .fd-month-grid article,
  .fd-tank-entry
) {
  border: 1px solid var(--fd-r96-light-border) !important;
  background: var(--fd-r96-light-card) !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(20, 20, 24, 0.055) !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-summary article {
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 16px !important;
  border-radius: 20px !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 12px !important;
  margin-top: 16px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] :where(.fd-field, .fd-field-affix, .fd-tank-extras, .fd-tank-extras > div) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras {
  grid-column: 1 / -1 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 12px !important;
  padding-top: 14px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras .fd-field:last-child {
  grid-column: 1 / -1 !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-field input,
  .fd-field select,
  .fd-field textarea,
  .fd-month-picker input,
  .fd-auth-form input
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: var(--fd-r96-control-radius) !important;
  box-shadow: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] :where(.fd-field input, .fd-field select, .fd-month-picker input, .fd-auth-form input) {
  min-height: 48px !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-field input,
  .fd-field select,
  .fd-field textarea,
  .fd-month-picker input,
  .fd-auth-form input
) {
  border: 1px solid var(--fd-r96-light-border) !important;
  background: #f6f6f8 !important;
  background-image: none !important;
  color: var(--fd-r96-light-text) !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-picker {
  display: block !important;
  min-width: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-picker input {
  width: 132px !important;
  padding: 0 10px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-grid {
  gap: 10px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-grid article {
  border-radius: 16px !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-history__head {
  padding: 0 0 14px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty {
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: 18px !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-tank-submit,
  .fd-auth-primary,
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-account-card > button
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: var(--fd-r96-control-radius) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button {
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 64px !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-backup-actions button,
  .fd-account-card > button,
  .fd-auth-secondary
) {
  border: 1px solid var(--fd-r96-light-border) !important;
  background: var(--fd-r96-light-control) !important;
  background-image: none !important;
  color: var(--fd-r96-light-text) !important;
  box-shadow: none !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card > button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  text-align: left !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card > button > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card > button > strong {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(127, 127, 135, 0.1) !important;
  color: var(--fd-r96-light-muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

@media (max-width: 370px) {
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form,
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div,
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
    grid-template-columns: 1fr !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-picker input {
    width: 100% !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ===== assets/r97-component-polish.css ===== */
/* FuelDash R97 — final scoped Lightmode polish. Darkmode remains untouched. */
:root {
  --fd-r97-page-bg: #f5f5f7;
  --fd-r97-surface: #ffffff;
  --fd-r97-control: #f0f0f3;
  --fd-r97-control-border: #d4d4da;
  --fd-r97-divider: #d8d8dd;
  --fd-r97-text: #171719;
  --fd-r97-muted: #74747b;
  --fd-r97-red: #ff3b30;
}

/* One uninterrupted page surface, including overscroll and the area behind navigation. */
html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content,
html[data-fd-theme="light"] #app .detail-view,
html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-content {
  background-color: var(--fd-r97-page-bg) !important;
  background-image: none !important;
}

html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell {
  min-height: 100dvh !important;
}

html[data-fd-theme="light"] body::before,
html[data-fd-theme="light"] body::after,
html[data-fd-theme="light"] #app::before,
html[data-fd-theme="light"] #app::after,
html[data-fd-theme="light"] #app .app-shell::before,
html[data-fd-theme="light"] #app .app-shell::after,
html[data-fd-theme="light"] #app .app-content::before,
html[data-fd-theme="light"] #app .app-content::after,
html[data-fd-theme="light"] #app .fuel-tab-bar::before,
html[data-fd-theme="light"] #app .fuel-tab-bar::after {
  content: none !important;
  display: none !important;
}

/* Safari's fixed glass navigation must not create a rectangular haze behind itself. */
html[data-fd-theme="light"] #app .fuel-tab-bar {
  border-color: var(--fd-r97-control-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* One secondary-control family. Route is intentionally flatter than R96. */
html[data-fd-theme="light"] #app :where(
  .detail-view .primary-station-action,
  .detail-view .station-route .route-trigger,
  .detail-view .refresh-pill,
  .detail-view .map-location-button,
  .detail-view .round-button
) {
  box-sizing: border-box !important;
  min-height: 44px !important;
  padding: 9px 14px !important;
  border: 1px solid var(--fd-r97-control-border) !important;
  border-radius: 16px !important;
  background: var(--fd-r97-control) !important;
  background-image: none !important;
  color: #505057 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app .detail-view .primary-station-action {
  width: 100% !important;
}

html[data-fd-theme="light"] #app .detail-view .primary-station-action :where(strong, small) {
  color: #505057 !important;
  text-shadow: none !important;
}

html[data-fd-theme="light"] #app .detail-view .station-route {
  margin-top: 10px !important;
}

html[data-fd-theme="light"] #app .detail-view :where(.station-route, .route-chooser) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* All inactive segmented controls use the same neutral fill; selected stays red. */
html[data-fd-theme="light"] #app :where(
  .fuel-preference,
  .nearby-radius,
  .fuel-filter,
  .station-sort,
  .favorites-filter,
  .favorite-filter,
  .chart-range
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html[data-fd-theme="light"] #app .chart-range {
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

html[data-fd-theme="light"] #app :where(
  .fuel-preference,
  .nearby-radius,
  .fuel-filter,
  .station-sort,
  .favorites-filter,
  .favorite-filter,
  .chart-range
) button {
  border: 1px solid var(--fd-r97-control-border) !important;
  background: var(--fd-r97-control) !important;
  background-image: none !important;
  color: #505057 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app :where(
  .fuel-preference,
  .nearby-radius,
  .fuel-filter,
  .station-sort,
  .favorites-filter,
  .favorite-filter,
  .chart-range
) button:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) {
  border-color: var(--fd-r97-red) !important;
  background: var(--fd-r97-red) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Recommendation facts and chart readout are calm information surfaces, not floating buttons. */
html[data-fd-theme="light"] #app .primary-station-card__facts > span,
html[data-fd-theme="light"] #app .chart-selection-readout {
  border: 1px solid var(--fd-r97-control-border) !important;
  background: var(--fd-r97-control) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app .primary-station-card__facts > span :where(small, b) {
  text-shadow: none !important;
}

html[data-fd-theme="light"] #app .primary-station-card__facts > span small {
  color: var(--fd-r97-muted) !important;
}

html[data-fd-theme="light"] #app .primary-station-card__facts > span b {
  color: var(--fd-r97-text) !important;
}

html[data-fd-theme="light"] #app .detail-advice-card,
html[data-fd-theme="light"] #app .detail-chart {
  box-shadow: none !important;
}

/* Search and detail maps share the same genuinely light neutral tile treatment. */
html[data-fd-theme="light"] #app :where(
  [data-search-map] .fuel-map,
  .station-mini-map .fuel-map,
  .detail-map .fuel-map
) .leaflet-container {
  background: #ececef !important;
}

html[data-fd-theme="light"] #app :where(
  [data-search-map] .fuel-map,
  .station-mini-map .fuel-map,
  .detail-map .fuel-map
) .leaflet-tile-pane {
  filter: invert(0.92) grayscale(1) saturate(0.12) brightness(1.14) contrast(0.78) !important;
}

html[data-fd-theme="light"] #app [data-search-map] .fuel-map {
  border-color: var(--fd-r97-control-border) !important;
  background: #ececef !important;
  box-shadow: none !important;
}

/* Opening hours are plain copy, never a gray plate over the status. */
html[data-fd-theme="light"] #app .station-opening-hours,
html[data-fd-theme="light"] #app .station-opening-hours > span {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app .station-opening-hours :where(b, em) {
  color: #626269 !important;
  text-shadow: none !important;
}

/* Price divider and both timestamps use one quiet hierarchy. */
html[data-fd-theme="light"] #app .detail-freshness {
  border-top: 1px solid var(--fd-r97-divider) !important;
}

html[data-fd-theme="light"] #app .freshness-copy,
html[data-fd-theme="light"] #app .freshness-copy span,
html[data-fd-theme="light"] #app .freshness-copy [data-valid-since],
html[data-fd-theme="light"] #app .freshness-copy [data-fetched-at] {
  color: var(--fd-r97-muted) !important;
  text-shadow: none !important;
}

/* Dashboard hero: retain the map, remove the heavy dark/glass veil. */
html[data-fd-theme="light"] #app .hero-card-wrap {
  border-color: var(--fd-r97-control-border) !important;
  background: #ececef !important;
  box-shadow: 0 4px 14px rgba(30, 30, 36, 0.05) !important;
}

html[data-fd-theme="light"] #app .hero-map-layer {
  opacity: 0.9 !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app .hero-map-layer::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

html[data-fd-theme="light"] #app .hero-map-layer .fuel-map {
  border: 0 !important;
  background: #ececef !important;
  box-shadow: none !important;
}

html[data-fd-theme="light"] #app .hero-map-layer .leaflet-tile-pane {
  filter: invert(0.92) grayscale(1) saturate(0.12) brightness(1.14) contrast(0.78) !important;
}

html[data-fd-theme="light"] #app .price-hero {
  border-color: rgba(28, 28, 32, 0.1) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Match the legacy detail specificity so the compact height wins the important cascade. */
html[data-fd-theme="light"] #app .detail-view .primary-station-action,
html[data-fd-theme="light"] #app .detail-view .station-route .route-trigger {
  min-height: 44px !important;
}

/* Equalize search and detail tile treatment at the same specificity as R96. */
html[data-fd-theme="light"] #app [data-search-map] .fuel-map .leaflet-tile-pane,
html[data-fd-theme="light"] #app .detail-view .station-mini-map .leaflet-tile-pane,
html[data-fd-theme="light"] #app .detail-view .detail-map .leaflet-tile-pane {
  filter: invert(0.92) grayscale(1) saturate(0.12) brightness(1.14) contrast(0.78) !important;
}

/* ===== assets/r98-component-consistency.css ===== */
/* FuelDash R98 — scoped consistency layer loaded after R97. */
:root {
  --fd-r98-page: #f5f5f7;
  --fd-r98-map: #ececef;
  --fd-r98-surface: #ffffff;
  --fd-r98-control: #f1f1f4;
  --fd-r98-control-soft: #f7f7f9;
  --fd-r98-border: #d4d4da;
  --fd-r98-text: #171719;
  --fd-r98-muted: #74747b;
  --fd-r98-red: #ff3b30;
}

/* Exact light PWA/page surface. System chrome receives the same theme color from R98 JS. */
html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content {
  background-color: var(--fd-r98-page) !important;
  background-image: none !important;
}
html[data-fd-theme="light"] #app .brand-header {
  background: var(--fd-r98-page) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Dashboard best-price map now matches the light detail map instead of a dark glass hero. */
html[data-fd-theme="light"] #app .fd-best {
  border-color: var(--fd-r98-border) !important;
  background: var(--fd-r98-map) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 5px 16px rgba(24, 24, 28, .055) !important;
}
html[data-fd-theme="light"] #app .fd-best__map {
  background: var(--fd-r98-map) !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-fd-theme="light"] #app .fd-best__map .leaflet-container {
  background: var(--fd-r98-map) !important;
}
html[data-fd-theme="light"] #app .fd-best__map .leaflet-tile-pane,
html[data-fd-theme="light"] #app .detail-map .leaflet-tile-pane,
html[data-fd-theme="light"] #app .station-mini-map .leaflet-tile-pane {
  filter: invert(.92) grayscale(1) saturate(.12) brightness(1.14) contrast(.78) !important;
}
html[data-fd-theme="light"] #app .fd-best::after {
  display: block !important;
  content: "" !important;
  background: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 52%, rgba(255,255,255,.10) 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme="light"] #app .fd-best__label,
html[data-fd-theme="light"] #app .fd-best__station {
  color: var(--fd-r98-text) !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] #app .fd-best__meta,
html[data-fd-theme="light"] #app .fd-best__trend,
html[data-fd-theme="light"] #app .fd-best__trend i,
html[data-fd-theme="light"] #app .fd-best__chevron {
  color: var(--fd-r98-muted) !important;
  text-shadow: none !important;
}

/* Search sorting: light parent surface and consistent button family. */
html[data-fd-theme="light"] #app .station-sort {
  padding: 4px !important;
  border: 1px solid var(--fd-r98-border) !important;
  border-radius: 18px !important;
  background: var(--fd-r98-control-soft) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app .station-sort button {
  min-height: 42px !important;
  border: 1px solid var(--fd-r98-border) !important;
  border-radius: 14px !important;
  background: var(--fd-r98-surface) !important;
  color: #4f4f56 !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app .station-sort button:is(.is-active,[aria-pressed="true"],[aria-selected="true"]) {
  border-color: var(--fd-r98-red) !important;
  background: var(--fd-r98-red) !important;
  color: #fff !important;
}

/* More-menu values use the same thin hierarchy as “Aktiv”. */
#app .menu-card button em {
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
#app .menu-card button.about-build em { font-weight: 400 !important; }

/* Appearance and Tankbook: header is outside the scroll container. */
.fd-feature-page {
  overflow: hidden !important;
}
.fd-feature-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.fd-feature-header {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto !important;
  z-index: 20 !important;
}
.fd-feature-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
html[data-fd-theme="light"] .fd-feature-header {
  background: var(--fd-r98-page) !important;
  border-bottom: 1px solid rgba(28,28,32,.08) !important;
  box-shadow: none !important;
}

/* Price alerts keep a physically fixed header and receive the light surface language. */
.fd-alert-head { position: fixed !important; }
html[data-fd-theme="light"] .fd-alert-modal {
  background: var(--fd-r98-page) !important;
  color: var(--fd-r98-text) !important;
}
html[data-fd-theme="light"] .fd-alert-head {
  background: var(--fd-r98-page) !important;
  border-bottom-color: rgba(28,28,32,.08) !important;
  color: var(--fd-r98-text) !important;
}
html[data-fd-theme="light"] .fd-alert-close,
html[data-fd-theme="light"] .fd-alert-row,
html[data-fd-theme="light"] .fd-alert-station,
html[data-fd-theme="light"] .fd-alert-empty,
html[data-fd-theme="light"] .fd-alert-status {
  border-color: var(--fd-r98-border) !important;
  background: var(--fd-r98-surface) !important;
  color: var(--fd-r98-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-alert-row :where(small),
html[data-fd-theme="light"] .fd-alert-station small,
html[data-fd-theme="light"] .fd-alert-note { color: var(--fd-r98-muted) !important; }
html[data-fd-theme="light"] .fd-alert-row :where(select,input[type="time"],input[type="number"]) {
  border-color: var(--fd-r98-border) !important;
  background: var(--fd-r98-control-soft) !important;
  color: var(--fd-r98-text) !important;
}

/* Tankbook cloud card and account dialog. */
.fd-account-card {
  display: grid !important;
  gap: 16px !important;
  border-radius: 24px !important;
  padding: 20px !important;
}
.fd-account-card__copy { min-width: 0; }
.fd-account-card__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fd-account-card__eyebrow > small {
  color: var(--fd-r98-red) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
}
.fd-account-card__eyebrow > span {
  flex: 0 0 auto;
  color: var(--fd-r98-muted);
  font-size: 10px;
  font-weight: 400;
}
.fd-account-card h2 { margin: 7px 0 0 !important; }
.fd-account-card p { margin: 10px 0 0 !important; line-height: 1.5 !important; }
.fd-account-card > button,
.fd-account-card__action {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 14px !important;
  border: 1px solid var(--fd-r98-border) !important;
  border-radius: 16px !important;
  background: var(--fd-r98-control) !important;
  background-image: none !important;
  color: #4f4f56 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.fd-account-card__action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-fd-theme="light"] .fd-account-card {
  border: 1px solid var(--fd-r98-border) !important;
  background: var(--fd-r98-surface) !important;
  box-shadow: 0 5px 16px rgba(24,24,28,.05) !important;
}

body.fd-account-open { overflow: hidden !important; }
.fd-account-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483200 !important;
  display: grid !important;
  align-items: end !important;
  justify-items: center !important;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}
.fd-account-sheet.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}
.fd-account-sheet__backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0,0,0,.42) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
.fd-account-sheet__panel {
  position: relative !important;
  z-index: 1 !important;
  width: min(calc(100vw - 16px), 560px) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 26px !important;
  background: #111114 !important;
  color: #fff !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.48) !important;
  transform: translateY(18px);
  transition: transform .18s cubic-bezier(.22,.72,.25,1);
}
.fd-account-sheet.is-visible .fd-account-sheet__panel { transform: translateY(0); }
.fd-account-sheet__panel > header {
  position: sticky;
  top: -20px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -20px -20px 0;
  padding: 20px 20px 14px;
  background: #111114;
}
.fd-account-sheet__panel > header small {
  color: var(--fd-r98-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.fd-account-sheet__panel > header h2 { margin: 5px 0 0; font-size: 24px; }
.fd-account-sheet__panel > header > button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: #242428;
  color: #fff;
  font-size: 24px;
}
.fd-auth-form { max-width: 100%; }
.fd-auth-form input { max-width: 100%; }
.fd-auth-secondary {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #242428;
  color: #fff;
}

.fd-account-sheet__panel .fd-auth-switch button {
  min-height: 40px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.fd-account-sheet__panel .fd-auth-form > label > span {
  font-size: 12px !important;
  font-weight: 600 !important;
}
.fd-account-sheet__panel .fd-auth-form > label > small,
.fd-account-sheet__panel .fd-auth-explanation {
  font-size: 11px !important;
}
.fd-account-sheet__panel .fd-auth-form input {
  min-height: 48px !important;
  font-size: 15px !important;
  border-radius: 15px !important;
}
.fd-account-sheet__panel .fd-auth-primary,
.fd-account-sheet__panel .fd-auth-secondary {
  min-height: 48px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

html[data-fd-theme="light"] .fd-account-sheet__panel,
html[data-fd-theme="light"] .fd-account-sheet__panel > header {
  border-color: var(--fd-r98-border) !important;
  background: var(--fd-r98-surface) !important;
  color: var(--fd-r98-text) !important;
}
html[data-fd-theme="light"] .fd-account-sheet__panel { box-shadow: 0 24px 60px rgba(24,24,28,.20) !important; }
html[data-fd-theme="light"] .fd-account-sheet__panel > header > button,
html[data-fd-theme="light"] .fd-auth-secondary {
  border-color: var(--fd-r98-border) !important;
  background: var(--fd-r98-control) !important;
  color: #4f4f56 !important;
}
html[data-fd-theme="light"] .fd-auth-switch {
  border-color: var(--fd-r98-border) !important;
  background: var(--fd-r98-control-soft) !important;
}
html[data-fd-theme="light"] .fd-auth-form input {
  border-color: var(--fd-r98-border) !important;
  background: var(--fd-r98-control-soft) !important;
  color: var(--fd-r98-text) !important;
}

@media (max-width: 360px) {
  .fd-account-sheet__panel { padding: 16px !important; border-radius: 22px !important; }
  .fd-account-sheet__panel > header { top: -16px; margin: -16px -16px 0; padding: 16px 16px 12px; }
}

/* ===== assets/r100-balanced-ui.css ===== */
/* FuelDash R100 — R98 visual baseline with isolated functional repairs. */
:root {
  --fd-r100-red: #ff3b30;
  --fd-r100-light-page: #f5f5f7;
  --fd-r100-light-surface: #ffffff;
  --fd-r100-light-control: #f0f0f3;
  --fd-r100-light-border: #d4d4da;
  --fd-r100-light-text: #171719;
  --fd-r100-light-muted: #74747b;
  --fd-r100-dark-page: #050505;
  --fd-r100-dark-surface: rgba(20,20,22,.94);
  --fd-r100-dark-control: rgba(255,255,255,.075);
  --fd-r100-dark-border: rgba(255,255,255,.11);
  --fd-r100-dark-text: #f7f7f8;
  --fd-r100-dark-muted: #99999f;
}

/* Preserve the uninterrupted R98 page background and remove generated veils only. */
html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content,
html[data-fd-theme="light"] #app .detail-view,
html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-content {
  background-color: var(--fd-r100-light-page) !important;
  background-image: none !important;
}
html[data-fd-theme="light"] :where(body,#app,.app-shell,.app-content,.fd-feature-page)::before,
html[data-fd-theme="light"] :where(body,#app,.app-shell,.app-content,.fd-feature-page)::after,
html[data-fd-theme="light"] #app .fuel-tab-bar::before,
html[data-fd-theme="light"] #app .fuel-tab-bar::after {
  content: none !important;
  display: none !important;
}

/* R98 dashboard map, tempered slightly so it is readable but not washed out. */
html[data-fd-theme="light"] #app .fd-best {
  border-color: var(--fd-r100-light-border) !important;
  background: #e9e9ed !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app .fd-best__map {
  background: #e9e9ed !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-fd-theme="light"] #app .fd-best__map .leaflet-container { background: #e9e9ed !important; }
html[data-fd-theme="light"] #app .fd-best__map .leaflet-tile-pane {
  filter: invert(.88) grayscale(1) saturate(.16) brightness(1.04) contrast(.86) !important;
}
html[data-fd-theme="light"] #app .fd-best::after {
  display: block !important;
  content: "" !important;
  background: linear-gradient(90deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.34) 54%,rgba(255,255,255,.06) 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Remove button/fact glows without flattening the R98 cards themselves. */
#app :where(
  .primary-station-card__facts > span,
  .chart-selection-readout,
  .chart-range button,
  .station-sort button,
  .fuel-preference button,
  .nearby-radius button,
  .fuel-filter button,
  .favorites-filter button,
  .favorite-filter button,
  .detail-view .primary-station-action,
  .detail-view .station-route .route-trigger,
  .refresh-pill
),
.fd-feature-page :where(
  .fd-tank-submit,
  .fd-backup-actions button,
  .fd-account-card > button,
  .fd-auth-primary,
  .fd-auth-secondary
) {
  box-shadow: none !important;
  filter: none !important;
}

/* One back/close control family, matching the original circular R89 control. */
#app .brand-header .round-button.detail-close,
.fd-feature-back,
.fd-alert-close,
.fd-account-sheet__panel > header > button {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#app .brand-header .round-button.detail-close svg,
.fd-feature-back svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html[data-fd-theme="light"] #app .brand-header .round-button.detail-close,
html[data-fd-theme="light"] .fd-feature-back,
html[data-fd-theme="light"] .fd-alert-close,
html[data-fd-theme="light"] .fd-account-sheet__panel > header > button {
  border: 1px solid var(--fd-r100-light-border) !important;
  background: var(--fd-r100-light-control) !important;
  color: #505057 !important;
}
html[data-fd-theme="dark"] #app .brand-header .round-button.detail-close,
html[data-fd-theme="dark"] .fd-feature-back,
html[data-fd-theme="dark"] .fd-alert-close,
html[data-fd-theme="dark"] .fd-account-sheet__panel > header > button {
  border: 1px solid var(--fd-r100-dark-border) !important;
  background: var(--fd-r100-dark-control) !important;
  color: var(--fd-r100-dark-text) !important;
}

/* Tankbook: no phantom row or oversized gap after “Weitere Angaben”. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form {
  gap: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary {
  display: flex !important;
  align-items: center !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
  padding-top: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras .fd-field:last-child { grid-column: 1 / -1 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-form-status:empty { display: none !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-form-status:not(:empty) {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-submit { margin: 0 !important; }

/* Price alerts: neutral when unselected, red only after an explicit check. */
.fd-alert-modal input[type="checkbox"] {
  box-sizing: border-box !important;
  flex: 0 0 23px !important;
  width: 23px !important;
  min-width: 23px !important;
  height: 23px !important;
  min-height: 23px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 1px solid var(--fd-r100-dark-border) !important;
  border-radius: 7px !important;
  outline: none !important;
  background: var(--fd-r100-dark-control) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.fd-alert-modal input[type="checkbox"]::after {
  display: block !important;
  width: 7px !important;
  height: 12px !important;
  margin: 3px auto 0 !important;
  content: "" !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: rotate(45deg) !important;
}
.fd-alert-modal input[type="checkbox"]:checked {
  border-color: var(--fd-r100-red) !important;
  background: var(--fd-r100-red) !important;
}
.fd-alert-modal input[type="checkbox"]:checked::after { opacity: 1 !important; }
html[data-fd-theme="light"] .fd-alert-modal input[type="checkbox"] {
  border-color: var(--fd-r100-light-border) !important;
  background: var(--fd-r100-light-control) !important;
}
html[data-fd-theme="light"] .fd-alert-modal input[type="checkbox"]:checked {
  border-color: var(--fd-r100-red) !important;
  background: var(--fd-r100-red) !important;
}
.fd-alert-modal .fd-alert-station:has(input:not(:checked)),
.fd-alert-modal .fd-alert-row:has(input:not(:checked)) {
  box-shadow: none !important;
}

/* Recovery code: compact, readable and every control has visible state. */
.fd-recovery-sheet .fd-account-sheet__panel {
  width: min(calc(100vw - 24px),520px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  padding: 20px !important;
  border-radius: 24px !important;
  overflow-x: hidden !important;
}
.fd-recovery-sheet .fd-account-sheet__panel > header {
  margin: -20px -20px 0 !important;
  padding: 20px 20px 12px !important;
}
.fd-recovery-sheet .fd-account-sheet__panel > p {
  margin: 12px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.fd-recovery-code {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 14px 0 0 !important;
  padding: 13px 12px !important;
  border-radius: 14px !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace !important;
  font-size: clamp(14px,3.8vw,19px) !important;
  line-height: 1.35 !important;
  text-align: center !important;
  letter-spacing: .02em !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.fd-recovery-sheet :where(.fd-auth-primary,.fd-auth-secondary) {
  width: 100% !important;
  min-height: 48px !important;
  margin: 10px 0 0 !important;
  padding: 11px 14px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
.fd-recovery-confirm {
  display: grid !important;
  grid-template-columns: 23px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.fd-recovery-confirm input[type="checkbox"] {
  box-sizing: border-box !important;
  width: 23px !important;
  height: 23px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.fd-recovery-confirm input[type="checkbox"]::after {
  display: block !important;
  width: 7px !important;
  height: 12px !important;
  margin: 3px auto 0 !important;
  content: "" !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: rotate(45deg) !important;
}
.fd-recovery-confirm input[type="checkbox"]:checked {
  border-color: var(--fd-r100-red) !important;
  background: var(--fd-r100-red) !important;
}
.fd-recovery-confirm input[type="checkbox"]:checked::after { opacity: 1 !important; }
.fd-recovery-sheet .fd-auth-primary:disabled {
  border-color: transparent !important;
  background: rgba(127,127,135,.22) !important;
  color: rgba(127,127,135,.85) !important;
  opacity: 1 !important;
}
.fd-recovery-sheet [data-fd-recovery-status] {
  min-height: 0 !important;
  margin: 8px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.fd-recovery-sheet [data-fd-recovery-status]:empty { display: none !important; }

html[data-fd-theme="light"] .fd-recovery-sheet .fd-account-sheet__panel {
  border-color: var(--fd-r100-light-border) !important;
  background: var(--fd-r100-light-surface) !important;
  color: var(--fd-r100-light-text) !important;
  box-shadow: 0 14px 36px rgba(24,24,28,.16) !important;
}
html[data-fd-theme="light"] .fd-recovery-sheet .fd-account-sheet__panel > header { background: var(--fd-r100-light-surface) !important; }
html[data-fd-theme="light"] .fd-recovery-code,
html[data-fd-theme="light"] .fd-recovery-confirm input[type="checkbox"] {
  border: 1px solid var(--fd-r100-light-border) !important;
  background: var(--fd-r100-light-control) !important;
  color: var(--fd-r100-light-text) !important;
}
html[data-fd-theme="dark"] .fd-recovery-code,
html[data-fd-theme="dark"] .fd-recovery-confirm input[type="checkbox"] {
  border: 1px solid var(--fd-r100-dark-border) !important;
  background: var(--fd-r100-dark-control) !important;
  color: var(--fd-r100-dark-text) !important;
}
html[data-fd-theme="light"] .fd-recovery-confirm input[type="checkbox"]:checked,
html[data-fd-theme="dark"] .fd-recovery-confirm input[type="checkbox"]:checked {
  border-color: var(--fd-r100-red) !important;
  background: var(--fd-r100-red) !important;
}

@media (max-width: 360px) {
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div { grid-template-columns: minmax(0,1fr) !important; }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras .fd-field:last-child { grid-column: auto !important; }
  .fd-recovery-sheet .fd-account-sheet__panel { padding: 16px !important; }
  .fd-recovery-sheet .fd-account-sheet__panel > header { margin: -16px -16px 0 !important; padding: 16px 16px 10px !important; }
}

/* ===== assets/r101-ui-consistency.css ===== */
/* FuelDash R101 — one component contract for feature pages and price alerts. */
:root {
  --fd-r101-red: #ff3b30;
  --fd-r101-light-page: #f5f5f7;
  --fd-r101-light-surface: #ffffff;
  --fd-r101-light-control: #f0f0f3;
  --fd-r101-light-border: #d4d4da;
  --fd-r101-light-text: #171719;
  --fd-r101-light-muted: #74747b;
  --fd-r101-dark-page: #050505;
  --fd-r101-dark-surface: #141416;
  --fd-r101-dark-control: #242428;
  --fd-r101-dark-border: rgba(255,255,255,.11);
  --fd-r101-dark-text: #f7f7f8;
  --fd-r101-dark-muted: #99999f;
  --fd-r101-card-radius: 24px;
  --fd-r101-control-radius: 16px;
  --fd-r101-control-height: 48px;
}

/* A feature page owns the viewport. Only its content column scrolls. */
body.fd-feature-open,
body.fd-account-open { overflow: hidden !important; }
.fd-feature-page {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background-image: none !important;
}
.fd-feature-page::before,
.fd-feature-page::after,
.fd-feature-shell::before,
.fd-feature-shell::after,
.fd-feature-content::before,
.fd-feature-content::after {
  content: none !important;
  display: none !important;
}
.fd-feature-shell {
  display: flex !important;
  flex-direction: column !important;
  width: min(100%, 480px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.fd-feature-header {
  position: relative !important;
  inset: auto !important;
  z-index: 30 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  padding: calc(14px + env(safe-area-inset-top)) 20px 16px !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.fd-feature-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  padding: 16px 20px calc(40px + env(safe-area-inset-bottom)) !important;
  background-image: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-header,
html[data-fd-theme="light"] .fd-feature-content {
  background-color: var(--fd-r101-light-page) !important;
  background-image: none !important;
}
html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body,
html[data-fd-theme="dark"] #app,
html[data-fd-theme="dark"] .fd-feature-page,
html[data-fd-theme="dark"] .fd-feature-shell,
html[data-fd-theme="dark"] .fd-feature-header,
html[data-fd-theme="dark"] .fd-feature-content {
  background-color: var(--fd-r101-dark-page) !important;
  background-image: none !important;
}

/* Every navigation control uses the same circle and never keeps the iOS focus halo. */
#app .brand-header .round-button.detail-close,
.fd-feature-back,
.fd-alert-close,
.fd-account-sheet__panel > header > button {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
#app .brand-header .round-button.detail-close:focus,
#app .brand-header .round-button.detail-close:focus-visible,
.fd-feature-back:focus,
.fd-feature-back:focus-visible,
.fd-alert-close:focus,
.fd-alert-close:focus-visible,
.fd-account-sheet__panel > header > button:focus,
.fd-account-sheet__panel > header > button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.fd-feature-back svg,
#app .brand-header .round-button.detail-close svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html[data-fd-theme="light"] :is(#app .brand-header .round-button.detail-close,.fd-feature-back,.fd-alert-close,.fd-account-sheet__panel > header > button) {
  border: 1px solid var(--fd-r101-light-border) !important;
  background: var(--fd-r101-light-control) !important;
  color: #505057 !important;
}
html[data-fd-theme="dark"] :is(#app .brand-header .round-button.detail-close,.fd-feature-back,.fd-alert-close,.fd-account-sheet__panel > header > button) {
  border: 1px solid var(--fd-r101-dark-border) !important;
  background: var(--fd-r101-dark-control) !important;
  color: var(--fd-r101-dark-text) !important;
}

/* One action hierarchy: red = commit/setup, gray = secondary/export/test. */
.fd-tank-submit,
.fd-account-card__action,
.fd-auth-primary,
.fd-alert-enable {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--fd-r101-control-height) !important;
  height: var(--fd-r101-control-height) !important;
  padding: 0 16px !important;
  border: 1px solid var(--fd-r101-red) !important;
  border-radius: var(--fd-r101-control-radius) !important;
  background: var(--fd-r101-red) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-backup-actions button,
.fd-auth-secondary,
.fd-alert-test {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--fd-r101-control-height) !important;
  height: var(--fd-r101-control-height) !important;
  padding: 0 14px !important;
  border-radius: var(--fd-r101-control-radius) !important;
  background-image: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme="light"] :is(.fd-backup-actions button,.fd-auth-secondary,.fd-alert-test) {
  border: 1px solid var(--fd-r101-light-border) !important;
  background: var(--fd-r101-light-control) !important;
  color: #4f4f56 !important;
}
html[data-fd-theme="dark"] :is(.fd-backup-actions button,.fd-auth-secondary,.fd-alert-test) {
  border: 1px solid var(--fd-r101-dark-border) !important;
  background: var(--fd-r101-dark-control) !important;
  color: var(--fd-r101-dark-text) !important;
}
.fd-account-card__action { justify-content: center !important; }
.fd-account-card__action svg { display: none !important; }

/* Tankbook field rhythm. No phantom status row or oversized gap. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form {
  gap: 12px !important;
  margin-top: 16px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
  padding-top: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras .fd-field:last-child { grid-column: 1 / -1 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-form-status:empty,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-status:empty { display: none !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-form-status:not(:empty),
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-status:not(:empty) {
  min-height: 0 !important;
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-field input,.fd-field select,.fd-field textarea) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: var(--fd-r101-control-radius) !important;
  box-shadow: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-field input,.fd-field select) {
  min-height: var(--fd-r101-control-height) !important;
  height: var(--fd-r101-control-height) !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-field textarea { min-height: 96px !important; }

/* Price alerts: one internal scroll area, stationary header, identical cards and controls. */
.fd-alert-modal {
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 !important;
  background-image: none !important;
}
.fd-alert-sheet {
  box-sizing: border-box !important;
  display: block !important;
  width: min(100%,560px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 auto !important;
  padding: 0 14px calc(120px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  scroll-padding-top: calc(92px + env(safe-area-inset-top)) !important;
  -webkit-overflow-scrolling: touch !important;
}
.fd-alert-head {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  transform: none !important;
  z-index: 40 !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-height: calc(78px + env(safe-area-inset-top)) !important;
  margin: 0 -2px 12px !important;
  padding: calc(14px + env(safe-area-inset-top)) 2px 14px !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.fd-alert-head h2 { font-size: 28px !important; }
.fd-alert-grid { display: grid !important; gap: 10px !important; }
.fd-alert-row,
.fd-alert-station,
.fd-alert-empty,
.fd-alert-status {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 20px !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-alert-row {
  min-height: 72px !important;
  padding: 12px 14px !important;
}
.fd-alert-station {
  min-height: 70px !important;
  padding: 11px 14px !important;
}
.fd-alert-stations { gap: 10px !important; }
.fd-alert-station-section { margin-top: 18px !important; }
.fd-alert-station-section > header {
  padding: 0 2px 10px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.fd-alert-station-section h3 { font-size: 19px !important; }
.fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-height: var(--fd-r101-control-height) !important;
  height: var(--fd-r101-control-height) !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
.fd-alert-row select { width: 136px !important; max-width: 136px !important; }
.fd-alert-row input[type="time"] { width: 112px !important; min-width: 112px !important; max-width: 112px !important; text-align: center !important; }
.fd-alert-row input[type="number"] { width: 72px !important; min-width: 72px !important; max-width: 72px !important; text-align: center !important; }
.fd-alert-row input[type="time"]::-webkit-date-and-time-value { text-align: center !important; }
.fd-alert-modal input[type="checkbox"] {
  box-sizing: border-box !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border-radius: 7px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.fd-alert-modal input[type="checkbox"]::after {
  display: block !important;
  width: 7px !important;
  height: 12px !important;
  margin: 3px auto 0 !important;
  content: "" !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: rotate(45deg) !important;
}
.fd-alert-modal input[type="checkbox"]:checked {
  border-color: var(--fd-r101-red) !important;
  background: var(--fd-r101-red) !important;
}
.fd-alert-modal input[type="checkbox"]:checked::after { opacity: 1 !important; }
.fd-alert-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.fd-alert-actions button {
  min-height: var(--fd-r101-control-height) !important;
  height: var(--fd-r101-control-height) !important;
  padding: 0 12px !important;
  border-radius: var(--fd-r101-control-radius) !important;
  box-shadow: none !important;
  transform: none !important;
}
.fd-alert-note { margin: 16px 2px 0 !important; }

html[data-fd-theme="light"] :is(.fd-alert-modal,.fd-alert-sheet,.fd-alert-head) {
  background-color: var(--fd-r101-light-page) !important;
  color: var(--fd-r101-light-text) !important;
}
html[data-fd-theme="light"] .fd-alert-head { border-bottom: 1px solid rgba(28,28,32,.08) !important; }
html[data-fd-theme="light"] :is(.fd-alert-row,.fd-alert-station,.fd-alert-empty,.fd-alert-status) {
  border: 1px solid var(--fd-r101-light-border) !important;
  background: var(--fd-r101-light-surface) !important;
  color: var(--fd-r101-light-text) !important;
}
html[data-fd-theme="light"] .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border: 1px solid var(--fd-r101-light-border) !important;
  background: var(--fd-r101-light-control) !important;
  color: var(--fd-r101-light-text) !important;
}
html[data-fd-theme="light"] .fd-alert-modal input[type="checkbox"] {
  border: 1px solid var(--fd-r101-light-border) !important;
  background: var(--fd-r101-light-control) !important;
}
html[data-fd-theme="light"] .fd-alert-modal input[type="checkbox"]:checked {
  border-color: var(--fd-r101-red) !important;
  background: var(--fd-r101-red) !important;
}
html[data-fd-theme="dark"] :is(.fd-alert-modal,.fd-alert-sheet,.fd-alert-head) {
  background-color: var(--fd-r101-dark-page) !important;
  color: var(--fd-r101-dark-text) !important;
}
html[data-fd-theme="dark"] .fd-alert-head { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
html[data-fd-theme="dark"] :is(.fd-alert-row,.fd-alert-station,.fd-alert-empty,.fd-alert-status) {
  border: 1px solid var(--fd-r101-dark-border) !important;
  background: var(--fd-r101-dark-surface) !important;
  color: var(--fd-r101-dark-text) !important;
}
html[data-fd-theme="dark"] .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border: 1px solid var(--fd-r101-dark-border) !important;
  background: var(--fd-r101-dark-control) !important;
  color: var(--fd-r101-dark-text) !important;
}
html[data-fd-theme="dark"] .fd-alert-modal input[type="checkbox"] {
  border: 1px solid var(--fd-r101-dark-border) !important;
  background: var(--fd-r101-dark-control) !important;
}
html[data-fd-theme="dark"] .fd-alert-modal input[type="checkbox"]:checked {
  border-color: var(--fd-r101-red) !important;
  background: var(--fd-r101-red) !important;
}

@media (max-width: 360px) {
  .fd-feature-header { grid-template-columns: 46px minmax(0,1fr) !important; gap: 12px !important; padding-inline: 16px !important; }
  .fd-feature-content { padding-inline: 16px !important; }
  .fd-feature-back,
  .fd-alert-close { width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; }
  .fd-alert-sheet { padding-inline: 12px !important; }
  .fd-alert-row input[type="time"] { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
  .fd-alert-actions { grid-template-columns: 1fr !important; }
}
/* Theme-specific specificity guard: account setup is a primary action in both themes. */
html[data-fd-theme="light"] .fd-account-card .fd-account-card__action,
html[data-fd-theme="dark"] .fd-account-card .fd-account-card__action {
  border-color: var(--fd-r101-red) !important;
  background: var(--fd-r101-red) !important;
  color: #fff !important;
}
html[data-fd-theme="light"] .fd-feature-page .fd-backup-actions button,
html[data-fd-theme="dark"] .fd-feature-page .fd-backup-actions button {
  min-height: var(--fd-r101-control-height) !important;
  height: var(--fd-r101-control-height) !important;
  padding: 0 14px !important;
  border-radius: var(--fd-r101-control-radius) !important;
}
.fd-alert-station-section {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 360px) {
  .fd-feature-header { grid-template-columns: 48px minmax(0,1fr) !important; }
  .fd-feature-back,
  .fd-alert-close { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; }
}

/* ===== assets/r102-ui-harmony.css ===== */
/* FuelDash R102 — harmonized component rhythm without touching core behavior. */
:root {
  --fd-r102-red: #ff3b30;
  --fd-r102-light-page: #f5f5f7;
  --fd-r102-light-surface: #ffffff;
  --fd-r102-light-control: #ececf0;
  --fd-r102-light-border: #d2d2d8;
  --fd-r102-dark-page: #050505;
  --fd-r102-dark-surface: #141416;
  --fd-r102-dark-control: #242428;
  --fd-r102-dark-border: rgba(255,255,255,.11);
  --fd-r102-section-gap: 16px;
  --fd-r102-card-radius: 24px;
  --fd-r102-control-radius: 16px;
  --fd-r102-control-height: 48px;
}

/* Dashboard cards use the same vertical rhythm above and below the primary station. */
#app .primary-station-card + .favorites-block {
  margin-top: var(--fd-r102-section-gap) !important;
}

/* Feature header is a fixed top row; the navigation control matches Details and sits right. */
.fd-feature-header {
  grid-template-columns: minmax(0,1fr) 48px !important;
  align-items: start !important;
  gap: 14px !important;
}
.fd-feature-heading {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
.fd-feature-back {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
.fd-feature-header,
.fd-feature-heading,
.fd-feature-back {
  transform: none !important;
}

/* Tankbook is one vertical card system with equal spacing in both themes. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fd-r102-section-gap) !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content > section {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: var(--fd-r102-card-radius) !important;
  box-sizing: border-box !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-overall-card,.fd-tank-history) {
  padding: 20px !important;
  overflow: hidden !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-overall-card,.fd-tank-history) {
  border: 1px solid var(--fd-r102-light-border) !important;
  background: var(--fd-r102-light-surface) !important;
  color: #171719 !important;
  box-shadow: 0 8px 24px rgba(20,20,24,.055) !important;
}
html[data-fd-theme="dark"] .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-overall-card,.fd-tank-history) {
  border: 1px solid var(--fd-r102-dark-border) !important;
  background: var(--fd-r102-dark-surface) !important;
  color: #f7f7f8 !important;
  box-shadow: none !important;
}
.fd-overall-card .fd-feature-card__head,
.fd-tank-history__head {
  margin: 0 0 16px !important;
}
.fd-overall-card .fd-tank-summary {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}
.fd-overall-card .fd-tank-summary article {
  min-width: 0 !important;
  min-height: 92px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.fd-tank-history .fd-tank-list { margin: 0 !important; }

/* Additional fields always show a clear disclosure arrow. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary {
  position: relative !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  list-style: none !important;
  padding-right: 30px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary::-webkit-details-marker { display: none !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary::after {
  content: "›" !important;
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  display: block !important;
  font-size: 25px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: translateY(-50%) rotate(90deg) !important;
  transform-origin: center !important;
  transition: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras[open] summary::after {
  transform: translateY(-50%) rotate(-90deg) !important;
}

/* Cloud card follows the same typography scale and separates login from registration. */
.fd-account-card__copy h2 {
  margin: 8px 0 10px !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  letter-spacing: -.35px !important;
}
.fd-account-card__copy p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.fd-account-card__actions {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
.fd-account-card__actions button,
.fd-account-card__action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--fd-r102-control-height) !important;
  min-height: var(--fd-r102-control-height) !important;
  padding: 0 14px !important;
  border-radius: var(--fd-r102-control-radius) !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 680 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-account-card__actions .fd-auth-secondary {
  border: 1px solid var(--fd-r102-light-border) !important;
  background: var(--fd-r102-light-control) !important;
  color: #4f4f56 !important;
}
html[data-fd-theme="dark"] .fd-account-card__actions .fd-auth-secondary {
  border: 1px solid var(--fd-r102-dark-border) !important;
  background: var(--fd-r102-dark-control) !important;
  color: #f7f7f8 !important;
}
.fd-account-card__actions .fd-auth-primary,
.fd-account-card__action.fd-auth-primary {
  border: 1px solid var(--fd-r102-red) !important;
  background: var(--fd-r102-red) !important;
  color: #fff !important;
}

/* Inactive segmented controls use a tinted glass control, not plain white. */
html[data-fd-theme="light"] #app :where(
  .fuel-preference,.nearby-radius,.fuel-filter,.station-sort,.chart-range,.favorites-filter,.favorite-filter
) button:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]) {
  border: 1px solid var(--fd-r102-light-border) !important;
  background: var(--fd-r102-light-control) !important;
  background-image: none !important;
  color: #505057 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme="light"] #app :where(
  .fuel-preference,.nearby-radius,.fuel-filter,.station-sort,.chart-range,.favorites-filter,.favorite-filter
) button:is(.is-active,[aria-pressed="true"],[aria-selected="true"]) {
  border-color: var(--fd-r102-red) !important;
  background: var(--fd-r102-red) !important;
  color: #fff !important;
}

@media (max-width: 360px) {
  .fd-account-card__actions { grid-template-columns: 1fr !important; }
  .fd-feature-header { grid-template-columns: minmax(0,1fr) 48px !important; }
}

/* ===== assets/r103-unified-ui.css ===== */
/* FuelDash R103 — unified page, modal and control geometry. */
:root {
  --fd-r103-red: #ff3b30;
  --fd-r103-light-page: #f5f5f7;
  --fd-r103-light-surface: #ffffff;
  --fd-r103-light-control: #ececf0;
  --fd-r103-light-border: #d2d2d8;
  --fd-r103-light-text: #171719;
  --fd-r103-light-muted: #717178;
  --fd-r103-dark-page: #050505;
  --fd-r103-dark-surface: #141416;
  --fd-r103-dark-control: #242428;
  --fd-r103-dark-border: rgba(255,255,255,.11);
  --fd-r103-dark-text: #f7f7f8;
  --fd-r103-dark-muted: #99999f;
  --fd-r103-round-control: 40px;
  --fd-r103-control-height: 48px;
  --fd-r103-control-radius: 16px;
  --fd-r103-card-radius: 24px;
  --fd-r103-gap: 16px;
}

/* One uninterrupted page color, including overscroll and PWA edge areas. */
html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-content,
html[data-fd-theme="light"] .fd-alert-modal,
html[data-fd-theme="light"] .fd-account-sheet {
  background-color: var(--fd-r103-light-page) !important;
  background-image: none !important;
}
html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body,
html[data-fd-theme="dark"] #app,
html[data-fd-theme="dark"] .fd-feature-page,
html[data-fd-theme="dark"] .fd-feature-shell,
html[data-fd-theme="dark"] .fd-feature-content,
html[data-fd-theme="dark"] .fd-alert-modal,
html[data-fd-theme="dark"] .fd-account-sheet {
  background-color: var(--fd-r103-dark-page) !important;
  background-image: none !important;
}
html, body, #app { min-height: 100%; }
html[data-fd-theme] :where(body,#app,.fd-feature-page,.fd-feature-shell,.fd-feature-content,.fd-alert-modal,.fd-account-sheet)::before,
html[data-fd-theme] :where(body,#app,.fd-feature-page,.fd-feature-shell,.fd-feature-content,.fd-alert-modal,.fd-account-sheet)::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Feature pages: the heading is normal page content, never a clipped overlay. */
body.fd-feature-open { overflow: hidden !important; }
.fd-feature-page {
  position: fixed !important;
  inset: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.fd-feature-shell {
  display: block !important;
  width: min(100%, 480px) !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 0 calc(36px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.fd-feature-header {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) var(--fd-r103-round-control) !important;
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: calc(18px + env(safe-area-inset-top)) 20px 14px !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}
.fd-feature-heading {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
.fd-feature-heading h1 { margin: 0 !important; }
.fd-feature-heading p { max-width: 360px; }
.fd-feature-back {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  width: var(--fd-r103-round-control) !important;
  min-width: var(--fd-r103-round-control) !important;
  height: var(--fd-r103-round-control) !important;
  min-height: var(--fd-r103-round-control) !important;
  margin: 0 !important;
  padding: 10px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  transform: none !important;
}
.fd-feature-back svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  transform: none !important;
}
.fd-feature-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fd-r103-gap) !important;
  width: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 10px 20px 0 !important;
}
.fd-feature-content > section { margin: 0 !important; }

/* Compact round controls match the original Details geometry. */
:is(.fd-feature-back,.fd-alert-close,.fd-account-sheet__panel > header > button) {
  width: var(--fd-r103-round-control) !important;
  min-width: var(--fd-r103-round-control) !important;
  height: var(--fd-r103-round-control) !important;
  min-height: var(--fd-r103-round-control) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06) !important;
  -webkit-tap-highlight-color: transparent !important;
}
html[data-fd-theme="light"] :is(.fd-feature-back,.fd-alert-close,.fd-account-sheet__panel > header > button) {
  border: 1px solid var(--fd-r103-light-border) !important;
  background: var(--fd-r103-light-control) !important;
  color: #55555c !important;
}
html[data-fd-theme="dark"] :is(.fd-feature-back,.fd-alert-close,.fd-account-sheet__panel > header > button) {
  border: 1px solid var(--fd-r103-dark-border) !important;
  background: var(--fd-r103-dark-control) !important;
  color: #f7f7f8 !important;
}
:is(.fd-feature-back,.fd-alert-close,.fd-account-sheet__panel > header > button):focus,
:is(.fd-feature-back,.fd-alert-close,.fd-account-sheet__panel > header > button):focus-visible {
  outline: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06) !important;
}

/* Price alarms use the same ordinary-page header and card rhythm. */
.fd-alert-modal {
  position: fixed !important;
  inset: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom)) !important;
  overscroll-behavior-y: contain !important;
}
.fd-alert-sheet {
  width: min(100%, 480px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
.fd-alert-head {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: calc(18px + env(safe-area-inset-top)) 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-alert-close {
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative !important;
}
.fd-alert-close::before,
.fd-alert-close::after,
.fd-account-sheet__panel > header > button::before,
.fd-account-sheet__panel > header > button::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  transform-origin: center !important;
}
.fd-alert-close::before,
.fd-account-sheet__panel > header > button::before { transform: translate(-50%,-50%) rotate(45deg) !important; }
.fd-alert-close::after,
.fd-account-sheet__panel > header > button::after { transform: translate(-50%,-50%) rotate(-45deg) !important; }
.fd-alert-grid { gap: 10px !important; }
.fd-alert-row,
.fd-alert-station,
.fd-alert-empty {
  min-width: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  width: 112px !important;
  max-width: 112px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
html[data-fd-theme="light"] .fd-alert-row,
html[data-fd-theme="light"] .fd-alert-station,
html[data-fd-theme="light"] .fd-alert-empty {
  border: 1px solid var(--fd-r103-light-border) !important;
  background: var(--fd-r103-light-surface) !important;
  color: var(--fd-r103-light-text) !important;
}
html[data-fd-theme="light"] .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border: 1px solid var(--fd-r103-light-border) !important;
  background: var(--fd-r103-light-control) !important;
  color: var(--fd-r103-light-text) !important;
}
html[data-fd-theme="dark"] .fd-alert-row,
html[data-fd-theme="dark"] .fd-alert-station,
html[data-fd-theme="dark"] .fd-alert-empty {
  border: 1px solid var(--fd-r103-dark-border) !important;
  background: var(--fd-r103-dark-surface) !important;
  color: var(--fd-r103-dark-text) !important;
}
html[data-fd-theme="dark"] .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border: 1px solid var(--fd-r103-dark-border) !important;
  background: var(--fd-r103-dark-control) !important;
  color: var(--fd-r103-dark-text) !important;
}
.fd-alert-actions { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.fd-alert-note { padding-bottom: 4px !important; }

/* Account and recovery views are regular full-page overlays, not bottom sheets. */
body.fd-account-open { overflow: hidden !important; }
.fd-account-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483400 !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transform: none !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.fd-account-sheet__backdrop { display: none !important; }
.fd-account-sheet__panel {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 448px) !important;
  max-width: 448px !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border-radius: var(--fd-r103-card-radius) !important;
  transform: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-account-sheet__panel {
  border: 1px solid var(--fd-r103-light-border) !important;
  background: var(--fd-r103-light-surface) !important;
  color: var(--fd-r103-light-text) !important;
}
html[data-fd-theme="dark"] .fd-account-sheet__panel {
  border: 1px solid var(--fd-r103-dark-border) !important;
  background: var(--fd-r103-dark-surface) !important;
  color: var(--fd-r103-dark-text) !important;
}
.fd-account-sheet__panel > header {
  position: static !important;
  top: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-account-sheet__panel > header h2 {
  margin: 5px 0 0 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -.45px !important;
}
.fd-account-sheet__panel > header > button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 var(--fd-r103-round-control) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.fd-auth-switch {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 4px !important;
  height: 48px !important;
  padding: 4px !important;
  margin: 0 0 18px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
.fd-auth-switch button {
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-auth-switch { background: var(--fd-r103-light-control) !important; }
html[data-fd-theme="dark"] .fd-auth-switch { background: var(--fd-r103-dark-control) !important; }
.fd-auth-switch button.is-active { background: var(--fd-r103-red) !important; color: #fff !important; }
.fd-auth-form {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}
.fd-auth-form > label { display: grid !important; gap: 7px !important; margin: 0 !important; }
.fd-auth-form > label > span { font-size: 13px !important; font-weight: 650 !important; line-height: 1.2 !important; }
.fd-auth-form > label > small,
.fd-auth-explanation { margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; }
.fd-auth-form input {
  width: 100% !important;
  height: var(--fd-r103-control-height) !important;
  min-height: var(--fd-r103-control-height) !important;
  padding: 0 14px !important;
  border-radius: var(--fd-r103-control-radius) !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-auth-form input {
  border: 1px solid var(--fd-r103-light-border) !important;
  background: var(--fd-r103-light-control) !important;
  color: var(--fd-r103-light-text) !important;
}
html[data-fd-theme="dark"] .fd-auth-form input {
  border: 1px solid var(--fd-r103-dark-border) !important;
  background: var(--fd-r103-dark-control) !important;
  color: var(--fd-r103-dark-text) !important;
}
.fd-account-sheet :is(.fd-auth-primary,.fd-auth-secondary) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--fd-r103-control-height) !important;
  min-height: var(--fd-r103-control-height) !important;
  padding: 0 16px !important;
  border-radius: var(--fd-r103-control-radius) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}
.fd-account-sheet .fd-auth-primary {
  border: 1px solid var(--fd-r103-red) !important;
  background: var(--fd-r103-red) !important;
  color: #fff !important;
}
html[data-fd-theme="light"] .fd-account-sheet .fd-auth-secondary {
  border: 1px solid var(--fd-r103-light-border) !important;
  background: var(--fd-r103-light-control) !important;
  color: var(--fd-r103-light-text) !important;
}
html[data-fd-theme="dark"] .fd-account-sheet .fd-auth-secondary {
  border: 1px solid var(--fd-r103-dark-border) !important;
  background: var(--fd-r103-dark-control) !important;
  color: var(--fd-r103-dark-text) !important;
}
.fd-account-signed-in { display: grid !important; gap: 10px !important; }
.fd-account-signed-in h3 { margin: 0 !important; }
.fd-account-signed-in p { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.5 !important; }
.fd-account-avatar { width: 32px !important; height: 32px !important; display: grid !important; place-items: center !important; }
.fd-account-sheet .fd-auth-link {
  justify-self: start !important;
  min-height: 36px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fd-r103-red) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
.fd-recovery-code { overflow-wrap: anywhere !important; word-break: break-word !important; }
.fd-recovery-confirm { align-items: flex-start !important; }

/* Backup controls keep their icons readable. */
.fd-backup-actions button {
  min-height: 72px !important;
  border-radius: var(--fd-r103-control-radius) !important;
  box-shadow: none !important;
}
.fd-backup-actions button span {
  display: block !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
}
.fd-backup-actions button:nth-child(3) span { font-size: 21px !important; }
.fd-backup-actions button strong { font-size: 12px !important; line-height: 1.15 !important; }

@media (max-width: 360px) {
  .fd-feature-header,
  .fd-feature-content { padding-left: 16px !important; padding-right: 16px !important; }
  .fd-account-sheet { padding-left: 12px !important; padding-right: 12px !important; }
  .fd-account-sheet__panel { padding: 16px !important; }
  .fd-alert-modal { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Final specificity guards for controls previously sized by legacy repair layers. */
.fd-alert-head .fd-alert-close,
.fd-account-sheet__panel > header > button {
  width: var(--fd-r103-round-control) !important;
  min-width: var(--fd-r103-round-control) !important;
  max-width: var(--fd-r103-round-control) !important;
  height: var(--fd-r103-round-control) !important;
  min-height: var(--fd-r103-round-control) !important;
  max-height: var(--fd-r103-round-control) !important;
}

/* ===== assets/r104-tankbook-polish.css ===== */
/* FuelDash R104 — scoped Tankbuch date, backup and account polish. */
:root {
  --fd-r104-red: #ff3b30;
  --fd-r104-light-control: #ececf0;
  --fd-r104-light-border: #d2d2d8;
  --fd-r104-light-text: #171719;
  --fd-r104-light-muted: #717178;
  --fd-r104-dark-control: #242428;
  --fd-r104-dark-border: rgba(255,255,255,.11);
  --fd-r104-dark-text: #f7f7f8;
  --fd-r104-dark-muted: #99999f;
}

/* Full-date month selector: compact and visibly editable. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  display: grid !important;
  justify-items: end !important;
  gap: 5px !important;
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date > span:first-child {
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 164px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px 0 34px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  transform: translateY(-50%) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: none !important;
  outline: none !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date > span:first-child { color: var(--fd-r104-light-muted) !important; }
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border: 1px solid var(--fd-r104-light-border) !important;
  background: var(--fd-r104-light-control) !important;
  color: var(--fd-r104-light-text) !important;
}
html[data-fd-theme="dark"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date > span:first-child { color: var(--fd-r104-dark-muted) !important; }
html[data-fd-theme="dark"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border: 1px solid var(--fd-r104-dark-border) !important;
  background: var(--fd-r104-dark-control) !important;
  color: var(--fd-r104-dark-text) !important;
}

/* Backup actions: standard icon scale, single compact row. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 8px 9px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  box-shadow: none !important;
}
.fd-backup-action__icon {
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: var(--fd-r104-red) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button > span,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button:nth-child(3) > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button > span > strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  color: inherit !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button > span > small {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  color: inherit !important;
  opacity: .68 !important;
}

/* Cloud card stays one card; management expands inline without a second sheet. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card {
  display: grid !important;
  gap: 14px !important;
  padding: 20px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__copy h2 {
  margin: 7px 0 0 !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
  letter-spacing: -.3px !important;
}
.fd-account-card__copy p {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__copy p strong { font-weight: 700 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__action {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
.fd-account-card__manager {
  display: grid !important;
  gap: 10px !important;
  padding-top: 14px !important;
  border-top: 1px solid currentColor !important;
  border-top-color: rgba(127,127,135,.24) !important;
}
.fd-account-manager__row {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 8px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__manager :is(.fd-auth-primary,.fd-auth-secondary) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 11px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__manager .fd-auth-primary {
  border: 1px solid var(--fd-r104-red) !important;
  background: var(--fd-r104-red) !important;
  color: #fff !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__manager .fd-auth-secondary {
  border: 1px solid var(--fd-r104-light-border) !important;
  background: var(--fd-r104-light-control) !important;
  color: var(--fd-r104-light-text) !important;
}
html[data-fd-theme="dark"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__manager .fd-auth-secondary {
  border: 1px solid var(--fd-r104-dark-border) !important;
  background: var(--fd-r104-dark-control) !important;
  color: var(--fd-r104-dark-text) !important;
}
.fd-account-manager__wide { grid-column: 1 / -1 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__manager > .fd-auth-link {
  justify-self: start !important;
  min-height: 32px !important;
  padding: 3px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fd-r104-red) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
.fd-account-card__password {
  display: grid !important;
  gap: 11px !important;
}
.fd-account-card__password > label {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
}
.fd-account-card__password > label > span {
  font-size: 12px !important;
  font-weight: 650 !important;
}
.fd-account-card__password input {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 13px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-account-card__password input {
  border: 1px solid var(--fd-r104-light-border) !important;
  background: var(--fd-r104-light-control) !important;
  color: var(--fd-r104-light-text) !important;
}
html[data-fd-theme="dark"] .fd-account-card__password input {
  border: 1px solid var(--fd-r104-dark-border) !important;
  background: var(--fd-r104-dark-control) !important;
  color: var(--fd-r104-dark-text) !important;
}
.fd-account-card__password .fd-auth-form-status:empty { display: none !important; }

@media (max-width: 360px) {
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
    grid-template-columns: minmax(0,1fr) !important;
    align-items: start !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date { justify-items: start !important; }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control { width: 156px !important; }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions { grid-template-columns: 1fr !important; }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button { justify-content: flex-start !important; height: 52px !important; min-height: 52px !important; }
  .fd-account-manager__row { grid-template-columns: 1fr !important; }
}

/* Final R104 details: one visible German date label and a neutral manager toggle. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__label {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input::-webkit-calendar-picker-indicator {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__action.fd-auth-secondary {
  border: 1px solid var(--fd-r104-light-border) !important;
  background: var(--fd-r104-light-control) !important;
  color: var(--fd-r104-light-text) !important;
}
html[data-fd-theme="dark"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__action.fd-auth-secondary {
  border: 1px solid var(--fd-r104-dark-border) !important;
  background: var(--fd-r104-dark-control) !important;
  color: var(--fd-r104-dark-text) !important;
}

/* ===== assets/r105-global-account.css ===== */
/* FuelDash R105 — global account page and continuous theme surfaces. */
:root {
  --fd-r105-red: #ff3b34;
  --fd-r105-light-bg: #f5f5f7;
  --fd-r105-light-card: rgba(255, 255, 255, 0.88);
  --fd-r105-light-control: rgba(237, 237, 241, 0.86);
  --fd-r105-light-border: rgba(92, 92, 102, 0.20);
  --fd-r105-dark-bg: #050505;
  --fd-r105-dark-card: rgba(18, 18, 21, 0.90);
  --fd-r105-dark-control: rgba(39, 39, 44, 0.88);
  --fd-r105-dark-border: rgba(255, 255, 255, 0.14);
}

html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content,
html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-content {
  background-color: #f5f5f7 !important;
  background-image: none !important;
}

html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body,
html[data-fd-theme="dark"] #app,
html[data-fd-theme="dark"] #app .app-shell,
html[data-fd-theme="dark"] #app .app-content,
html[data-fd-theme="dark"] .fd-feature-page,
html[data-fd-theme="dark"] .fd-feature-shell,
html[data-fd-theme="dark"] .fd-feature-content {
  background-color: #050505 !important;
  background-image: none !important;
}

html[data-fd-theme] :where(body,#app,.app-shell,.app-content,.fd-feature-page,.fd-feature-shell,.fd-feature-content)::before,
html[data-fd-theme] :where(body,#app,.app-shell,.app-content,.fd-feature-page,.fd-feature-shell,.fd-feature-content)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.fd-main-header-actions {
  margin-left: auto;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 40px;
}

.fd-profile-button {
  position: relative;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="light"] .fd-profile-button {
  color: #26262b !important;
  background: var(--fd-r105-light-control) !important;
  border: 1px solid var(--fd-r105-light-border) !important;
}

html[data-fd-theme="dark"] .fd-profile-button {
  color: #f5f5f7 !important;
  background: var(--fd-r105-dark-control) !important;
  border: 1px solid var(--fd-r105-dark-border) !important;
}

.fd-profile-button svg {
  width: 21px !important;
  height: 21px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fd-profile-button > i {
  display: none;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fd-r105-red);
  border: 1.5px solid currentColor;
}

.fd-profile-button[data-state="attention"] > i { display: block; }
.fd-profile-button[data-state="busy"] svg { animation: fd-r105-profile-pulse 1.2s ease-in-out infinite; }
@keyframes fd-r105-profile-pulse { 50% { opacity: .45; } }

.fd-feature-page[data-fd-feature-view="account"] {
  z-index: 1800 !important;
  overflow: hidden !important;
}

.fd-feature-page[data-fd-feature-view="account"] .fd-feature-shell {
  width: min(100%, 760px) !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header {
  flex: 0 0 auto;
  padding-top: calc(18px + env(safe-area-inset-top)) !important;
  padding-bottom: 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
}

.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back svg {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}

.fd-account-page-title {
  flex: 0 0 auto;
  padding: 0 20px 18px;
}
.fd-account-page-title small,
.fd-account-page-title h1,
.fd-account-page-title p { margin: 0; }
.fd-account-page-title small {
  display: block;
  color: var(--fd-r105-red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}
.fd-account-page-title h1 {
  margin-top: 5px;
  font-size: clamp(29px, 8vw, 40px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.fd-account-page-title p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  opacity: .66;
}

.fd-feature-page[data-fd-feature-view="account"] .fd-feature-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 20px calc(32px + env(safe-area-inset-bottom)) !important;
  overscroll-behavior-x: none;
}

.fd-account-page {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.fd-account-page-status,
.fd-account-page-card,
.fd-tankbook-cloud-row {
  border-radius: 24px !important;
  box-shadow: none !important;
  overflow: hidden;
}

html[data-fd-theme="light"] :is(.fd-account-page-status,.fd-account-page-card,.fd-tankbook-cloud-row) {
  background: var(--fd-r105-light-card) !important;
  border: 1px solid var(--fd-r105-light-border) !important;
  color: #17171a !important;
  -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
  backdrop-filter: blur(14px) saturate(115%) !important;
}

html[data-fd-theme="dark"] :is(.fd-account-page-status,.fd-account-page-card,.fd-tankbook-cloud-row) {
  background: var(--fd-r105-dark-card) !important;
  border: 1px solid var(--fd-r105-dark-border) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
  backdrop-filter: blur(14px) saturate(115%) !important;
}

.fd-account-page-status,
.fd-account-page-card { padding: 22px !important; }
.fd-account-page-status small,
.fd-account-page-card .fd-feature-card__head small {
  color: var(--fd-r105-red) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
}
.fd-account-page-status h2,
.fd-account-page-card h2 {
  margin: 6px 0 0 !important;
  font-size: 24px !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}
.fd-account-page-status p,
.fd-account-page-card > p {
  margin: 12px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  opacity: .72;
}
.fd-account-page-status > div > small:last-child {
  display: block;
  margin-top: 10px;
  color: inherit !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  opacity: .55;
}

.fd-account-page-card .fd-feature-card__head {
  margin-bottom: 18px !important;
}
.fd-account-page-card .fd-feature-card__head > span {
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: .58;
}

.fd-account-page-card .fd-auth-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin: 0 0 18px !important;
  padding: 4px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-account-page-card .fd-auth-switch { background: var(--fd-r105-light-control) !important; border: 1px solid var(--fd-r105-light-border) !important; }
html[data-fd-theme="dark"] .fd-account-page-card .fd-auth-switch { background: var(--fd-r105-dark-control) !important; border: 1px solid var(--fd-r105-dark-border) !important; }
.fd-account-page-card .fd-auth-switch button {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
.fd-account-page-card .fd-auth-switch button.is-active { background: var(--fd-r105-red) !important; color: #fff !important; }

.fd-account-page-card .fd-auth-form {
  display: grid !important;
  gap: 14px !important;
}
.fd-account-page-card .fd-auth-form label {
  display: grid !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
.fd-account-page-card .fd-auth-form label > small,
.fd-account-page-card .fd-auth-explanation {
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  opacity: .62;
}
.fd-account-page-card .fd-auth-form input {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 15px !important;
  border-radius: 15px !important;
  box-shadow: none !important;
  font-size: 16px !important;
}
html[data-fd-theme="light"] .fd-account-page-card .fd-auth-form input { background: var(--fd-r105-light-control) !important; color: #17171a !important; border: 1px solid var(--fd-r105-light-border) !important; }
html[data-fd-theme="dark"] .fd-account-page-card .fd-auth-form input { background: var(--fd-r105-dark-control) !important; color: #f7f7f8 !important; border: 1px solid var(--fd-r105-dark-border) !important; }

.fd-account-page-card :is(.fd-auth-primary,.fd-auth-secondary) {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.fd-account-page-card .fd-auth-primary { background: var(--fd-r105-red) !important; color: #fff !important; border: 1px solid var(--fd-r105-red) !important; }
html[data-fd-theme="light"] .fd-account-page-card .fd-auth-secondary { background: var(--fd-r105-light-control) !important; color: #2f2f35 !important; border: 1px solid var(--fd-r105-light-border) !important; }
html[data-fd-theme="dark"] .fd-account-page-card .fd-auth-secondary { background: var(--fd-r105-dark-control) !important; color: #f4f4f5 !important; border: 1px solid var(--fd-r105-dark-border) !important; }
.fd-account-page-card .fd-auth-link {
  justify-self: center;
  min-height: 38px;
  padding: 0 8px;
  border: 0 !important;
  background: transparent !important;
  color: var(--fd-r105-red) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
.fd-account-page-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.fd-account-page-actions--stack { grid-template-columns: 1fr; }
.fd-account-page-actions--stack .fd-auth-link { justify-self: start; }
.fd-auth-form-status:empty { display: none !important; }
.fd-auth-form-status { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
.fd-auth-form-status[data-type="error"] { color: #d72d27 !important; }
.fd-auth-form-status[data-type="success"] { color: #2eaf68 !important; }

.fd-recovery-code {
  display: block;
  margin: 18px 0;
  padding: 14px;
  border-radius: 15px;
  font-size: clamp(15px, 4.5vw, 20px);
  line-height: 1.4;
  text-align: center;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
html[data-fd-theme="light"] .fd-recovery-code { background: var(--fd-r105-light-control); border: 1px solid var(--fd-r105-light-border); }
html[data-fd-theme="dark"] .fd-recovery-code { background: var(--fd-r105-dark-control); border: 1px solid var(--fd-r105-dark-border); }
.fd-recovery-confirm { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 16px 0 !important; font-size: 13px !important; font-weight: 500 !important; }
.fd-recovery-confirm input { width: 22px !important; min-width: 22px !important; height: 22px !important; margin: 0 !important; }

.fd-tankbook-cloud-row { padding: 0 !important; }
.fd-tankbook-cloud-row > button {
  width: 100% !important;
  min-height: 82px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
  text-align: left !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.fd-tankbook-cloud-row > button > span { display: grid; gap: 3px; min-width: 0; }
.fd-tankbook-cloud-row small { color: var(--fd-r105-red); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.fd-tankbook-cloud-row strong { font-size: 17px; line-height: 1.2; }
.fd-tankbook-cloud-row em { font-size: 12px; font-style: normal; opacity: .58; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fd-tankbook-cloud-row svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .56; }

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button > span {
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
}

html[data-fd-theme="light"] #app .station-sort {
  background: var(--fd-r105-light-bg) !important;
  border-color: var(--fd-r105-light-border) !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app .station-sort button:not(.is-active) {
  background: var(--fd-r105-light-bg) !important;
  color: #4d4d54 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app .station-sort button.is-active {
  background: var(--fd-r105-red) !important;
  color: #fff !important;
}

@media (max-width: 480px) {
  .fd-account-page-title { padding-inline: 16px; }
  .fd-feature-page[data-fd-feature-view="account"] .fd-feature-content { padding-inline: 16px !important; }
  .fd-account-page-status,
  .fd-account-page-card { padding: 18px !important; }
  .fd-account-page-actions { grid-template-columns: 1fr; }
}

/* ===== assets/r106-responsive-performance.css ===== */
/* FuelDash R106 — responsive account, compact feature views and in-place themes. */
:root {
  --fd-r106-red: #ff3b34;
  --fd-r106-green: #168b50;
  --fd-r106-light-bg: #f5f5f7;
  --fd-r106-light-card: rgba(255,255,255,.88);
  --fd-r106-light-control: rgba(232,232,237,.82);
  --fd-r106-light-border: rgba(74,74,82,.18);
  --fd-r106-dark-bg: #050505;
  --fd-r106-dark-card: rgba(18,18,21,.92);
  --fd-r106-dark-control: rgba(38,38,43,.9);
  --fd-r106-dark-border: rgba(255,255,255,.13);
}

html.fd-theme-switching *,
html.fd-theme-switching *::before,
html.fd-theme-switching *::after {
  transition: none !important;
  animation: none !important;
}

/* Main header account affordance. */
.fd-main-header-actions { gap: 8px !important; min-width: 40px !important; }
.fd-profile-greeting {
  max-width: 112px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.01em;
}
html[data-fd-theme="light"] .fd-profile-greeting { color: #57575e; }
html[data-fd-theme="dark"] .fd-profile-greeting { color: rgba(255,255,255,.68); }

.fd-main-header-actions.has-profile-greeting .header-background-status {
  display: none !important;
}
.fd-profile-button { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; }
.fd-profile-button svg { width: 19px !important; height: 19px !important; }

/* Account page follows the same mobile scale as the main app. */
.fd-feature-page[data-fd-feature-view="account"] {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-shell {
  width: min(100%, 560px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header {
  min-height: 58px !important;
  padding: calc(10px + env(safe-area-inset-top)) 16px 6px !important;
  box-sizing: border-box !important;
}
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark img { width: 32px !important; height: 32px !important; }
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > span,
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > strong { font-size: 25px !important; line-height: 1 !important; }
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back {
  width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back svg { width: 18px !important; height: 18px !important; }
.fd-account-page-title { padding: 8px 16px 14px !important; }
.fd-account-page-title small { font-size: 10px !important; letter-spacing: .16em !important; }
.fd-account-page-title h1 { margin-top: 4px !important; font-size: 30px !important; line-height: 1.05 !important; letter-spacing: -.035em !important; }
.fd-account-page-title p { margin-top: 6px !important; font-size: 13px !important; line-height: 1.38 !important; }
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-content {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(22px + env(safe-area-inset-bottom)) !important;
}
.fd-account-page { max-width: 520px !important; gap: 12px !important; padding: 0 !important; }
.fd-account-page-status,
.fd-account-page-card { padding: 16px !important; border-radius: 21px !important; }
.fd-account-page-status small,
.fd-account-page-card .fd-feature-card__head small { font-size: 10px !important; letter-spacing: .15em !important; }
.fd-account-page-status h2,
.fd-account-page-card h2 { margin-top: 4px !important; font-size: 20px !important; line-height: 1.15 !important; }
.fd-account-page-status p,
.fd-account-page-card > p { margin-top: 8px !important; font-size: 13px !important; line-height: 1.42 !important; }
.fd-account-page-status > div > small:last-child { margin-top: 7px !important; font-size: 11px !important; }
.fd-account-page-card .fd-feature-card__head { margin-bottom: 12px !important; }
.fd-account-page-card .fd-feature-card__head > span { font-size: 11px !important; }
.fd-account-page-card .fd-auth-switch { margin-bottom: 12px !important; border-radius: 14px !important; }
.fd-account-page-card .fd-auth-switch button { min-height: 40px !important; border-radius: 10px !important; font-size: 13px !important; }
.fd-account-page-card .fd-auth-form { gap: 11px !important; }
.fd-account-page-card .fd-auth-form label { gap: 5px !important; font-size: 12px !important; }
.fd-account-page-card .fd-auth-form input { height: 46px !important; min-height: 46px !important; border-radius: 14px !important; font-size: 15px !important; }
.fd-account-page-card :is(.fd-auth-primary,.fd-auth-secondary) { height: 44px !important; min-height: 44px !important; max-height: 44px !important; border-radius: 14px !important; font-size: 14px !important; }
.fd-account-page-actions { gap: 8px !important; margin-top: 12px !important; }
.fd-account-page-card .fd-auth-link { min-height: 34px !important; font-size: 12px !important; }
.fd-recovery-code { margin: 12px 0 !important; padding: 11px !important; font-size: 15px !important; }

/* Tankbook and alert pages use the compact page scale. */
.fd-feature-page[data-fd-feature-view="tankbook"] { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content { min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-heading h1 { font-size: 28px !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-heading p { font-size: 12.5px !important; line-height: 1.35 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-card { border-radius: 21px !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-card h2 { font-size: 20px !important; line-height: 1.15 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] :is(input,select,textarea) { font-size: 15px !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] :is(button,.fd-auth-primary,.fd-auth-secondary) { font-size: 14px !important; }

.fd-alert-modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
.fd-alert-sheet { width: min(100%, 520px) !important; }
.fd-alert-head h2 { font-size: 23px !important; }
.fd-alert-close { width: 38px !important; height: 38px !important; font-size: 22px !important; }
.fd-alert-grid { gap: 8px !important; }
.fd-alert-row { min-height: 58px !important; padding: 12px 13px !important; border-radius: 15px !important; }
.fd-alert-row span { font-size: 14px !important; }
.fd-alert-row small { font-size: 10.5px !important; }
.fd-alert-row select,
.fd-alert-row input[type="time"],
.fd-alert-row input[type="number"] { min-height: 38px !important; max-width: 126px !important; padding: 8px 9px !important; font-size: 14px !important; }
.fd-alert-station { min-height: 58px !important; padding: 9px 12px !important; }
.fd-alert-station strong { font-size: 13px !important; }
.fd-alert-actions button { min-height: 46px !important; padding: 11px 10px !important; font-size: 12.5px !important; }

/* Light mode keeps the same red/green price semantics as dark mode. */
html[data-fd-theme="light"] #app .station-value .price-change.is-lower,
html[data-fd-theme="light"] #app .fd-best__trend.is-lower { color: var(--fd-r106-green) !important; text-shadow: none !important; }
html[data-fd-theme="light"] #app .station-value .price-change.is-higher,
html[data-fd-theme="light"] #app .fd-best__trend.is-higher { color: #e23b33 !important; text-shadow: none !important; }
html[data-fd-theme="light"] #app .fd-best__trend.is-steady,
html[data-fd-theme="light"] #app .price-change.is-neutral { color: #77777f !important; }

@media (max-width: 390px) {
  .fd-profile-greeting { max-width: 88px; font-size: 11px; }
  .fd-account-page-title h1 { font-size: 28px !important; }
  .fd-account-page-status,
  .fd-account-page-card { padding: 14px !important; }
  .fd-account-page-actions { grid-template-columns: 1fr !important; }
}

/* ===== assets/r107-account-live-fixes.css ===== */
/* FuelDash R107 — compact account page, one mobile scroller and semantic cloud states. */
:root {
  --fd-r107-mint: #63e6be;
  --fd-r107-red: #ff5a52;
  --fd-r107-orange: #ff9f43;
}

/* One scroll owner fixes the clipped black block produced by nested 100dvh containers on iOS Safari. */
.fd-feature-page[data-fd-feature-view="account"] {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-shell {
  display: block !important;
  width: min(100%, 480px) !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-content {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 16px 0 !important;
}

/* Header geometry is identical to station details. */
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header {
  min-height: 54px !important;
  margin: 2px 0 10px !important;
  padding: calc(10px + env(safe-area-inset-top)) 16px 0 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark,
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > span,
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > strong {
  font-size: 29px !important;
  line-height: 1 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark img {
  width: 42px !important;
  height: 42px !important;
}

/* Compact hierarchy aligned with dashboard cards. */
.fd-account-page-title {
  padding: 2px 16px 12px !important;
}
.fd-account-page-title small {
  font-size: 9px !important;
  letter-spacing: .17em !important;
}
.fd-account-page-title h1 {
  margin-top: 3px !important;
  font-size: 25px !important;
  line-height: 1.06 !important;
  letter-spacing: -.032em !important;
}
.fd-account-page-title p {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.fd-account-page {
  max-width: 448px !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
.fd-account-page-status,
.fd-account-page-card {
  padding: 14px !important;
  border-radius: 18px !important;
}
.fd-account-page-status small,
.fd-account-page-card .fd-feature-card__head small {
  font-size: 9px !important;
  letter-spacing: .15em !important;
}
.fd-account-page-status h2,
.fd-account-page-card h2 {
  margin-top: 3px !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: -.018em !important;
}
.fd-account-page-status p,
.fd-account-page-card > p {
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
}
.fd-account-page-status > div > small:last-child {
  margin-top: 6px !important;
  font-size: 10px !important;
}
.fd-account-page-card .fd-feature-card__head {
  margin-bottom: 10px !important;
}
.fd-account-page-card .fd-feature-card__head > span {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.fd-account-page-actions {
  gap: 7px !important;
  margin-top: 10px !important;
}
.fd-account-page-card :is(.fd-auth-primary,.fd-auth-secondary) {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
}
.fd-account-page-card .fd-auth-link {
  min-height: 30px !important;
  font-size: 11px !important;
}
.fd-account-page-card .fd-auth-switch {
  margin-bottom: 10px !important;
  border-radius: 13px !important;
}
.fd-account-page-card .fd-auth-switch button {
  min-height: 38px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}
.fd-account-page-card .fd-auth-form {
  gap: 9px !important;
}
.fd-account-page-card .fd-auth-form label {
  gap: 4px !important;
  font-size: 11px !important;
}
.fd-account-page-card .fd-auth-form input {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
}

/* Explicit cloud semantics in every account/tankbook status location. */
[data-cloud-tone="active"],
.fd-account-page-status[data-cloud-tone="active"] h2 {
  color: var(--fd-r107-mint) !important;
}
[data-cloud-tone="inactive"],
.fd-account-page-status[data-cloud-tone="inactive"] h2 {
  color: var(--fd-r107-red) !important;
}
[data-cloud-tone="error"],
.fd-account-page-status[data-cloud-tone="error"] h2 {
  color: var(--fd-r107-orange) !important;
}
.fd-account-page-card .fd-feature-card__head > span[data-cloud-tone="active"] {
  border: 1px solid color-mix(in srgb, var(--fd-r107-mint) 35%, transparent) !important;
  background: color-mix(in srgb, var(--fd-r107-mint) 11%, transparent) !important;
}
.fd-account-page-card .fd-feature-card__head > span[data-cloud-tone="inactive"] {
  border: 1px solid color-mix(in srgb, var(--fd-r107-red) 35%, transparent) !important;
  background: color-mix(in srgb, var(--fd-r107-red) 11%, transparent) !important;
}
.fd-account-page-card .fd-feature-card__head > span[data-cloud-tone="error"] {
  border: 1px solid color-mix(in srgb, var(--fd-r107-orange) 38%, transparent) !important;
  background: color-mix(in srgb, var(--fd-r107-orange) 12%, transparent) !important;
}

/* Live-data recovery actions remain compact and wrap safely. */
.live-error .fd-live-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.live-error .fd-live-location-button,
.live-error .refresh-pill {
  min-height: 38px !important;
  margin: 0 !important;
}
.live-error .fd-live-location-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #ff3b30;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

/* ===== assets/r109-startup-stability.css ===== */
/* FuelDash R109 — keep one stable startup surface visible until the first render burst settles. */
html.fd-app-starting,
html.fd-app-starting body {
  overflow: hidden !important;
  background: var(--fd-page-bg, #050505) !important;
}

html.fd-app-starting #app {
  min-height: 100dvh;
  visibility: hidden;
}

html.fd-render-quiet :where(#app, #app *) {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

.fd-startup-cover {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--fd-page-bg, #050505);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  contain: layout paint style;
}

.fd-startup-cover .fd-fast-shell {
  min-height: 100%;
  height: 100dvh;
  overflow: hidden;
}

.fd-startup-cover.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease-out, visibility 0s linear 160ms;
}

html.fd-app-ready #app {
  visibility: visible;
}

html[data-fd-theme="light"] .fd-startup-cover {
  background: #f5f5f7;
}

html[data-fd-theme="light"] .fd-startup-cover .fd-fast-kicker,
html[data-fd-theme="light"] .fd-startup-cover .fd-fast-line {
  background: rgba(24,24,27,.11);
}

html[data-fd-theme="light"] .fd-startup-cover .fd-fast-title {
  background: rgba(24,24,27,.15);
}

html[data-fd-theme="light"] .fd-startup-cover .fd-fast-card {
  border-color: rgba(25,25,28,.10);
  background: rgba(255,255,255,.68);
}

html[data-fd-theme="light"] .fd-startup-cover .fd-fast-nav {
  border-color: rgba(25,25,28,.12);
  background: rgba(247,247,249,.90);
}

html[data-fd-theme="light"] .fd-startup-cover .fd-fast-nav span {
  color: rgba(25,25,28,.58);
}

html[data-fd-theme="light"] .fd-startup-cover .fd-fast-nav span:first-child {
  color: #ff3b30;
}

@media (prefers-reduced-motion: reduce) {
  .fd-startup-cover.is-leaving {
    transition-duration: 1ms;
  }
}

/* ===== assets/r113-ui-consolidation.css ===== */
/* FuelDash R113 — one control family, dashboard-like feature scrolling and uninterrupted theme surfaces. */
:root {
  --fd-r113-red: #ff3b30;
  --fd-r113-dark-bg: #050505;
  --fd-r113-light-bg: #f5f5f7;
  --fd-info-text: #9a9aa0;
  --fd-r113-glass-dark: linear-gradient(145deg, rgba(27,27,31,.88), rgba(8,8,11,.96));
  --fd-r113-glass-light: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,235,240,.80));
}
html[data-fd-theme="light"] { --fd-info-text: #6e6e73; }

html,
body {
  min-height: 100% !important;
  background: var(--fd-r113-dark-bg) !important;
}
html[data-fd-theme="light"],
html[data-fd-theme="light"] body {
  background: var(--fd-r113-light-bg) !important;
}
body.fd-feature-open {
  overflow: hidden !important;
  background: var(--fd-r113-dark-bg) !important;
}
html[data-fd-theme="light"] body.fd-feature-open {
  background: var(--fd-r113-light-bg) !important;
}

/* Profile, reload, back and close are one exact FuelDash glass component. */
:is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #2c2c31 !important;
  border-radius: 50% !important;
  background: var(--fd-r113-glass-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
  transition: none !important;
  animation: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
:is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform-origin: 50% 50% !important;
}
html[data-fd-theme="light"] :is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  color: #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}
:is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close):is(:focus,:focus-visible,:active) {
  outline: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.fd-app-reload.is-reloading svg { animation: fd-r113-reload-spin .64s linear infinite !important; }
@keyframes fd-r113-reload-spin { to { transform: rotate(360deg); } }

/* All feature views use the same pattern as the dashboard: one page scroller; header is normal page content. */
.fd-feature-page,
.fd-feature-page[data-fd-feature-view="account"],
.fd-feature-page[data-fd-feature-view="tankbook"],
.fd-feature-page[data-fd-feature-view="appearance"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  background: var(--fd-r113-dark-bg) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html[data-fd-theme="light"] .fd-feature-page {
  background: var(--fd-r113-light-bg) !important;
}
.fd-feature-page .fd-feature-shell,
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-shell,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell,
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-shell {
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 480px) !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  background: var(--fd-r113-dark-bg) !important;
}
html[data-fd-theme="light"] .fd-feature-page .fd-feature-shell {
  background: var(--fd-r113-light-bg) !important;
}
.fd-feature-page .fd-feature-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 38px !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: calc(18px + env(safe-area-inset-top)) 16px 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-feature-page .fd-feature-heading {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.fd-feature-page .fd-feature-header > .fd-feature-back {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
}
.fd-feature-page .fd-feature-content,
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-content,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content,
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-content {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 16px !important;
  overflow: visible !important;
  background: transparent !important;
  overscroll-behavior: auto !important;
}

/* Mein FuelDash header/title are part of the same scroller and never sticky. */
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: calc(18px + env(safe-area-inset-top)) 16px 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-title {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 4px 16px 14px !important;
  background: transparent !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > span {
  color: #151517 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > strong {
  color: #ff3b30 !important;
}

/* Defensive removal: cloud/account stays in Mein FuelDash, not below the tankbook. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tankbook-cloud-row { display: none !important; }

/* Same selected red outline in both themes. */
.fd-theme-choice.is-selected {
  border-color: #ff3b30 !important;
  box-shadow: inset 0 0 0 1px rgba(255,59,48,.22), 0 12px 30px rgba(0,0,0,.10) !important;
}
html[data-fd-theme="light"] .fd-theme-choice.is-selected {
  border-color: #ff3b30 !important;
  box-shadow: inset 0 0 0 1px rgba(255,59,48,.22), 0 12px 30px rgba(35,35,42,.10) !important;
}

/* Price alert header participates in the sheet scroll and all info copy matches FuelDash helper typography. */
.fd-alert-sheet {
  padding-top: max(14px, env(safe-area-inset-top)) !important;
  padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important;
  background: var(--fd-r113-dark-bg) !important;
}
html[data-fd-theme="light"] .fd-alert-sheet { background: var(--fd-r113-light-bg) !important; }
.fd-alert-head {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  margin: 0 0 14px !important;
  padding: 0 2px 12px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}
html[data-fd-theme="light"] .fd-alert-head { border-bottom-color: rgba(20,20,24,.08) !important; }
.fd-alert-note,
.fd-alert-status {
  color: var(--fd-info-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.fd-alert-row small,
.fd-alert-station small,
.fd-alert-station-section header small,
.fd-alert-empty {
  color: var(--fd-info-text) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* Exact active FuelDash red for account primary actions. */
.fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-primary,.fd-auth-switch button.is-active,button[type="submit"].fd-auth-primary),
.fd-account-sheet :is(.fd-auth-primary,.fd-auth-switch button.is-active) {
  border-color: #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Initial navigation already shows the final icon family. */
.fd-fast-nav > span {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.fd-fast-nav > span > svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.fd-fast-nav > span > span { font-size: 11px !important; line-height: 1 !important; }

@media (max-width: 390px) {
  .fd-feature-page .fd-feature-header { padding-inline: 14px !important; }
  .fd-feature-page .fd-feature-content { padding-inline: 14px !important; }
  .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header,
  .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-title { padding-inline: 14px !important; }
}

/* Canonical single-selector aliases used by diagnostics and future releases. */
.fd-feature-page { overflow-y: auto !important; }
.fd-feature-shell { min-height: 100% !important; }
.fd-feature-header { position: relative !important; }
.fd-feature-content { overflow: visible !important; }

/* High-specificity guard against legacy feature/modal geometry. */
.fd-feature-page :is(.fd-feature-back,.fd-app-reload),
.fd-alert-modal .fd-alert-close,
.fd-account-sheet .fd-account-sheet__close,
.fd-startup-cover .fd-app-reload,
#app :is(.fd-profile-button,.fd-app-reload,.detail-close) {
  box-sizing: border-box !important;
  flex-basis: 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-width: 1px !important;
  border-radius: 50% !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header :is(.fd-app-reload,.fd-feature-back,.detail-close) {
  box-sizing: border-box !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-width: 1px !important;
  border-radius: 50% !important;
}
#app .brand-header .round-button.detail-close,
.fd-account-sheet .fd-account-sheet__panel > header > .fd-account-sheet__close {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-width: 1px !important;
  border-radius: 50% !important;
  background: var(--fd-r113-glass-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
#app .brand-header .round-button.detail-close svg,
.fd-account-sheet .fd-account-sheet__panel > header > .fd-account-sheet__close svg {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 1.9 !important;
}
html[data-fd-theme="light"] #app .brand-header .round-button.detail-close,
html[data-fd-theme="light"] .fd-account-sheet .fd-account-sheet__panel > header > .fd-account-sheet__close {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  color: #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}

/* ===== assets/r117-ui-refinement.css ===== */
/* FuelDash R114 — focused visual refinement on top of the verified R113 behavior. */
:root {
  --fd-r114-red: #ff3b30;
  --fd-r114-mint: #63e6be;
  --fd-r114-orange: #ff9f43;
  --fd-r114-gap: 16px;
  --fd-r114-glass-dark: linear-gradient(145deg, rgba(27,27,31,.88), rgba(8,8,11,.96));
  --fd-r114-glass-light: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,235,240,.80));
}

/* Startup: no floating spinner. The unlabelled skeleton surfaces carry the loading motion. */
.fd-startup-cover .fd-fast-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fd-startup-cover .fd-fast-card::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.075) 43%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.075) 57%, transparent 80%);
  transform: translateX(-115%);
  animation: fd-r114-skeleton-sweep 1.65s cubic-bezier(.4,0,.2,1) infinite;
}
.fd-startup-cover :is(.fd-fast-line,.fd-fast-kicker,.fd-fast-title) {
  position: relative;
  z-index: 1;
  background-size: 220% 100% !important;
  background-image: linear-gradient(100deg, rgba(255,255,255,.09) 22%, rgba(255,255,255,.18) 46%, rgba(255,255,255,.09) 70%) !important;
  animation: fd-r114-skeleton-shimmer 1.65s ease-in-out infinite;
}
.fd-startup-cover .fd-fast-line.is-price {
  background-image: linear-gradient(100deg, rgba(255,59,48,.18) 22%, rgba(255,59,48,.34) 46%, rgba(255,59,48,.18) 70%) !important;
}
html[data-fd-theme="light"] .fd-startup-cover :is(.fd-fast-line,.fd-fast-kicker,.fd-fast-title) {
  background-image: linear-gradient(100deg, rgba(24,24,27,.08) 22%, rgba(24,24,27,.17) 46%, rgba(24,24,27,.08) 70%) !important;
}
html[data-fd-theme="light"] .fd-startup-cover .fd-fast-line.is-price {
  background-image: linear-gradient(100deg, rgba(255,59,48,.14) 22%, rgba(255,59,48,.28) 46%, rgba(255,59,48,.14) 70%) !important;
}
@keyframes fd-r114-skeleton-sweep {
  from { transform: translateX(-115%); }
  to { transform: translateX(115%); }
}
@keyframes fd-r114-skeleton-shimmer {
  from { background-position: 115% 0; }
  to { background-position: -115% 0; }
}

/* All round header controls use the exact profile-button component, regardless of view. */
:is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #2c2c31 !important;
  border-radius: 50% !important;
  background: var(--fd-r114-glass-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
  outline: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
:is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html[data-fd-theme="light"] :is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r114-glass-light) !important;
  color: #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}

/* Account: dashboard rhythm, one coherent glass card, and unambiguous status tones. */
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page {
  display: grid !important;
  gap: 16px !important;
}
.fd-feature-page[data-fd-feature-view="account"] :is(.fd-account-page-status,.fd-account-page-card) {
  box-sizing: border-box !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 22px !important;
  background: var(--fd-r114-glass-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 18px 42px rgba(0,0,0,.27) !important;
  -webkit-backdrop-filter: blur(28px) saturate(130%) !important;
  backdrop-filter: blur(28px) saturate(130%) !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="account"] :is(.fd-account-page-status,.fd-account-page-card) {
  border-color: rgba(30,30,35,.10) !important;
  background: var(--fd-r114-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 16px 38px rgba(35,35,42,.10) !important;
}
html:not([data-fd-theme="light"]) .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status[data-cloud-tone="inactive"] h2 {
  color: #fff !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status[data-cloud-tone="inactive"] h2 {
  color: #171719 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status[data-cloud-tone="active"] h2 { color: var(--fd-r114-mint) !important; }
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status[data-cloud-tone="error"] h2 { color: var(--fd-r114-orange) !important; }
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-feature-card__head { margin-bottom: var(--fd-r114-gap) !important; }
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-auth-switch {
  margin: 0 0 var(--fd-r114-gap) !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: linear-gradient(145deg, rgba(40,40,45,.80), rgba(23,23,27,.86)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-auth-form {
  display: grid !important;
  gap: 16px !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-auth-form > label {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-auth-form input {
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(145deg, rgba(45,45,50,.88), rgba(31,31,36,.90)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-auth-form-status:empty { display: none !important; }
.fd-feature-page[data-fd-feature-view="account"] :is(.fd-account-page-actions,.fd-account-page-actions--stack,.fd-account-signed-in) {
  display: grid !important;
  gap: 16px !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-auth-link {
  margin: 0 !important;
  min-height: 38px !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-auth-switch {
  border-color: rgba(35,35,40,.14) !important;
  background: linear-gradient(145deg, rgba(246,246,248,.96), rgba(227,227,232,.88)) !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-auth-form input {
  border-color: rgba(35,35,40,.14) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,235,240,.92)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}

/* Appearance: every card-to-card interval follows the same dashboard rhythm. */
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-content {
  display: grid !important;
  gap: 16px !important;
}
.fd-feature-page[data-fd-feature-view="appearance"] .fd-theme-options {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-note { margin: 0 !important; padding-top: 2px !important; }

/* Price-alert status: same geometry as the alert cards and explicit operational tone. */
.fd-alert-status {
  box-sizing: border-box !important;
  margin: 0 0 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(25,25,29,.86), rgba(8,8,10,.92)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
}
.fd-alert-status[data-tone="active"] { color: #63e6be !important; border-color: rgba(99,230,190,.28) !important; }
.fd-alert-status[data-tone="inactive"] { color: #ff3b30 !important; border-color: rgba(255,59,48,.28) !important; }
.fd-alert-status[data-tone="error"] { color: #ff9f43 !important; border-color: rgba(255,159,67,.30) !important; }
.fd-alert-status[data-tone="pending"] { color: #ff9f43 !important; border-color: rgba(255,159,67,.24) !important; }
html[data-fd-theme="light"] .fd-alert-status {
  border-color: rgba(35,35,40,.12) !important;
  background: var(--fd-r114-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 12px 28px rgba(35,35,42,.08) !important;
}

@media (prefers-reduced-motion: reduce) {
  .fd-startup-cover .fd-fast-card::after,
  .fd-startup-cover :is(.fd-fast-line,.fd-fast-kicker,.fd-fast-title) { animation: none !important; }
}

/* Context-specific final guard: legacy release selectors must not visually fork the shared control. */
html body #app .brand-header :is(.fd-profile-button,.fd-app-reload,.round-button.detail-close),
html body:not(#fd-r114-control-scope) .fd-feature-page[data-fd-feature-view] .fd-feature-header .fd-feature-back,
html body:not(#fd-r114-control-scope) .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header :is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close),
html body:not(#fd-r114-control-scope) .fd-alert-modal .fd-alert-sheet .fd-alert-head .fd-alert-close,
html body:not(#fd-r114-control-scope) .fd-account-sheet .fd-account-sheet__panel > header > .fd-account-sheet__close,
html body:not(#fd-r114-control-scope) .fd-startup-cover .fd-fast-header .fd-app-reload {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #2c2c31 !important;
  border-radius: 50% !important;
  background: var(--fd-r114-glass-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html[data-fd-theme="light"] body #app .brand-header :is(.fd-profile-button,.fd-app-reload,.round-button.detail-close),
html[data-fd-theme="light"] body:not(#fd-r114-control-scope) .fd-feature-page[data-fd-feature-view] .fd-feature-header .fd-feature-back,
html[data-fd-theme="light"] body:not(#fd-r114-control-scope) .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header :is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close),
html[data-fd-theme="light"] body:not(#fd-r114-control-scope) .fd-alert-modal .fd-alert-sheet .fd-alert-head .fd-alert-close,
html[data-fd-theme="light"] body:not(#fd-r114-control-scope) .fd-account-sheet .fd-account-sheet__panel > header > .fd-account-sheet__close,
html[data-fd-theme="light"] body:not(#fd-r114-control-scope) .fd-startup-cover .fd-fast-header .fd-app-reload {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r114-glass-light) !important;
  color: #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}

/* Status-tone guard against older theme selectors with stronger :is() specificity. */
html body:not(#fd-r114-status-scope) .fd-alert-modal .fd-alert-status[data-tone="active"] { color: #63e6be !important; border-color: rgba(99,230,190,.28) !important; }
html body:not(#fd-r114-status-scope) .fd-alert-modal .fd-alert-status[data-tone="inactive"] { color: #ff3b30 !important; border-color: rgba(255,59,48,.28) !important; }
html body:not(#fd-r114-status-scope) .fd-alert-modal .fd-alert-status[data-tone="error"] { color: #ff9f43 !important; border-color: rgba(255,159,67,.30) !important; }
html body:not(#fd-r114-status-scope) .fd-alert-modal .fd-alert-status[data-tone="pending"] { color: #ff9f43 !important; border-color: rgba(255,159,67,.24) !important; }


/* FuelDash R115 — spacing polish, dot-only refresh status, and tankbook cleanup. */

/* Header update hint: dot only, no visible text. */
#app .header-background-status {
  min-height: 10px !important;
  min-width: 10px !important;
  width: 10px !important;
  padding: 0 !important;
  gap: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
#app .header-background-status b,
#app .header-background-status::before,
#app .header-background-status::after {
  display: none !important;
  content: none !important;
}
#app .header-background-status i {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

/* Shared dashboard rhythm for Darstellung and Tankbuch content areas. */
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-content,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  display: grid !important;
  align-content: start !important;
  gap: 16px !important;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom)) !important;
}
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-content > *,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content > * {
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="appearance"] .fd-theme-options {
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-note,
.fd-feature-page[data-fd-feature-view="appearance"] [data-fd-appearance-status] {
  display: none !important;
}

/* Appearance preview thumbnails: always readable, no extra HELL/DUNKEL label. */
.fd-theme-preview__top b,
.fd-theme-preview__top .fd-theme-preview__fuel {
  color: #ffffff !important;
}
.fd-theme-preview.is-light .fd-theme-preview__top b,
.fd-theme-preview.is-light .fd-theme-preview__top .fd-theme-preview__fuel {
  color: #151517 !important;
}
.fd-theme-preview__top strong {
  color: #ff3b30 !important;
}
.fd-theme-preview__label {
  display: none !important;
}

/* Tankbuch: even card spacing above/below each block, including below the header divider. */
.fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-month-card,.fd-cloud-card,.fd-backup-card,.fd-tank-history,.fd-overall-card,.fd-tank-form-card,.fd-account-card) {
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form {
  gap: 16px 16px !important;
  margin-top: 16px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: auto !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras[open],
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras[open] > div {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary {
  min-height: 40px !important;
  padding: 0 30px 0 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 16px !important;
  padding-top: 16px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras .fd-field:last-child {
  grid-column: 1 / -1 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-form-status,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-status {
  margin: 0 !important;
}

/* Monthly statistics: more compact red-tinted date control matching the site language. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 16px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  justify-items: end !important;
  gap: 6px !important;
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 136px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px 0 32px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,59,48,.28) !important;
  background: rgba(255,59,48,.12) !important;
  color: inherit !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg {
  left: 10px !important;
  width: 15px !important;
  height: 15px !important;
  color: #ff3b30 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__label,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input {
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input {
  height: 34px !important;
  min-height: 34px !important;
  text-align: center !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: rgba(255,59,48,.24) !important;
  background: rgba(255,59,48,.10) !important;
  color: #171719 !important;
}
html[data-fd-theme="dark"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: rgba(255,59,48,.30) !important;
  background: rgba(255,59,48,.14) !important;
  color: #f7f7f8 !important;
}

@media (max-width: 520px) {
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form,
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div,
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
    justify-items: start !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
    width: 136px !important;
  }
}

/* ===== assets/r117-ui-polish.css ===== */
/* FuelDash R115 — final UI rhythm and preview corrections without regressing R114 behavior. */
:root {
  --fd-r115-gap: 16px;
  --fd-r115-red: #ff3b30;
  --fd-r115-red-soft-dark: linear-gradient(145deg, rgba(255,59,48,.18), rgba(64,11,14,.30));
  --fd-r115-red-soft-light: linear-gradient(145deg, rgba(255,59,48,.10), rgba(255,255,255,.82));
}

/* Header background update indicator: red dot only, no label. */
#app .header-background-status {
  min-width: 9px !important;
  min-height: 28px !important;
  gap: 0 !important;
  font-size: 0 !important;
}
#app .header-background-status b {
  display: none !important;
}
#app .header-background-status i {
  margin: 0 !important;
}

/* Appearance and Tankbuch follow the dashboard card rhythm, including top spacing below the divider. */
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-content,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  display: grid !important;
  gap: var(--fd-r115-gap) !important;
  padding-top: var(--fd-r115-gap) !important;
  padding-bottom: var(--fd-r115-gap) !important;
}
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-content > *,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content > * {
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="appearance"] .fd-theme-options {
  gap: var(--fd-r115-gap) !important;
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-note {
  display: none !important;
}

/* Preview cards: keep Fuel readable in both modes and remove redundant preview labels. */
.fd-theme-preview__top b {
  color: #fff !important;
}
.fd-theme-preview.is-light .fd-theme-preview__top b {
  color: #151517 !important;
}
.fd-theme-preview__top strong {
  color: var(--fd-r115-red) !important;
}
.fd-theme-preview__label {
  display: none !important;
}

/* Tankbuch: evenly spaced cards and consistent head/body rhythm. */
.fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-feature-card,.fd-theme-choice,.fd-tank-history,.fd-tankbook-cloud-row,.fd-account-card) {
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-card__head {
  margin-bottom: var(--fd-r115-gap) !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form {
  margin-top: 0 !important;
  gap: 14px 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-summary,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-grid,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card__manager {
  margin-top: var(--fd-r115-gap) !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-card,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-cloud-card,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-card {
  margin-bottom: 0 !important;
}

/* Additional fields expansion: no iOS dark tap veil / overlay. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form-card,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary {
  background: transparent !important;
  box-shadow: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  outline: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary:focus,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary:active {
  background: transparent !important;
}

/* Monthly statistics date control: smaller and aligned to the FuelDash red glass control style. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  gap: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  gap: 5px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 132px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px 0 29px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,59,48,.26) !important;
  background: var(--fd-r115-red-soft-dark) !important;
  color: #ffd9d6 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg {
  left: 10px !important;
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: currentColor !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input {
  height: 34px !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  background: var(--fd-r115-red-soft-light) !important;
  color: #b22b24 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.82), 0 8px 18px rgba(255,59,48,.08) !important;
}

@media (max-width: 360px) {
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
    width: 124px !important;
  }
}


/* FuelDash R117 — glass alignment, preview fidelity, light-mode color parity. */
:root {
  --fd-r117-red: #ff3b30;
  --fd-r117-mint: #43f2bf;
  --fd-r117-glass-dark: linear-gradient(145deg, rgba(24,24,28,.90), rgba(7,7,9,.94));
  --fd-r117-glass-light: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,237,242,.92));
  --fd-r117-gap: 16px;
}

/* Appearance cards and tankbook keep dashboard-like vertical rhythm. */
.fd-feature-page[data-fd-feature-view=appearance] .fd-feature-content,
.fd-feature-page[data-fd-feature-view=tankbook] .fd-feature-content,
.fd-alert-modal .fd-alert-grid {
  gap: var(--fd-r117-gap) !important;
}
.fd-feature-page[data-fd-feature-view=appearance] .fd-feature-card,
.fd-feature-page[data-fd-feature-view=appearance] .fd-theme-choice,
.fd-feature-page[data-fd-feature-view=tankbook] .fd-feature-card,
.fd-feature-page[data-fd-feature-view=tankbook] .fd-theme-choice,
.fd-feature-page[data-fd-feature-view=tankbook] .fd-tank-history,
.fd-feature-page[data-fd-feature-view=tankbook] .fd-account-card {
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view=appearance] .fd-feature-card { margin-top: 0 !important; }
.fd-feature-page[data-fd-feature-view=appearance] .fd-feature-content > :first-child,
.fd-feature-page[data-fd-feature-view=tankbook] .fd-feature-content > :first-child { margin-top: 0 !important; }

/* Strong preview fidelity: Fuel/Dash colors per selected example. */
.fd-theme-preview__top b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}
.fd-theme-preview__top .fd-theme-preview__fuel {
  color: #ffffff !important;
  opacity: 1 !important;
}
.fd-theme-preview.is-light .fd-theme-preview__top .fd-theme-preview__fuel {
  color: #151517 !important;
}
.fd-theme-preview__top strong { color: var(--fd-r117-red) !important; }
.fd-theme-choice__copy small { display: block !important; }

/* Tankbuch date control: still compact, but no longer cramped. */
.fd-feature-page[data-fd-feature-view=tankbook] .fd-month-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.fd-feature-page[data-fd-feature-view=tankbook] .fd-statistics-date {
  align-self: flex-end !important;
  gap: 6px !important;
}
.fd-feature-page[data-fd-feature-view=tankbook] .fd-statistics-date__control {
  width: 172px !important;
  min-width: 172px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px 0 34px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,59,48,.22) !important;
  background: linear-gradient(145deg, rgba(255,59,48,.10), rgba(255,255,255,.72)) !important;
  color: #b23d37 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.74) !important;
}
html[data-fd-theme=dark] .fd-feature-page[data-fd-feature-view=tankbook] .fd-statistics-date__control {
  background: linear-gradient(145deg, rgba(255,59,48,.18), rgba(57,13,16,.30)) !important;
  color: #ffe3e0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
}
.fd-feature-page[data-fd-feature-view=tankbook] .fd-statistics-date__control > svg {
  left: 12px !important;
  width: 15px !important;
  height: 15px !important;
}
.fd-feature-page[data-fd-feature-view=tankbook] .fd-statistics-date__label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* Remove any dark tap veil when expanding additional fields. */
.fd-feature-page[data-fd-feature-view=tankbook] details,
.fd-feature-page[data-fd-feature-view=tankbook] details[open],
.fd-feature-page[data-fd-feature-view=tankbook] details > div,
.fd-feature-page[data-fd-feature-view=tankbook] details summary,
.fd-feature-page[data-fd-feature-view=tankbook] details summary::marker,
.fd-feature-page[data-fd-feature-view=tankbook] details summary::-webkit-details-marker {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Price alert modal aligned to appearance/tankbook glass cards. */
.fd-alert-head {
  padding: 8px 2px 16px !important;
  background: linear-gradient(180deg, rgba(5,5,5,.98) 76%, rgba(5,5,5,0)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
}
.fd-alert-status,
.fd-alert-row,
.fd-alert-station,
.fd-alert-empty {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: var(--fd-r117-glass-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
}
.fd-alert-row { padding: 15px 16px !important; }
.fd-alert-row small,
.fd-alert-note,
.fd-alert-station small,
.fd-alert-station-section header small { color: #8e8e93 !important; font-size: 12px !important; }
.fd-alert-row select,
.fd-alert-row input[type=time],
.fd-alert-row input[type=number] {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: linear-gradient(145deg, rgba(44,44,48,.88), rgba(27,27,31,.92)) !important;
}
html[data-fd-theme=light] .fd-alert-modal {
  background: #efeff2 !important;
}
html[data-fd-theme=light] .fd-alert-head {
  background: linear-gradient(180deg, rgba(239,239,242,.98) 76%, rgba(239,239,242,0)) !important;
}
html[data-fd-theme=light] .fd-alert-status,
html[data-fd-theme=light] .fd-alert-row,
html[data-fd-theme=light] .fd-alert-station,
html[data-fd-theme=light] .fd-alert-empty {
  border-color: rgba(35,35,40,.12) !important;
  background: var(--fd-r117-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 9px 22px rgba(35,35,42,.08) !important;
  color: #17171b !important;
}
html[data-fd-theme=light] .fd-alert-row small,
html[data-fd-theme=light] .fd-alert-note,
html[data-fd-theme=light] .fd-alert-station small,
html[data-fd-theme=light] .fd-alert-station-section header small,
html[data-fd-theme=light] .fd-alert-status { color: #6c6c74 !important; }
html[data-fd-theme=light] .fd-alert-row select,
html[data-fd-theme=light] .fd-alert-row input[type=time],
html[data-fd-theme=light] .fd-alert-row input[type=number] {
  color: #17171b !important;
  border-color: rgba(35,35,40,.14) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,237,242,.92)) !important;
}

/* Light mode: enforce the same mint/red price semantics as dark mode everywhere. */
html[data-fd-theme=light] #app :is(.price-change.is-lower, .fd-best__trend.is-lower, .fd-best__trend.is-lower i) {
  color: var(--fd-r117-mint) !important;
  fill: var(--fd-r117-mint) !important;
  stroke: var(--fd-r117-mint) !important;
  text-shadow: none !important;
}
html[data-fd-theme=light] #app :is(.price-change.is-higher, .fd-best__trend.is-higher, .fd-best__trend.is-higher i) {
  color: var(--fd-r117-red) !important;
  fill: var(--fd-r117-red) !important;
  stroke: var(--fd-r117-red) !important;
  text-shadow: none !important;
}
html[data-fd-theme=light] #app :is(.price-change.is-neutral, .fd-best__trend.is-steady, .fd-best__trend.is-steady i) {
  color: #77777f !important;
  fill: #77777f !important;
  stroke: #77777f !important;
  text-shadow: none !important;
}

/* R117 final cascade guards: the rules below intentionally outrank legacy light-mode !important selectors. */
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="appearance"] .fd-theme-preview.is-dark .fd-theme-preview__top .fd-theme-preview__fuel {
  color: #ffffff !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="appearance"] .fd-theme-preview.is-light .fd-theme-preview__top .fd-theme-preview__fuel {
  color: #151517 !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="appearance"] .fd-theme-preview .fd-theme-preview__top strong,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="appearance"] .fd-theme-preview .fd-theme-preview__top strong {
  color: #ff3b30 !important;
}

/* Exact dark/light price-color parity, with higher specificity than the R106 compatibility layer. */
html[data-fd-theme="light"] body #app .station-value .price-change.is-lower,
html[data-fd-theme="light"] body #app .fd-best__trend.is-lower,
html[data-fd-theme="light"] body #app .fd-best__trend.is-lower i {
  color: #43f2bf !important;
  fill: #43f2bf !important;
  stroke: #43f2bf !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] body #app .station-value .price-change.is-higher,
html[data-fd-theme="light"] body #app .fd-best__trend.is-higher,
html[data-fd-theme="light"] body #app .fd-best__trend.is-higher i {
  color: #ff3b30 !important;
  fill: #ff3b30 !important;
  stroke: #ff3b30 !important;
  text-shadow: none !important;
}

/* One visual system for Darstellung, Tankbuch and Preisalarm major cards. */
.fd-feature-page[data-fd-feature-view="appearance"] :is(.fd-feature-card,.fd-theme-choice),
.fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-feature-card,.fd-tank-history,.fd-account-card),
.fd-alert-modal :is(.fd-alert-status,.fd-alert-row,.fd-alert-station,.fd-alert-empty) {
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(22,22,25,.94), rgba(9,9,11,.97)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 16px 36px rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="appearance"] :is(.fd-feature-card,.fd-theme-choice),
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-feature-card,.fd-tank-history,.fd-account-card),
html[data-fd-theme="light"] .fd-alert-modal :is(.fd-alert-status,.fd-alert-row,.fd-alert-station,.fd-alert-empty) {
  border-color: rgba(35,35,40,.12) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,240,244,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 12px 30px rgba(35,35,42,.09) !important;
}

/* Matching secondary glass controls inside Tankbuch and Preisalarm. */
.fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-tank-summary article,.fd-month-grid article,.fd-tank-entry,.fd-tank-empty,.fd-backup-actions button),
.fd-alert-modal :is(select,input[type="time"],input[type="number"]) {
  border: 1px solid rgba(255,255,255,.09) !important;
  background: linear-gradient(145deg, rgba(43,43,48,.88), rgba(25,25,29,.92)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-tank-summary article,.fd-month-grid article,.fd-tank-entry,.fd-tank-empty,.fd-backup-actions button),
html[data-fd-theme="light"] .fd-alert-modal :is(select,input[type="time"],input[type="number"]) {
  border-color: rgba(35,35,40,.13) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,237,242,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}

/* ===== assets/r119-consistency.css ===== */
/* FuelDash R119 — component-scoped consistency system based on the accepted Tankbuch language. */
:root {
  --fd-r119-page-dark: #050505;
  --fd-r119-page-light: #f5f5f7;
  --fd-r119-card-dark: linear-gradient(145deg, rgba(22,22,25,.94), rgba(9,9,11,.97));
  --fd-r119-card-light: linear-gradient(145deg, rgba(255,255,255,.97), rgba(235,235,240,.91));
  --fd-r119-tile-dark: linear-gradient(145deg, rgba(43,43,48,.88), rgba(25,25,29,.92));
  --fd-r119-tile-light: linear-gradient(145deg, rgba(255,255,255,.98), rgba(230,230,235,.90));
  --fd-r119-control-dark: linear-gradient(145deg, rgba(45,45,50,.84), rgba(24,24,28,.91));
  --fd-r119-control-light: linear-gradient(145deg, rgba(255,255,255,.98), rgba(231,231,236,.90));
  --fd-r119-red-glass: linear-gradient(145deg, rgba(255,59,48,.88), rgba(181,28,24,.77));
  --fd-r119-red-glass-light: linear-gradient(145deg, rgba(255,59,48,.90), rgba(220,43,36,.80));
  --fd-r119-border-dark: rgba(255,255,255,.09);
  --fd-r119-border-light: rgba(35,35,40,.13);
  --fd-r119-card-shadow-dark: inset 0 1px rgba(255,255,255,.055), 0 16px 36px rgba(0,0,0,.22);
  --fd-r119-card-shadow-light: inset 0 1px rgba(255,255,255,.98), 0 12px 30px rgba(35,35,42,.09);
  --fd-r119-control-shadow-dark: inset 0 1px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.15);
  --fd-r119-control-shadow-light: inset 0 1px rgba(255,255,255,.98), 0 8px 18px rgba(35,35,42,.07);
  --fd-r119-radius-card: 22px;
  --fd-r119-radius-tile: 16px;
  --fd-r119-radius-control: 14px;
  --fd-r119-gap: 16px;
  --fd-r119-red: #ff3b30;
  --fd-r119-mint: #43f2bf;
  --fd-r119-orange: #ff9f43;
  --fd-r119-text-dark: #f7f7f8;
  --fd-r119-text-light: #171719;
  --fd-r119-muted-dark: #99999f;
  --fd-r119-muted-light: #6f6f77;
}

/* Page backgrounds are continuous; structural wrappers never paint an extra layer. */
html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body,
html[data-fd-theme="dark"] #app,
html[data-fd-theme="dark"] #app .app-shell,
html[data-fd-theme="dark"] #app .app-content,
html[data-fd-theme="dark"] .fd-feature-page,
html[data-fd-theme="dark"] .fd-feature-shell,
html[data-fd-theme="dark"] .fd-feature-content,
html[data-fd-theme="dark"] .fd-alert-modal {
  background-color: var(--fd-r119-page-dark) !important;
}
html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content,
html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-content,
html[data-fd-theme="light"] .fd-alert-modal {
  background-color: var(--fd-r119-page-light) !important;
}

/* One top-level card family. Selectors are explicit to avoid styling layout and hit-target elements. */
html body #app :is(
  .glass-card,
  .fd-best,
  .favorites-block,
  .station-result,
  .search-suggestion-panel,
  .menu-card,
  .detail-card,
  .station-detail-card,
  .primary-station-card,
  .dashboard-advice-card,
  .detail-advice-card,
  .route-options,
  .empty-state,
  .live-error
),
html body .fd-feature-page :is(
  .fd-feature-card,
  .fd-theme-choice,
  .fd-account-page-status,
  .fd-account-page-card,
  .fd-account-recovery-card,
  .fd-tank-history
),
html body .fd-alert-modal :is(
  .fd-alert-status,
  .fd-alert-row,
  .fd-alert-station,
  .fd-alert-empty
),
html body .fd-account-sheet__panel {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r119-border-dark) !important;
  border-radius: var(--fd-r119-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-card-dark) !important;
  box-shadow: var(--fd-r119-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
  color: var(--fd-r119-text-dark) !important;
}
html[data-fd-theme="light"] body #app :is(
  .glass-card,
  .fd-best,
  .favorites-block,
  .station-result,
  .search-suggestion-panel,
  .menu-card,
  .detail-card,
  .station-detail-card,
  .primary-station-card,
  .dashboard-advice-card,
  .detail-advice-card,
  .route-options,
  .empty-state,
  .live-error
),
html[data-fd-theme="light"] body .fd-feature-page :is(
  .fd-feature-card,
  .fd-theme-choice,
  .fd-account-page-status,
  .fd-account-page-card,
  .fd-account-recovery-card,
  .fd-tank-history
),
html[data-fd-theme="light"] body .fd-alert-modal :is(
  .fd-alert-status,
  .fd-alert-row,
  .fd-alert-station,
  .fd-alert-empty
),
html[data-fd-theme="light"] body .fd-account-sheet__panel {
  border-color: var(--fd-r119-border-light) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-card-light) !important;
  box-shadow: var(--fd-r119-card-shadow-light) !important;
  color: var(--fd-r119-text-light) !important;
}

/* Cards use one spacing rhythm while retaining their established layout. */
.fd-feature-page .fd-feature-content,
.fd-alert-modal .fd-alert-grid,
.fd-alert-modal .fd-alert-stations {
  gap: var(--fd-r119-gap) !important;
}
.fd-feature-page .fd-feature-content > *,
.fd-feature-page :is(.fd-feature-card,.fd-theme-choice,.fd-tank-history),
#app :is(.dashboard-section,.station-result,.menu-card,.detail-card) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Nested tiles and contained statistics use a quieter second glass depth. */
html body .fd-feature-page :is(
  .fd-tank-summary article,
  .fd-month-grid article,
  .fd-tank-entry,
  .fd-tank-empty
),
html body #app :is(
  .detail-price-card,
  .detail-price-grid > *,
  .primary-station-card__facts > span,
  .primary-station-card__insights > div
) {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r119-border-dark) !important;
  border-radius: var(--fd-r119-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html[data-fd-theme="light"] body .fd-feature-page :is(
  .fd-tank-summary article,
  .fd-month-grid article,
  .fd-tank-entry,
  .fd-tank-empty
),
html[data-fd-theme="light"] body #app :is(
  .detail-price-card,
  .detail-price-grid > *,
  .primary-station-card__facts > span,
  .primary-station-card__insights > div
) {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r119-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 7px 17px rgba(35,35,42,.06) !important;
}

/* Search field is one glass control; its input and icon remain transparent inside it. */
html body #app .search-field {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r119-border-dark) !important;
  border-radius: 18px !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-control-dark) !important;
  box-shadow: var(--fd-r119-control-shadow-dark) !important;
  -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
  backdrop-filter: blur(20px) saturate(124%) !important;
}
html body #app .search-field :is(input,.search-field-action,.search-field-clear) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme="light"] body #app .search-field {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r119-control-light) !important;
  box-shadow: var(--fd-r119-control-shadow-light) !important;
}

/* Neutral controls. Text-only links and structural toggles are intentionally excluded. */
html body #app :is(
  .refresh-pill,
  .route-trigger,
  .favorite-toggle,
  .detail-favorite,
  .map-location-control,
  .fd-live-location-button,
  .primary-station-action,
  .station-sort button,
  .fuel-filter button,
  .fuel-preference button,
  .nearby-radius button,
  .route-options a
),
html body .fd-feature-page :is(
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-tank-delete
),
html body .fd-alert-modal :is(.fd-alert-test),
html body .tab-stepper__controls button {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r119-border-dark) !important;
  border-radius: var(--fd-r119-radius-control) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-control-dark) !important;
  box-shadow: var(--fd-r119-control-shadow-dark) !important;
  -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
  backdrop-filter: blur(20px) saturate(124%) !important;
  color: var(--fd-r119-text-dark) !important;
}
html[data-fd-theme="light"] body #app :is(
  .refresh-pill,
  .route-trigger,
  .favorite-toggle,
  .detail-favorite,
  .map-location-control,
  .fd-live-location-button,
  .primary-station-action,
  .station-sort button,
  .fuel-filter button,
  .fuel-preference button,
  .nearby-radius button,
  .route-options a
),
html[data-fd-theme="light"] body .fd-feature-page :is(
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-tank-delete
),
html[data-fd-theme="light"] body .fd-alert-modal :is(.fd-alert-test),
html[data-fd-theme="light"] body .tab-stepper__controls button {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r119-control-light) !important;
  box-shadow: var(--fd-r119-control-shadow-light) !important;
  color: #303036 !important;
}

/* Icon controls keep the accepted profile-button geometry. */
html body :is(
  .fd-profile-button,
  .fd-app-reload,
  .fd-feature-back,
  .detail-close,
  .fd-alert-close,
  .fd-account-sheet__close,
  .round-button
) {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r119-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-control-dark) !important;
  box-shadow: var(--fd-r119-control-shadow-dark) !important;
  -webkit-backdrop-filter: blur(22px) saturate(124%) !important;
  backdrop-filter: blur(22px) saturate(124%) !important;
  color: var(--fd-r119-text-dark) !important;
}
html[data-fd-theme="light"] body :is(
  .fd-profile-button,
  .fd-app-reload,
  .fd-feature-back,
  .detail-close,
  .fd-alert-close,
  .fd-account-sheet__close,
  .round-button
) {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r119-control-light) !important;
  box-shadow: var(--fd-r119-control-shadow-light) !important;
  color: #303036 !important;
}

/* Inputs and selectors use control glass. Search-field input is handled above to prevent double glass. */
html body .fd-feature-page :is(input,select,textarea),
html body .fd-alert-modal :is(select,input[type="time"],input[type="number"]),
html body .fd-account-sheet__panel :is(input,select,textarea) {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r119-border-dark) !important;
  border-radius: var(--fd-r119-radius-control) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-control-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  color: var(--fd-r119-text-dark) !important;
}
html[data-fd-theme="light"] body .fd-feature-page :is(input,select,textarea),
html[data-fd-theme="light"] body .fd-alert-modal :is(select,input[type="time"],input[type="number"]),
html[data-fd-theme="light"] body .fd-account-sheet__panel :is(input,select,textarea) {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r119-control-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
  color: var(--fd-r119-text-light) !important;
}

/* Selected and primary actions share one translucent red family. */
html body :is(
  .fd-auth-primary,
  .fd-tank-submit,
  .fd-alert-enable,
  .fd-auth-switch button.is-active
),
html body #app :is(
  .station-sort button.is-active,
  .fuel-filter button.is-active,
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .primary-station-action.is-active
) {
  border: 1px solid rgba(255,59,48,.72) !important;
  border-radius: var(--fd-r119-radius-control) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-red-glass) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(255,59,48,.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  color: #fff !important;
}
html[data-fd-theme="light"] body :is(
  .fd-auth-primary,
  .fd-tank-submit,
  .fd-alert-enable,
  .fd-auth-switch button.is-active
),
html[data-fd-theme="light"] body #app :is(
  .station-sort button.is-active,
  .fuel-filter button.is-active,
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .primary-station-action.is-active
) {
  border-color: rgba(255,59,48,.70) !important;
  background-image: var(--fd-r119-red-glass-light) !important;
  color: #fff !important;
}

/* Structural interaction elements: absolutely no card plate, haze, shadow, or blur. */
html body #app .tab-stepper,
html body #app .tab-stepper__toggle,
html body #app .search-availability-filter,
html body #app .search-availability-filter button,
html body #app .fd-best__tap,
html body .fd-feature-page details,
html body .fd-feature-page details[open],
html body .fd-feature-page details > div,
html body .fd-feature-page details summary,
html body .fd-account-sheet__backdrop {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
html body #app .tab-stepper__toggle::before,
html body #app .tab-stepper__toggle::after,
html body #app .search-availability-filter::before,
html body #app .search-availability-filter::after,
html body #app .search-availability-filter button::before,
html body #app .search-availability-filter button::after,
html body #app .fd-best__tap::before,
html body #app .fd-best__tap::after,
html body .fd-feature-page details summary::before {
  content: none !important;
  display: none !important;
}
html body #app .tab-stepper__toggle > span {
  background: var(--fd-r119-red) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body #app .tab-stepper__controls {
  border: 1px solid var(--fd-r119-border-dark) !important;
  border-radius: 27px !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-card-dark) !important;
  box-shadow: var(--fd-r119-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] body #app .tab-stepper__controls {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r119-card-light) !important;
  box-shadow: var(--fd-r119-card-shadow-light) !important;
}
html body #app .tab-stepper__controls button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--fd-r119-red) !important;
}

/* Closed-stations row: plain text row, only the checkbox carries state. */
html body #app .search-availability-filter button {
  color: var(--fd-r119-muted-dark) !important;
}
html[data-fd-theme="light"] body #app .search-availability-filter button {
  color: var(--fd-r119-text-light) !important;
}
html body #app .search-availability-filter__box {
  box-sizing: border-box !important;
  border: 1.5px solid rgba(255,255,255,.38) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.025) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme="light"] body #app .search-availability-filter__box {
  border-color: #8d8d94 !important;
  background: #fff !important;
}
html body #app .search-availability-filter button.is-active {
  color: var(--fd-r119-text-dark) !important;
}
html[data-fd-theme="light"] body #app .search-availability-filter button.is-active {
  color: var(--fd-r119-text-light) !important;
}
html body #app .search-availability-filter button.is-active .search-availability-filter__box {
  border-color: var(--fd-r119-red) !important;
  background: var(--fd-r119-red) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Bottom navigation is glass, but never has an additional rectangular pseudo-layer. */
html body #app .fuel-tab-bar {
  border: 1px solid var(--fd-r119-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-card-dark) !important;
  box-shadow: var(--fd-r119-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(26px) saturate(132%) !important;
  backdrop-filter: blur(26px) saturate(132%) !important;
}
html[data-fd-theme="light"] body #app .fuel-tab-bar {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r119-card-light) !important;
  box-shadow: var(--fd-r119-card-shadow-light) !important;
}
html body #app .fuel-tab-bar::before,
html body #app .fuel-tab-bar::after {
  content: none !important;
  display: none !important;
}

/* Text-only links retain their hierarchy and never become pills. */
html body :is(.fd-auth-link,.station-detail-link,.about-build) {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Semantic status colors remain identical in both themes. */
html body #app :is(.price-change.is-lower,.fd-best__trend.is-lower,.fd-best__trend.is-lower i),
html[data-fd-theme="light"] body #app :is(.price-change.is-lower,.fd-best__trend.is-lower,.fd-best__trend.is-lower i) {
  color: var(--fd-r119-mint) !important;
  fill: var(--fd-r119-mint) !important;
  stroke: var(--fd-r119-mint) !important;
  text-shadow: none !important;
}
html body #app :is(.price-change.is-higher,.fd-best__trend.is-higher,.fd-best__trend.is-higher i),
html[data-fd-theme="light"] body #app :is(.price-change.is-higher,.fd-best__trend.is-higher,.fd-best__trend.is-higher i) {
  color: var(--fd-r119-red) !important;
  fill: var(--fd-r119-red) !important;
  stroke: var(--fd-r119-red) !important;
  text-shadow: none !important;
}
.fd-alert-status[data-tone="active"],
.fd-account-page-status[data-cloud-tone="active"] h2 { color: var(--fd-r119-mint) !important; }
.fd-alert-status[data-tone="inactive"],
.fd-account-page-status[data-cloud-tone="inactive"] h2 { color: var(--fd-r119-red) !important; }
.fd-alert-status[data-tone="error"],
.fd-alert-status[data-tone="pending"],
.fd-account-page-status[data-cloud-tone="error"] h2 { color: var(--fd-r119-orange) !important; }

/* Disabled, focus, and active states are controlled without adding new overlay plates. */
html body :is(button,input,select,textarea):focus-visible {
  outline: 2px solid rgba(255,59,48,.78) !important;
  outline-offset: 2px !important;
}
html body :is(button,input,select,textarea):disabled,
html body button[aria-disabled="true"] {
  opacity: .48 !important;
  filter: saturate(.65) !important;
  cursor: default !important;
}
html body button:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(.985);
}
html body :is(.tab-stepper__toggle,.fd-best__tap,.search-availability-filter button,.fd-account-sheet__backdrop):active {
  transform: none !important;
}

/* Keep the accepted compact feature-page scale. */
@media (max-width: 520px) {
  .fd-feature-page .fd-feature-content { gap: var(--fd-r119-gap) !important; }
  .fd-feature-page :is(.fd-feature-card,.fd-theme-choice,.fd-tank-history) { border-radius: 21px !important; }
}

/* Final specificity guards for established feature/account selectors. */
html body .fd-feature-page[data-fd-feature-view] :is(
  .fd-feature-card,
  .fd-theme-choice,
  .fd-account-page-status,
  .fd-account-page-card,
  .fd-account-recovery-card,
  .fd-tank-history
),
html body .fd-account-sheet .fd-account-sheet__panel {
  border: 1px solid var(--fd-r119-border-dark) !important;
  border-radius: var(--fd-r119-radius-card) !important;
  background: var(--fd-r119-card-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-card-dark) !important;
  box-shadow: var(--fd-r119-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
  color: var(--fd-r119-text-dark) !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view] :is(
  .fd-feature-card,
  .fd-theme-choice,
  .fd-account-page-status,
  .fd-account-page-card,
  .fd-account-recovery-card,
  .fd-tank-history
),
html[data-fd-theme="light"] body .fd-account-sheet .fd-account-sheet__panel {
  border-color: var(--fd-r119-border-light) !important;
  background: var(--fd-r119-card-light) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-card-light) !important;
  box-shadow: var(--fd-r119-card-shadow-light) !important;
  color: var(--fd-r119-text-light) !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-summary article,
  .fd-month-grid article,
  .fd-tank-entry,
  .fd-tank-empty
) {
  border-radius: var(--fd-r119-radius-tile) !important;
  background: var(--fd-r119-tile-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-tile-dark) !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-summary article,
  .fd-month-grid article,
  .fd-tank-entry,
  .fd-tank-empty
) {
  background: var(--fd-r119-tile-light) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-tile-light) !important;
}

/* Semantic and segmented-control specificity guards. */
html body .fd-alert-modal .fd-alert-status[data-tone="active"] {
  color: var(--fd-r119-mint) !important;
}
html body .fd-alert-modal .fd-alert-status[data-tone="inactive"] {
  color: var(--fd-r119-red) !important;
}
html body .fd-alert-modal .fd-alert-status:is([data-tone="error"],[data-tone="pending"]) {
  color: var(--fd-r119-orange) !important;
}
html[data-fd-theme="light"] body #app :is(.station-sort,.fuel-filter,.fuel-preference,.nearby-radius) button:not(.is-active) {
  border: 1px solid var(--fd-r119-border-light) !important;
  border-radius: var(--fd-r119-radius-control) !important;
  background: var(--fd-r119-control-light) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-control-light) !important;
  box-shadow: var(--fd-r119-control-shadow-light) !important;
  -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
  backdrop-filter: blur(20px) saturate(124%) !important;
  color: #303036 !important;
}

/* Legacy-ID specificity neutralizers. */
html body:not(#fd-r119-status-scope) .fd-alert-modal .fd-alert-status[data-tone="active"] {
  color: var(--fd-r119-mint) !important;
}
html body:not(#fd-r119-status-scope) .fd-alert-modal .fd-alert-status[data-tone="inactive"] {
  color: var(--fd-r119-red) !important;
}
html body:not(#fd-r119-status-scope) .fd-alert-modal .fd-alert-status:is([data-tone="error"],[data-tone="pending"]) {
  color: var(--fd-r119-orange) !important;
}
html[data-fd-theme="light"] body #app .station-sort button:not(.is-active),
html[data-fd-theme="light"] body #app .fuel-filter button:not(.is-active),
html[data-fd-theme="light"] body #app .fuel-preference button:not(.is-active),
html[data-fd-theme="light"] body #app .nearby-radius button:not(.is-active) {
  border: 1px solid var(--fd-r119-border-light) !important;
  border-radius: var(--fd-r119-radius-control) !important;
  background: var(--fd-r119-control-light) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-control-light) !important;
  box-shadow: var(--fd-r119-control-shadow-light) !important;
  -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
  backdrop-filter: blur(20px) saturate(124%) !important;
  color: #303036 !important;
}

html[data-fd-theme="light"] body:not(#fd-r119-control-scope) #app .station-sort button:not(.is-active),
html[data-fd-theme="light"] body:not(#fd-r119-control-scope) #app .fuel-filter button:not(.is-active),
html[data-fd-theme="light"] body:not(#fd-r119-control-scope) #app .fuel-preference button:not(.is-active),
html[data-fd-theme="light"] body:not(#fd-r119-control-scope) #app .nearby-radius button:not(.is-active) {
  border-color: var(--fd-r119-border-light) !important;
  border-radius: var(--fd-r119-radius-control) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-control-light) !important;
  box-shadow: var(--fd-r119-control-shadow-light) !important;
  -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
  backdrop-filter: blur(20px) saturate(124%) !important;
  color: #303036 !important;
}

/* Startup/final navigation label parity. */
.fd-startup-cover .fd-fast-nav > span > span,
html body #app .fuel-tab-bar small {
  font-size: 10px !important;
  line-height: 1 !important;
}

/* ===== assets/r120-targeted-fixes.css ===== */
/* FuelDash R120 — targeted corrections on top of the accepted R119 system. */
:root {
  --fd-r120-card-dark: var(--fd-r119-card-dark);
  --fd-r120-card-light: var(--fd-r119-card-light);
  --fd-r120-border-dark: var(--fd-r119-border-dark);
  --fd-r120-border-light: var(--fd-r119-border-light);
  --fd-r120-shadow-dark: var(--fd-r119-card-shadow-dark);
  --fd-r120-shadow-light: var(--fd-r119-card-shadow-light);
  --fd-r120-radius-card: var(--fd-r119-radius-card);
  --fd-r120-gap: 16px;
}

/* Search and favorites lists: one explicit 16px rhythm between top-level station cards. */
#app .result-list {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
#app .result-list > :is(.station-result,.favorites-screen-card) {
  margin: 0 !important;
}

/* Dashboard favorites — option A: one outer glass card, transparent contained rows. */
#app .favorites-block {
  overflow: hidden !important;
  padding: 0 16px 10px !important;
  border: 1px solid var(--fd-r120-border-dark) !important;
  border-radius: var(--fd-r120-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r120-card-dark) !important;
  box-shadow: var(--fd-r120-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] #app .favorites-block {
  border-color: var(--fd-r120-border-light) !important;
  background-image: var(--fd-r120-card-light) !important;
  box-shadow: var(--fd-r120-shadow-light) !important;
}
#app .favorites-block > header {
  min-height: 54px !important;
  height: auto !important;
  padding: 0 1px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
html[data-fd-theme="light"] #app .favorites-block > header {
  border-bottom-color: rgba(35,35,40,.10) !important;
}
#app .favorites-block .dashboard-favorite-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#app .favorites-block .dashboard-favorite-card + .dashboard-favorite-card {
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
html[data-fd-theme="light"] #app .favorites-block .dashboard-favorite-card + .dashboard-favorite-card {
  border-top-color: rgba(35,35,40,.10) !important;
}
#app .favorites-block > .empty-state {
  margin: 0 !important;
  padding: 16px 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Favorites tab: no outer list plate; every station is one main glass card. */
#app .favorites-screen-card {
  box-sizing: border-box !important;
  width: 100% !important;
  border: 1px solid var(--fd-r120-border-dark) !important;
  border-radius: var(--fd-r120-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r120-card-dark) !important;
  box-shadow: var(--fd-r120-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] #app .favorites-screen-card {
  border-color: var(--fd-r120-border-light) !important;
  background-image: var(--fd-r120-card-light) !important;
  box-shadow: var(--fd-r120-shadow-light) !important;
}
#app .favorites-screen-card.is-primary-station {
  border-color: rgba(255,59,48,.55) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 14px 32px rgba(255,59,48,.08) !important;
}

/* Tankempfehlung: the main card is glass; all second-level plates are removed. */
html[data-fd-theme] body #app .primary-station-card__insights {
  gap: 0 !important;
  padding: 16px !important;
}
html[data-fd-theme] body #app .primary-station-card__insights > div,
html[data-fd-theme] body #app .primary-station-card__facts > span {
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme] body #app .primary-station-card__insights > div:first-child {
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__insights > div:first-child {
  border-bottom-color: rgba(35,35,40,.10) !important;
}
html[data-fd-theme] body #app .primary-station-card__facts {
  gap: 0 !important;
  padding-top: 12px !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span {
  min-height: 58px !important;
  padding: 4px 10px 0 !important;
  border: 0 !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span:first-child {
  padding-left: 0 !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span + span {
  border-left: 1px solid rgba(255,255,255,.07) !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span + span {
  border-left-color: rgba(35,35,40,.10) !important;
}
html[data-fd-theme] body #app .dashboard-advice-card .primary-station-card__insights > div:first-child {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 370px) {
  html[data-fd-theme] body #app .primary-station-card__facts {
    grid-template-columns: 1fr !important;
  }
  html[data-fd-theme] body #app .primary-station-card__facts > span {
    min-height: 0 !important;
    padding: 10px 0 !important;
  }
  html[data-fd-theme] body #app .primary-station-card__facts > span + span {
    border-top: 1px solid rgba(255,255,255,.07) !important;
    border-left: 0 !important;
  }
  html[data-fd-theme="light"] body #app .primary-station-card__facts > span + span {
    border-top-color: rgba(35,35,40,.10) !important;
  }
}

/* ===== assets/r121-targeted-fixes.css ===== */
/* FuelDash R121 — five isolated corrections on top of accepted R120. */
:root {
  --fd-r121-gap: 16px;
  --fd-r121-tile-dark: var(--fd-r119-tile-dark);
  --fd-r121-tile-light: var(--fd-r119-tile-light);
  --fd-r121-border-dark: var(--fd-r119-border-dark);
  --fd-r121-border-light: var(--fd-r119-border-light);
  --fd-r121-radius-tile: var(--fd-r119-radius-tile);
}

/* Tank recommendation: copy stays in the main card; only the three facts are compact glass tiles. */
html[data-fd-theme] body #app .primary-station-card__insights > div:first-child {
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme] body #app .primary-station-card__facts {
  gap: 10px !important;
  padding-top: 14px !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span {
  box-sizing: border-box !important;
  min-height: 64px !important;
  padding: 11px 12px !important;
  border: 1px solid var(--fd-r121-border-dark) !important;
  border-radius: var(--fd-r121-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r121-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span:first-child {
  padding-left: 12px !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span + span {
  border-left: 1px solid var(--fd-r121-border-dark) !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span {
  border-color: var(--fd-r121-border-light) !important;
  background-image: var(--fd-r121-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 7px 17px rgba(35,35,42,.06) !important;
}

/* Startup wordmark: same split wordmark and measured spacing as the loaded header. */
.fd-fast-brand {
  gap: 9px !important;
}
.fd-fast-brand > span,
.fd-fast-brand > strong {
  display: block !important;
  font: inherit !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
}
.fd-fast-brand > strong { color: #ff3b30 !important; }
html[data-fd-theme="light"] .fd-fast-brand > span { color: #151517 !important; }

/* Dashboard hero/map card: separate top outline cannot be hidden by map clipping. */
html body #app .fd-best {
  position: relative !important;
  isolation: isolate !important;
}
html body #app .fd-best::before {
  content: "" !important;
  position: absolute !important;
  z-index: 20 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r121-border-dark) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
html[data-fd-theme="light"] body #app .fd-best::before {
  border-color: var(--fd-r121-border-light) !important;
}

/* Favorites: exact interval between sorting control and the first station card. */
#app [data-sort-controls] + .result-list {
  margin-top: var(--fd-r121-gap) !important;
}

/* More: each direct card group is separated; no internal menu rows are affected. */
#app .app-content > :is(.fuel-preference,.nearby-radius,.menu-card) + :is(.fuel-preference,.nearby-radius,.menu-card) {
  margin-top: var(--fd-r121-gap) !important;
}

@media (max-width: 370px) {
  html[data-fd-theme] body #app .primary-station-card__facts {
    gap: 10px !important;
  }
  html[data-fd-theme] body #app .primary-station-card__facts > span {
    min-height: 56px !important;
    padding: 10px 12px !important;
  }
  html[data-fd-theme] body #app .primary-station-card__facts > span + span {
    border-top: 1px solid var(--fd-r121-border-dark) !important;
    border-left: 1px solid var(--fd-r121-border-dark) !important;
  }
}

/* ===== assets/r122-android-parity.css ===== */
/* FuelDash R122 — standards-based Android/iOS layout parity. */
:root {
  --fd-safe-top: env(safe-area-inset-top, 0px);
  --fd-safe-right: env(safe-area-inset-right, 0px);
  --fd-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fd-safe-left: env(safe-area-inset-left, 0px);
  --fd-mobile-max: 480px;
}
html, body {
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#app, .fd-fast-shell, .fd-feature-shell, .fd-alert-sheet, .fd-account-sheet__panel {
  box-sizing: border-box;
  max-width: 100%;
}
@media (hover: none) and (pointer: coarse) {
  button, [role="button"], input, select, textarea, summary { touch-action: manipulation; }
  button, [role="button"] { -webkit-tap-highlight-color: transparent; }
  :where(.station-copy,.station-value,.fd-best__copy,.fd-feature-heading,.fd-feature-card,.menu-card,.fd-alert-row span) { min-width: 0; }
  :where(.station-copy strong,.station-copy small,.fd-feature-heading h1,.fd-feature-card h2,.menu-card button span) { overflow-wrap: anywhere; }
}
@media (display-mode: standalone) {
  body { min-height: 100svh; min-height: 100dvh; }
  .fuel-tab-bar, .fd-fast-nav { bottom: calc(10px + var(--fd-safe-bottom)) !important; }
}
@media (max-width: 480px) {
  #app > main, .fd-fast-shell, .fd-feature-shell, .fd-alert-sheet { width: 100% !important; max-width: var(--fd-mobile-max) !important; margin-inline: auto !important; }
  .brand-header, .fd-fast-header { padding-inline: max(16px, var(--fd-safe-left)) max(16px, var(--fd-safe-right)); }
  .fuel-tab-bar, .fd-fast-nav { width: min(calc(100% - 32px), 448px) !important; }
}
@media (max-width: 380px) {
  .brand-wordmark, .fd-fast-brand { font-size: clamp(25px, 7.6vw, 29px) !important; }
  .fuel-tab-bar, .fd-fast-nav { width: calc(100% - 24px) !important; padding-inline: 9px !important; gap: 4px !important; }
  .fuel-tab-bar button small, .fd-fast-nav > span > span { font-size: 9.5px !important; }
  .station-result, .favorite-station-card { padding-inline: 13px !important; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .fuel-tab-bar, .fd-fast-nav { height: 62px !important; bottom: calc(6px + var(--fd-safe-bottom)) !important; }
  .fuel-tab-bar button, .fd-fast-nav > span { min-height: 46px !important; }
  .fd-fast-shell { padding-bottom: calc(82px + var(--fd-safe-bottom)) !important; }
}


/* ===== r124-ui-harmony.css ===== */
/* FuelDash R124 — final visual harmony layer for Dashboard, Search, Favorites and Tankbuch. */
:root {
  --fd-r124-card-dark: var(--fd-r119-card-dark);
  --fd-r124-card-light: var(--fd-r119-card-light);
  --fd-r124-tile-dark: var(--fd-r119-tile-dark);
  --fd-r124-tile-light: var(--fd-r119-tile-light);
  --fd-r124-control-dark: var(--fd-r119-control-dark);
  --fd-r124-control-light: var(--fd-r119-control-light);
  --fd-r124-border-dark: var(--fd-r119-border-dark);
  --fd-r124-border-light: var(--fd-r119-border-light);
  --fd-r124-shadow-dark: var(--fd-r119-card-shadow-dark);
  --fd-r124-shadow-light: var(--fd-r119-card-shadow-light);
  --fd-r124-control-shadow-dark: var(--fd-r119-control-shadow-dark);
  --fd-r124-control-shadow-light: var(--fd-r119-control-shadow-light);
  --fd-r124-radius-card: var(--fd-r119-radius-card);
  --fd-r124-radius-tile: var(--fd-r119-radius-tile);
  --fd-r124-radius-control: var(--fd-r119-radius-control);
  --fd-r124-gap: 16px;
  --fd-r124-control-height: 46px;
}

/* Dashboard: one fully closed outline stays above the clipped map layers. */
html body #app .fd-best {
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-card-dark) !important;
  box-shadow: var(--fd-r124-shadow-dark) !important;
}
html body #app .fd-best::before {
  content: "" !important;
  position: absolute !important;
  z-index: 100 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
html[data-fd-theme="light"] body #app .fd-best,
html[data-fd-theme="light"] body #app .fd-best::before {
  border-color: var(--fd-r124-border-light) !important;
}
html[data-fd-theme="light"] body #app .fd-best {
  background-image: var(--fd-r124-card-light) !important;
  box-shadow: var(--fd-r124-shadow-light) !important;
}

/* Dashboard content cards now share the measured account/More silhouette. */
html body #app :is(.primary-station-card,.favorites-block) {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-card-dark) !important;
  box-shadow: var(--fd-r124-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] body #app :is(.primary-station-card,.favorites-block) {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-card-light) !important;
  box-shadow: var(--fd-r124-shadow-light) !important;
}

/* The Tankempfehlung facts are three tiles only — never a rectangular plate behind them. */
html body #app .primary-station-card__facts {
  gap: 10px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body #app .primary-station-card__facts > span,
html body #app .primary-station-card__facts > span + span {
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 12px !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html body #app .primary-station-card__facts > span small {
  font-size: 11px !important;
  line-height: 1.25 !important;
}
html body #app .primary-station-card__facts > span b {
  display: block !important;
  margin-top: 6px !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -.18px !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span,
html[data-fd-theme="light"] body #app .primary-station-card__facts > span + span {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 7px 17px rgba(35,35,42,.06) !important;
}

/* Search uses the same compact control height and account-card surface. */
html body #app .search-field {
  min-height: var(--fd-r124-control-height) !important;
  height: var(--fd-r124-control-height) !important;
  padding-inline: 14px !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-control) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-control-dark) !important;
  box-shadow: var(--fd-r124-control-shadow-dark) !important;
  -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
  backdrop-filter: blur(20px) saturate(124%) !important;
}
html body #app .search-field input {
  font-size: 16px !important;
  font-weight: 500 !important;
}
html[data-fd-theme="light"] body #app .search-field {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-control-light) !important;
  box-shadow: var(--fd-r124-control-shadow-light) !important;
}
html body #app :is([data-sort-controls] .station-sort button,.search-availability-filter button) {
  min-height: 42px !important;
  border-radius: var(--fd-r124-radius-control) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
html body #app .result-list {
  gap: var(--fd-r124-gap) !important;
}
html body #app .result-list .station-result {
  overflow: hidden !important;
  margin: 0 !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-card-dark) !important;
  box-shadow: var(--fd-r124-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] body #app .result-list .station-result {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-card-light) !important;
  box-shadow: var(--fd-r124-shadow-light) !important;
}

/* Favorites cards use the same card edge, depth and compact content rhythm. */
html body #app .favorites-screen-card {
  overflow: hidden !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-card-dark) !important;
  box-shadow: var(--fd-r124-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] body #app .favorites-screen-card {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-card-light) !important;
  box-shadow: var(--fd-r124-shadow-light) !important;
}
html body #app :is(.dashboard-favorite-card,.favorites-screen-card) .station-copy strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: -.22px !important;
}
html body #app :is(.dashboard-favorite-card,.favorites-screen-card) .station-value strong {
  font-size: 19px !important;
  line-height: 1 !important;
  letter-spacing: -.45px !important;
}

/* Tankbuch: balanced period picker, compact enough for the monthly statistics card. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  width: min(100%, 178px) !important;
  margin: 0 !important;
  justify-items: start !important;
  align-self: flex-end !important;
  gap: 6px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date > span:first-child {
  color: var(--fd-r119-muted-dark) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .09em !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px 0 39px !important;
  border: 1px solid rgba(255,59,48,.27) !important;
  border-radius: var(--fd-r124-radius-control) !important;
  background: linear-gradient(145deg, rgba(255,59,48,.15), rgba(54,13,16,.30)) !important;
  color: #ffe2df !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 7px 17px rgba(255,59,48,.07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg {
  left: 13px !important;
  width: 17px !important;
  height: 17px !important;
  color: #ff8179 !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__label {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.16px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input {
  height: 100% !important;
  min-height: 44px !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date > span:first-child {
  color: var(--fd-r119-muted-light) !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: rgba(255,59,48,.23) !important;
  background: linear-gradient(145deg, rgba(255,59,48,.10), rgba(255,255,255,.84)) !important;
  color: #a52d27 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 7px 17px rgba(255,59,48,.07) !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg {
  color: #d34139 !important;
}

@media (max-width: 370px) {
  html body #app .primary-station-card__facts {
    grid-template-columns: 1fr !important;
  }
  html body #app .primary-station-card__facts > span,
  html body #app .primary-station-card__facts > span + span {
    min-height: 58px !important;
  }
  html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
    width: min(100%, 172px) !important;
    align-self: flex-start !important;
  }
}


/* ===== r125-ui-corrections.css ===== */
/* FuelDash R125 — detail parity and final display-mode corrections. */
:root {
  --fd-r125-page-dark: var(--fd-r119-page-dark, #050505);
  --fd-r125-page-light: var(--fd-r119-page-light, #f5f5f7);
  --fd-r125-card-dark: var(--fd-r119-card-dark);
  --fd-r125-card-light: var(--fd-r119-card-light);
  --fd-r125-tile-dark: var(--fd-r119-tile-dark);
  --fd-r125-tile-light: var(--fd-r119-tile-light);
  --fd-r125-border-dark: var(--fd-r119-border-dark);
  --fd-r125-border-light: var(--fd-r119-border-light);
  --fd-r125-card-shadow-dark: var(--fd-r119-card-shadow-dark);
  --fd-r125-card-shadow-light: var(--fd-r119-card-shadow-light);
  --fd-r125-red-glass: var(--fd-r119-red-glass);
  --fd-r125-red-glass-light: var(--fd-r119-red-glass-light);
  --fd-r125-radius-card: var(--fd-r119-radius-card);
  --fd-r125-radius-tile: var(--fd-r119-radius-tile);
  --fd-r125-radius-control: var(--fd-r119-radius-control);
  --fd-r125-text-dark: var(--fd-r119-text-dark);
  --fd-r125-text-light: var(--fd-r119-text-light);
  --fd-r125-muted-dark: var(--fd-r119-muted-dark);
  --fd-r125-muted-light: var(--fd-r119-muted-light);
}

/* Detail view: use the same top-level surface, radius and spacing as account/More. */
html body #app .detail-view {
  display: grid !important;
  gap: 16px !important;
}
html body #app .detail-view :is(
  .detail-card,
  .station-detail-card,
  .detail-prices,
  .detail-advice-card,
  .detail-chart
) {
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 1px solid var(--fd-r125-border-dark) !important;
  border-radius: var(--fd-r125-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r125-card-dark) !important;
  box-shadow: var(--fd-r125-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
  color: var(--fd-r125-text-dark) !important;
}
html[data-fd-theme="light"] body #app .detail-view :is(
  .detail-card,
  .station-detail-card,
  .detail-prices,
  .detail-advice-card,
  .detail-chart
) {
  border-color: var(--fd-r125-border-light) !important;
  background-image: var(--fd-r125-card-light) !important;
  box-shadow: var(--fd-r125-card-shadow-light) !important;
  color: var(--fd-r125-text-light) !important;
}

/* No rectangular wrapper is allowed around the three recommendation fact tiles. */
html[data-fd-theme] body #app .primary-station-card .primary-station-card__facts,
html[data-fd-theme] body #app .detail-advice-card .primary-station-card__facts {
  outline: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme] body #app .primary-station-card .primary-station-card__facts::before,
html[data-fd-theme] body #app .primary-station-card .primary-station-card__facts::after,
html[data-fd-theme] body #app .detail-advice-card .primary-station-card__facts::before,
html[data-fd-theme] body #app .detail-advice-card .primary-station-card__facts::after {
  content: none !important;
  display: none !important;
}
html[data-fd-theme] body #app .detail-advice-card .primary-station-card__insights {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-fd-theme] body #app :is(.primary-station-card,.detail-advice-card) .primary-station-card__facts > span {
  border: 1px solid var(--fd-r125-border-dark) !important;
  border-radius: var(--fd-r125-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r125-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
}
html[data-fd-theme="light"] body #app :is(.primary-station-card,.detail-advice-card) .primary-station-card__facts > span {
  border-color: var(--fd-r125-border-light) !important;
  background-image: var(--fd-r125-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 7px 17px rgba(35,35,42,.06) !important;
}

/* Selected fuel is a semantic red selection in every theme. */
html body #app .detail-price-grid .detail-price-card.is-selected {
  border-color: rgba(255,59,48,.74) !important;
  background-color: transparent !important;
  background-image: var(--fd-r125-red-glass) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(255,59,48,.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  color: #fff !important;
}
html body #app .detail-price-grid .detail-price-card.is-selected :is(span,strong,small) {
  color: #fff !important;
}
html[data-fd-theme="light"] body #app .detail-price-grid .detail-price-card.is-selected {
  border-color: rgba(255,59,48,.70) !important;
  background-image: var(--fd-r125-red-glass-light) !important;
  color: #fff !important;
}

/* Empfohlen / Preis / Entfernung is one segmented control, not three separate cards. */
html body #app .station-sort button:not(.is-active) {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--fd-r125-muted-dark) !important;
}
html[data-fd-theme="light"] body #app .station-sort button:not(.is-active) {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-r125-muted-light) !important;
}

/* Favorites empty state: normal site typography with breathing room inside the note card. */
html body #app [data-sort-controls] + .result-list > .empty-state {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  color: var(--fd-r125-muted-dark) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: -.08px !important;
}
html[data-fd-theme="light"] body #app [data-sort-controls] + .result-list > .empty-state {
  color: var(--fd-r125-muted-light) !important;
}

/* Tankbuch: one continuous scroller and one uninterrupted theme surface. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] {
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: none !important;
  border: 0 !important;
  outline: 0 !important;
  background-color: var(--fd-r125-page-dark) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell {
  width: min(100%, 480px) !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  border: 0 !important;
  outline: 0 !important;
  background-color: var(--fd-r125-page-dark) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-feature-header,.fd-feature-content) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"]::before,
html body .fd-feature-page[data-fd-feature-view="tankbook"]::after,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell::before,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell::after {
  content: none !important;
  display: none !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"],
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell {
  background-color: var(--fd-r125-page-light) !important;
}

/* Period control: an even title → label → control rhythm without squeezing. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  column-gap: 14px !important;
  row-gap: 18px !important;
  align-items: flex-start !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  width: min(100%, 178px) !important;
  align-self: flex-start !important;
  justify-items: start !important;
  gap: 9px !important;
  margin: 0 !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
}

@media (max-width: 520px) {
  html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    row-gap: 18px !important;
  }
}

@media (max-width: 370px) {
  html body #app :is(.primary-station-card,.detail-advice-card) .primary-station-card__facts {
    grid-template-columns: 1fr !important;
  }
}


/* ===== r126-visual-regression.css ===== */
/* FuelDash R126 — verified visual regression corrections. */
:root {
  --fd-r126-border-dark: var(--fd-r119-border-dark);
  --fd-r126-border-light: var(--fd-r119-border-light);
  --fd-r126-tile-dark: var(--fd-r119-tile-dark);
  --fd-r126-tile-light: var(--fd-r119-tile-light);
  --fd-r126-muted-dark: var(--fd-r119-muted-dark);
  --fd-r126-muted-light: var(--fd-r119-muted-light);
  --fd-r126-red-solid: linear-gradient(145deg, #ff3b30, #d92e26);
  --fd-r126-radius-card: var(--fd-r119-radius-card);
  --fd-r126-radius-tile: var(--fd-r119-radius-tile);
}

/* Günstigste Tankstelle: exactly one even outline, above the map but without a cast shadow. */
html body #app .fd-best {
  isolation: isolate !important;
  overflow: hidden !important;
  clip-path: none !important;
  contain: layout style !important;
  border: 0 !important;
  border-radius: var(--fd-r126-radius-card) !important;
  outline: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
}
html body #app .fd-best::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2000 !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r126-border-dark) !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
html body #app .fd-best::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] body #app .fd-best::before {
  border-color: var(--fd-r126-border-light) !important;
}

/* Tankempfehlung: only the three compact tiles remain; no container line above or below them. */
html[data-fd-theme] body #app .primary-station-card__insights > .primary-station-card__facts {
  gap: 8px !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme] body #app .primary-station-card__insights > .primary-station-card__facts::before,
html[data-fd-theme] body #app .primary-station-card__insights > .primary-station-card__facts::after {
  content: none !important;
  display: none !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span {
  min-height: 58px !important;
  padding: 8px 9px !important;
  border: 1px solid var(--fd-r126-border-dark) !important;
  border-radius: var(--fd-r126-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r126-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span small {
  min-height: 0 !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span b {
  margin-top: auto !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span {
  border-color: var(--fd-r126-border-light) !important;
  background-image: var(--fd-r126-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}

/* Sort order is one segmented control: only the selected segment is filled. */
html body #app .station-sort {
  display: flex !important;
  gap: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--fd-r126-border-dark) !important;
  border-radius: 18px !important;
  background: rgba(23,23,26,.82) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
}
html body #app .station-sort > button {
  min-height: 42px !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--fd-r126-muted-dark) !important;
}
html body #app .station-sort > button.is-active {
  border: 1px solid rgba(255,59,48,.72) !important;
  background-image: var(--fd-r126-red-solid) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] body #app .station-sort {
  border-color: var(--fd-r126-border-light) !important;
  background: rgba(237,237,242,.92) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}
html[data-fd-theme="light"] body #app .station-sort > button { color: var(--fd-r126-muted-light) !important; }

/* Red remains a flat semantic colour: no bloom, halo or coloured cast shadow anywhere. */
html body #app .detail-price-card.is-selected,
html body #app .chart-range button.is-active,
html body #app .fuel-filter button.is-active,
html body #app .fuel-preference button.is-active,
html body #app .nearby-radius button.is-active,
html body #app .primary-station-action.is-active {
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  text-shadow: none !important;
  filter: none !important;
}
html body #app :is(.map-price-marker.is-selected,.user-location-dot) {
  box-shadow: 0 5px 12px rgba(0,0,0,.32) !important;
  filter: none !important;
}
html body #app :is(.fd-best__price,.fd-best__trend,.price-change,.station-value strong,.detail-price-card strong,.primary-station-card__price) {
  text-shadow: none !important;
}
html body #app .fuel-advice-card::before {
  display: none !important;
  box-shadow: none !important;
  filter: none !important;
}
html body #app :is(
  .comparison-row.is-lowest i b,
  .chart-line,
  .legend-today,
  .search-field svg,
  .station-meta .is-closed::before,
  .favorites-screen-card.is-primary-station
) {
  box-shadow: none !important;
  filter: none !important;
}

/* Tankbuch period selector: compact, evenly spaced and no longer stretched by older rules. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 18px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  width: 148px !important;
  min-width: 148px !important;
  justify-items: start !important;
  align-self: start !important;
  gap: 8px !important;
  margin: 0 !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 148px !important;
  min-width: 148px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px 0 34px !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__label {
  font-size: 12px !important;
  font-weight: 650 !important;
}

/* The visible build marker is part of Über FuelDash in both themes. */
html body #app .about-build > em {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  color: var(--fd-r126-muted-dark) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
}
html[data-fd-theme="light"] body #app .about-build > em { color: var(--fd-r126-muted-light) !important; }


/* ===== r129-recovery.css ===== */
/* FuelDash R129 — recovery from the over-broad R127/R128 selection rules. */

/* A checked availability option is a checkbox row, never a solid primary button. */
html body #app .search-availability-filter button.is-active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Saved hearts stay neutral controls with a red icon, as in the stable dashboard. */
html body #app .favorite-toggle.is-favorite,
html body #app .detail-favorite.is-favorite {
  border-color: #2c2c31 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ff3b30 !important;
}
html[data-fd-theme="light"] body #app .favorite-toggle.is-favorite,
html[data-fd-theme="light"] body #app .detail-favorite.is-favorite {
  border-color: rgba(35,35,40,.16) !important;
}

/* Restore the normal header flow: no negative displacement or overlap. */
html body #app .brand-wordmark,
html body .fd-startup-cover .fd-fast-brand {
  transform: none !important;
  margin-left: 0 !important;
}
html body #app .fd-main-header-actions { gap: 8px !important; }
html body #app .fd-profile-greeting {
  max-width: 64px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media (max-width: 430px) {
  html body #app .fd-profile-greeting { display: none !important; }
}

/* Tankbuch period: compact neutral profile/reload material, not a red translucent exception. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  width: 142px !important;
  min-width: 142px !important;
  gap: 8px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 142px !important;
  min-width: 142px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px 0 34px !important;
  border: 1px solid #2c2c31 !important;
  border-radius: 13px !important;
  background: var(--fd-r113-glass-dark) !important;
  background-image: var(--fd-r113-glass-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
  color: #f7f7f8 !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg {
  left: 11px !important;
  width: 15px !important;
  height: 15px !important;
  color: currentColor !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__label {
  font-size: 11px !important;
  font-weight: 650 !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  background-image: var(--fd-r113-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
  color: #303036 !important;
}

/* Only the chosen detail fuel gets the solid search-selection red. */
html body #app .detail-price-grid .detail-price-card.is-selected {
  border-color: #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
  text-shadow: none !important;
}
html body #app .detail-price-grid .detail-price-card.is-selected :is(span,strong,small) { color: #fff !important; }


/* ===== r130-control-restoration.css ===== */
/* FuelDash R130 — restore R127's intended control language without broad state leakage. */
:root {
  --fd-r130-control-dark: var(--fd-r113-glass-dark);
  --fd-r130-control-light: var(--fd-r113-glass-light);
}

/* Only real choice buttons inherit the profile/reload material when neutral. */
html body #app :is(
  .station-sort > button:not(.is-active),
  .fuel-filter button:not(.is-active),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active),
  .chart-range button:not(.is-active),
  .detail-price-card:not(.is-selected),
  .primary-station-action:not(.is-active)
) {
  border: 1px solid #2c2c31 !important;
  background: var(--fd-r130-control-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r130-control-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
  color: #f7f7f8 !important;
}
html[data-fd-theme="light"] body #app :is(
  .station-sort > button:not(.is-active),
  .fuel-filter button:not(.is-active),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active),
  .chart-range button:not(.is-active),
  .detail-price-card:not(.is-selected),
  .primary-station-action:not(.is-active)
) {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r130-control-light) !important;
  background-image: var(--fd-r130-control-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
  color: #303036 !important;
}

/* Search is this same material at input scale. */
html body #app .search-field {
  border-color: #2c2c31 !important;
  background: var(--fd-r130-control-dark) !important;
  background-image: var(--fd-r130-control-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html[data-fd-theme="light"] body #app .search-field {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r130-control-light) !important;
  background-image: var(--fd-r130-control-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}

/* A selected choice is flat hero red; checkbox rows and saved hearts are intentionally not listed. */
html body #app :is(
  .station-sort > button.is-active,
  .fuel-filter button.is-active,
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .chart-range button.is-active,
  .primary-station-action.is-active
) {
  border-color: #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* Guard the two stateful controls that must never become red-filled buttons. */
html body #app .search-availability-filter button.is-active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
}
html body #app .favorite-toggle.is-favorite,
html body #app .detail-favorite.is-favorite {
  border-color: #2c2c31 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ff3b30 !important;
}
html[data-fd-theme="light"] body #app .favorite-toggle.is-favorite,
html[data-fd-theme="light"] body #app .detail-favorite.is-favorite { border-color: rgba(35,35,40,.16) !important; }


/* ===== r131-startup-geometry.css ===== */
/* FuelDash R131 — reserve the final header and navigation geometry before first render. */
.fd-startup-cover .fd-fast-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 90px !important;
  margin-left: auto !important;
}
.fd-startup-cover .fd-fast-profile-placeholder {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid #2c2c31 !important;
  border-radius: 50% !important;
  background: var(--fd-r113-glass-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
.fd-startup-cover .fd-fast-profile-placeholder svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.fd-startup-cover .fd-fast-greeting-placeholder {
  display: block !important;
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 12px !important;
}
html[data-fd-theme="light"] .fd-startup-cover .fd-fast-profile-placeholder {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  color: #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}
@media (max-width: 430px) {
  .fd-startup-cover .fd-fast-greeting-placeholder { display: none !important; }
  .fd-startup-cover .fd-fast-header-actions { min-width: 84px !important; }
}

/* Same fixed dimensions and safe-area inset as the fully rendered bottom navigation. */
.fd-startup-cover .fd-fast-nav {
  box-sizing: border-box !important;
  width: min(calc(100% - 32px), 448px) !important;
  height: 72px !important;
  min-height: 72px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  padding: 8px 14px !important;
}
@media (display-mode: standalone) {
  .fd-startup-cover .fd-fast-nav { bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 380px) {
  .fd-startup-cover .fd-fast-nav { width: calc(100% - 24px) !important; padding-inline: 9px !important; gap: 4px !important; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .fd-startup-cover .fd-fast-nav { height: 62px !important; min-height: 62px !important; bottom: calc(6px + env(safe-area-inset-bottom)) !important; }
}


/* ===== r132-final-alignment.css ===== */
/* FuelDash R132 — final shared geometry and grouped control alignment. */

/* The first frame and the rendered app use the same 20px content edge. */
html body #app .brand-header,
html body .fd-startup-cover .fd-fast-header {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-inline: 0 !important;
}

/* Keep the fixed navigation on one exact viewport geometry from frame one. */
html body #app .fuel-tab-bar,
html body .fd-startup-cover .fd-fast-nav {
  box-sizing: border-box !important;
  left: 50% !important;
  width: min(calc(100% - 32px), 448px) !important;
  height: 72px !important;
  min-height: 72px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  padding: 8px 14px !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 380px) {
  html body #app .fuel-tab-bar,
  html body .fd-startup-cover .fd-fast-nav {
    width: calc(100% - 24px) !important;
    padding-inline: 9px !important;
    gap: 4px !important;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  html body #app .fuel-tab-bar,
  html body .fd-startup-cover .fd-fast-nav {
    height: 62px !important;
    min-height: 62px !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
}

/* Sorting is one segmented main control, never three adjacent glass cards. */
html body #app .station-sort {
  display: flex !important;
  gap: 0 !important;
  padding: 4px !important;
  border: 1px solid #2c2c31 !important;
  border-radius: 18px !important;
  background: var(--fd-r113-glass-dark) !important;
  background-image: var(--fd-r113-glass-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html body #app .station-sort > button,
html body #app .station-sort > button:not(.is-active) {
  min-height: 42px !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--fd-r126-muted-dark) !important;
}
html body #app .station-sort > button.is-active {
  border: 1px solid #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] body #app .station-sort {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  background-image: var(--fd-r113-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}
html[data-fd-theme="light"] body #app .station-sort > button,
html[data-fd-theme="light"] body #app .station-sort > button:not(.is-active) {
  color: var(--fd-r126-muted-light) !important;
}

/* Recommendation facts retain their compact typography but use the profile/reload material. */
html body #app .primary-station-card__facts > span {
  border-color: #2c2c31 !important;
  background: var(--fd-r113-glass-dark) !important;
  background-image: var(--fd-r113-glass-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  background-image: var(--fd-r113-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}


/* ===== r133-recommendation-facts.css ===== */
/* FuelDash R133 — only the three recommendation facts share the profile/reload glass. */
html[data-fd-theme] body #app .primary-station-card__facts > span {
  border-color: #2c2c31 !important;
  background-color: transparent !important;
  background-image: var(--fd-r113-glass-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span {
  border-color: rgba(35,35,40,.16) !important;
  background-color: transparent !important;
  background-image: var(--fd-r113-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}


/* ===== r134-feature-card-unification.css ===== */
/* FuelDash R134 — profile and Tankbuch content cards use the dashboard card surface. */
html[data-fd-theme] body .fd-feature-page[data-fd-feature-view="account"] :is(
  .fd-account-page-status,
  .fd-account-page-card,
  .fd-account-recovery-card
),
html[data-fd-theme] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-feature-card,
  .fd-overall-card,
  .fd-tank-form-card,
  .fd-tank-history,
  .fd-month-card,
  .fd-cloud-card,
  .fd-backup-card,
  .fd-account-card,
  .fd-tankbook-cloud-row
) {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r119-border-dark) !important;
  border-radius: var(--fd-r119-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-card-dark) !important;
  box-shadow: var(--fd-r119-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
  color: var(--fd-r119-text-dark) !important;
}

html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] :is(
  .fd-account-page-status,
  .fd-account-page-card,
  .fd-account-recovery-card
),
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-feature-card,
  .fd-overall-card,
  .fd-tank-form-card,
  .fd-tank-history,
  .fd-month-card,
  .fd-cloud-card,
  .fd-backup-card,
  .fd-account-card,
  .fd-tankbook-cloud-row
) {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r119-card-light) !important;
  box-shadow: var(--fd-r119-card-shadow-light) !important;
  color: var(--fd-r119-text-light) !important;
}


/* ===== r135-header-location.css ===== */
/* FuelDash R135 — compact account note and a clear, touch-safe location refresh target. */
html body #app .fd-profile-greeting {
  display: block !important;
  flex: 0 1 52px !important;
  max-width: 52px !important;
  overflow: hidden !important;
  color: var(--fd-r119-muted-dark) !important;
  font-size: 9.5px !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html[data-fd-theme="light"] body #app .fd-profile-greeting { color: var(--fd-r119-muted-light) !important; }
html body #app .fd-profile-greeting[hidden] { visibility: hidden !important; }

/* Reserve the exact same compact note width before the account state is ready. */
html body .fd-startup-cover .fd-fast-greeting-placeholder {
  display: block !important;
  flex: 0 0 52px !important;
  width: 52px !important;
}

/* The location line is already a button in the renderer; this only guarantees native touch handling. */
html body #app .location.location-request {
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
html body #app .location.location-request:focus-visible {
  outline: 1px solid var(--fd-r119-border-dark) !important;
  outline-offset: 4px !important;
}
html[data-fd-theme="light"] body #app .location.location-request:focus-visible {
  outline-color: var(--fd-r119-border-light) !important;
}

@media (max-width: 380px) {
  html body #app .fd-profile-greeting {
    flex-basis: 38px !important;
    max-width: 38px !important;
    font-size: 9px !important;
  }
  html body .fd-startup-cover .fd-fast-greeting-placeholder {
    flex-basis: 38px !important;
    width: 38px !important;
  }
}


/* ===== r137-final-polish.css ===== */
/* FuelDash R137 — final dark-mode surface, form and startup polish. */
/* The startup wordmark now uses the exact loaded-header word spacing; skeleton motion stays subdued. */
.fd-startup-cover .fd-fast-brand { gap: 7px !important; }
.fd-startup-cover .fd-fast-card::after { opacity: .36 !important; }
.fd-startup-cover :is(.fd-fast-line,.fd-fast-kicker,.fd-fast-title) {
  background-image: linear-gradient(100deg, rgba(255,255,255,.045) 22%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.045) 70%) !important;
}
.fd-startup-cover .fd-fast-line.is-price { background-image: linear-gradient(100deg, rgba(255,59,48,.08) 22%, rgba(255,59,48,.15) 46%, rgba(255,59,48,.08) 70%) !important; }

/* Tankbuch and alert content cards share the dashboard's card layer. */
html[data-fd-theme] body :is(
  .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-feature-card,.fd-overall-card,.fd-tank-form-card,.fd-tank-history,.fd-month-card,.fd-cloud-card,.fd-backup-card,.fd-account-card),
  .fd-alert-modal :is(.fd-alert-status,.fd-alert-row,.fd-alert-station,.fd-alert-empty)
) {
  border-color: var(--fd-r119-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r119-card-dark) !important;
  box-shadow: var(--fd-r119-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}

/* Form fields use the same darker search-control material. */
html[data-fd-theme] body :is(
  .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-field input,.fd-field select,.fd-field textarea),
  .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"])
) {
  border-color: #2c2c31 !important;
  background: var(--fd-r113-glass-dark) !important;
  background-image: var(--fd-r113-glass-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}

/* Primary save/activate actions use the flat active-choice red, without bloom. */
html body :is(
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form button[type="submit"],
  .fd-alert-modal .fd-alert-enable
) {
  border-color: #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}

/* Period selection is a full-width standard-red control with symmetric vertical rhythm. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  border-color: #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input { color: #fff !important; }

/* The duplicate account-state bubble has no information beyond the status card. */
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-card .fd-feature-card__head > span[data-cloud-tone] { display: none !important; }


/* ===== r138-surface-token-unification.css ===== */
/* FuelDash R138 — one neutral control material and one red accent token. */
:root {
  --fd-r138-red: #ff3b30;
  --fd-r138-control-dark: linear-gradient(145deg, rgba(27,27,31,.88), rgba(8,8,11,.96));
  --fd-r138-control-light: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,235,240,.80));
  --fd-r138-control-border-dark: #2c2c31;
  --fd-r138-control-border-light: rgba(35,35,40,.16);
  --fd-r138-control-shadow-dark: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38);
  --fd-r138-control-shadow-light: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11);
}

/* Every neutral action and compact information tile uses the same material as Liter. */
html body #app :is(
  .fd-feature-back,
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .route-options a,
  .fd-auth-secondary,
  .fd-alert-modal .fd-alert-test,
  .fd-alert-modal .fd-alert-row,
  .fd-alert-modal .fd-alert-station,
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .primary-station-card__facts > span,
  .detail-price-card:not(.is-selected),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active),
  .chart-range,
  .chart-range button:not(.is-active)
) {
  border-color: var(--fd-r138-control-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r138-control-dark) !important;
  box-shadow: var(--fd-r138-control-shadow-dark) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}

html[data-fd-theme="light"] body #app :is(
  .fd-feature-back,
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .route-options a,
  .fd-auth-secondary,
  .fd-alert-modal .fd-alert-test,
  .fd-alert-modal .fd-alert-row,
  .fd-alert-modal .fd-alert-station,
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .primary-station-card__facts > span,
  .detail-price-card:not(.is-selected),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active),
  .chart-range,
  .chart-range button:not(.is-active)
) {
  border-color: var(--fd-r138-control-border-light) !important;
  background-image: var(--fd-r138-control-light) !important;
  box-shadow: var(--fd-r138-control-shadow-light) !important;
  color: #303036 !important;
}

/* Feature pages are modal siblings of #app, so share the component token directly. */
html body .fd-feature-page :is(
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-secondary,
  .fd-tank-summary > article,
  .fd-month-grid > article
) {
  border-color: var(--fd-r138-control-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r138-control-dark) !important;
  box-shadow: var(--fd-r138-control-shadow-dark) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html[data-fd-theme="light"] body .fd-feature-page :is(
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-secondary,
  .fd-tank-summary > article,
  .fd-month-grid > article
) {
  border-color: var(--fd-r138-control-border-light) !important;
  background-image: var(--fd-r138-control-light) !important;
  box-shadow: var(--fd-r138-control-shadow-light) !important;
  color: #303036 !important;
}

/* Price alarm is mounted beside #app, so it receives the same material explicitly. */
html body .fd-alert-modal :is(.fd-alert-test,.fd-alert-row,.fd-alert-station,.fd-alert-empty) {
  border-color: var(--fd-r138-control-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r138-control-dark) !important;
  box-shadow: var(--fd-r138-control-shadow-dark) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html[data-fd-theme="light"] body .fd-alert-modal :is(.fd-alert-test,.fd-alert-row,.fd-alert-station,.fd-alert-empty) {
  border-color: var(--fd-r138-control-border-light) !important;
  background-image: var(--fd-r138-control-light) !important;
  box-shadow: var(--fd-r138-control-shadow-light) !important;
  color: #303036 !important;
}
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border-color: var(--fd-r138-control-border-dark) !important;
  background: var(--fd-r138-control-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09) !important;
}
html[data-fd-theme="light"] body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border-color: var(--fd-r138-control-border-light) !important;
  background: var(--fd-r138-control-light) !important;
  color: #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}

/* Form focus is an exact, inset field border: no oversized rectangular halo. */
html body #app .fd-field-affix {
  border-radius: 13px !important;
}
html body #app .fd-field-affix > input,
html body #app .fd-field :is(input,select,textarea) {
  box-sizing: border-box !important;
  border-radius: 13px !important;
}
html body #app .fd-field :is(input,select,textarea):focus {
  border-color: var(--fd-r138-red) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09) !important;
  outline: none !important;
}
html body #app .fd-field-affix:focus-within > input {
  border-color: var(--fd-r138-red) !important;
  border-radius: inherit !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09) !important;
  outline: none !important;
}
html[data-fd-theme="light"] body #app .fd-field :is(input,select,textarea):focus,
html[data-fd-theme="light"] body #app .fd-field-affix:focus-within > input {
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}
html body .fd-feature-page .fd-field-affix {
  border-radius: 13px !important;
}
html body .fd-feature-page .fd-field-affix > input,
html body .fd-feature-page .fd-field :is(input,select,textarea) {
  box-sizing: border-box !important;
  border-radius: 13px !important;
}
html body .fd-feature-page .fd-field :is(input,select,textarea):focus {
  border-color: var(--fd-r138-red) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09) !important;
  outline: none !important;
}
html body .fd-feature-page .fd-field-affix:focus-within > input {
  border-color: var(--fd-r138-red) !important;
  border-radius: inherit !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09) !important;
  outline: none !important;
}
html[data-fd-theme="light"] body .fd-feature-page .fd-field :is(input,select,textarea):focus,
html[data-fd-theme="light"] body .fd-feature-page .fd-field-affix:focus-within > input {
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}

/* A selected choice, primary action and every price accent resolve to one red. */
html body #app {
  --brand-red: var(--fd-r138-red) !important;
  --fd-r90-red: var(--fd-r138-red) !important;
  --fd-r114-red: var(--fd-r138-red) !important;
}
html body :is(
  .fd-alert-kicker,
  .fd-feature-page .fd-feature-card__head > div > small,
  .fd-feature-page .fd-account-page-title > small,
  .fd-feature-page .fd-feature-heading > small
) {
  color: var(--fd-r138-red) !important;
}
html body #app :is(
  .fd-auth-primary,
  .fd-tank-submit,
  .fd-alert-enable,
  .station-sort > button.is-active,
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .chart-range button.is-active,
  .detail-price-card.is-selected,
  .primary-station-action.is-active
) {
  border-color: var(--fd-r138-red) !important;
  background-color: var(--fd-r138-red) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html body .fd-alert-modal .fd-alert-enable {
  border-color: var(--fd-r138-red) !important;
  background-color: var(--fd-r138-red) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html body .fd-feature-page :is(.fd-auth-primary,.fd-tank-submit) {
  border-color: var(--fd-r138-red) !important;
  background-color: var(--fd-r138-red) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html body #app :is(
  .station-value > strong,
  .station-value .price-change.is-higher,
  .station-detail-link,
  .favorites-screen-card .station-value > strong,
  .dashboard-favorite-card .station-value > strong,
  .favorite-toggle.is-favorite,
  .detail-favorite.is-favorite
) {
  color: var(--fd-r138-red) !important;
}

/* Search and detail maps share the same fully opaque selected marker. */
html body #app .map-price-marker.is-selected {
  border-color: var(--fd-r138-red) !important;
  background-color: var(--fd-r138-red) !important;
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.68) !important;
}
html body #app .hero-map-layer .map-price-marker,
html body #app .hero-map-layer .map-price-marker.is-selected {
  background-color: var(--fd-r138-red) !important;
  opacity: 1 !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.52) !important;
}

/* Cloud information uses the page's normal note typography instead of headline styling. */
html body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-account-page-status,.fd-account-page-card) > p,
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status small {
  margin: 0 !important;
  color: #a8a8ae !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
}
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status small {
  display: block !important;
  margin-top: 12px !important;
  font-size: 13px !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-account-page-status,.fd-account-page-card) > p,
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status small {
  color: #6c6c73 !important;
}


/* ===== r139-input-information-hierarchy.css ===== */
/* FuelDash R139 — inputs are interactable, information stays visually quiet. */
:root {
  --fd-r139-input-dark: linear-gradient(145deg, rgba(45,45,50,.88), rgba(31,31,36,.90));
  --fd-r139-input-light: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,235,240,.92));
  --fd-r139-input-border-dark: rgba(255,255,255,.10);
  --fd-r139-input-border-light: rgba(35,35,40,.14);
  --fd-r139-info-dark: linear-gradient(145deg, rgba(22,22,25,.94), rgba(9,9,11,.97));
  --fd-r139-info-light: linear-gradient(145deg, rgba(255,255,255,.96), rgba(237,237,241,.88));
}

/* Preisverlauf remains one segmented control; the inactive range has no individual tile. */
html body #app .chart-range {
  padding: 4px !important;
  border-color: #2c2c31 !important;
  background-image: var(--fd-r138-control-dark) !important;
  box-shadow: var(--fd-r138-control-shadow-dark) !important;
}
html body #app .chart-range > button:not(.is-active) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #b9b9c0 !important;
}
html body #app .chart-range > button.is-disabled {
  opacity: .62 !important;
}
html[data-fd-theme="light"] body #app .chart-range {
  border-color: var(--fd-r138-control-border-light) !important;
  background-image: var(--fd-r138-control-light) !important;
  box-shadow: var(--fd-r138-control-shadow-light) !important;
}
html[data-fd-theme="light"] body #app .chart-range > button:not(.is-active) { color: #65656c !important; }

/* The profile password input is the single editable-field reference everywhere. */
html body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input),
html body .fd-account-sheet .fd-auth-form input,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]),
html body #app .search-field {
  border-color: var(--fd-r139-input-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r139-input-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html[data-fd-theme="light"] body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input),
html[data-fd-theme="light"] body .fd-account-sheet .fd-auth-form input,
html[data-fd-theme="light"] body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]),
html[data-fd-theme="light"] body #app .search-field {
  border-color: var(--fd-r139-input-border-light) !important;
  background-image: var(--fd-r139-input-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
  color: #303036 !important;
}

/* Input focus stays within the real field silhouette. */
html body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input):focus,
html body .fd-account-sheet .fd-auth-form input:focus,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]):focus {
  border-color: var(--fd-r138-red) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  outline: none !important;
}

/* Tankbuch values and recommendation facts are information, not faux inputs. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-tank-summary > article,.fd-month-grid > article),
html body #app .primary-station-card__facts > span,
html body .fd-alert-modal :is(.fd-alert-row,.fd-alert-station,.fd-alert-empty) {
  border-color: var(--fd-r119-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r139-info-dark) !important;
  box-shadow: var(--fd-r119-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-tank-summary > article,.fd-month-grid > article),
html[data-fd-theme="light"] body #app .primary-station-card__facts > span,
html[data-fd-theme="light"] body .fd-alert-modal :is(.fd-alert-row,.fd-alert-station,.fd-alert-empty) {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r139-info-light) !important;
  box-shadow: var(--fd-r119-card-shadow-light) !important;
}

/* Login keeps its card, segmented switch and fields in the same hierarchy. */
html body .fd-feature-page[data-fd-feature-view="account"] .fd-auth-switch,
html body .fd-account-sheet .fd-auth-switch {
  border-color: #2c2c31 !important;
  background-image: var(--fd-r139-info-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
}
html body :is(.fd-feature-page[data-fd-feature-view="account"],.fd-account-sheet) .fd-auth-switch button:not(.is-active) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #d3d3d8 !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] .fd-auth-switch,
html[data-fd-theme="light"] body .fd-account-sheet .fd-auth-switch {
  border-color: var(--fd-r119-border-light) !important;
  background-image: var(--fd-r139-info-light) !important;
}
html[data-fd-theme="light"] body :is(.fd-feature-page[data-fd-feature-view="account"],.fd-account-sheet) .fd-auth-switch button:not(.is-active) {
  color: #5f5f66 !important;
}


/* ===== r140-interactive-audit.css ===== */
/* FuelDash R140 — final component audit: actions, inputs and selected states. */
:root {
  --fd-r140-red: #ff3b30;
  --fd-r140-neutral-dark: linear-gradient(145deg, rgba(27,27,31,.88), rgba(8,8,11,.96));
  --fd-r140-neutral-light: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,235,240,.80));
  --fd-r140-neutral-border-dark: #2c2c31;
  --fd-r140-neutral-border-light: rgba(35,35,40,.16);
  --fd-r140-neutral-shadow-dark: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38);
  --fd-r140-neutral-shadow-light: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11);
  --fd-r140-input-dark: linear-gradient(145deg, rgba(45,45,50,.88), rgba(31,31,36,.90));
  --fd-r140-input-light: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,235,240,.92));
  --fd-r140-input-border-dark: rgba(255,255,255,.10);
  --fd-r140-input-border-light: rgba(35,35,40,.14);
}

/* Neutral actions all resolve to the Profile/Reload material. */
html body #app :is(
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .route-options a,
  .fd-live-location-button,
  .primary-station-action:not(.is-active),
  .detail-price-card:not(.is-selected),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active)
),
html body .fd-feature-page :is(
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-account-card__action,
  .fd-theme-choice:not(.is-selected)
),
html body .fd-account-sheet :is(.fd-account-sheet__close,.fd-auth-secondary),
html body .fd-alert-modal :is(.fd-alert-close,.fd-alert-test) {
  border-color: var(--fd-r140-neutral-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r140-neutral-dark) !important;
  box-shadow: var(--fd-r140-neutral-shadow-dark) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}

html[data-fd-theme="light"] body #app :is(
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .route-options a,
  .fd-live-location-button,
  .primary-station-action:not(.is-active),
  .detail-price-card:not(.is-selected),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active)
),
html[data-fd-theme="light"] body .fd-feature-page :is(
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-account-card__action,
  .fd-theme-choice:not(.is-selected)
),
html[data-fd-theme="light"] body .fd-account-sheet :is(.fd-account-sheet__close,.fd-auth-secondary),
html[data-fd-theme="light"] body .fd-alert-modal :is(.fd-alert-close,.fd-alert-test) {
  border-color: var(--fd-r140-neutral-border-light) !important;
  background-image: var(--fd-r140-neutral-light) !important;
  box-shadow: var(--fd-r140-neutral-shadow-light) !important;
  color: #303036 !important;
}

/* Segmented ranges are one parent control, not a row of standalone glass tiles. */
html body #app :is(.chart-range,.station-sort,.fuel-tab-bar) {
  border-color: var(--fd-r140-neutral-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r140-neutral-dark) !important;
  box-shadow: var(--fd-r140-neutral-shadow-dark) !important;
}
html body #app :is(.chart-range,.station-sort,.fuel-tab-bar) > button:not(.is-active) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] body #app :is(.chart-range,.station-sort,.fuel-tab-bar) {
  border-color: var(--fd-r140-neutral-border-light) !important;
  background-image: var(--fd-r140-neutral-light) !important;
  box-shadow: var(--fd-r140-neutral-shadow-light) !important;
}

/* The Profile password field is the reference for every editable text/select/time field. */
html body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input),
html body .fd-account-sheet .fd-auth-form input,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]),
html body #app .search-field {
  box-sizing: border-box !important;
  border-color: var(--fd-r140-input-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r140-input-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html[data-fd-theme="light"] body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input),
html[data-fd-theme="light"] body .fd-account-sheet .fd-auth-form input,
html[data-fd-theme="light"] body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]),
html[data-fd-theme="light"] body #app .search-field {
  border-color: var(--fd-r140-input-border-light) !important;
  background-image: var(--fd-r140-input-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
  color: #303036 !important;
}
html body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input):focus,
html body .fd-account-sheet .fd-auth-form input:focus,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]):focus,
html body #app .search-field:focus-within {
  border-color: var(--fd-r140-red) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  outline: none !important;
}
html body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input)::placeholder,
html body .fd-account-sheet .fd-auth-form input::placeholder,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"])::placeholder {
  color: currentColor !important;
  opacity: .46 !important;
}

/* The period is a selected date action, intentionally distinct from a free-text field. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: var(--fd-r140-red) !important;
  background-color: var(--fd-r140-red) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control :is(svg,.fd-statistics-date__label,input) {
  color: #fff !important;
}

/* Selected actions share the standard red without a red halo. */
html body :is(
  .fd-feature-page .fd-auth-primary,
  .fd-feature-page .fd-tank-submit,
  .fd-account-sheet .fd-auth-primary,
  .fd-alert-modal .fd-alert-enable,
  #app .station-sort > button.is-active,
  #app .fuel-preference button.is-active,
  #app .nearby-radius button.is-active,
  #app .chart-range button.is-active,
  #app .detail-price-card.is-selected,
  #app .primary-station-action.is-active
) {
  border-color: var(--fd-r140-red) !important;
  background-color: var(--fd-r140-red) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html body .fd-feature-page .fd-theme-choice.is-selected {
  border-color: var(--fd-r140-red) !important;
  box-shadow: inset 0 0 0 1px rgba(255,59,48,.28) !important;
}


/* ===== r141-visual-harmony.css ===== */
/* FuelDash R141 — opaque field and information tokens for visual harmony. */
:root {
  --fd-r141-red: #ff3b30;
  --fd-r141-field-dark: linear-gradient(145deg, #2b2b30, #222227);
  --fd-r141-field-light: linear-gradient(145deg, #ffffff, #ececf0);
  --fd-r141-field-border-dark: #3a3a41;
  --fd-r141-field-border-light: #d2d2d8;
  --fd-r141-info-dark: linear-gradient(145deg, #161619, #0b0b0e);
  --fd-r141-info-light: linear-gradient(145deg, #ffffff, #f0f0f3);
  --fd-r141-info-border-dark: #28282e;
  --fd-r141-info-border-light: #d9d9de;
}

/*
 * Editable controls share one opaque surface. Opaque colors are intentional:
 * the same field must not become darker merely because its parent card is darker.
 */
html body #app .search-field,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea),
html body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input),
html body .fd-account-sheet .fd-auth-form input,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  box-sizing: border-box !important;
  border-color: var(--fd-r141-field-border-dark) !important;
  background-color: #222227 !important;
  background-image: var(--fd-r141-field-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="light"] body #app .search-field,
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea),
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input),
html[data-fd-theme="light"] body .fd-account-sheet .fd-auth-form input,
html[data-fd-theme="light"] body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border-color: var(--fd-r141-field-border-light) !important;
  background-color: #ececf0 !important;
  background-image: var(--fd-r141-field-light) !important;
  box-shadow: inset 0 1px #fff !important;
  color: #28282e !important;
}

/* Search has one visible outer field; its internal native input remains transparent. */
html body #app .search-field :is(input,.search-field-action,.search-field-clear) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Field focus follows the real rounded silhouette without a detached halo. */
html body #app .search-field:focus-within,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea):focus,
html body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input):focus,
html body .fd-account-sheet .fd-auth-form input:focus,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]):focus {
  border-color: var(--fd-r141-red) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 0 0 1px var(--fd-r141-red) !important;
}

html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,textarea)::placeholder,
html body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input)::placeholder,
html body .fd-account-sheet .fd-auth-form input::placeholder {
  color: #a4a4ac !important;
  opacity: .72 !important;
}

/* The red full-width period control is an active date action, not a free-text field. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: var(--fd-r141-red) !important;
  background-color: var(--fd-r141-red) !important;
  background-image: none !important;
  color: #fff !important;
}

/* Tankbook values, history states and recommendation facts are quiet information surfaces. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry,
  .fd-tank-empty
),
html body #app .primary-station-card__facts > span,
html body #app .fuel-preference button:not(.is-active) {
  border-color: var(--fd-r141-info-border-dark) !important;
  background-color: #0b0b0e !important;
  background-image: var(--fd-r141-info-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry,
  .fd-tank-empty
),
html[data-fd-theme="light"] body #app .primary-station-card__facts > span,
html[data-fd-theme="light"] body #app .fuel-preference button:not(.is-active) {
  border-color: var(--fd-r141-info-border-light) !important;
  background-color: #f0f0f3 !important;
  background-image: var(--fd-r141-info-light) !important;
  box-shadow: inset 0 1px #fff !important;
}

html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty {
  color: #f3f3f5 !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty p {
  color: #92929a !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty {
  color: #28282e !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty p {
  color: #6c6c74 !important;
}

/* Price-alert operational status is prose only, with semantic text color. */
html body .fd-alert-modal .fd-alert-status {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 2px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  line-height: 1.45 !important;
}
html body .fd-alert-modal .fd-alert-status[data-tone="active"] { color: #63e6be !important; }
html body .fd-alert-modal .fd-alert-status[data-tone="inactive"] { color: var(--fd-r141-red) !important; }
html body .fd-alert-modal .fd-alert-status:is([data-tone="error"],[data-tone="pending"]) { color: #ff9f43 !important; }

/* Account status follows the same kicker / title / note hierarchy as the feature cards. */
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status > div > small:first-child {
  display: block !important;
  margin: 0 !important;
  color: var(--fd-r141-red) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status h2 {
  margin: 6px 0 0 !important;
  font-size: 20px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: -.018em !important;
}
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status p {
  margin: 8px 0 0 !important;
  color: #a8a8ae !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.46 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status > div > small:last-child:not(:first-child) {
  display: block !important;
  margin: 9px 0 0 !important;
  color: #8f8f96 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status p {
  color: #66666e !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status > div > small:last-child:not(:first-child) {
  color: #777780 !important;
}


/* ===== r142-final-visual-fixes.css ===== */
/* FuelDash R142 — five final visual corrections without changing page structure. */
:root { --fd-r142-red: #ff3b30; }

/* Recommendation facts are information embedded in the parent card, not raised glass controls. */
html body #app .primary-station-card__facts > span {
  border-color: #232329 !important;
  background: #0c0c0f !important;
  background-color: #0c0c0f !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span {
  border-color: #dedee3 !important;
  background: #f3f3f5 !important;
  background-color: #f3f3f5 !important;
}

/* Only the rounded search shell owns the focus indication. */
html body #app .search-field input:is(:focus,:focus-visible) {
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
html body #app .search-field:focus-within {
  border-color: var(--fd-r142-red) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 0 0 1px var(--fd-r142-red) !important;
}

/* Label-to-control and control-to-statistics spacing now share a deliberate rhythm. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  gap: 12px !important;
  row-gap: 12px !important;
  margin-bottom: 14px !important;
}

/* Remove the alert status card itself; only its semantic copy remains in layout. */
html body:not(#fd-r142-status-scope) .fd-alert-modal .fd-alert-status {
  display: contents !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body:not(#fd-r142-status-scope) .fd-alert-modal .fd-alert-status::before,
html body:not(#fd-r142-status-scope) .fd-alert-modal .fd-alert-status::after {
  content: none !important;
  display: none !important;
}
html body:not(#fd-r142-status-scope) .fd-alert-modal .fd-alert-status__text {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 2px 2px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
}

/* The account note stays visible as a compact label immediately left of Profile. */
html body #app .fd-main-header-actions .fd-profile-greeting:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  flex: 0 1 52px !important;
  max-width: 52px !important;
  margin: 0 -2px 0 0 !important;
  overflow: hidden !important;
  color: #8d8d95 !important;
  font-size: 9.5px !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html[data-fd-theme="light"] body #app .fd-main-header-actions .fd-profile-greeting:not([hidden]) {
  color: #6f6f77 !important;
}


/* ===== r144-visible-build.css ===== */
/* FuelDash R144 — the build marker is always visible in the About row. */
html body #app .about-build > em[data-fd-visible-build] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: max-content !important;
  color: #8d8d95 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}
html body #app .about-build > em[data-fd-visible-build] small {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 2px !important;
  color: #6f6f77 !important;
  font-size: 10px !important;
}
html[data-fd-theme="light"] body #app .about-build > em[data-fd-visible-build] { color: #66666e !important; }
html[data-fd-theme="light"] body #app .about-build > em[data-fd-visible-build] small { color: #85858d !important; }


/* ===== r145-identical-input-surfaces.css ===== */
/* FuelDash R145 — one literal material for Search, Account and Tankbook inputs. */
:root {
  --fd-r145-input-dark: #17171c;
  --fd-r145-input-light: #eeeef2;
  --fd-r145-input-border-dark: #323239;
  --fd-r145-input-border-light: #d1d1d7;
  --fd-r145-input-text-dark: #f7f7f8;
  --fd-r145-input-text-light: #27272d;
}

html body:not(#fd-r145-input-scope) #app .search-field,
html body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea),
html body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input),
html body:not(#fd-r145-input-scope) .fd-account-sheet .fd-auth-form input {
  box-sizing: border-box !important;
  border-color: var(--fd-r145-input-border-dark) !important;
  background: var(--fd-r145-input-dark) !important;
  background-color: var(--fd-r145-input-dark) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
  color: var(--fd-r145-input-text-dark) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="light"] body:not(#fd-r145-input-scope) #app .search-field,
html[data-fd-theme="light"] body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea),
html[data-fd-theme="light"] body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input),
html[data-fd-theme="light"] body:not(#fd-r145-input-scope) .fd-account-sheet .fd-auth-form input {
  border-color: var(--fd-r145-input-border-light) !important;
  background: var(--fd-r145-input-light) !important;
  background-color: var(--fd-r145-input-light) !important;
  background-image: none !important;
  box-shadow: inset 0 1px #fff !important;
  color: var(--fd-r145-input-text-light) !important;
}

/* Search paints the material on its rounded shell; the native text input stays clear. */
html body:not(#fd-r145-input-scope) #app .search-field > input {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(#fd-r145-input-scope) #app .search-field:focus-within,
html body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea):focus,
html body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input):focus,
html body:not(#fd-r145-input-scope) .fd-account-sheet .fd-auth-form input:focus {
  border-color: #ff3b30 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 0 0 1px #ff3b30 !important;
}


/* ===== r146-price-alert-input-surfaces.css ===== */
/* FuelDash R146 — Price-alert editors use the exact R145 input material. */
:root {
  --fd-r146-input-dark: #17171c;
  --fd-r146-input-light: #eeeef2;
  --fd-r146-input-border-dark: #323239;
  --fd-r146-input-border-light: #d1d1d7;
}

html body:not(#fd-r146-alert-input-scope) .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  box-sizing: border-box !important;
  border-color: var(--fd-r146-input-border-dark) !important;
  background: var(--fd-r146-input-dark) !important;
  background-color: var(--fd-r146-input-dark) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="light"] body:not(#fd-r146-alert-input-scope) .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border-color: var(--fd-r146-input-border-light) !important;
  background: var(--fd-r146-input-light) !important;
  background-color: var(--fd-r146-input-light) !important;
  background-image: none !important;
  box-shadow: inset 0 1px #fff !important;
  color: #27272d !important;
}

html body:not(#fd-r146-alert-input-scope) .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]):focus {
  border-color: #ff3b30 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 0 0 1px #ff3b30 !important;
}


/* ===== r147-tankbook-dark-parity.css ===== */
/* FuelDash R147 — Tankbook top-level cards use the exact Preisalarm card material. */
html[data-fd-theme="dark"] body:not(#fd-r147-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"]
  .fd-feature-content > .fd-feature-card,
html[data-fd-theme="dark"] body:not(#fd-r147-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"]
  .fd-feature-content > .fd-tank-history,
html[data-fd-theme="dark"] body:not(#fd-r147-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"]
  .fd-feature-content > .fd-account-card {
  border: 1px solid rgba(255,255,255,.09) !important;
  background: linear-gradient(145deg, rgba(22,22,25,.94), rgba(9,9,11,.97)) !important;
  background-image: linear-gradient(145deg, rgba(22,22,25,.94), rgba(9,9,11,.97)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 16px 36px rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}

html[data-fd-theme="light"] body:not(#fd-r147-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"]
  .fd-feature-content > .fd-feature-card,
html[data-fd-theme="light"] body:not(#fd-r147-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"]
  .fd-feature-content > .fd-tank-history,
html[data-fd-theme="light"] body:not(#fd-r147-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"]
  .fd-feature-content > .fd-account-card {
  border: 1px solid rgba(35,35,40,.12) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,240,244,.94)) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,240,244,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 12px 30px rgba(35,35,42,.09) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}


/* ===== r151-core-design.css ===== */
/* FuelDash R151 — Core: flat OLED-black-only design system. */
:root {
  --fd-page: #000000;
  --fd-surface: #0a0a0c;
  --fd-surface-raised: #111114;
  --fd-field: #17171b;
  --fd-border: #26262b;
  --fd-border-strong: #35353b;
  --fd-text: #f5f5f7;
  --fd-muted: #a1a1a8;
  --fd-subtle: #74747c;
  --fd-accent: #ff3b30;
  --fd-positive: #30d158;
  --fd-negative: #ff453a;
  --fd-warning: #ff9f0a;
  --fd-success-surface: #0b2113;
  --fd-error-surface: #29100f;
  --fd-focus-ring: #ff3b30;
  --brand-red: var(--fd-accent);
  --control-glass: var(--fd-field);
  --control-border: var(--fd-border-strong);
  --control-text: var(--fd-text);
  --control-active: var(--fd-accent);
  --control-active-border: var(--fd-accent);
  color-scheme: dark;
}

html,
body,
#app,
#app .app-shell,
#app .app-content,
#app .detail-view {
  background-color: var(--fd-page) !important;
  background-image: none !important;
  color: var(--fd-text) !important;
}

html,
body {
  min-height: 100%;
  overscroll-behavior-y: auto !important;
}

body {
  min-height: 100dvh;
}

/* Remove every legacy glass effect from active application surfaces. */
html body :is(#app, .fd-feature-page, .fd-account-sheet, .fd-alert-modal, .fd-startup-cover) :is(
  .glass-card,
  .price-hero,
  .dashboard-section,
  .chart-block,
  .favorites-block,
  .fuel-preference,
  .nearby-radius,
  .menu-card,
  .station-card,
  .station-result,
  .dashboard-favorite-card,
  .favorites-screen-card,
  .primary-station-card,
  .detail-card,
  .detail-price-card,
  .detail-prices,
  .detail-chart,
  .fuel-map,
  .search-field,
  .search-suggestion-panel,
  .route-options,
  .route-chooser,
  .chart-range,
  .station-sort,
  .fuel-tab-bar,
  .tab-stepper__controls,
  .fd-best,
  .fd-feature-card,
  .fd-theme-choice,
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry,
  .fd-account-card,
  .fd-account-page-status,
  .fd-auth-switch,
  .fd-alert-status,
  .fd-alert-row,
  .fd-alert-station,
  .fd-alert-empty,
  .bottom-nav,
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .fd-live-location-button,
  .primary-station-action,
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-primary,
  .fd-auth-secondary,
  .fd-alert-enable,
  .fd-alert-test
) {
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

/* Primary content cards. Existing radii, sizes and placement intentionally remain untouched. */
html body #app :is(
  .glass-card,
  .price-hero,
  .dashboard-section.glass-card,
  .chart-block,
  .favorites-block,
  .fuel-preference,
  .nearby-radius,
  .menu-card,
  .station-card,
  .station-result,
  .dashboard-favorite-card,
  .favorites-screen-card,
  .primary-station-card,
  .detail-card,
  .detail-prices,
  .detail-chart,
  .search-suggestion-panel,
  .fd-best
) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #app :is(
  .detail-price-card,
  .primary-station-card__facts > span,
  .chart-selection-readout,
  .detail-history-status,
  .station-opening-hours > span,
  .tab-stepper__controls,
  .route-options,
  .fuel-tab-bar,
  .chart-range,
  .station-sort
) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Flat dashboard map card: preserve the live map, replace its decorative color wash. */
html body #app .fd-best__map {
  background-color: var(--fd-surface-raised) !important;
  opacity: 1 !important;
}

html body #app .fd-best::after {
  display: block !important;
  content: "" !important;
  background-color: #000000 !important;
  background-image: none !important;
  opacity: .68 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #app .fd-best::before {
  border-color: var(--fd-border) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #app .fd-best__copy,
html body #app .fd-best__chevron {
  text-shadow: none !important;
}

html body #app .hero-map-layer::after {
  background-color: #000000 !important;
  background-image: none !important;
  opacity: .42 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #app .fuel-advice-card::before,
html body #app .fuel-advice-card::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Neutral controls and compact actions. */
html body #app :is(
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .route-options a,
  .fd-live-location-button,
  .primary-station-action:not(.is-active),
  .detail-price-card:not(.is-selected),
  .tab-stepper__toggle,
  .tab-stepper__controls button
),
html body .fd-feature-page :is(
  .round-button,
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-account-card__action,
  .fd-theme-choice:not(.is-selected)
),
html body .fd-account-sheet :is(.fd-account-sheet__close, .fd-auth-secondary),
html body .fd-alert-modal :is(.fd-alert-close, .fd-alert-test) {
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Segmented controls are one surface. Inactive buttons never become extra tiles. */
html body #app :is(
  .chart-range,
  .station-sort,
  .fuel-tab-bar,
  .fuel-filter,
  .favorites-filter,
  .favorite-filter
) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #app :is(
  .chart-range,
  .station-sort,
  .fuel-tab-bar,
  .fuel-filter,
  .favorites-filter,
  .favorite-filter
) > button:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]),
html body #app :is(.fuel-preference, .nearby-radius) button:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]) {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-muted) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Inputs: one material across Search, Preisalarm, Tankbuch and Konto. */
html body #app .search-field,
html body .fd-feature-page .fd-field :is(input, select, textarea),
html body .fd-feature-page :is(.fd-auth-form input, .fd-account-card__password input),
html body .fd-account-sheet .fd-auth-form input,
html body .fd-alert-modal .fd-alert-row :is(select, input[type="time"], input[type="number"]),
html body .fd-backup-input {
  box-sizing: border-box !important;
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #app .search-field > input {
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

html body #app .search-field:focus-within,
html body .fd-feature-page .fd-field :is(input, select, textarea):focus,
html body .fd-feature-page :is(.fd-auth-form input, .fd-account-card__password input):focus,
html body .fd-account-sheet .fd-auth-form input:focus,
html body .fd-alert-modal .fd-alert-row :is(select, input[type="time"], input[type="number"]):focus {
  border-color: var(--fd-focus-ring) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 0 0 1px var(--fd-focus-ring) !important;
}

html body :is(input, textarea)::placeholder {
  color: var(--fd-subtle) !important;
  opacity: 1 !important;
}

/* Feature pages, account sheets and price-alert modal. */
html body .fd-feature-page,
html body .fd-account-sheet,
html body .fd-alert-modal {
  background-color: var(--fd-page) !important;
  background-image: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body :is(.fd-feature-header, .fd-account-page-header, .fd-alert-head) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-page) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body .fd-account-sheet__backdrop {
  background-color: #000000 !important;
  opacity: .72 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body .fd-account-sheet__panel,
html body .fd-feature-page :is(
  .fd-feature-card,
  .fd-theme-choice,
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry,
  .fd-account-card,
  .fd-account-page-status,
  .fd-tank-history
),
html body .fd-alert-modal :is(.fd-alert-status, .fd-alert-row, .fd-alert-station, .fd-alert-empty) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body .fd-feature-page :is(
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry__values > span,
  .fd-feature-card__head > span,
  .fd-tank-history__head > span,
  .fd-auth-switch
),
html body .fd-alert-modal :is(.fd-alert-row, .fd-alert-station, .fd-alert-empty) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .fd-feature-page .fd-auth-switch button:not(.is-active),
html body .fd-account-sheet .fd-auth-switch button:not(.is-active) {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-muted) !important;
}

html body .fd-theme-preview,
html body .fd-theme-preview.is-dark {
  border-color: var(--fd-border-strong) !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #f5f5f7 !important;
  box-shadow: none !important;
}

html body .fd-theme-preview__card {
  border-color: #26262b !important;
  background-color: #0a0a0c !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .fd-theme-preview__nav {
  background-color: #111114 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Primary actions and selected states share one exact red. */
html body #app :is(
  .station-sort button.is-active,
  .fuel-tab-bar button.is-active,
  .fuel-filter button.is-active,
  .chart-range button.is-active,
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .favorites-filter button.is-active,
  .favorite-filter button.is-active,
  .detail-price-card.is-selected,
  .primary-station-action.is-active
),
html body .fd-feature-page :is(
  .fd-auth-primary,
  .fd-tank-submit,
  .fd-theme-choice.is-selected .fd-theme-choice__check,
  .fd-auth-switch button.is-active
),
html body .fd-account-sheet :is(.fd-auth-primary, .fd-auth-switch button.is-active),
html body .fd-alert-modal .fd-alert-enable {
  border-color: var(--fd-accent) !important;
  background-color: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html body #app :is(
  .station-sort button.is-active,
  .fuel-tab-bar button.is-active,
  .fuel-filter button.is-active,
  .chart-range button.is-active,
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .detail-price-card.is-selected,
  .primary-station-action.is-active
) :is(span, strong, small, svg) {
  color: #ffffff !important;
  stroke: currentColor !important;
}

html body #app :is(.station-card.is-selected, .favorites-screen-card.is-primary-station),
html body .fd-feature-page .fd-theme-choice.is-selected {
  border-color: var(--fd-accent) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--fd-accent) !important;
}

html body #app :is(.search-availability-filter, .closed-stations-filter),
html body #app :is(.search-availability-filter, .closed-stations-filter) :is(button, label) {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #app .search-availability-filter button.is-active .search-availability-filter__box {
  border-color: var(--fd-accent) !important;
  background-color: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Brand, prices and semantic price changes. */
html body :is(.brand-wordmark, .fd-fast-brand) span {
  color: var(--fd-text) !important;
}

html body :is(.brand-wordmark, .fd-fast-brand) strong,
html body :is(
  .fd-alert-kicker,
  .fd-feature-heading > small,
  .fd-feature-card__head small,
  .fd-account-page-title > small,
  .fd-tank-history__head small
) {
  color: var(--fd-accent) !important;
}

html body :is(.brand-wordmark, .fd-fast-brand) img {
  filter: none !important;
}

html body #app :is(
  .fd-best__price,
  .station-value > strong,
  .detail-price-card > strong,
  .primary-station-card__price,
  .favorite-toggle.is-favorite,
  .detail-favorite.is-favorite,
  .station-detail-link
) {
  color: var(--fd-accent) !important;
  text-shadow: none !important;
}

html body #app :is(.price-change.is-lower, .fd-best__trend.is-lower) {
  color: var(--fd-positive) !important;
}

html body #app :is(.price-change.is-higher, .fd-best__trend.is-higher) {
  color: var(--fd-negative) !important;
}

html body #app :is(.price-change.is-steady, .fd-best__trend.is-steady) {
  color: var(--fd-muted) !important;
}

/* Typography stays readable in every nested surface. */
html body #app :is(
  h1, h2, h3,
  .location strong,
  .location-line strong,
  .station-copy strong,
  .station-identity h2,
  .primary-station-card__copy strong,
  .primary-station-card__facts b,
  .detail-price-card > strong,
  .station-opening-hours b,
  .menu-card button,
  .route-options a,
  .search-suggestion-panel strong
),
html body :is(.fd-feature-page, .fd-account-sheet, .fd-alert-modal) :is(h1, h2, h3, strong, label) {
  color: var(--fd-text) !important;
}

html body #app :is(
  .location small,
  .location-line small,
  .station-copy small,
  .station-location,
  .screen-lead,
  .empty-state,
  .detail-freshness,
  .freshness-copy,
  .primary-station-card__copy > span,
  .primary-station-card__facts small,
  .detail-history-attribution,
  .chart-context,
  .chart-legend,
  .chart-labels,
  .chart-scale,
  .menu-card em,
  .fd-best__meta,
  .fd-best__trend i
),
html body :is(.fd-feature-page, .fd-account-sheet, .fd-alert-modal) :is(p, small, .fd-alert-note, .fd-form-status) {
  color: var(--fd-muted) !important;
}

/* Map and chart accents remain functional, without glow. */
html body #app .map-price-marker {
  border-color: var(--fd-accent) !important;
  background-color: #4a1412 !important;
  background-image: none !important;
  box-shadow: 0 4px 12px #00000073 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}

html body #app .map-price-marker.is-selected,
html body #app .hero-map-layer .map-price-marker {
  border-color: var(--fd-accent) !important;
  background-color: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: 0 4px 12px #00000073 !important;
  color: #ffffff !important;
}

html body #app .user-location-dot {
  background-color: var(--fd-accent) !important;
  box-shadow: 0 0 0 3px var(--fd-page) !important;
}

html body #app :is(.chart-line, .legend-today, .chart-selection-today) {
  color: var(--fd-accent) !important;
  stroke: var(--fd-accent) !important;
}

html body #app :is(.chart-grid, .chart-average, .legend-average, .chart-selection-average) {
  color: var(--fd-subtle) !important;
  stroke: var(--fd-subtle) !important;
}

/* Modal feedback uses opaque semantic surfaces. */
html body .fd-alert-modal .fd-alert-status[data-type="success"],
html body :is(.fd-feature-page, .fd-account-sheet) [data-type="success"] {
  border-color: var(--fd-positive) !important;
  background-color: var(--fd-success-surface) !important;
  color: var(--fd-positive) !important;
}

html body .fd-alert-modal .fd-alert-status[data-type="error"],
html body :is(.fd-feature-page, .fd-account-sheet) [data-type="error"] {
  border-color: var(--fd-negative) !important;
  background-color: var(--fd-error-surface) !important;
  color: var(--fd-negative) !important;
}

/* Bottom navigation and immediate startup paint share the final design. */
html body #app .bottom-nav,
html body .fd-fast-nav {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #app .bottom-nav button,
html body .fd-fast-nav > span {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-muted) !important;
}

html body #app .bottom-nav button.is-active,
html body #app .bottom-nav button[aria-current="page"],
html body .fd-fast-nav > span:first-child {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--fd-accent) !important;
}

html body .fd-startup-cover,
html body .fd-fast-shell {
  background-color: var(--fd-page) !important;
  background-image: none !important;
  color: var(--fd-text) !important;
}

html body .fd-fast-card {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .fd-startup-cover .fd-fast-card::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

html body .fd-fast-line,
html body .fd-fast-kicker,
html body .fd-fast-title {
  background-color: var(--fd-surface-raised) !important;
  background-image: none !important;
}

html body .fd-fast-line.is-price {
  background-color: var(--fd-accent) !important;
  opacity: .42 !important;
}

/* Native and Android-browser consistency. */
html body :is(button, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

html body :is(select, input[type="date"], input[type="time"]) {
  color-scheme: inherit;
}

@media (hover: hover) {
  html body :is(#app, .fd-feature-page, .fd-account-sheet, .fd-alert-modal) button:hover {
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(#app, .fd-feature-page, .fd-account-sheet, .fd-alert-modal) * {
    scroll-behavior: auto !important;
  }
}

/*
 * Final specificity seal.
 * R145–R147 deliberately used body:not(#release-scope) selectors. This later
 * release scope ensures Core also wins inside every deeply nested feature view.
 */
html[data-fd-theme],
html[data-fd-theme] body:not(#fd-r148-core-scope),
html[data-fd-theme] body:not(#fd-r148-core-scope) #app,
html[data-fd-theme] body:not(#fd-r148-core-scope) #app .app-shell,
html[data-fd-theme] body:not(#fd-r148-core-scope) #app .app-content,
html[data-fd-theme] body:not(#fd-r148-core-scope) #app .detail-view,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-page,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-shell,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-content,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-alert-modal,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-account-sheet,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-startup-cover,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-fast-shell {
  background-color: var(--fd-page) !important;
  background-image: none !important;
  color: var(--fd-text) !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) :is(
  #app,
  .fd-feature-page,
  .fd-account-sheet,
  .fd-alert-modal,
  .fd-startup-cover
) :is(
  .glass-card,
  .price-hero,
  .dashboard-section.glass-card,
  .chart-block,
  .favorites-block,
  .fuel-preference,
  .nearby-radius,
  .menu-card,
  .station-card,
  .station-result,
  .dashboard-favorite-card,
  .favorites-screen-card,
  .primary-station-card,
  .detail-card,
  .detail-prices,
  .detail-chart,
  .search-suggestion-panel,
  .fd-best,
  .fd-feature-card,
  .fd-theme-choice,
  .fd-tank-entry,
  .fd-account-card,
  .fd-account-page-status,
  .fd-tank-history,
  .fd-alert-status,
  .fd-account-sheet__panel
) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) :is(
  #app,
  .fd-feature-page,
  .fd-account-sheet,
  .fd-alert-modal
) :is(
  .detail-price-card,
  .primary-station-card__facts > span,
  .chart-selection-readout,
  .detail-history-status,
  .station-opening-hours > span,
  .tab-stepper__controls,
  .route-options,
  .fuel-tab-bar,
  .chart-range,
  .station-sort,
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry__values > span,
  .fd-feature-card__head > span,
  .fd-tank-history__head > span,
  .fd-auth-switch,
  .fd-alert-row,
  .fd-alert-station,
  .fd-alert-empty
) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope)
  .fd-feature-page[data-fd-feature-view]
  .fd-feature-content > :is(.fd-feature-card, .fd-tank-history, .fd-account-card) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) #app .search-field,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-page[data-fd-feature-view] .fd-field :is(input, select, textarea),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input, .fd-account-card__password input),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-account-sheet .fd-auth-form input,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-alert-modal .fd-alert-row :is(select, input[type="time"], input[type="number"]) {
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) #app :is(
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .fd-live-location-button,
  .primary-station-action:not(.is-active),
  .tab-stepper__toggle
),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-page :is(
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-account-card__action
),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-account-sheet :is(.fd-account-sheet__close, .fd-auth-secondary),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-alert-modal :is(.fd-alert-close, .fd-alert-test) {
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) #app :is(
  .chart-range,
  .station-sort,
  .fuel-tab-bar,
  .fuel-filter,
  .favorites-filter,
  .favorite-filter
) > button:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]),
html[data-fd-theme] body:not(#fd-r148-core-scope) #app :is(.fuel-preference, .nearby-radius)
  button:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]) {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-muted) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) #app :is(
  .station-sort button.is-active,
  .fuel-tab-bar button.is-active,
  .fuel-filter button.is-active,
  .chart-range button.is-active,
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .favorites-filter button.is-active,
  .favorite-filter button.is-active,
  .detail-price-card.is-selected,
  .primary-station-action.is-active
),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-page :is(.fd-auth-primary, .fd-tank-submit, .fd-auth-switch button.is-active),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-account-sheet :is(.fd-auth-primary, .fd-auth-switch button.is-active),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-alert-modal .fd-alert-enable {
  border-color: var(--fd-accent) !important;
  background-color: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) #app .search-field:focus-within,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-page[data-fd-feature-view] .fd-field :is(input, select, textarea):focus,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input, .fd-account-card__password input):focus,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-account-sheet .fd-auth-form input:focus,
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-alert-modal .fd-alert-row :is(select, input[type="time"], input[type="number"]):focus {
  border-color: var(--fd-focus-ring) !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px var(--fd-focus-ring) !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) #app :is(.station-card.is-selected, .favorites-screen-card.is-primary-station),
html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-feature-page .fd-theme-choice.is-selected {
  border-color: var(--fd-accent) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--fd-accent) !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-alert-modal .fd-alert-status[data-type="success"],
html[data-fd-theme] body:not(#fd-r148-core-scope) :is(.fd-feature-page, .fd-account-sheet) [data-type="success"] {
  border-color: var(--fd-positive) !important;
  background-color: var(--fd-success-surface) !important;
  color: var(--fd-positive) !important;
}

html[data-fd-theme] body:not(#fd-r148-core-scope) .fd-alert-modal .fd-alert-status[data-type="error"],
html[data-fd-theme] body:not(#fd-r148-core-scope) :is(.fd-feature-page, .fd-account-sheet) [data-type="error"] {
  border-color: var(--fd-negative) !important;
  background-color: var(--fd-error-surface) !important;
  color: var(--fd-negative) !important;
}

/* R149 audit seal: every Preisalarm and Tankbook state uses Core materials. */
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-alert-modal,
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-alert-sheet,
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] {
  background-color: var(--fd-page) !important;
  background-image: none !important;
  color: var(--fd-text) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-alert-modal :is(
  .fd-alert-head,
  .fd-alert-grid,
  .fd-alert-station-section,
  .fd-alert-stations,
  .fd-alert-actions
),
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-form,
  .fd-tank-list,
  .fd-backup-actions
) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-alert-modal :is(
  .fd-alert-status,
  .fd-alert-row,
  .fd-alert-all,
  .fd-alert-station,
  .fd-alert-empty
),
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-form-card,
  .fd-overall-card,
  .fd-month-card,
  .fd-tank-history,
  .fd-tank-entry,
  .fd-tank-empty,
  .fd-tankbook-cloud-row,
  .fd-backup-card
) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-alert-modal :is(
  .fd-alert-row,
  .fd-alert-station,
  .fd-alert-empty
),
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry__values > span,
  .fd-statistics-date__control,
  .fd-tank-extras,
  .fd-tank-extras > div
) {
  border-color: var(--fd-border) !important;
  background-color: var(--fd-surface-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field,
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field-affix {
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field-affix > input {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-month-head,
  .fd-month-grid__wide,
  .fd-statistics-date,
  .fd-tank-entry__head
) {
  color: var(--fd-text) !important;
  text-shadow: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tankbook-cloud-row > button {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-action__icon {
  color: var(--fd-text) !important;
  fill: none !important;
  stroke: currentColor !important;
  filter: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field-affix > b,
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-statistics-date__label,
  .fd-backup-status,
  .fd-tank-empty p
),
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-alert-modal :is(
  .fd-alert-note,
  .fd-alert-status__text,
  .fd-alert-station-count,
  .fd-alert-station-section header small
) {
  color: var(--fd-muted) !important;
  text-shadow: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-backup-actions button,
  .fd-tank-delete,
  .fd-tank-extras summary
),
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-alert-modal :is(
  .fd-alert-close,
  .fd-alert-test
) {
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-submit,
html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-alert-modal .fd-alert-enable {
  border-color: var(--fd-accent) !important;
  background-color: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) :is(.fd-alert-modal, .fd-feature-page[data-fd-feature-view="tankbook"]) :is(
  input[type="checkbox"],
  input[type="radio"]
) {
  accent-color: var(--fd-accent) !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-form-status,
  .fd-backup-status,
  .fd-auth-form-status
)[data-type="success"] {
  color: var(--fd-positive) !important;
}

html[data-fd-theme] body:not(#fd-r149-core-scope) .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-form-status,
  .fd-backup-status,
  .fd-auth-form-status
)[data-type="error"] {
  color: var(--fd-negative) !important;
}

/* R151: the closed page stepper shows only its red line, without a hidden plate. */
html[data-fd-theme="dark"] body #app .tab-stepper,
html[data-fd-theme="dark"] body #app .tab-stepper__toggle {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body #app .tab-stepper:not(.is-open) .tab-stepper__controls {
  display: none !important;
  visibility: hidden !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body #app .tab-stepper__toggle::before,
html[data-fd-theme="dark"] body #app .tab-stepper__toggle::after {
  content: none !important;
  display: none !important;
}

/* R151: native, same-color rubber-band overscroll in every scroll owner. */
html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body,
html[data-fd-theme="dark"] #app,
html[data-fd-theme="dark"] #app .app-shell,
html[data-fd-theme="dark"] #app .app-content,
html[data-fd-theme="dark"] #app .detail-view,
html[data-fd-theme="dark"] .fd-feature-page,
html[data-fd-theme="dark"] .fd-feature-shell,
html[data-fd-theme="dark"] .fd-feature-content,
html[data-fd-theme="dark"] .fd-alert-modal,
html[data-fd-theme="dark"] .fd-alert-sheet {
  background-color: var(--fd-page) !important;
  background-image: none !important;
}

html[data-fd-theme="dark"] body #app :is(.app-shell, .app-content, .detail-view),
html[data-fd-theme="dark"] body .fd-feature-page,
html[data-fd-theme="dark"] body .fd-feature-content,
html[data-fd-theme="dark"] body .fd-alert-sheet {
  overscroll-behavior-y: auto !important;
}

/* R151: only the red line exists while the stepper is closed. */
html[data-fd-theme="dark"] body #app .tab-stepper:not(.is-open) {
  pointer-events: none !important;
}

html[data-fd-theme="dark"] body #app .tab-stepper:not(.is-open) .tab-stepper__toggle {
  pointer-events: auto !important;
}

html[data-fd-theme="dark"] body #app .tab-stepper__toggle > span {
  background-color: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* R151: route controls use the Core control material without an outer button plate. */
html[data-fd-theme="dark"] body #app .station-route,
html[data-fd-theme="dark"] body #app .route-chooser,
html[data-fd-theme="dark"] body #app .route-options,
html[data-fd-theme="dark"] body #app .route-options > span {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body #app .route-trigger,
html[data-fd-theme="dark"] body #app .route-options > a {
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* R151: opening-hour rows are text only; no haze or colored strip. */
html[data-fd-theme="dark"] body #app .station-opening-hours,
html[data-fd-theme="dark"] body #app .station-opening-hours > span {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* R151: every primary More-menu label has the same white hierarchy. */
html[data-fd-theme="dark"] body #app .menu-card.muted {
  opacity: 1 !important;
}

html[data-fd-theme="dark"] body #app .menu-card button,
html[data-fd-theme="dark"] body #app .menu-card.muted button {
  color: var(--fd-text) !important;
  opacity: 1 !important;
}

html[data-fd-theme="dark"] body #app .menu-card button > em {
  color: var(--fd-muted) !important;
  opacity: 1 !important;
}

/* R151: iOS/Android taps reach the real Preisalarm action buttons. */
html[data-fd-theme="dark"] body .fd-alert-modal,
html[data-fd-theme="dark"] body .fd-alert-sheet,
html[data-fd-theme="dark"] body .fd-alert-actions,
html[data-fd-theme="dark"] body .fd-alert-actions > button {
  pointer-events: auto !important;
}

html[data-fd-theme="dark"] body .fd-alert-actions {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
}

html[data-fd-theme="dark"] body .fd-alert-actions > button {
  position: relative !important;
  z-index: 1 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html[data-fd-theme="dark"] body .fd-alert-action-feedback {
  min-height: 1.4em !important;
  margin: 10px 2px 0 !important;
  color: var(--fd-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html[data-fd-theme="dark"] body .fd-alert-action-feedback[data-type="success"] {
  color: var(--fd-positive) !important;
}

html[data-fd-theme="dark"] body .fd-alert-action-feedback[data-type="error"] {
  color: var(--fd-negative) !important;
}

/* R151: Tankbook labels are structure; only controls receive the field material. */
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field > span:first-child {
  color: var(--fd-muted) !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field > :is(input, select, textarea, .fd-field-affix) {
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field-affix > input {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > summary {
  border-color: var(--fd-border-strong) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* ===== r152-final-seal.css ===== */
/* FuelDash R152 — rendered UI seal. Flat OLED surfaces only. */
:root {
  --fd-page: #000000;
  --fd-surface: #0a0a0c;
  --fd-surface-raised: #111114;
  --fd-field: #17171b;
  --fd-border: #26262b;
  --fd-border-strong: #35353b;
  --fd-text: #f5f5f7;
  --fd-muted: #a1a1a8;
  --fd-accent: #ff3b30;
  --fd-positive: #30d158;
  --fd-negative: #ff453a;
  --fd-page-bg: #000000;
  color-scheme: dark;
}

html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body,
html[data-fd-theme="dark"] #app,
html[data-fd-theme="dark"] #app .app-shell,
html[data-fd-theme="dark"] #app .app-content,
html[data-fd-theme="dark"] #app .detail-view,
html[data-fd-theme="dark"] .fd-feature-page,
html[data-fd-theme="dark"] .fd-feature-shell,
html[data-fd-theme="dark"] .fd-feature-content,
html[data-fd-theme="dark"] .fd-alert-modal,
html[data-fd-theme="dark"] .fd-alert-sheet {
  background: var(--fd-page) !important;
  background-color: var(--fd-page) !important;
  background-image: none !important;
  color: var(--fd-text) !important;
}

html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body {
  min-height: 100% !important;
  overscroll-behavior-y: auto !important;
}

html[data-fd-theme="dark"] body #app :is(.app-shell, .app-content, .detail-view),
html[data-fd-theme="dark"] body .fd-feature-page,
html[data-fd-theme="dark"] body .fd-feature-shell,
html[data-fd-theme="dark"] body .fd-feature-content,
html[data-fd-theme="dark"] body .fd-alert-modal,
html[data-fd-theme="dark"] body .fd-alert-sheet {
  overscroll-behavior-y: auto !important;
}

html[data-fd-theme="dark"] body :is(
  #app,
  .app-shell,
  .app-content,
  .detail-view,
  .fd-feature-page,
  .fd-feature-shell,
  .fd-feature-content,
  .fd-alert-modal,
  .fd-alert-sheet
)::before,
html[data-fd-theme="dark"] body :is(
  #app,
  .app-shell,
  .app-content,
  .detail-view,
  .fd-feature-page,
  .fd-feature-shell,
  .fd-feature-content,
  .fd-alert-modal,
  .fd-alert-sheet
)::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Closed tab stepper: the red handle is the only rendered element. */
html[data-fd-theme="dark"] body #app .tab-stepper:not(.is-open) {
  width: 58px !important;
  min-width: 58px !important;
  height: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  pointer-events: none !important;
}

html[data-fd-theme="dark"] body #app .tab-stepper:not(.is-open) .tab-stepper__controls {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html[data-fd-theme="dark"] body #app .tab-stepper:not(.is-open) .tab-stepper__toggle {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  pointer-events: auto !important;
}

html[data-fd-theme="dark"] body #app .tab-stepper__toggle::before,
html[data-fd-theme="dark"] body #app .tab-stepper__toggle::after {
  content: none !important;
  display: none !important;
}

html[data-fd-theme="dark"] body #app .tab-stepper__toggle > span {
  display: block !important;
  width: 36px !important;
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Route area: no outer plate; only the three real controls receive a surface. */
html[data-fd-theme="dark"] body #app :is(.station-route, .route-chooser, .route-options, .route-options > span) {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body #app :is(.station-route, .route-chooser, .route-options, .route-options > span)::before,
html[data-fd-theme="dark"] body #app :is(.station-route, .route-chooser, .route-options, .route-options > span)::after {
  content: none !important;
  display: none !important;
}

html[data-fd-theme="dark"] body #app .route-options {
  padding: 0 !important;
}

html[data-fd-theme="dark"] body #app .route-options[hidden] {
  display: none !important;
}

html[data-fd-theme="dark"] body #app :is(.route-trigger, .route-options > a) {
  border-color: var(--fd-border-strong) !important;
  background: var(--fd-field) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Opening-hours content is text, never a card or haze. */
html[data-fd-theme="dark"] body #app .station-opening-hours,
html[data-fd-theme="dark"] body #app .station-opening-hours > span {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body #app .station-opening-hours::before,
html[data-fd-theme="dark"] body #app .station-opening-hours::after,
html[data-fd-theme="dark"] body #app .station-opening-hours > span::before,
html[data-fd-theme="dark"] body #app .station-opening-hours > span::after {
  content: none !important;
  display: none !important;
}

/* More: muted only applies to secondary state text, never to the menu label. */
html[data-fd-theme="dark"] body #app .menu-card.muted {
  opacity: 1 !important;
}

html[data-fd-theme="dark"] body #app .menu-card button,
html[data-fd-theme="dark"] body #app .menu-card.muted button {
  color: var(--fd-text) !important;
  opacity: 1 !important;
}

html[data-fd-theme="dark"] body #app .menu-card button > em {
  color: var(--fd-muted) !important;
  opacity: 1 !important;
}

/* Preisalarm: all controls are above decorative layers and remain real touch targets. */
html[data-fd-theme="dark"] body .fd-alert-modal,
html[data-fd-theme="dark"] body .fd-alert-sheet,
html[data-fd-theme="dark"] body .fd-alert-actions,
html[data-fd-theme="dark"] body .fd-alert-actions > button {
  pointer-events: auto !important;
}

html[data-fd-theme="dark"] body .fd-alert-modal::before,
html[data-fd-theme="dark"] body .fd-alert-modal::after,
html[data-fd-theme="dark"] body .fd-alert-sheet::before,
html[data-fd-theme="dark"] body .fd-alert-sheet::after,
html[data-fd-theme="dark"] body .fd-alert-actions::before,
html[data-fd-theme="dark"] body .fd-alert-actions::after {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
}

html[data-fd-theme="dark"] body .fd-alert-actions {
  position: relative !important;
  z-index: 20 !important;
  isolation: isolate !important;
}

html[data-fd-theme="dark"] body .fd-alert-actions > button {
  position: relative !important;
  z-index: 21 !important;
  min-height: 48px !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html[data-fd-theme="dark"] body .fd-alert-test {
  border-color: var(--fd-border-strong) !important;
  background: var(--fd-field) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="dark"] body .fd-alert-enable {
  border-color: var(--fd-accent) !important;
  background: var(--fd-accent) !important;
  background-color: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* Tankbuch: one card, field and nested-value hierarchy across every state. */
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-feature-card,
  .fd-tank-form-card,
  .fd-overall-card,
  .fd-month-card,
  .fd-tank-history,
  .fd-tank-entry,
  .fd-tankbook-cloud-row,
  .fd-backup-card,
  .fd-tank-empty
) {
  border-color: var(--fd-border) !important;
  background: var(--fd-surface) !important;
  background-color: var(--fd-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-feature-card,
  .fd-tank-form-card,
  .fd-overall-card,
  .fd-month-card,
  .fd-tank-history,
  .fd-tank-entry,
  .fd-tankbook-cloud-row,
  .fd-backup-card,
  .fd-tank-empty
)::before,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-feature-card,
  .fd-tank-form-card,
  .fd-overall-card,
  .fd-month-card,
  .fd-tank-history,
  .fd-tank-entry,
  .fd-tankbook-cloud-row,
  .fd-backup-card,
  .fd-tank-empty
)::after {
  content: none !important;
  display: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry__values > span,
  .fd-statistics-date__control
) {
  border-color: var(--fd-border) !important;
  background: var(--fd-surface-raised) !important;
  background-color: var(--fd-surface-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field > :is(input, select, textarea, .fd-field-affix),
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > summary,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-input,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions > button,
html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-delete {
  border-color: var(--fd-border-strong) !important;
  background: var(--fd-field) !important;
  background-color: var(--fd-field) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field-affix > input {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
}

html[data-fd-theme="dark"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-submit {
  border-color: var(--fd-accent) !important;
  background: var(--fd-accent) !important;
  background-color: var(--fd-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* FuelDash R153 — darker, fully opaque navigation in startup and runtime. */
:root {
  --fd-nav-bg: #050506;
  --fd-nav-border: #202024;
}

html[data-fd-theme="dark"] body #app .fuel-tab-bar,
html[data-fd-theme="dark"] body #app .bottom-nav,
html[data-fd-theme="dark"] body .fd-fast-nav {
  border-color: var(--fd-nav-border) !important;
  background: var(--fd-nav-bg) !important;
  background-color: var(--fd-nav-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* FuelDash R156 — Tankbook wrappers are layout only; controls own the field color. */
html[data-fd-theme="dark"] body:not(#fd-r156-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form,
html[data-fd-theme="dark"] body:not(#fd-r156-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body:not(#fd-r156-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field > :is(input, select, textarea, .fd-field-affix) {
  border-color: var(--fd-border-strong) !important;
  background: #17171b !important;
  background-color: #17171b !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-fd-theme="dark"] body:not(#fd-r156-tankbook-scope)
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field-affix > input {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* FuelDash R156 — remove the remaining nested plates and align native date values. */
html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] :is(
    .fd-tank-extras,
    .fd-tank-extras[open],
    .fd-tank-extras > summary,
    .fd-tank-extras > div,
    .fd-tank-extras[open] > div
  ) {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] :is(
    .fd-tank-extras,
    .fd-tank-extras > summary,
    .fd-tank-extras > div
  )::before,
html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] :is(
    .fd-tank-extras,
    .fd-tank-extras > div
  )::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] input[name="filledAt"] {
  direction: ltr !important;
  text-align: left !important;
}

/* FuelDash R156 — the capture card is an outline, not a second colour plate. */
html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form-card::before,
html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form-card::after {
  content: none !important;
  display: none !important;
}

html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] input[name="filledAt"]::-webkit-date-and-time-value {
  text-align: left !important;
}

html[data-fd-theme="dark"] body
  .fd-feature-page[data-fd-feature-view="tankbook"] input[name="filledAt"]::-webkit-datetime-edit {
  text-align: left !important;
}

html[data-fd-theme="dark"] body #app :is(
  .station-opening-hours,
  .station-opening-hours > span,
  .station-opening-hours b,
  .station-opening-hours em
) {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html[data-fd-theme="dark"] body #app :is(
  .station-opening-hours,
  .station-opening-hours > span,
  .station-opening-hours b,
  .station-opening-hours em
)::before,
html[data-fd-theme="dark"] body #app :is(
  .station-opening-hours,
  .station-opening-hours > span,
  .station-opening-hours b,
  .station-opening-hours em
)::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}