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