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