/* 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; }
}