/*
  TankLina 0.10.52 — EXACT Reference Design Layer
  VISUAL LAYER ONLY. No business logic, API, routing, radius, community,
  station detection, savings calculation or navigation code is changed.

  Direction: future-facing, emotionally engaging, premium Liquid Glass,
  based on the four approved TankLina reference mockups.
*/

:root {
  --tl-bg-0: #020c11;
  --tl-bg-1: #06171c;
  --tl-bg-2: #0a2328;
  --tl-bg-3: #0d3034;
  --tl-glass: rgba(11, 39, 43, .66);
  --tl-glass-strong: rgba(9, 31, 36, .84);
  --tl-glass-soft: rgba(29, 68, 70, .42);
  --tl-line: rgba(173, 255, 223, .22);
  --tl-line-strong: rgba(159, 255, 205, .48);
  --tl-text: #f6fffb;
  --tl-muted: #a8c1c0;
  --tl-muted-2: #789596;
  --tl-mint: #8cffaf;
  --tl-mint-2: #52f1bd;
  --tl-cyan: #69e8ea;
  --tl-lime: #b9ff76;
  --tl-yellow: #ffd76a;
  --tl-warm: #ffa63b;
  --tl-danger: #ff726c;
  --tl-shadow: 0 28px 80px rgba(0, 5, 8, .52);
  --tl-shadow-soft: 0 16px 38px rgba(0, 8, 10, .34);
  --tl-glow: 0 0 0 1px rgba(113,255,190,.12), 0 0 34px rgba(66,255,166,.16);
  --tl-radius-xl: 32px;
  --tl-radius-lg: 24px;
  --tl-radius-md: 18px;
  --tl-radius-sm: 14px;
  --tl-ease-spring: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { background: var(--tl-bg-0); scroll-behavior: smooth; }
html, body { min-height: 100%; }
body,
body.theme-light,
body.theme-dark {
  color: var(--tl-text) !important;
  background:
    radial-gradient(900px 640px at 15% 8%, rgba(45,255,164,.14), transparent 60%),
    radial-gradient(900px 700px at 92% 18%, rgba(78,224,230,.12), transparent 62%),
    radial-gradient(760px 620px at 70% 95%, rgba(137,255,120,.08), transparent 60%),
    linear-gradient(145deg, #020b10 0%, #06161b 38%, #031116 72%, #02090d 100%) !important;
  color-scheme: dark;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
body::before {
  opacity: .55;
  background-image:
    linear-gradient(118deg, transparent 0 32%, rgba(94,255,191,.055) 32.2% 32.55%, transparent 32.8% 100%),
    linear-gradient(22deg, transparent 0 44%, rgba(82,232,234,.045) 44.15% 44.45%, transparent 44.8% 100%),
    linear-gradient(164deg, transparent 0 65%, rgba(164,255,192,.035) 65.2% 65.5%, transparent 65.9% 100%);
  background-size: 600px 480px, 720px 620px, 820px 520px;
}
body::after {
  background: linear-gradient(180deg, transparent 0 78%, rgba(0,0,0,.34) 100%);
}

/* Kill the old white-page / dashboard character. */
.cinematic-backdrop {
  position: fixed !important;
  inset: 0 !important;
  opacity: .78 !important;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.cinematic-backdrop::before,
.cinematic-backdrop::after,
.cinematic-backdrop i {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(50px);
}
.cinematic-backdrop::before {
  width: 420px; height: 420px; left: -170px; top: 17%;
  background: rgba(52, 255, 164, .12);
}
.cinematic-backdrop::after {
  width: 520px; height: 520px; right: -230px; top: 34%;
  background: rgba(72, 220, 229, .10);
}
.cinematic-backdrop i:nth-child(1) { width: 220px; height: 220px; left: 12%; top: 3%; background: rgba(179,255,121,.08); }
.cinematic-backdrop i:nth-child(2) { width: 280px; height: 280px; right: 10%; top: 64%; background: rgba(61,255,171,.08); }
.cinematic-backdrop i:nth-child(3) { width: 320px; height: 180px; left: 33%; bottom: 1%; background: rgba(64,209,229,.07); }

.app-shell {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: max(16px, env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom)) !important;
  background:
    radial-gradient(520px 360px at 50% 0%, rgba(57, 238, 168, .085), transparent 60%),
    linear-gradient(180deg, rgba(3,15,19,.94), rgba(3,13,17,.985)) !important;
  border-inline: 1px solid rgba(136,255,205,.08);
  box-shadow: 0 0 120px rgba(0,0,0,.58);
  min-height: 100svh;
  isolation: isolate;
  position: relative;
  overflow: clip;
}
.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    linear-gradient(105deg, transparent 0 44%, rgba(110,255,200,.08) 44.2% 44.45%, transparent 44.7% 100%),
    linear-gradient(17deg, transparent 0 67%, rgba(95,226,230,.06) 67.2% 67.45%, transparent 67.75% 100%);
  background-size: 420px 360px, 520px 420px;
  z-index: -1;
}

@media (min-width: 760px) {
  .app-shell {
    margin-top: 22px !important;
    margin-bottom: 32px !important;
    border-radius: 42px;
    border: 1px solid rgba(130,255,211,.13);
    box-shadow: 0 36px 110px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.02) inset;
  }
}

/* Typography: app, not website. */
body, button, input, select, textarea { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
h1, h2, h3, strong, .brand { letter-spacing: -.025em; }
.eyebrow, .decision-block-label, .search-control-copy small, .hero-kicker { letter-spacing: .14em !important; text-transform: uppercase; }

/* Unified Liquid Glass material. */
.topbar,
.search-control-dock,
.section,
.hero-card,
.station-card,
.trend-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.savings-total > div,
.savings-month-groups > *,
.savings-history > *,
.dialog,
.bottom-nav,
.map-live-btn,
.search-control-chip,
.icon-btn,
.primary-btn,
.secondary-btn,
.station-route-main,
.quick-report-grid > button,
.choice-btn,
.theme-btn,
.vehicle-profile-btn,
.profile-fuel-btn,
.input,
select.input,
input.input,
textarea.input {
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

/* Header */
.topbar {
  position: relative !important;
  top: auto !important;
  z-index: 60;
  min-height: 72px;
  padding: 8px 4px 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.brand-row { gap: 12px !important; }
.brand-logo {
  width: 46px !important; height: 46px !important;
  border-radius: 15px !important;
  padding: 4px;
  background: linear-gradient(145deg, rgba(145,255,191,.16), rgba(9,40,44,.5));
  border: 1px solid rgba(156,255,206,.24);
  box-shadow: 0 0 28px rgba(84,255,172,.16);
}
.brand { color: var(--tl-text) !important; font-size: 26px !important; font-weight: 850 !important; }
.tagline { color: var(--tl-muted) !important; font-size: 12px !important; margin-top: -1px; }
.settings-access-btn {
  min-width: 48px !important; height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 18px !important;
  color: var(--tl-text) !important;
  background: linear-gradient(145deg, rgba(28,64,67,.62), rgba(8,28,33,.76)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--tl-shadow-soft) !important;
}
.settings-access-label { display: none !important; }

/* Search controls — compact, obvious, tactile. */
.search-control-dock {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
  position: relative !important;
  top: auto !important;
  z-index: 55;
  padding: 8px !important;
  margin: 2px 0 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(147,255,207,.14) !important;
  background: linear-gradient(145deg, rgba(17,52,57,.72), rgba(7,29,34,.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.26) !important;
}
.search-control-chip {
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 10px 9px !important;
  gap: 7px !important;
  border: 1px solid rgba(165,255,215,.10) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(33,75,76,.46), rgba(12,39,43,.64)) !important;
  color: var(--tl-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  transition: transform .28s var(--tl-ease-spring), border-color .28s ease, background .28s ease;
}
.search-control-chip:hover { transform: translateY(-2px); border-color: rgba(137,255,197,.28) !important; }
.search-control-chip:active { transform: scale(.97); }
.search-control-icon {
  width: 30px !important; height: 30px !important; flex: 0 0 30px;
  border-radius: 11px !important;
  display: grid; place-items: center;
  color: var(--tl-mint) !important;
  background: rgba(111,255,189,.09) !important;
  border: 1px solid rgba(126,255,198,.12);
}
.search-control-copy { min-width: 0; text-align: left; }
.search-control-copy small { color: var(--tl-muted-2) !important; font-size: 7.5px !important; }
.search-control-copy strong { display: block; color: var(--tl-text) !important; font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-control-chevron { color: var(--tl-muted) !important; margin-left: auto; }

/* Main is visually ordered like a real app: Today -> Stations -> Map -> Prices -> Routes -> Live -> Savings. */
main { display: flex !important; flex-direction: column !important; gap: 16px !important; }
#heroCard { order: 1; }
#stationsSection { order: 2; }
#mapSection { order: 3; }
#trendSection { order: 4; }
#routesSection { order: 5; }
#liveSection { order: 6; }
#savingsSection { order: 7; }

/* HOME — emotional primary surface */
.hero-card {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 176px);
  padding: 22px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(143,255,205,.24) !important;
  background:
    radial-gradient(340px 280px at 88% 6%, rgba(65,255,172,.19), transparent 68%),
    radial-gradient(320px 260px at 12% 52%, rgba(55,226,222,.10), transparent 72%),
    linear-gradient(160deg, rgba(12,43,47,.88), rgba(3,20,25,.95) 56%, rgba(2,13,18,.985)) !important;
  box-shadow: var(--tl-shadow), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: .34;
  background:
    radial-gradient(circle at 79% 27%, transparent 0 45px, rgba(129,255,195,.13) 46px 47px, transparent 48px),
    radial-gradient(circle at 79% 27%, transparent 0 96px, rgba(87,232,229,.07) 97px 98px, transparent 99px),
    linear-gradient(128deg, transparent 0 48%, rgba(98,255,195,.08) 48.2% 48.5%, transparent 48.7% 100%),
    linear-gradient(22deg, transparent 0 70%, rgba(91,233,234,.06) 70.2% 70.5%, transparent 70.7% 100%);
  background-size: auto, auto, 360px 300px, 500px 420px;
}
.hero-atmosphere { opacity: .45 !important; }
.hero-atmosphere .beam { background: linear-gradient(90deg, transparent, rgba(91,255,187,.13), transparent) !important; }
.hero-topline { position: relative; z-index: 2; }
.decision-badge,
.fuel-label {
  color: var(--tl-text) !important;
  border: 1px solid rgba(145,255,205,.24) !important;
  background: rgba(12,41,45,.66) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.decision-badge { color: var(--tl-mint) !important; }
.hero-intro {
  position: relative; z-index: 2;
  margin-top: 28px !important;
  align-items: start !important;
}
.hero-kicker { color: var(--tl-mint-2) !important; font-size: 9px !important; font-weight: 800; }
#decisionTitle {
  color: #fff !important;
  font-size: clamp(42px, 11vw, 66px) !important;
  line-height: .96 !important;
  margin: 7px 0 9px !important;
  max-width: 9ch;
  text-wrap: balance;
}
.hero-copy { color: var(--tl-muted) !important; font-size: 16px !important; max-width: 31ch; }
.hero-logo {
  width: 64px !important; height: 64px !important;
  border-radius: 20px !important;
  padding: 8px;
  background: rgba(248,255,251,.93) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.32), 0 0 24px rgba(113,255,187,.10);
}

/* Tank action stays yellow — visually deliberate and unique. */
.tank-stop-quick-card { position: relative; z-index: 3; margin: 18px 0 0 !important; }
.tank-stop-quick-btn {
  min-height: 82px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,244,181,.68) !important;
  background: linear-gradient(100deg, #ffd66c 0%, #ffcf59 48%, #ffe786 100%) !important;
  color: #101710 !important;
  box-shadow: 0 16px 34px rgba(255,194,65,.18), inset 0 1px 0 rgba(255,255,255,.62) !important;
  transition: transform .3s var(--tl-ease-spring), box-shadow .3s ease !important;
}
.tank-stop-quick-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 42px rgba(255,194,65,.24), inset 0 1px 0 rgba(255,255,255,.68) !important; }
.tank-stop-quick-btn:active { transform: scale(.985); }
.tank-stop-quick-title, .tank-stop-quick-copy small { color: rgba(21,30,22,.72) !important; }
.tank-stop-quick-action { color: #101710 !important; }

.public-promise-strip { position: relative; z-index: 2; gap: 7px !important; margin: 12px 0 0 !important; }
.public-promise-strip span {
  color: var(--tl-muted) !important;
  background: rgba(26,61,64,.42) !important;
  border: 1px solid rgba(145,255,207,.11) !important;
  border-radius: 999px !important;
}

/* Netto saving = visual hero. */
.decision-benefit-strip {
  position: relative; z-index: 3;
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(130px, .8fr) !important;
  gap: 10px !important;
  margin: 14px 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.benefit-saving,
.benefit-security {
  min-height: 150px;
  padding: 18px !important;
  border-radius: 25px !important;
  border: 1px solid rgba(135,255,196,.22) !important;
  background:
    radial-gradient(180px 150px at 72% 8%, rgba(119,255,158,.20), transparent 68%),
    linear-gradient(145deg, rgba(29,80,68,.68), rgba(9,41,42,.78)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--tl-glow) !important;
  overflow: hidden;
  position: relative;
}
.benefit-saving::after {
  content: "";
  position: absolute;
  width: 160px; height: 70px; right: -28px; bottom: -18px;
  border-radius: 50%;
  border-top: 1px solid rgba(165,255,180,.24);
  border-bottom: 1px solid rgba(88,245,210,.14);
  transform: rotate(-9deg);
  filter: drop-shadow(0 0 9px rgba(97,255,170,.18));
}
.benefit-saving > span, .benefit-security > span { color: var(--tl-muted) !important; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; font-size: 9px !important; }
#netSaving {
  display: block !important;
  color: #b7ffb4 !important;
  font-size: clamp(48px, 13vw, 72px) !important;
  line-height: .98 !important;
  margin: 7px 0 8px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 24px rgba(104,255,142,.28);
}
.benefit-saving small, .benefit-security small { color: var(--tl-muted) !important; }
.benefit-security { background: linear-gradient(145deg, rgba(21,59,63,.67), rgba(8,31,36,.78)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important; }
#priceSecure { color: #fff !important; font-size: 16px !important; line-height: 1.05; margin-top: 8px; display: block; }

/* Recommendation / price card. */
.decision-target-grid {
  position: relative; z-index: 2;
  display: grid !important;
  grid-template-columns: 1.4fr .8fr !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 27px !important;
  background: linear-gradient(145deg, rgba(31,69,73,.62), rgba(9,35,40,.77)) !important;
  border: 1px solid rgba(145,255,205,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 14px 34px rgba(0,0,0,.23) !important;
}
.decision-station-block,
.decision-price-block {
  border-radius: 21px !important;
  border: 1px solid rgba(155,255,211,.09) !important;
  background: rgba(13,44,48,.48) !important;
  padding: 16px !important;
}
.decision-station-block { border-left: 2px solid var(--tl-mint-2) !important; }
.decision-block-label { color: var(--tl-muted-2) !important; font-size: 8px !important; }
.station-name { color: var(--tl-text) !important; font-size: 20px !important; font-weight: 850 !important; margin-top: 4px; }
.station-meta { color: var(--tl-muted) !important; font-size: 12px !important; }
.big-price { color: #b7ffce !important; font-size: clamp(42px, 11vw, 64px) !important; font-weight: 900 !important; letter-spacing: -.055em !important; text-shadow: 0 0 24px rgba(93,255,174,.15); }
.decision-price-block small { color: var(--tl-muted) !important; }

.trust-line { position: relative; z-index: 2; color: var(--tl-muted) !important; margin: 10px 0 !important; }
.trust-dot { box-shadow: 0 0 12px currentColor; }
.hero-now-grid { position: relative; z-index: 2; gap: 8px !important; }
.hero-now-fact {
  border: 1px solid rgba(150,255,208,.12) !important;
  background: linear-gradient(145deg, rgba(26,61,65,.55), rgba(8,31,36,.68)) !important;
  border-radius: 18px !important;
  color: var(--tl-text) !important;
}
.hero-now-fact small { color: var(--tl-muted-2) !important; }
.hero-actions { position: relative; z-index: 2; gap: 9px !important; }
.primary-btn,
.station-route-main {
  min-height: 58px !important;
  border: 1px solid rgba(213,255,189,.52) !important;
  border-radius: 19px !important;
  background: linear-gradient(100deg, #78edac 0%, #7cf2cc 53%, #aaff77 100%) !important;
  color: #06140f !important;
  box-shadow: 0 10px 30px rgba(89,255,171,.18), inset 0 1px 0 rgba(255,255,255,.55) !important;
  font-weight: 850 !important;
  transition: transform .28s var(--tl-ease-spring), box-shadow .28s ease !important;
}
.primary-btn:hover, .station-route-main:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(89,255,171,.26), inset 0 1px 0 rgba(255,255,255,.62) !important; }
.primary-btn:active, .station-route-main:active { transform: scale(.985); }
.secondary-btn {
  border: 1px solid rgba(149,255,207,.13) !important;
  border-radius: 18px !important;
  color: var(--tl-text) !important;
  background: rgba(25,57,61,.52) !important;
}
.why-card { position: relative; z-index: 2; border: 1px solid rgba(144,255,205,.10) !important; background: rgba(15,43,47,.42) !important; border-radius: 17px !important; color: var(--tl-muted) !important; }

/* Common full-screen scene sections. */
.section {
  position: relative;
  overflow: hidden;
  padding: 20px !important;
  border-radius: 32px !important;
  border: 1px solid rgba(145,255,205,.18) !important;
  background:
    radial-gradient(320px 240px at 92% 3%, rgba(76,255,174,.12), transparent 68%),
    linear-gradient(155deg, rgba(17,50,54,.91), rgba(5,25,30,.96)) !important;
  color: var(--tl-text) !important;
  box-shadow: var(--tl-shadow-soft), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(128deg, transparent 0 47%, rgba(92,255,193,.08) 47.2% 47.5%, transparent 47.8%),
    linear-gradient(18deg, transparent 0 70%, rgba(81,222,228,.06) 70.2% 70.5%, transparent 70.8%);
  background-size: 420px 360px, 600px 440px;
}
.section > * { position: relative; z-index: 1; }
.chapter-heading { margin-bottom: 16px !important; }
.chapter-icon {
  color: var(--tl-mint) !important;
  background: rgba(99,255,182,.10) !important;
  border: 1px solid rgba(145,255,205,.17) !important;
  box-shadow: 0 0 22px rgba(82,255,171,.07);
}
.eyebrow { color: var(--tl-mint-2) !important; font-weight: 800; font-size: 8px !important; }
.section h2 { color: #fff !important; font-size: 32px !important; line-height: 1 !important; }

/* STATIONS — recommendation-first cards matching approved mockup. */
.section-stations { min-height: 78svh; }
.fuel-switch-btn {
  color: var(--tl-text) !important;
  background: rgba(22,58,62,.58) !important;
  border: 1px solid rgba(145,255,205,.16) !important;
  border-radius: 17px !important;
}
.fuel-switch-copy small { color: var(--tl-muted-2) !important; }
.station-list { display: grid !important; gap: 11px !important; }
.station-card {
  position: relative;
  overflow: hidden;
  padding: 14px !important;
  border-radius: 25px !important;
  border: 1px solid rgba(148,255,207,.18) !important;
  background:
    radial-gradient(220px 160px at 92% 18%, rgba(76,255,169,.10), transparent 72%),
    linear-gradient(145deg, rgba(31,72,75,.68), rgba(9,35,40,.83)) !important;
  color: var(--tl-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 30px rgba(0,0,0,.25) !important;
  transition: transform .32s var(--tl-ease-spring), border-color .28s ease, box-shadow .28s ease;
}
.station-card:hover { transform: translateY(-3px); border-color: rgba(142,255,199,.34) !important; }
.station-card.best {
  border-color: rgba(156,255,184,.62) !important;
  box-shadow: 0 0 0 1px rgba(133,255,173,.14), 0 0 34px rgba(84,255,151,.15), 0 18px 42px rgba(0,0,0,.34) !important;
}
.station-card.best::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(260px 200px at 93% 5%, rgba(100,255,139,.16), transparent 70%);
}
.station-card-headline { position: relative; z-index: 2; }
.station-decision-tag {
  color: var(--tl-mint) !important;
  background: rgba(109,255,181,.09) !important;
  border: 1px solid rgba(141,255,199,.18) !important;
}
.station-card-top { position: relative; z-index: 2; align-items: center !important; gap: 12px !important; }
.station-identity { min-width: 0; gap: 11px !important; }
.station-brand-logo {
  width: 58px !important; height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 18px !important;
  padding: 6px !important;
  background: rgba(247,255,251,.96) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.26) !important;
}
.station-title-copy h3 { color: #fff !important; font-size: 18px !important; }
.station-title-copy .sub { color: var(--tl-muted) !important; font-size: 11px !important; }
.station-fuel-chip {
  color: var(--tl-mint) !important;
  border: 1px solid rgba(137,255,190,.25) !important;
  background: rgba(84,255,166,.09) !important;
}
.station-card-price { color: #c0ffd0 !important; font-size: 29px !important; font-weight: 900 !important; }
.station-key-grid { gap: 7px !important; margin: 11px 0 8px !important; }
.station-key-grid > div,
.station-now-line > *,
.station-services > * {
  border-radius: 15px !important;
  border: 1px solid rgba(146,255,205,.08) !important;
  background: rgba(18,49,54,.48) !important;
  color: var(--tl-text) !important;
}
.station-key-grid span, .station-now-line span, .station-services span { color: var(--tl-muted-2) !important; }
.station-key-grid .saving strong { color: var(--tl-mint) !important; }
.station-price-details,
.station-service-details { color: var(--tl-muted) !important; border-color: rgba(146,255,205,.08) !important; }
.unpriced-stations-group { border-color: rgba(145,255,205,.11) !important; background: rgba(13,39,43,.42) !important; border-radius: 20px !important; }

/* MAP — actual live Leaflet map becomes the stage, not a foreign embed. */
.section-map { padding-bottom: 18px !important; }
.map-controls { gap: 6px !important; }
.map-ctrl,
.chapter-action-btn {
  width: 46px !important; height: 46px !important;
  border-radius: 16px !important;
  color: var(--tl-text) !important;
  border: 1px solid rgba(148,255,207,.17) !important;
  background: rgba(18,49,54,.66) !important;
}
.map-live-actions { gap: 7px !important; }
.map-live-btn {
  min-height: 52px !important;
  border-radius: 17px !important;
  color: var(--tl-text) !important;
  border: 1px solid rgba(149,255,207,.13) !important;
  background: rgba(20,54,59,.58) !important;
}
.map-live-btn.primary-map {
  color: #071510 !important;
  background: linear-gradient(100deg, rgba(119,237,170,.94), rgba(119,243,213,.93)) !important;
  border-color: rgba(200,255,218,.55) !important;
}
.map-status-line { color: var(--tl-muted) !important; }
.real-map-wrap {
  min-height: 510px !important;
  border-radius: 27px !important;
  overflow: hidden;
  border: 1px solid rgba(141,255,201,.26) !important;
  background: #06191f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.30) !important;
}
.real-map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 450;
  background:
    radial-gradient(200px 170px at 62% 56%, rgba(82,255,132,.13), transparent 72%),
    linear-gradient(180deg, rgba(2,15,19,.04), rgba(1,12,16,.16));
  box-shadow: inset 0 0 70px rgba(0,15,20,.38);
}
.real-map,
.leaflet-container { background: #05191f !important; }
.leaflet-tile-pane {
  filter: brightness(.49) saturate(.82) contrast(1.15) hue-rotate(116deg) !important;
}
.leaflet-control-attribution {
  color: rgba(221,240,235,.54) !important;
  background: rgba(4,19,23,.72) !important;
  border-radius: 10px 0 0 0;
}
.leaflet-control-attribution a { color: rgba(172,255,220,.72) !important; }
.tl-location-pin {
  width: 40px !important; height: 40px !important;
  display: grid !important; place-items: center !important;
  border-radius: 50% 50% 50% 10% !important;
  transform: rotate(-45deg) !important;
  color: transparent !important;
  background: linear-gradient(145deg, #7fff9c, #35e8b4) !important;
  border: 2px solid rgba(235,255,241,.92) !important;
  box-shadow: 0 0 0 7px rgba(97,255,148,.10), 0 0 24px rgba(88,255,155,.56) !important;
}
.tl-location-pin::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; display: block; }
.tl-price-bubble {
  min-width: 74px !important; min-height: 38px !important;
  display: grid !important; place-items: center !important;
  border-radius: 18px !important;
  color: #fff !important;
  border: 1px solid rgba(194,255,217,.44) !important;
  background: linear-gradient(145deg, rgba(17,70,56,.94), rgba(7,40,40,.96)) !important;
  box-shadow: 0 0 0 5px rgba(75,255,146,.08), 0 0 22px rgba(84,255,157,.36) !important;
  font-weight: 900 !important;
}
.tl-price-bubble.high { border-color: rgba(255,190,105,.55) !important; box-shadow: 0 0 0 5px rgba(255,164,63,.07), 0 0 20px rgba(255,160,60,.25) !important; }
.tl-price-bubble.closed { opacity: .56; filter: grayscale(.6); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(8,34,38,.94) !important;
  color: var(--tl-text) !important;
  border: 1px solid rgba(150,255,207,.21) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
}
.tl-map-popup small { color: var(--tl-muted) !important; }
.tl-map-popup .price { color: var(--tl-mint) !important; }

/* PRICE trend */
.section-trend .trend-card {
  min-height: 150px;
  padding: 22px !important;
  border: 1px solid rgba(144,255,205,.12) !important;
  border-radius: 23px !important;
  background:
    radial-gradient(220px 150px at 88% 20%, rgba(98,255,176,.09), transparent 72%),
    linear-gradient(145deg, rgba(28,66,70,.50), rgba(9,34,39,.68)) !important;
  color: var(--tl-text) !important;
}
.trend-card * { color: inherit; }

/* ROUTES */
.saved-routes-host { order: 5; }
.route-stack-panel {
  padding: 16px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(144,255,205,.16) !important;
  background: linear-gradient(145deg, rgba(21,57,61,.76), rgba(7,29,34,.84)) !important;
  color: var(--tl-text) !important;
  box-shadow: var(--tl-shadow-soft) !important;
}
.route-stack-title small, .saved-route-list small { color: var(--tl-muted) !important; }
.route-stack-add-btn,
.commute-stop-btn { color: var(--tl-text) !important; border-color: rgba(145,255,205,.14) !important; background: rgba(31,68,71,.55) !important; }
.saved-route-list > * { border-color: rgba(145,255,205,.10) !important; background: rgba(17,48,52,.53) !important; }

/* LIVE — expressive but unambiguous. */
.section-live { min-height: 78svh; }
.community-auto-detect {
  border: 1px solid rgba(139,255,198,.17) !important;
  border-radius: 21px !important;
  background: linear-gradient(145deg, rgba(37,80,73,.55), rgba(10,40,42,.68)) !important;
  color: var(--tl-text) !important;
}
.community-detect-icon {
  color: var(--tl-mint) !important;
  background: rgba(100,255,174,.10) !important;
  border: 1px solid rgba(142,255,198,.15) !important;
}
.community-detect-copy span { color: var(--tl-muted) !important; }
.wait-report-heading small { color: var(--tl-muted) !important; }
.wait-report-icon { color: var(--tl-yellow) !important; background: rgba(255,211,91,.09) !important; }
.quick-report-grid { gap: 9px !important; }
.quick-report-grid > button {
  min-height: 92px !important;
  border-radius: 21px !important;
  border: 1px solid rgba(146,255,205,.11) !important;
  background: linear-gradient(145deg, rgba(29,65,68,.57), rgba(9,34,39,.68)) !important;
  color: var(--tl-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  transition: transform .28s var(--tl-ease-spring), border-color .25s ease, box-shadow .25s ease !important;
}
.quick-report-grid > button:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(143,255,201,.30) !important; }
.quick-report-grid > button:active:not(:disabled) { transform: scale(.975); }
.quick-report-grid > button:disabled { opacity: .42 !important; }
.report-time strong { color: #fff !important; font-size: 22px !important; }
.report-time span, .report-icon span { color: var(--tl-muted) !important; }
.wait-none:not(:disabled) { border-color: rgba(122,255,169,.24) !important; }
.wait-short:not(:disabled) { border-color: rgba(202,255,117,.19) !important; }
.wait-mid:not(:disabled) { border-color: rgba(255,215,106,.19) !important; }
.wait-long:not(:disabled), .danger:not(:disabled) { border-color: rgba(255,114,108,.20) !important; }
.live-report-heading { color: var(--tl-text) !important; }
.report-feedback { color: var(--tl-mint) !important; }

/* SAVINGS — emotional hero with progress-ring styling; existing data only. */
.section-savings {
  min-height: 84svh;
  background:
    radial-gradient(380px 320px at 50% 22%, rgba(94,255,142,.16), transparent 68%),
    radial-gradient(240px 220px at 10% 68%, rgba(79,230,220,.08), transparent 72%),
    linear-gradient(160deg, rgba(11,42,45,.96), rgba(3,20,25,.98)) !important;
}
.savings-moment {
  border: 1px solid rgba(145,255,205,.14) !important;
  background: rgba(21,58,61,.50) !important;
  border-radius: 21px !important;
  color: var(--tl-text) !important;
}
.savings-moment-icon { color: var(--tl-mint) !important; background: rgba(96,255,171,.10) !important; }
.savings-moment small { color: var(--tl-muted) !important; }
.savings-total {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center;
  min-height: 330px;
  margin: 10px 0 16px !important;
}
.savings-total::before,
.savings-total::after {
  content: "";
  position: absolute;
  width: 265px; height: 265px;
  border-radius: 50%;
  pointer-events: none;
}
.savings-total::before {
  background: conic-gradient(from -90deg, var(--tl-mint) 0 72%, rgba(114,255,186,.09) 72% 100%);
  box-shadow: 0 0 30px rgba(80,255,154,.21), inset 0 0 30px rgba(61,231,206,.08);
  -webkit-mask: radial-gradient(circle, transparent 0 71%, #000 72% 100%);
  mask: radial-gradient(circle, transparent 0 71%, #000 72% 100%);
}
.savings-total::after {
  width: 217px; height: 217px;
  border: 1px solid rgba(145,255,205,.20);
  box-shadow: 0 0 40px rgba(83,255,161,.10) inset;
}
.savings-total > div {
  width: 210px !important; height: 210px !important;
  border-radius: 50% !important;
  border: 0 !important;
  display: grid !important;
  place-content: center !important;
  text-align: center;
  background: radial-gradient(circle, rgba(24,67,60,.58), rgba(7,31,35,.70)) !important;
  box-shadow: inset 0 0 50px rgba(79,255,166,.08) !important;
}
.savings-total > div:nth-child(2) {
  position: absolute;
  width: auto !important; height: auto !important;
  left: 50%; transform: translateX(-50%);
  top: 270px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(145,255,205,.14) !important;
  background: rgba(12,43,47,.75) !important;
}
.savings-total span { color: var(--tl-muted) !important; }
#savingsTotal { color: #c0ffbf !important; font-size: 54px !important; line-height: 1 !important; text-shadow: 0 0 24px rgba(93,255,146,.25); }
#savingsMonth { color: var(--tl-mint) !important; font-size: 18px !important; }
.savings-toolbar { color: var(--tl-muted) !important; }
.savings-toolbar .text-btn { color: var(--tl-muted) !important; }
.savings-month-groups > *,
.savings-history > * {
  border-radius: 19px !important;
  border: 1px solid rgba(144,255,205,.10) !important;
  background: rgba(17,49,53,.53) !important;
  color: var(--tl-text) !important;
}
.savings-month-groups small, .savings-history small { color: var(--tl-muted) !important; }

/* Bottom navigation: permanent Liquid Glass control surface. */
.bottom-nav {
  position: fixed !important;
  z-index: 900 !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 28px), 490px) !important;
  min-height: 76px !important;
  padding: 8px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(160,255,213,.20) !important;
  background: linear-gradient(145deg, rgba(23,57,62,.80), rgba(6,28,34,.88)) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.nav-item {
  min-height: 58px !important;
  border-radius: 21px !important;
  color: #a8bdc3 !important;
  transition: transform .28s var(--tl-ease-spring), color .25s ease, background .25s ease, box-shadow .25s ease !important;
}
.nav-item > span { font-size: 23px !important; }
.nav-item small { font-size: 10px !important; font-weight: 750 !important; }
.nav-item.active {
  color: #baffb8 !important;
  background: radial-gradient(circle at 50% 10%, rgba(106,255,151,.22), rgba(36,91,69,.46)) !important;
  box-shadow: 0 0 26px rgba(85,255,150,.14), inset 0 -1px 0 rgba(165,255,189,.22) !important;
}
.nav-item:active { transform: scale(.94); }

/* Dialogs / setup must belong to the same product. */
dialog,
.dialog {
  color: var(--tl-text) !important;
  border: 1px solid rgba(151,255,209,.20) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(320px 240px at 90% 0%, rgba(75,255,169,.12), transparent 72%),
    linear-gradient(155deg, rgba(18,53,57,.96), rgba(5,25,30,.98)) !important;
  box-shadow: 0 38px 100px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
dialog::backdrop { background: rgba(0,9,13,.74) !important; backdrop-filter: blur(10px); }
.dialog h2, .dialog h3, .dialog strong { color: var(--tl-text) !important; }
.dialog .section-copy, .dialog .field-help, .dialog small { color: var(--tl-muted) !important; }
.input,
select.input,
input.input,
textarea.input {
  min-height: 52px !important;
  color: var(--tl-text) !important;
  border: 1px solid rgba(149,255,207,.14) !important;
  border-radius: 17px !important;
  background: rgba(11,39,44,.68) !important;
}
.input::placeholder { color: #718b8d !important; }
.choice-btn,
.theme-btn,
.vehicle-profile-btn,
.profile-fuel-btn,
.fill-plan-btn {
  color: var(--tl-text) !important;
  border: 1px solid rgba(149,255,207,.13) !important;
  border-radius: 18px !important;
  background: rgba(18,50,55,.58) !important;
}
.choice-btn.selected,
.theme-btn.selected,
.vehicle-profile-btn.selected,
.fill-plan-btn.selected,
.fuel-option-btn.selected {
  color: #07140f !important;
  background: linear-gradient(110deg, #82edb1, #8ff5d6) !important;
  border-color: rgba(218,255,230,.55) !important;
}
.fuel-option-btn { border-radius: 17px !important; }

/* Legal / footer is intentionally quiet. */
.legal-footer { color: var(--tl-muted-2) !important; opacity: .72; padding-bottom: 10px; }
.legal-footer a { color: inherit !important; }

/* Touch / focus / accessibility. */
button, a, summary, input, select { -webkit-tap-highlight-color: transparent; }
button, .nav-item, .map-live-btn, .search-control-chip, summary { min-inline-size: 44px; min-block-size: 44px; }
:focus-visible {
  outline: 3px solid rgba(183,255,124,.88) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(120,255,163,.12) !important;
}

/* Motion — all visual only; business logic untouched. */
@keyframes tlFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-4px,0); }
}
@keyframes tlPulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(117,255,155,0), 0 0 26px rgba(81,255,150,.11); }
  50% { box-shadow: 0 0 0 6px rgba(117,255,155,.025), 0 0 36px rgba(81,255,150,.19); }
}
@keyframes tlReveal {
  from { opacity: 0; transform: translateY(14px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal.in-view { animation: tlReveal .6s var(--tl-ease-spring) both; }
.hero-card .benefit-saving { animation: tlPulseGlow 5s ease-in-out infinite; }
.station-card.best { animation: tlPulseGlow 5.6s ease-in-out infinite; }
.trust-dot, .map-status-dot { animation: tlPulseGlow 2.8s ease-in-out infinite; }

/* Phone widths */
@media (max-width: 440px) {
  .app-shell { padding-inline: 10px !important; }
  .search-control-dock { gap: 5px !important; padding: 6px !important; }
  .search-control-chip { min-height: 58px !important; padding: 8px 6px !important; }
  .search-control-icon { width: 26px !important; height: 26px !important; flex-basis: 26px !important; }
  .search-control-copy small { font-size: 6.8px !important; }
  .search-control-copy strong { font-size: 9.5px !important; }
  .hero-card, .section { padding: 16px !important; border-radius: 28px !important; }
  #decisionTitle { font-size: clamp(38px, 12vw, 54px) !important; }
  .decision-benefit-strip { grid-template-columns: 1fr !important; }
  .benefit-security { min-height: 95px; }
  .decision-target-grid { grid-template-columns: 1fr !important; }
  .decision-price-block { text-align: left !important; }
  .hero-now-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .hero-now-fact { padding: 10px 7px !important; }
  .hero-now-fact strong { font-size: 11px !important; }
  .map-live-actions-four { grid-template-columns: 1fr 1fr !important; }
  .real-map-wrap { min-height: 460px !important; }
  .station-brand-logo { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
  .station-card-price { font-size: 26px !important; }
  .station-key-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .station-key-grid > div { padding: 8px 6px !important; }
  .station-key-grid span { font-size: 8px !important; }
  .station-key-grid strong { font-size: 11px !important; }
  .savings-total { min-height: 310px; }
  .savings-total::before { width: 245px; height: 245px; }
  .savings-total::after { width: 200px; height: 200px; }
  .savings-total > div { width: 194px !important; height: 194px !important; }
  #savingsTotal { font-size: 48px !important; }
}

@media (max-width: 350px) {
  .brand { font-size: 23px !important; }
  .search-control-copy strong { font-size: 8.8px !important; }
  .search-control-chevron { display: none !important; }
  .public-promise-strip span { font-size: 8px !important; }
  .hero-now-grid { grid-template-columns: 1fr !important; }
  .quick-report-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --tl-line: rgba(213,255,231,.42);
    --tl-muted: #d0dedc;
    --tl-muted-2: #b9ccca;
  }
  .station-card, .section, .hero-card, .bottom-nav, .search-control-dock { border-width: 2px !important; }
}

/* ================================================================
   TankLina 0.10.51 — Award-Level final refinement
   Four approved visual references are the binding art direction.
   Visual/UI layer only: no station, routing, report or price logic changed.
   ================================================================ */

:root {
  --tl-bg-0: #020a0b;
  --tl-bg-1: #061812;
  --tl-bg-2: #0a241c;
  --tl-glass: rgba(8, 38, 33, .66);
  --tl-glass-strong: rgba(5, 29, 28, .90);
  --tl-line: rgba(176,255,218,.24);
  --tl-line-strong: rgba(183,255,214,.55);
  --tl-text: #fbfffd;
  --tl-muted: #c1d3d0;
  --tl-muted-2: #8fa9a6;
  --tl-mint: #9affb8;
  --tl-mint-2: #58efbd;
  --tl-green: #10b981;
  --tl-green-deep: #059669;
  --tl-orange: #f59e0b;
  --tl-danger: #ff9a34;
}

/* Preserve the existing section structure: Start -> Map -> Stations -> Prices -> Routes -> Live -> Savings. */
#heroCard { order: 1 !important; }
#mapSection { order: 2 !important; }
#stationsSection { order: 3 !important; }
#trendSection { order: 4 !important; }
#routesSection { order: 5 !important; }
#liveSection { order: 6 !important; }
#savingsSection { order: 7 !important; }

body,
body.theme-light,
body.theme-dark {
  background:
    radial-gradient(900px 700px at 50% -5%, rgba(42,255,156,.11), transparent 62%),
    radial-gradient(600px 600px at 104% 42%, rgba(38,223,192,.08), transparent 63%),
    linear-gradient(180deg, #020b0e 0%, #041512 45%, #020a0c 100%) !important;
}

.app-shell {
  background:
    radial-gradient(500px 320px at 52% 0%, rgba(38,238,145,.08), transparent 70%),
    linear-gradient(180deg, rgba(3,18,18,.96), rgba(2,12,14,.99)) !important;
}

/* Header from all four references: identical brand lockup, profile control on the right. */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 880 !important;
  margin: -4px -2px 4px !important;
  padding: 8px 4px 10px !important;
  background: linear-gradient(180deg, rgba(3,20,21,.96), rgba(3,20,21,.76) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.brand-logo {
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
  box-shadow: 0 0 0 1px rgba(197,255,218,.25), 0 0 28px rgba(79,255,153,.23) !important;
}
.brand { font-size: 27px !important; line-height: 1 !important; }
.tagline { color: #c5d4d7 !important; font-size: 12.5px !important; margin-top: 4px !important; }
.settings-access-btn {
  width: 50px !important;
  min-width: 50px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(8,42,43,.72) !important;
}
.profile-glyph, .profile-glyph svg { width: 27px; height: 27px; display: block; }
.profile-glyph svg { fill: none; stroke: #dce9e8; stroke-width: 1.75; stroke-linecap: round; }

/* Home / savings hero */
.hero-card {
  min-height: auto !important;
  padding: 22px 18px 24px !important;
  background:
    radial-gradient(400px 310px at 72% 24%, rgba(83,255,147,.14), transparent 70%),
    radial-gradient(340px 300px at 20% 62%, rgba(37,224,196,.09), transparent 72%),
    linear-gradient(155deg, rgba(7,39,36,.92), rgba(2,20,24,.98) 58%, rgba(2,12,15,.99)) !important;
}
.hero-home-head { position: relative; z-index: 3; margin: 8px 4px 6px; }
.hero-home-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--tl-mint-2);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-home-head h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 9vw, 54px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 900;
}
.hero-home-head p {
  margin: 9px 0 0;
  color: #bfd0d4;
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.35;
}

.hero-savings-orbit {
  --progress: 0;
  width: min(82vw, 350px);
  aspect-ratio: 1;
  margin: 12px auto 14px;
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: 50%;
  isolation: isolate;
}
.hero-savings-orbit::before,
.hero-savings-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-savings-orbit::before {
  inset: 2%;
  background:
    conic-gradient(from -90deg, #4ee9c1 0deg, #8cff91 var(--progress-angle), rgba(117,255,176,.12) var(--progress-angle), rgba(99,233,210,.08) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 68%, #000 69% 76%, transparent 77%);
  mask: radial-gradient(circle, transparent 0 68%, #000 69% 76%, transparent 77%);
  filter: drop-shadow(0 0 16px rgba(94,255,145,.42));
  animation: tlOrbitBreath 4.8s ease-in-out infinite;
}
.hero-savings-orbit::after {
  inset: 9%;
  border: 1px solid rgba(132,255,201,.24);
  box-shadow: inset 0 0 44px rgba(50,255,166,.08), 0 0 0 14px rgba(78,255,160,.025);
}
.hero-savings-orbit-inner {
  width: 69%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(174,255,217,.16);
  background: radial-gradient(circle at 50% 34%, rgba(36,92,70,.48), rgba(4,27,29,.80) 68%);
  box-shadow: inset 0 0 60px rgba(68,255,158,.08), 0 20px 55px rgba(0,0,0,.32);
}
#heroSavingsValue {
  color: #f7fff9;
  font-size: clamp(48px, 12vw, 68px);
  line-height: .94;
  letter-spacing: -.06em;
  font-weight: 950;
  text-shadow: 0 0 28px rgba(77,255,145,.28);
  white-space: nowrap;
}
.hero-savings-orbit-inner > span { margin-top: 10px; color: #d4dfdf; font-size: 12px; }

.hero-stat-grid {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 9px;
  margin: 4px 0 10px;
}
.hero-stat-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  border: 1px solid rgba(163,255,216,.18);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(20,60,58,.62), rgba(6,34,39,.73));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.17);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}
.hero-stat-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #b6ffc4;
  font-size: 24px;
  border: 1px solid rgba(164,255,211,.22);
  background: radial-gradient(circle at 35% 25%, rgba(120,255,178,.22), rgba(22,75,67,.54));
  box-shadow: 0 0 24px rgba(74,255,147,.10);
}
.hero-stat-card small { display: block; color: #d4dfde; font-size: 12px; font-weight: 780; }
.hero-stat-card strong { display: inline-block; margin-top: 3px; color: #8fffb2; font-size: 23px; line-height: 1; }
.hero-stat-card div > span { margin-left: 5px; color: #8dffcc; font-size: 11px; }

.hero-achievement {
  position: relative;
  z-index: 4;
  min-height: 82px;
  display: grid;
  grid-template-columns: 52px 1fr 32px;
  gap: 12px;
  align-items: center;
  margin: 10px 0 16px;
  padding: 12px 14px;
  border-radius: 23px;
  border: 1px solid rgba(183,255,186,.47);
  background:
    radial-gradient(180px 100px at 91% 32%, rgba(188,255,112,.24), transparent 70%),
    linear-gradient(105deg, rgba(45,194,100,.78), rgba(18,112,92,.82));
  box-shadow: 0 0 34px rgba(67,255,129,.18), inset 0 1px 0 rgba(255,255,255,.17);
}
.hero-achievement-icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(239,255,229,.55);
  background: rgba(111,255,157,.14); color: #f5fff2; font-size: 26px;
}
.hero-achievement strong { display: block; color: #fff; font-size: 18px; }
.hero-achievement span:not(.hero-achievement-icon):not(.hero-achievement-arrow) { display: block; margin-top: 3px; color: #e8fff0; font-size: 12px; }
.hero-achievement-arrow { color: #f3fff5; font-size: 32px; text-align: center; }

.today-recommendation-shell {
  position: relative;
  z-index: 4;
  margin-top: 14px;
  padding: 16px;
  border-radius: 28px;
  border: 1px solid rgba(148,255,204,.19);
  background:
    radial-gradient(280px 180px at 90% 6%, rgba(96,255,143,.12), transparent 70%),
    linear-gradient(150deg, rgba(15,56,53,.72), rgba(4,29,33,.80));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 18px 44px rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}
.today-recommendation-shell .hero-intro { margin-top: 17px !important; }
.today-recommendation-shell #decisionTitle {
  max-width: none;
  margin: 4px 0 7px !important;
  font-size: clamp(28px, 7vw, 38px) !important;
  line-height: 1.02 !important;
}
.today-recommendation-shell .hero-copy { max-width: 33ch; }
.today-recommendation-shell .hero-logo { width: 54px !important; height: 54px !important; }

.tank-stop-quick-btn {
  background: linear-gradient(100deg, rgba(80,239,163,.95), rgba(135,255,127,.96)) !important;
  border-color: rgba(210,255,194,.72) !important;
  color: #06150e !important;
  box-shadow: 0 14px 36px rgba(63,255,142,.18), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.tank-stop-quick-title, .tank-stop-quick-copy small { color: rgba(5,35,23,.70) !important; }
.tank-stop-quick-action { color: #05180e !important; }

/* Netto is always visually stronger than liter price. */
#netSaving { font-size: clamp(52px, 14vw, 76px) !important; }
.big-price { font-size: clamp(32px, 8vw, 46px) !important; }
.net-positive { color: #a8ff9e !important; }
.net-negative { color: #ffb34f !important; }
.net-neutral { color: #d8e4df !important; }
.money-calculating { animation: tlMoneyLock .52s var(--tl-ease-spring) both; }

.benefit-saving {
  background:
    radial-gradient(210px 150px at 74% 4%, rgba(147,255,108,.22), transparent 69%),
    linear-gradient(145deg, rgba(38,104,72,.76), rgba(7,48,43,.83)) !important;
}
.benefit-security { min-height: 150px; }
.why-card summary { font-weight: 800; color: #effaf7; }

/* Section titles */
.chapter-title-row > div { min-width: 0; }
.chapter-title-row h2 { margin-bottom: 2px !important; }
.chapter-subtitle {
  margin: 5px 0 0;
  color: #b7c9c8;
  font-size: 12px;
  line-height: 1.35;
}

/* Station list — photographic liquid-glass cards. */
.station-list { gap: 13px !important; }
.station-card {
  overflow: hidden !important;
  padding: 12px !important;
  border-radius: 27px !important;
  border: 1px solid rgba(154,255,210,.19) !important;
  background:
    radial-gradient(240px 170px at 95% 2%, rgba(62,255,153,.10), transparent 68%),
    linear-gradient(150deg, rgba(13,53,52,.78), rgba(4,30,35,.91)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.station-card.best {
  border-color: rgba(158,255,180,.72) !important;
  box-shadow: 0 0 0 1px rgba(109,255,168,.17), 0 0 30px rgba(65,255,133,.20), 0 20px 50px rgba(0,0,0,.34) !important;
}
.station-photo-wrap { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 11px; }
.station-card-photo {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  border: 1px solid rgba(163,255,211,.18);
  filter: saturate(.94) contrast(1.03) brightness(.93);
  box-shadow: inset 0 0 25px rgba(0,0,0,.18);
}
.station-photo-wrap .station-card-photo { border: 0; border-radius: 0; }
.station-photo-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(0,23,24,.54) 100%);
}
.station-card-headline {
  position: relative;
  z-index: 3;
  min-height: 30px;
  margin: -2px 0 8px !important;
}
.featured-detail .station-card-headline { position: absolute; top: 24px; right: 23px; }
.station-decision-tag.best {
  color: #f8fff7 !important;
  background: linear-gradient(100deg, rgba(43,174,95,.88), rgba(56,206,126,.84)) !important;
  border-color: rgba(207,255,214,.58) !important;
  box-shadow: 0 0 20px rgba(64,255,142,.18);
}
.station-card-top { align-items: center !important; }
.station-brand-logo { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
.station-title-copy h3 { font-size: clamp(19px, 5.2vw, 25px) !important; }
.station-title-copy .sub { font-size: 11.5px !important; color: #b8c9c9 !important; }
.station-price-wrap { align-items: flex-end; }
.station-card-price { font-size: clamp(27px, 7vw, 38px) !important; color: #f7fffb !important; letter-spacing: -.045em; }
.station-fuel-chip { font-size: 11px !important; }

.station-net-hero {
  position: relative;
  overflow: hidden;
  margin: 12px 0 10px;
  padding: 15px 17px;
  border-radius: 22px;
  border: 1px solid rgba(165,255,205,.24);
  background:
    radial-gradient(210px 150px at 90% 0%, rgba(154,255,104,.21), transparent 68%),
    linear-gradient(135deg, rgba(39,120,74,.67), rgba(8,58,51,.72));
  box-shadow: 0 0 28px rgba(69,255,139,.09), inset 0 1px 0 rgba(255,255,255,.08);
}
.station-net-hero::after {
  content: "";
  position: absolute;
  right: -35px; bottom: -24px;
  width: 190px; height: 90px;
  border-radius: 50%;
  border-top: 1px solid rgba(190,255,196,.30);
  border-bottom: 1px solid rgba(91,247,210,.16);
  transform: rotate(-8deg);
}
.station-net-hero > span {
  display: block;
  color: #d7e9e2;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.station-net-hero > strong {
  position: relative; z-index: 2;
  display: block;
  margin: 5px 0 6px;
  color: #b2ffa3;
  font-size: clamp(40px, 11vw, 58px);
  line-height: .94;
  letter-spacing: -.055em;
  text-shadow: 0 0 24px rgba(92,255,132,.23);
}
.station-net-hero.net-negative {
  border-color: rgba(245,158,11,.45);
  background: radial-gradient(220px 150px at 90% 0%, rgba(245,158,11,.15), transparent 68%), linear-gradient(135deg, rgba(94,64,23,.65), rgba(42,35,25,.76));
}
.station-net-hero.net-negative > strong { color: #ffb84f; text-shadow: 0 0 22px rgba(245,158,11,.16); }
.station-net-hero small { position: relative; z-index: 2; color: #c9d9d3; font-size: 11px; }

.station-calc-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 11px;
  align-items: center;
  margin: 9px 0 11px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(159,255,213,.13);
  background: rgba(11,48,49,.55);
}
.station-calc-icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 15px; color: #b6ffae; font-size: 22px;
  background: rgba(126,255,164,.10); border: 1px solid rgba(164,255,202,.13);
}
.station-calc-card strong { display: block; color: #f8fffb; font-size: 13px; }
.station-calc-card div > span { display: block; margin-top: 3px; color: #c3d2cf; font-size: 11px; line-height: 1.4; }
.station-key-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.station-key-grid > div { min-height: 70px; display: flex; flex-direction: column; justify-content: center; }
.station-key-grid > div strong { color: #eefbf7 !important; }
.station-route-main.featured-route {
  min-height: 64px !important;
  margin-top: 11px;
  background: linear-gradient(100deg, #65e8b1, #9aff75) !important;
  border-color: rgba(219,255,191,.80) !important;
  box-shadow: 0 0 28px rgba(80,255,147,.17), 0 12px 30px rgba(0,0,0,.22) !important;
  animation: tlButtonGlow 3.6s ease-in-out infinite;
}
.station-route-main.featured-route strong { font-size: 17px !important; }
.compact-decision .station-card-photo { height: 138px; }
.compact-decision .station-net-hero > strong { font-size: clamp(34px,9vw,46px); }
.location-only .station-card-photo { height: 132px; margin-bottom: 10px; }

/* Negative savings are orange and always carry the downward arrow from JS. */
.station-card.net-negative { border-color: rgba(245,158,11,.24) !important; }
.station-card.net-negative .station-decision-tag { border-color: rgba(245,158,11,.35) !important; color: #ffd18a !important; }

/* Map — own dark visual style + glowing net markers + bottom sheet. */
.real-map-wrap { min-height: 540px !important; }
.leaflet-tile-pane { filter: brightness(.80) saturate(.72) contrast(1.08) hue-rotate(84deg) !important; }
.tl-price-bubble.tl-net-map-bubble {
  min-width: 100px !important;
  min-height: 54px !important;
  padding: 6px 11px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  border-radius: 18px 18px 18px 6px !important;
  background: linear-gradient(145deg, rgba(18,95,57,.96), rgba(5,48,43,.97)) !important;
  border-color: rgba(188,255,199,.70) !important;
  box-shadow: 0 0 0 6px rgba(75,255,146,.08), 0 0 26px rgba(84,255,157,.38) !important;
}
.tl-net-map-bubble small { color: #d9eee5; font-size: 7px; font-weight: 850; letter-spacing: .10em; }
.tl-net-map-bubble strong { color: #b8ff9e; font-size: 16px; line-height: 1; white-space: nowrap; }
.tl-net-map-bubble.net-bad {
  border-color: rgba(255,183,76,.72) !important;
  background: linear-gradient(145deg, rgba(118,72,18,.97), rgba(52,42,27,.97)) !important;
  box-shadow: 0 0 0 6px rgba(245,158,11,.07), 0 0 24px rgba(245,158,11,.25) !important;
}
.tl-net-map-bubble.net-bad strong { color: #ffbd5c; }
.tl-net-map-bubble.net-pending { opacity: .78; }
.map-popup-net { margin: 5px 0 3px; font-size: 18px; font-weight: 900; }

.map-best-sheet {
  display: grid;
  grid-template-columns: 112px 1fr 48px;
  gap: 12px;
  align-items: center;
  margin-top: -72px;
  position: relative;
  z-index: 520;
  padding: 11px;
  border-radius: 25px;
  border: 1px solid rgba(170,255,215,.45);
  background:
    radial-gradient(180px 120px at 100% 0%, rgba(104,255,145,.18), transparent 70%),
    linear-gradient(145deg, rgba(20,67,61,.91), rgba(4,37,40,.94));
  box-shadow: 0 22px 56px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px rgba(68,255,137,.12);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}
.map-best-sheet[hidden] { display: none !important; }
.map-best-photo { width: 112px; height: 104px; object-fit: cover; border-radius: 18px; border: 1px solid rgba(176,255,219,.23); }
.map-best-copy { min-width: 0; }
.map-best-kicker { display: block; color: #9dffb8; font-size: 8px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
#mapBestName { display: block; margin: 3px 0 2px; color: #fff; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mapBestMeta { display: block; color: #bdcdcd; font-size: 10px; }
.map-best-saving { margin-top: 8px; }
.map-best-saving small { display: block; color: #cadad5; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
#mapBestSaving { display: block; margin-top: 1px; color: #b3ffa0; font-size: 25px; line-height: 1; }
.map-best-sheet.net-negative #mapBestSaving { color: #ffb54b; }
.map-best-go {
  width: 48px; height: 48px; min-width: 48px; border-radius: 50%;
  border: 1px solid rgba(211,255,208,.62); color: #05180f; font-size: 31px;
  background: linear-gradient(145deg, #75eeb0, #a6ff7c);
  box-shadow: 0 0 22px rgba(81,255,145,.20);
}

/* Search dock integrates into the premium surface without stealing focus. */
.search-control-dock { margin-bottom: 13px !important; }
.search-control-chip { min-height: 60px !important; }

/* Savings screen keeps the same core visual language as Home. */
.section-savings #savingsTotal { font-size: 56px !important; }
.savings-since { color: #afc3c0 !important; }

/* Motion */
@keyframes tlOrbitBreath {
  0%,100% { filter: drop-shadow(0 0 13px rgba(94,255,145,.30)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 24px rgba(94,255,145,.52)); transform: scale(1.012); }
}
@keyframes tlMoneyLock {
  0% { transform: scale(.97); filter: brightness(.92); }
  55% { transform: scale(1.025); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes tlButtonGlow {
  0%,100% { box-shadow: 0 0 20px rgba(80,255,147,.12), 0 12px 30px rgba(0,0,0,.22); }
  50% { box-shadow: 0 0 34px rgba(80,255,147,.28), 0 15px 34px rgba(0,0,0,.25); }
}

/* Smooth card selection, fade-up loading and section transitions. */
.station-card, .section, .hero-card { transition: transform .38s var(--tl-ease-spring), border-color .38s ease, box-shadow .38s ease, background .38s ease; }
.station-card:focus-within, .station-card.highlighted { transform: scale(1.012); border-color: rgba(166,255,207,.50) !important; }

/* WCAG / touch targets */
button, summary, .nav-item, .station-card { min-block-size: 44px; }
#netSaving.net-negative, #mapBestSaving.net-negative { color: #ffbd63 !important; }

@media (max-width: 440px) {
  .hero-card { padding-inline: 14px !important; }
  .hero-savings-orbit { width: min(84vw, 320px); }
  #heroSavingsValue { font-size: clamp(44px, 13vw, 60px); }
  .today-recommendation-shell { padding: 13px; border-radius: 24px; }
  .station-card { border-radius: 24px !important; }
  .featured-detail .station-card-headline { top: 20px; right: 18px; }
  .station-card-photo { height: 152px; }
  .compact-decision .station-card-photo { height: 124px; }
  .station-key-grid { gap: 5px !important; }
  .station-key-grid > div { min-height: 65px; padding: 8px 5px !important; }
  .map-best-sheet { grid-template-columns: 88px 1fr 44px; gap: 9px; padding: 9px; margin-top: -62px; }
  .map-best-photo { width: 88px; height: 90px; }
  #mapBestName { font-size: 16px; }
  #mapBestSaving { font-size: 21px; }
  .map-best-go { width: 44px; height: 44px; min-width: 44px; }
  .real-map-wrap { min-height: 500px !important; }
}

@media (max-width: 360px) {
  .hero-savings-orbit { width: min(88vw, 292px); }
  .hero-stat-card { grid-template-columns: 46px 1fr; padding-inline: 11px; }
  .hero-stat-icon { width: 46px; height: 46px; }
  .map-best-sheet { grid-template-columns: 72px 1fr 42px; }
  .map-best-photo { width: 72px; height: 80px; }
  #mapBestMeta { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-savings-orbit::before,
  .station-route-main.featured-route,
  .hero-card .benefit-saving,
  .station-card.best,
  .trust-dot,
  .map-status-dot { animation: none !important; }
}


/* ==========================================================================\n   TANKLINA 0.10.52 · STRICT SPEC OVERRIDES\n   Latest user specification is authoritative. Existing sections/navigation\n   and application functions remain unchanged.\n   ========================================================================== */
:root {
  --tl-page-bg: #0A1F18;
  --tl-map-bg: #0F2E24;
  --tl-glass-exact: rgba(16, 185, 129, 0.08);
  --tl-card-border-exact: rgba(74, 222, 128, 0.15);
  --tl-accent-exact: #10B981;
  --tl-accent-dark-exact: #059669;
  --tl-warning-exact: #F59E0B;
  --tl-text-exact: #FFFFFF;
  --tl-text-secondary-exact: #94A3B8;
  --tl-text-thin-exact: #64748B;
  --tl-shimmer-exact: rgba(74, 222, 128, 0.2);
  --tl-card-radius-exact: 20px;
  --tl-ease-exact: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* map existing variables to the binding palette */
  --tl-bg-0: #0A1F18;
  --tl-bg-1: #0A1F18;
  --tl-bg-2: #0F2E24;
  --tl-bg-3: #0F2E24;
  --tl-glass: rgba(16, 185, 129, 0.08);
  --tl-glass-strong: rgba(16, 185, 129, 0.08);
  --tl-glass-soft: rgba(16, 185, 129, 0.08);
  --tl-line: rgba(74, 222, 128, 0.15);
  --tl-line-strong: rgba(74, 222, 128, 0.15);
  --tl-text: #FFFFFF;
  --tl-muted: #94A3B8;
  --tl-muted-2: #64748B;
  --tl-mint: #10B981;
  --tl-mint-2: #10B981;
  --tl-cyan: #10B981;
  --tl-lime: #10B981;
  --tl-yellow: #F59E0B;
  --tl-warm: #F59E0B;
  --tl-radius-xl: 20px;
  --tl-radius-lg: 20px;
  --tl-radius-md: 20px;
  --tl-radius-sm: 20px;
}

html,
body,
body.theme-light,
body.theme-dark {
  background: #0A1F18 !important;
  color: #FFFFFF !important;
  color-scheme: dark;
}
body::before,
body::after { opacity: 0 !important; }
.cinematic-backdrop { opacity: 1 !important; }
.cinematic-backdrop::before { background: rgba(74, 222, 128, 0.2) !important; opacity: .26; }
.cinematic-backdrop::after { background: rgba(74, 222, 128, 0.2) !important; opacity: .18; }
.cinematic-backdrop i { background: rgba(74, 222, 128, 0.2) !important; opacity: .14; }

body, button, input, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

.app-shell {
  max-width: 520px !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) !important;
  background: #0A1F18 !important;
  border-color: rgba(74, 222, 128, 0.15) !important;
}
.app-shell::before { opacity: 0 !important; }
main {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
/* Source order is the preserved page order. No CSS reordering. */
#heroCard, #mapSection, #stationsSection, #trendSection, #routesSection, #liveSection, #savingsSection {
  order: initial !important;
}

/* Header: exact identity hierarchy */
.topbar { padding: 8px 0 12px !important; }
.brand-logo { width: 48px !important; height: 48px !important; border-radius: 14px !important; }
.brand {
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}
.tagline {
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #94A3B8 !important;
}

/* Exact Liquid Glass material for existing cards/controls. */
.section,
.hero-card,
.today-recommendation-shell,
.trend-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.savings-total > div,
.savings-month-groups > *,
.savings-history > *,
.search-control-dock,
.search-control-chip,
.dialog,
.why-card,
.tank-stop-quick-card,
.hero-stat-card,
.hero-achievement,
.map-best-sheet {
  background: rgba(16, 185, 129, 0.08) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(74, 222, 128, 0.15) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.18) !important;
}
.section,
.hero-card { padding: 20px !important; }
.section-heading,
.chapter-heading { margin-bottom: 16px !important; }

/* Binding card style supplied by the user. */
.tank-card {
  background: rgba(16, 185, 129, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 12px;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tank-card:hover {
  transform: translateY(-2px);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15);
}
.tank-card.best {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
  border-color: rgba(16, 185, 129, 0.4);
}
.netto-positive {
  color: #10B981;
  font-weight: 800;
  font-size: 20px;
}
.netto-neutral {
  color: #F59E0B;
  font-weight: 700;
  font-size: 18px;
}
.netto-negative {
  color: #64748B;
  font-weight: 600;
  font-size: 16px;
}

/* The existing station-card receives tank-card too; these rules enforce the visual target. */
.station-card.tank-card {
  position: relative;
  overflow: hidden;
  background: rgba(16, 185, 129, 0.08) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(74, 222, 128, 0.15) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  box-shadow: none !important;
}
.station-card.tank-card:hover,
.station-card.tank-card:focus-within,
.station-card.tank-card.highlighted {
  transform: translateY(-2px) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15) !important;
}
.station-card.tank-card.best {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}
.station-card.best::after { background: rgba(74, 222, 128, 0.2) !important; }
.station-card h3,
.station-title-copy h3,
.map-best-copy > strong { font-size: 18px !important; font-weight: 700 !important; color: #FFFFFF !important; }
.station-title-copy .sub,
.station-card small,
.station-card .sub,
.station-key-grid span,
.station-calc-card span { font-size: 14px !important; color: #94A3B8 !important; }
.station-card-price,
.big-price {
  font-size: clamp(28px, 7.3vw, 32px) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}
.station-net-hero > strong,
#netSaving,
#mapBestSaving,
#savingsTotal,
#savingsMonth,
#heroSavingsValue {
  font-size: clamp(36px, 10vw, 48px) !important;
  line-height: .98 !important;
  font-weight: 800 !important;
  color: #10B981 !important;
  letter-spacing: -.04em !important;
}
.station-net-hero.net-neutral > strong,
#netSaving.net-neutral,
#mapBestSaving.net-neutral { color: #F59E0B !important; }
.station-net-hero.net-negative > strong,
#netSaving.net-negative,
#mapBestSaving.net-negative { color: #64748B !important; }
.station-net-hero { background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(74, 222, 128, 0.15) !important; border-radius: 20px !important; }
.station-net-hero > span { color: #94A3B8 !important; }
.station-net-hero > small { color: #94A3B8 !important; }
.station-fuel-chip,
.station-decision-tag.best {
  color: #FFFFFF !important;
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(74, 222, 128, 0.15) !important;
}
.station-decision-tag.warn,
.net-neutral .station-decision-tag,
.net-negative .station-decision-tag { color: #F59E0B !important; border-color: rgba(245, 158, 11, .35) !important; }
.station-card-photo,
.map-best-photo { border-radius: 20px !important; }

/* Primary/secondary text hierarchy */
h1, h2, h3, .brand, strong { color: #FFFFFF; }
.section-copy,
.chapter-subtitle,
.hero-copy,
.field-help,
.station-meta,
.trust-line,
.savings-since,
small { color: #94A3B8; }
.eyebrow,
.hero-kicker,
.decision-block-label { color: #64748B !important; }
.chapter-heading h2 { color: #FFFFFF !important; }

/* Buttons: 20px radius and minimum 44px touch targets. */
button,
.primary-btn,
.secondary-btn,
.icon-btn,
.map-live-btn,
.station-route-main,
.quick-report-grid > button,
.choice-btn,
.theme-btn,
.vehicle-profile-btn,
.profile-fuel-btn {
  min-height: 44px;
  border-radius: 20px !important;
  transition: transform .3s var(--tl-ease-exact), box-shadow .3s ease, background .3s ease, border-color .3s ease !important;
}
.primary-btn,
.station-route-main.featured-route,
.map-best-go {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #10B981, #059669) !important;
  border: 1px solid rgba(74, 222, 128, 0.15) !important;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.15), 0 8px 30px rgba(16, 185, 129, 0.15) !important;
}
.primary-btn:hover,
.station-route-main.featured-route:hover,
.map-best-go:hover { box-shadow: 0 0 30px rgba(74, 222, 128, 0.2), 0 8px 30px rgba(16,185,129,.18) !important; }
.secondary-btn,
.map-live-btn,
.icon-btn,
.search-control-chip {
  color: #FFFFFF !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(74, 222, 128, 0.15) !important;
}

/* Start screen / savings focus */
.hero-card {
  min-height: auto !important;
  background: #0A1F18 !important;
  border-color: rgba(74, 222, 128, 0.15) !important;
}
.hero-home-eyebrow { color: #10B981 !important; }
.hero-home-head h1 { color: #FFFFFF !important; }
.hero-home-head p { color: #94A3B8 !important; }
.hero-savings-orbit::before {
  background: conic-gradient(#10B981 var(--progress-angle), rgba(100,116,139,.24) 0) !important;
  box-shadow: 0 0 32px rgba(74, 222, 128, 0.2) !important;
}
.hero-savings-orbit::after { border-color: rgba(74, 222, 128, 0.15) !important; }
.hero-savings-orbit-inner { background: #0F2E24 !important; }
.hero-savings-orbit-inner > span { color: #94A3B8 !important; }
.hero-stat-icon,
.hero-achievement-icon { color: #10B981 !important; background: rgba(16,185,129,.12) !important; border-color: rgba(74,222,128,.15) !important; }
.hero-stat-card small,
.hero-achievement span:not(.hero-achievement-icon):not(.hero-achievement-arrow) { color: #94A3B8 !important; }
.hero-stat-card strong,
.hero-achievement strong { color: #FFFFFF !important; }
.hero-achievement { box-shadow: 0 0 24px rgba(74, 222, 128, 0.2) !important; }

/* Map: exact dark-green visual treatment and luminous markers. */
.real-map-wrap,
.real-map,
#mapCanvas { background: #0F2E24 !important; border-radius: 20px !important; }
.real-map-wrap { border: 1px solid rgba(74, 222, 128, 0.15) !important; overflow: hidden; }
.leaflet-tile-pane { filter: sepia(.5) hue-rotate(90deg) saturate(.82) brightness(.52) contrast(1.12); }
.tl-price-bubble,
.tl-location-pin,
.tl-search-marker,
.tl-user-marker {
  border-color: rgba(74, 222, 128, 0.4) !important;
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.2) !important;
}
.tl-price-bubble.net-good,
.tl-net-map-bubble.net-good { background: #10B981 !important; color: #FFFFFF !important; }
.tl-price-bubble.net-bad,
.tl-net-map-bubble.net-bad { background: #F59E0B !important; color: #0A1F18 !important; }
.tl-price-bubble.net-even,
.tl-net-map-bubble.net-even { background: #64748B !important; color: #FFFFFF !important; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { background: #0F2E24 !important; color: #FFFFFF !important; }
.map-best-sheet { margin-top: 12px !important; }
.map-best-kicker { color: #10B981 !important; }
#mapBestMeta { color: #94A3B8 !important; }

/* Community/warnings: color never carries meaning alone because labels/icons remain. */
.report-btn.warning,
.report-btn.danger,
.station-now-chip.warn,
.station-now-chip.bad { border-color: rgba(245,158,11,.42) !important; color: #F59E0B !important; }

/* Natural motion, 0.3–0.5s. */
.reveal.in-view { animation-duration: .4s !important; }
.station-card,
.section,
.hero-card { transition-duration: .35s !important; }
#netSaving.is-calculating,
.station-net-hero.is-calculating { animation: tlExactPulse .45s ease-in-out infinite alternate; }
@keyframes tlExactPulse {
  from { opacity: .72; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

/* No replacement navigation menu. Preserve the original section labels/navigation only. */
.bottom-nav { display: none !important; }

@media (max-width: 430px) {
  .app-shell { padding-inline: 12px !important; }
  .section, .hero-card { padding: 20px !important; }
  .tank-card, .station-card.tank-card { padding: 20px !important; }
  .station-net-hero > strong,
  #netSaving,
  #mapBestSaving,
  #savingsTotal,
  #savingsMonth,
  #heroSavingsValue { font-size: clamp(36px, 11vw, 46px) !important; }
  .station-card-price,
  .big-price { font-size: clamp(28px, 8vw, 31px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* Exact quick tank-entry wording and palette. */
.tank-stop-quick-btn {
  min-height: 44px !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(74, 222, 128, 0.15) !important;
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.08) !important;
}
.tank-stop-quick-title,
.tank-stop-quick-action { color: #FFFFFF !important; text-transform: none !important; }
.tank-stop-quick-title { font-size: 14px !important; letter-spacing: 0 !important; }
.tank-stop-quick-action { font-size: 15px !important; }
.tank-stop-quick-copy small { color: #94A3B8 !important; font-size: 14px !important; }
.tank-stop-quick-icon { color: #10B981 !important; background: rgba(16,185,129,.12) !important; border-color: rgba(74,222,128,.15) !important; }


/* ===== TankLina 0.10.53 FINAL OVERRIDES ===== */
:root {
  --tl-final-bg: #0A1F18;
  --tl-final-bg-2: #0F2E24;
  --tl-final-glass: rgba(16, 185, 129, 0.08);
  --tl-final-line: rgba(74, 222, 128, 0.15);
  --tl-final-green: #10B981;
  --tl-final-green-dark: #059669;
  --tl-final-warn: #F59E0B;
  --tl-final-text: #FFFFFF;
  --tl-final-muted: #94A3B8;
  --tl-final-thin: #64748B;
  --tl-final-shimmer: rgba(74, 222, 128, 0.2);
}
body, body.theme-dark, body.theme-light {
  background:
    radial-gradient(900px 620px at 20% 8%, rgba(16,185,129,.15), transparent 58%),
    radial-gradient(860px 720px at 85% 22%, rgba(74,222,128,.12), transparent 62%),
    linear-gradient(180deg, #081a15 0%, var(--tl-final-bg) 42%, #071710 100%) !important;
  color: var(--tl-final-text) !important;
}
.app-shell {
  background:
    linear-gradient(180deg, rgba(5,20,16,.96), rgba(10,31,24,.985)),
    radial-gradient(640px 320px at 55% 0%, rgba(74,222,128,.09), transparent 60%) !important;
}
.brand { font-size: 22px !important; font-weight: 800 !important; }
.tagline { font-size: 13px !important; color: var(--tl-final-muted) !important; }
.sticky-tank-ribbon-wrap {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 68;
  margin: 4px 0 12px;
}
.sticky-tank-ribbon {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, 0.38); border-radius: 18px;
  background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(251,191,36,.88));
  color: #102016; font-weight: 800;
  box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.sticky-tank-ribbon:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,.26); }
.sticky-tank-ribbon.ready { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 46px rgba(245,158,11,.22); }
.sticky-tank-ribbon-icon { display:inline-grid; place-items:center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,.25); }
.sticky-tank-ribbon-text { font-size: 15px; line-height: 1.2; }
.search-control-dock,
.section,
.hero-card,
.station-card,
.trend-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.savings-total > div,
.savings-month-groups > *,
.savings-history > *,
.dialog,
.map-live-btn,
.search-control-chip,
.icon-btn,
.primary-btn,
.secondary-btn,
.station-route-main,
.quick-report-grid > button,
.choice-btn,
.theme-btn,
.vehicle-profile-btn,
.profile-fuel-btn,
.input,
select.input,
input.input,
textarea.input,
.tank-card {
  background: var(--tl-final-glass) !important;
  border: 1px solid var(--tl-final-line) !important;
  border-radius: 20px !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}
.hero-card {
  min-height: auto !important;
  background:
    radial-gradient(280px 220px at 82% 16%, rgba(74,222,128,.16), transparent 70%),
    radial-gradient(260px 220px at 16% 56%, rgba(16,185,129,.08), transparent 75%),
    linear-gradient(160deg, rgba(8,27,22,.94), rgba(10,31,24,.96) 56%, rgba(5,18,14,.99)) !important;
}
.hero-card h1, #decisionTitle, .section h2 { color: #FFFFFF !important; }
.hero-card p, .chapter-subtitle, .tagline, .section-copy, .savings-toolbar, .hero-card small, .hero-card span,
.hero-copy, .sub, .station-card .sub, #bestStationMeta, #heroFreshness, #tankNowHint { color: var(--tl-final-muted) !important; }
#heroSavingsValue, #netSaving, #savingsTotal, #savingsMonth, #mapBestSaving, .hero-savings-orbit-inner strong,
.big-price strong, .big-price, .savings-month-sum, .decision-benefit-strip .benefit-saving strong {
  color: var(--tl-final-green) !important; text-shadow: 0 0 26px rgba(16,185,129,.22);
}
#heroSavingsValue { font-size: clamp(40px, 9vw, 48px) !important; font-weight: 800 !important; }
#bestPrice { font-size: clamp(28px, 7vw, 32px) !important; }
#netSaving { font-size: clamp(36px, 8.2vw, 46px) !important; font-weight: 800 !important; }
#netSaving.net-negative, .net-negative, .map-best-sheet.net-negative #mapBestSaving { color: var(--tl-final-warn) !important; }
#netSaving.net-neutral, .net-neutral { color: #F59E0B !important; }
.hero-achievement, .decision-benefit-strip, .station-card.best, .map-best-sheet, .tank-card.best {
  background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(16,185,129,.05)) !important;
  border-color: rgba(16,185,129,.36) !important;
  box-shadow: 0 8px 30px rgba(16,185,129,.12), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.station-card, .tank-card { padding: 20px !important; margin-bottom: 12px !important; transition: all .3s cubic-bezier(.22,.61,.36,1) !important; }
.station-card:hover, .tank-card:hover { transform: translateY(-2px); border-color: rgba(16,185,129,.4) !important; box-shadow: 0 8px 30px rgba(16,185,129,.15) !important; }
.station-route-main, .primary-btn, .hero-action-wide, #navigateBtn, #mapBestNavigateBtn { position: relative; overflow: hidden; }
.station-route-main::after, .primary-btn::after, #navigateBtn::after, #mapBestNavigateBtn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.15) 48%, transparent 82%);
  transform: translateX(-110%); animation: tanklina-shine 3.4s ease-in-out infinite;
}
@keyframes tanklina-shine { 0%, 74% { transform: translateX(-120%); } 100% { transform: translateX(130%); } }
.reveal, .hero-stat-card, .station-card, .map-best-sheet, .savings-moment, .savings-total > div { animation: tanklina-fade-up .35s both; }
@keyframes tanklina-fade-up { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:translateY(0);} }
.real-map-wrap, .real-map, #mapCanvas { background: #f4f6f4 !important; }
.real-map-wrap::after { display: none !important; }
.leaflet-tile-pane { filter: none !important; opacity: 1 !important; }
.leaflet-container { background: #f5f6f5 !important; }
.leaflet-control-attribution { background: rgba(255,255,255,.72) !important; color: #214033 !important; }
.leaflet-control-attribution a { color: #214033 !important; }
.map-live-btn.primary-map, .primary-btn, .featured-route {
  background: linear-gradient(135deg, rgba(16,185,129,.96), rgba(74,222,128,.84)) !important;
  color: #042315 !important; font-weight: 800 !important;
}
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.fx-confetti-star {
  position: fixed; font-size: 18px; line-height: 1; color: #7fffb2;
  text-shadow: 0 0 12px rgba(16,185,129,.55); animation: tl-confetti-fall 1.8s cubic-bezier(.18,.84,.32,1) forwards;
}
@keyframes tl-confetti-fall { 0% { opacity:0; transform:translate3d(0,0,0) rotate(0deg) scale(.65);} 12% { opacity:1; } 100% { opacity:0; transform:translate3d(var(--tx), var(--ty), 0) rotate(var(--rot)) scale(1.18);} }
.fx-cheer-note {
  position: fixed; transform: translateX(-50%); padding: 10px 14px; border-radius: 999px;
  background: rgba(8,34,27,.88); border: 1px solid rgba(74,222,128,.24); color: #E8FFF5; font-weight: 700; white-space: nowrap;
  box-shadow: 0 14px 40px rgba(0,0,0,.22); animation: tl-cheer-float 2.2s ease forwards;
}
@keyframes tl-cheer-float { 0% { opacity:0; transform:translate(-50%, 12px) scale(.95);} 12% { opacity:1; transform:translate(-50%, 0) scale(1);} 82% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -14px) scale(1.02);} }
.history-pop-in { animation: history-pop-in 1.1s cubic-bezier(.22,.61,.36,1); }
@keyframes history-pop-in { 0% { opacity:0; transform:translateY(12px) scale(.98);} 60% { opacity:1; transform:translateY(-2px) scale(1.01);} 100% { opacity:1; transform:translateY(0) scale(1);} }
#locateBtn span:last-child { font-size: 13px !important; }
#locateBtn span:last-child::before { content: none !important; display:none !important; }
#placeSearchBtn span:last-child { font-size: 13px !important; }
#placeSearchBtn span:last-child::before { content: none !important; display:none !important; }
@media (max-width: 560px) {
  .app-shell { padding-inline: 12px !important; }
  .sticky-tank-ribbon-text { font-size: 14px; }
  .search-control-dock { grid-template-columns: 1fr; }
}


/* ======================================================
   TANKLINA 0.10.54 — KORREKTUR & END-DESIGN
   NUR DARSTELLUNG: Hintergrund, Glas, Hierarchie, Animation
   ====================================================== */
:root {
  --bg-dark: #0A1F18;
  --accent-green: #10B981;
  --accent-green-soft: #34D399;
  --accent-green-glow: rgba(16,185,129,.35);
  --accent-gold: #F59E0B;
  --accent-gold-soft: #FBBF24;
  --text-white: #FFFFFF;
  --text-gray: #CBD5E1;
  --glass-bg: rgba(9, 35, 27, .72);
  --glass-bg-strong: rgba(9, 35, 27, .82);
  --glass-border: rgba(255,255,255,.12);
  --shadow-soft: 0 8px 32px rgba(0,0,0,.30);
  --radius: 20px;
  --transition: .35s cubic-bezier(.4,0,.2,1);
}
html { background: var(--bg-dark) !important; }
body, body.theme-dark, body.theme-light {
  margin: 0 !important;
  min-height: 100vh;
  color: var(--text-white) !important;
  background-color: var(--bg-dark) !important;
  background-image: url('assets/station-night-3.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom, rgba(10, 31, 24, 0.88), rgba(10, 31, 24, 0.92)) !important;
}
body::after { display: none !important; }
.cinematic-backdrop { display: none !important; }
.app-shell {
  background: transparent !important;
  box-shadow: 0 0 90px rgba(0,0,0,.26) !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}
.topbar { background: rgba(10,31,24,.34) !important; border-radius: 20px !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
.brand { font-size: 22px !important; font-weight: 800 !important; color: #fff !important; }
.tagline { font-size: 13px !important; color: #94A3B8 !important; }

/* 1. EINTRAGEN — immer oben sichtbar, warmes Gold */
.sticky-tank-ribbon-wrap {
  position: sticky !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  z-index: 120 !important;
  margin: 8px 0 12px !important;
}
.sticky-tank-ribbon {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: var(--radius) !important;
  border: 1px solid rgba(245,158,11,.42) !important;
  background: linear-gradient(90deg, rgba(245,158,11,.92), rgba(251,191,36,.82)) !important;
  color: #132419 !important;
  box-shadow: 0 8px 28px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.32) !important;
  transition: all var(--transition) !important;
}
.sticky-tank-ribbon:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 36px rgba(245,158,11,.25) !important; }
.sticky-tank-ribbon-text { font-size: 15px !important; font-weight: 800 !important; color: #132419 !important; }

/* Glas-Basis */
.glass-card,
.section,
.search-control-dock,
.station-card,
.trend-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.savings-total > div,
.savings-month-card,
.saving-row,
.dialog {
  position: relative;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  transition: all var(--transition) !important;
}
.section:hover, .station-card:hover, .glass-card:hover { transform: translateY(-2px); }

/* Startseite kompakt: nur Ersparnis + Empfehlung sichtbar. */
#heroCard {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 12px !important;
}
#heroCard::before, #heroCard::after, .hero-atmosphere { display: none !important; }
.home-legacy-hidden, #tankStopQuickCard { display: none !important; }
.home-savings-card {
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns: 1.25fr .75fr !important;
  gap: 14px !important;
  align-items: center !important;
  background: linear-gradient(90deg, rgba(16,185,129,.16), rgba(52,211,153,.07)) !important;
  border-color: rgba(16,185,129,.30) !important;
}
.home-card-kicker { display:block; color:#B7F7D5 !important; font-size:12px !important; font-weight:800 !important; margin-bottom:6px !important; }
.home-savings-line { display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; gap:7px !important; }
#heroSavingsValue { font-size: clamp(34px, 9vw, 44px) !important; line-height:1 !important; font-weight:800 !important; color:var(--accent-green-soft) !important; text-shadow:0 0 14px rgba(16,185,129,.20) !important; }
.home-savings-line > span { color:#D6E6DE !important; font-size:13px !important; }
.home-savings-mini { display:grid !important; grid-template-columns:1fr !important; gap:8px !important; }
.home-savings-mini > div { padding:8px 10px !important; border-radius:14px !important; background:rgba(255,255,255,.055) !important; border:1px solid rgba(255,255,255,.08) !important; }
.home-savings-mini small { display:block !important; color:#94A3B8 !important; font-size:10px !important; }
.home-savings-mini strong { display:block !important; margin-top:2px !important; color:#fff !important; font-size:15px !important; }

/* 3. Empfehlung — stärkster Fokus */
.today-recommendation-shell {
  margin: 0 !important;
  padding: 16px !important;
  background: linear-gradient(135deg, rgba(16,185,129,.23), rgba(7,45,34,.72) 52%, rgba(9,35,27,.82)) !important;
  border-color: rgba(52,211,153,.62) !important;
  box-shadow: 0 0 30px rgba(16,185,129,.19), inset 0 0 24px rgba(16,185,129,.05) !important;
}
.recommendation-title { display:flex !important; gap:8px !important; align-items:center !important; margin-bottom:8px !important; }
.recommendation-title strong { font-size:19px !important; color:#fff !important; }
.today-recommendation-shell .hero-topline { margin:0 0 6px !important; }
.compact-decision-intro { margin: 5px 0 8px !important; }
.compact-decision-intro h2 { font-size: 20px !important; margin:0 !important; }
.compact-decision-intro p { font-size:13px !important; margin:2px 0 0 !important; color:#B6C8C0 !important; }
.compact-target-grid { gap:10px !important; margin:0 !important; }
.decision-station-block, .decision-price-block { padding:10px 12px !important; border-radius:16px !important; background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.08) !important; }
.station-name { font-size:18px !important; font-weight:700 !important; }
#bestPrice { font-size:30px !important; font-weight:700 !important; color:#fff !important; }
.compact-benefit-strip { margin:10px 0 8px !important; padding:12px 14px !important; display:block !important; background:rgba(16,185,129,.13) !important; border:1px solid rgba(52,211,153,.28) !important; border-radius:18px !important; }
#netSaving { font-size: clamp(36px, 9vw, 46px) !important; font-weight:800 !important; color:var(--accent-green-soft) !important; text-shadow:0 0 14px var(--accent-green-glow) !important; }
#netSaving.net-negative { color:var(--accent-gold-soft) !important; }
.compact-security { display:none !important; }
.compact-now-grid { display:grid !important; grid-template-columns:1fr !important; margin:0 0 8px !important; }
.compact-now-grid[hidden] { display:none !important; }
.compact-now-grid .hero-now-fact { padding:8px 10px !important; }
.compact-hide { display:none !important; }
.compact-trust { margin:4px 0 8px !important; font-size:11px !important; }
.compact-hero-actions { margin-top:8px !important; }
#navigateBtn {
  min-height:52px !important;
  border:0 !important;
  border-radius:16px !important;
  background:linear-gradient(90deg, var(--accent-green), var(--accent-green-soft)) !important;
  color:#fff !important;
  font-size:17px !important;
  font-weight:800 !important;
  box-shadow:0 6px 22px rgba(16,185,129,.32) !important;
}
.compact-why { margin-top:8px !important; }
.compact-why summary { font-size:12px !important; color:#CDE1D7 !important; }

/* Funktionen bleiben: Schnellsteuerung nur unterhalb der Start-Empfehlung. */
.search-control-dock { margin:0 0 6px !important; background:rgba(9,35,27,.64) !important; border-color:rgba(255,255,255,.10) !important; }

/* Bereiche sofort unterscheidbar. */
#stationsSection { border-color:rgba(16,185,129,.24) !important; }
#mapSection { border-color:rgba(78,205,196,.34) !important; background:linear-gradient(135deg, rgba(19,118,118,.10), rgba(9,35,27,.76)) !important; }
#liveSection { border-color:rgba(220,255,238,.30) !important; background:linear-gradient(135deg, rgba(152,255,204,.09), rgba(9,35,27,.76)) !important; }
#savingsSection { border-color:rgba(16,185,129,.25) !important; }
.section { margin-bottom:0 !important; }

/* Karte: Original-OSM-Farben, kein dunkler Deckel. */
.real-map-wrap { overflow:hidden !important; border:1px solid rgba(78,205,196,.28) !important; border-radius:20px !important; background:#eef3f0 !important; }
.real-map-wrap::before, .real-map-wrap::after { display:none !important; }
#mapCanvas, .real-map, .leaflet-container { background:#eef3f0 !important; }
.leaflet-tile-pane { filter:none !important; opacity:1 !important; }
.leaflet-control-attribution { background:rgba(255,255,255,.78) !important; color:#325047 !important; font-size:9px !important; }
.leaflet-control-attribution a { color:#325047 !important; }
.tl-price-bubble { transform:scale(.88); opacity:.90; transition:all var(--transition) !important; }
.tl-price-bubble.net-good { border-color:rgba(16,185,129,.38) !important; }
.tl-price-bubble.net-bad { border-color:rgba(245,158,11,.75) !important; background:rgba(94,58,8,.90) !important; }
.tl-price-bubble.net-bad strong { color:#FFD37A !important; }
.tl-price-bubble.is-best { transform:scale(1.12) !important; opacity:1 !important; border-color:rgba(52,211,153,.86) !important; box-shadow:0 0 26px rgba(16,185,129,.42) !important; z-index:4 !important; }

/* Sanfte Bewegungen */
.reveal, .home-savings-card, .today-recommendation-shell, .section, .station-card { animation:tl-final-fade .35s cubic-bezier(.4,0,.2,1) both !important; }
@keyframes tl-final-fade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.money-calculating, .number-animate { animation:tl-number-up .6s ease-out !important; }
@keyframes tl-number-up { 0%{transform:scale(1)} 50%{transform:scale(1.12); text-shadow:0 0 24px rgba(52,211,153,.40)} 100%{transform:scale(1)} }

/* Konfetti: echte fallende grüne Sterne. */
.fx-confetti-star {
  position:fixed !important;
  top:-8vh !important;
  color:var(--accent-green-soft) !important;
  font-size:16px !important;
  text-shadow:0 0 10px rgba(52,211,153,.45) !important;
  animation:confetti-fall 3.5s ease-out forwards !important;
  pointer-events:none !important;
  z-index:9999 !important;
}
@keyframes confetti-fall { 0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:1} 100%{transform:translate3d(var(--tx),110vh,0) rotate(var(--rot));opacity:0} }

/* Navigation unten: Heute · Tankstellen · Karte · Live */
.bottom-nav.nav-bar {
  position:fixed !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  bottom:0 !important;
  width:min(100%,520px) !important;
  display:flex !important;
  justify-content:space-around !important;
  align-items:center !important;
  gap:4px !important;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  background:rgba(10,31,24,.88) !important;
  backdrop-filter:blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(135%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-bottom:0 !important;
  border-radius:22px 22px 0 0 !important;
  z-index:150 !important;
  box-shadow:0 -10px 34px rgba(0,0,0,.22) !important;
}
.bottom-nav .nav-item {
  min-width:66px !important;
  min-height:50px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  border:0 !important;
  background:transparent !important;
  color:#CBD5E1 !important;
  border-radius:16px !important;
  font-size:11px !important;
  transition:all var(--transition) !important;
}
.bottom-nav .nav-item.active { color:#A7F3D0 !important; background:rgba(16,185,129,.12) !important; box-shadow:inset 0 0 0 1px rgba(52,211,153,.12) !important; }
.bottom-nav .nav-icon { font-size:20px !important; line-height:1 !important; }

@media (max-width:560px) {
  .app-shell { padding-inline:12px !important; }
  .home-savings-card { grid-template-columns:1.15fr .85fr !important; }
  .search-control-dock { grid-template-columns:1fr 1fr 1fr !important; gap:6px !important; }
  .search-control-chip { min-height:52px !important; }
}
@media (max-width:380px) {
  .home-savings-card { grid-template-columns:1fr !important; }
  .home-savings-mini { grid-template-columns:1fr 1fr !important; }
  #heroSavingsValue { font-size:34px !important; }
  #netSaving { font-size:36px !important; }
}

/* Finale Inhaltsreihenfolge: Start kompakt, Schnellsteuerung danach, Funktionen unverändert. */
main { display:flex !important; flex-direction:column !important; gap:14px !important; }
#heroCard { order:1 !important; }
.search-control-dock { order:2 !important; }
#stationsSection { order:3 !important; }
#mapSection { order:4 !important; }
#trendSection { order:5 !important; }
#routesSection { order:6 !important; }
#liveSection { order:7 !important; }
#savingsSection { order:8 !important; }

/* Dunkler, grünstichiger Lesbarkeits-Überzug liegt sicher über dem Foto und unter der App. */
body::before { z-index:0 !important; }
.app-shell { position:relative !important; z-index:1 !important; }


/* ===== 0.10.57 visual corrections only ===== */
/* Global text contrast */
body, .app-shell, .section, .hero-card, .station-card, .trend-card, .route-stack-panel, .community-auto-detect, .savings-moment, .map-best-sheet, .bottom-nav { color:#FFFFFF !important; }
.eyebrow, .chapter-subtitle, .section-copy, .wait-report-heading small, .community-detect-copy span, .report-time span, .report-icon span,
.station-price-details, .station-service-details, .station-price-details *, .station-service-details *, .trust-line, .trust-line *, .why-card,
.hero-stat-card small, .savings-toolbar, .savings-since, .savings-month-groups small, .savings-history small, .station-key-grid span,
.station-now-line span, .station-services span, .station-meta, .map-status-line, #mapBestMeta, #heroFreshness, #heroWait, #heroOpening,
#priceSecureDetail, .visually-secondary, .community-detect-copy small, .report-feedback small, .field-help, .legal-footer a {
  color:#D8E4E8 !important;
}
.quick-report-grid > button strong, .wait-report-heading strong, .live-report-heading strong, .community-detect-copy strong,
.station-card strong, .map-best-copy strong, .hero-card strong, .hero-card h1, .section h2, .chapter-heading h2 { color:#FFFFFF !important; }

/* Remove the unnecessary prices panel */
#trendSection { display:none !important; }

/* Map must fill the full visible area, colorful and clean */
.real-map-wrap {
  position:relative !important;
  min-height:0 !important;
  height:clamp(420px, 56vh, 560px) !important;
  overflow:hidden !important;
  background:#eef3f0 !important;
  border:1px solid rgba(78,205,196,.28) !important;
  border-radius:24px !important;
}
#mapCanvas, .real-map, .leaflet-container {
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  display:block !important;
  background:#eef3f0 !important;
}
.real-map-wrap::before, .real-map-wrap::after { display:none !important; }
.leaflet-tile-pane, .real-map .leaflet-tile-pane { filter:none !important; opacity:1 !important; }
.real-map .leaflet-tile { image-rendering:auto !important; }
.leaflet-control-attribution, .real-map .leaflet-control-attribution {
  margin:0 10px 10px 0 !important;
  padding:6px 10px !important;
  font-size:10px !important;
  color:#28463b !important;
  background:rgba(255,255,255,.82) !important;
  border-radius:12px !important;
}
.leaflet-control-attribution a, .real-map .leaflet-control-attribution a { color:#28463b !important; }

/* Distinct action buttons */
.map-live-actions { gap:10px !important; }
#locateBtn {
  background:linear-gradient(135deg, rgba(112,227,147,.95), rgba(93,214,160,.92)) !important;
  color:#062318 !important; border-color:rgba(198,255,218,.58) !important;
  box-shadow:0 14px 30px rgba(16,185,129,.22) !important;
}
#placeSearchBtn {
  background:linear-gradient(135deg, rgba(62,126,167,.34), rgba(28,90,128,.28)) !important;
  color:#EAF6FF !important; border-color:rgba(132,204,255,.28) !important;
}
#livePriceRefreshBtn {
  background:linear-gradient(135deg, rgba(245,158,11,.28), rgba(180,116,25,.22)) !important;
  color:#FFE8B1 !important; border-color:rgba(245,158,11,.36) !important;
}
#commuteBtn {
  background:linear-gradient(135deg, rgba(41,160,170,.30), rgba(23,112,118,.24)) !important;
  color:#D8FFFC !important; border-color:rgba(78,205,196,.32) !important;
}
.map-live-btn:hover { transform:translateY(-2px) !important; box-shadow:0 10px 24px rgba(0,0,0,.18) !important; }
.map-live-btn span:last-child, .search-control-chip strong, .search-control-chip small { color:inherit !important; }

/* Recommendation / primary buttons */
#navigateBtn, .featured-route, .primary-btn, .map-best-go {
  background:linear-gradient(135deg, #8AE58C, #73E59E) !important;
  color:#062016 !important; border-color:rgba(210,255,212,.6) !important;
  box-shadow:0 16px 30px rgba(16,185,129,.24) !important;
}
#navigateBtn span:last-child, .primary-btn span:last-child { color:inherit !important; }
.secondary-btn, .station-route-main.secondary-route {
  background:rgba(17,48,52,.72) !important; color:#FFFFFF !important; border:1px solid rgba(140,233,192,.18) !important;
}

/* Cleaner map summary panel */
.map-best-sheet { margin-top:14px !important; }

/* Community buttons must be clearly different */
.wait-none { background:linear-gradient(135deg, rgba(64,163,97,.22), rgba(19,66,40,.22)) !important; border-color:rgba(87,220,118,.32) !important; }
.wait-short { background:linear-gradient(135deg, rgba(122,182,73,.22), rgba(63,95,30,.22)) !important; border-color:rgba(197,255,109,.34) !important; }
.wait-mid { background:linear-gradient(135deg, rgba(188,144,58,.24), rgba(99,72,21,.24)) !important; border-color:rgba(255,210,110,.34) !important; }
.wait-long { background:linear-gradient(135deg, rgba(173,84,69,.24), rgba(86,39,29,.24)) !important; border-color:rgba(255,152,121,.38) !important; }
.price-ok { background:linear-gradient(135deg, rgba(47,152,95,.22), rgba(21,70,44,.22)) !important; border-color:rgba(98,235,141,.34) !important; }
.price-wrong { background:linear-gradient(135deg, rgba(62,126,167,.22), rgba(28,62,100,.22)) !important; border-color:rgba(125,190,255,.34) !important; }
.report-btn.warning { background:linear-gradient(135deg, rgba(185,126,45,.24), rgba(96,61,20,.24)) !important; border-color:rgba(245,158,11,.45) !important; color:#FFD285 !important; }
.report-btn.danger { background:linear-gradient(135deg, rgba(165,64,64,.24), rgba(85,24,24,.24)) !important; border-color:rgba(255,128,128,.42) !important; color:#FFD1D1 !important; }
.report-btn strong, .report-btn span { color:inherit !important; }

/* Live auto-detect card more readable */
.community-auto-detect {
  background:linear-gradient(135deg, rgba(18,54,61,.84), rgba(7,31,35,.88)) !important;
  border-color:rgba(160,255,213,.22) !important;
}
.community-retry-btn, #missingStationBtn {
  background:rgba(17,48,52,.72) !important; color:#FFFFFF !important; border:1px solid rgba(140,233,192,.20) !important;
}

/* Bottom navigation refined to the same quality level */
.bottom-nav.nav-bar {
  bottom:max(10px, env(safe-area-inset-bottom)) !important;
  width:min(calc(100vw - 24px), 500px) !important;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  border-radius:24px !important;
  border:1px solid rgba(174,255,214,.18) !important;
  background:linear-gradient(145deg, rgba(10,31,24,.92), rgba(8,24,19,.94)) !important;
  box-shadow:0 22px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.bottom-nav .nav-item {
  min-width:72px !important; min-height:58px !important; gap:4px !important;
  color:#D3DEE2 !important; font-weight:800 !important; letter-spacing:-.02em;
}
.bottom-nav .nav-item .nav-icon { font-size:18px !important; color:inherit !important; }
.bottom-nav .nav-item span:last-child { font-size:13px !important; font-weight:800 !important; color:inherit !important; }
.bottom-nav .nav-item.active {
  color:#F4FFF8 !important;
  background:radial-gradient(circle at 50% 0%, rgba(112,227,147,.24), rgba(17,79,50,.42)) !important;
  box-shadow:0 0 26px rgba(16,185,129,.14), inset 0 0 0 1px rgba(146,255,192,.14) !important;
}

/* Search chips more legible */
.search-control-chip {
  background:rgba(14,42,34,.76) !important;
  border-color:rgba(170,255,214,.18) !important;
}
.search-control-chip .search-control-copy small { color:#BFD1D8 !important; }
.search-control-chip .search-control-copy strong { color:#FFFFFF !important; }

/* Keep map/status / details readable */
.station-price-details, .why-card, .route-stack-panel, .savings-total > div, .savings-moment, .community-auto-detect, .map-best-sheet {
  backdrop-filter:blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(135%) !important;
}

/* Slightly denser spacing to keep premium rhythm */
.section-live, .section-map, .section-stations, .section-savings { padding-bottom:20px !important; }


/* ===== 0.10.58 award-level visual pass: contrast, price focus, hierarchy ===== */
/* Restore the map to its earlier upper position without changing any function. */
main { display:flex !important; flex-direction:column !important; gap:14px !important; }
#heroCard { order:1 !important; }
#mapSection { order:2 !important; }
.search-control-dock { order:3 !important; }
#stationsSection { order:4 !important; }
#routesSection { order:5 !important; }
#liveSection { order:6 !important; }
#savingsSection { order:7 !important; }
#trendSection { display:none !important; }

/* SETTINGS: no white-on-white or dark-on-dark surfaces. */
#settingsDialog,
#settingsDialog form {
  color:#F8FFFB !important;
}
#settingsDialog .field-label,
#settingsDialog label,
#settingsDialog h2,
#settingsDialog h3,
#settingsDialog strong {
  color:#F8FFFB !important;
}
#settingsDialog .field-help,
#settingsDialog small,
#settingsDialog .section-copy,
#settingsDialog .settings-topic-summary,
#settingsDialog .settings-topic-copy small,
#settingsDialog .fill-plan-btn span,
#settingsDialog .settings-promise span {
  color:#C8D8DE !important;
}
#settingsDialog .settings-topic-card,
#settingsDialog .settings-promise,
#settingsDialog .privacy-note,
#settingsDialog .reported-price-context,
#settingsDialog .selected-fuel-note {
  background:linear-gradient(145deg, rgba(13,45,35,.94), rgba(7,30,25,.96)) !important;
  border:1px solid rgba(111,231,162,.22) !important;
  color:#E9F7F0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.16) !important;
}
#settingsDialog .settings-promise strong { color:#FFFFFF !important; }
#settingsDialog .commute-setup-btn {
  background:linear-gradient(135deg, rgba(24,73,56,.94), rgba(14,52,43,.96)) !important;
  color:#FFFFFF !important;
  border-color:rgba(104,229,158,.32) !important;
}
#settingsDialog .commute-setup-btn * { color:inherit !important; }
#settingsDialog .fill-plan-btn,
#settingsDialog .vehicle-profile-btn,
#settingsDialog .theme-btn,
#settingsDialog .profile-fuel-btn,
#settingsDialog .input,
#settingsDialog select.input,
#settingsDialog input.input {
  background:rgba(10,43,33,.88) !important;
  color:#F8FFFB !important;
  border-color:rgba(125,228,170,.25) !important;
}
#settingsDialog .fill-plan-btn.selected,
#settingsDialog .vehicle-profile-btn.selected,
#settingsDialog .theme-btn.selected {
  background:linear-gradient(135deg,#9AF1B6,#87E8C4) !important;
  color:#092418 !important;
  border-color:rgba(216,255,228,.70) !important;
}
#settingsDialog .fill-plan-btn.selected strong,
#settingsDialog .fill-plan-btn.selected span,
#settingsDialog .vehicle-profile-btn.selected *,
#settingsDialog .theme-btn.selected * { color:#092418 !important; }
#settingsDialog select.input { color-scheme:dark !important; }
#settingsDialog select.input option { background:#F7FAF8 !important; color:#10251B !important; }
#settingsDialog input[type="range"] { accent-color:#6FDC8F !important; }

/* GLOBAL CONTRAST: muted means readable, not faint. */
body .field-label,
body .chapter-subtitle,
body .section-copy,
body .sub,
body .station-meta,
body .station-key-grid span,
body .station-now-line span,
body .station-services span,
body .community-detect-copy span,
body .wait-report-heading small,
body .savings-since,
body .savings-toolbar,
body .saving-row span,
body .savings-month-card span,
body .map-status-line,
body .trust-line,
body .why-card,
body .why-item span,
body .hero-stat-card small,
body .hero-now-fact small,
body .search-control-copy small {
  color:#D2E0E4 !important;
  opacity:1 !important;
}
body .eyebrow,
body .decision-block-label,
body .map-best-kicker,
body .hero-kicker { color:#9DE9BC !important; opacity:1 !important; }
body .section h2,
body .section h3,
body .station-card h3,
body .chapter-heading h2,
body .community-detect-copy strong,
body .wait-report-heading strong,
body .live-report-heading strong { color:#FFFFFF !important; }

/* PRICE FOCUS: actual fuel price uses a dedicated warm-gold signal color. */
.big-price,
.big-price .price-main,
.big-price .price-decimals,
.station-card-price,
.station-card-price *,
.station-price-wrap .station-card-price,
.station-key-grid > div:nth-child(2) strong,
.tl-map-popup .price,
.drive-price {
  color:#FFD166 !important;
  text-shadow:0 0 16px rgba(255,209,102,.24) !important;
  font-weight:900 !important;
}
.station-card-price { font-size:clamp(29px,7vw,38px) !important; line-height:1 !important; }
.station-price-wrap {
  padding:10px 12px !important;
  border-radius:17px !important;
  background:linear-gradient(135deg, rgba(245,158,11,.13), rgba(255,209,102,.06)) !important;
  border:1px solid rgba(255,209,102,.22) !important;
}
.station-fuel-chip { color:#FFF4CE !important; }

/* Net advantage remains the primary decision signal. */
#netSaving.net-positive,
.station-net-hero.net-positive > strong,
.map-popup-net.net-good { color:#72F29B !important; }
#netSaving.net-negative,
.station-net-hero.net-negative > strong,
.map-popup-net.net-bad { color:#FFB84A !important; text-shadow:0 0 16px rgba(245,158,11,.20) !important; }
#netSaving.net-neutral,
.station-net-hero.net-neutral > strong { color:#F7D06A !important; }

/* Wait-status wording should read like status, not a call-to-action. */
.station-now-chip,
.hero-now-fact {
  color:#F2F8F5 !important;
  background:rgba(14,48,38,.72) !important;
  border-color:rgba(120,226,164,.18) !important;
}
.station-now-chip.muted { color:#DCE7E3 !important; }

/* LIVE: strong, immediate color coding while keeping labels/icons. */
.quick-report-grid > button { opacity:1 !important; color:#FFFFFF !important; }
.quick-report-grid > button:disabled { opacity:.72 !important; filter:saturate(.82) !important; }
.wait-none {
  background:linear-gradient(135deg, rgba(25,151,78,.58), rgba(13,92,54,.50)) !important;
  border-color:rgba(90,235,135,.55) !important;
}
.wait-short {
  background:linear-gradient(135deg, rgba(93,158,46,.56), rgba(59,109,33,.50)) !important;
  border-color:rgba(185,239,92,.52) !important;
}
.wait-mid {
  background:linear-gradient(135deg, rgba(193,137,36,.62), rgba(127,81,18,.50)) !important;
  border-color:rgba(255,202,82,.60) !important;
}
.wait-long {
  background:linear-gradient(135deg, rgba(204,91,56,.62), rgba(130,47,31,.54)) !important;
  border-color:rgba(255,143,104,.64) !important;
}
.price-ok {
  background:linear-gradient(135deg, rgba(22,154,91,.62), rgba(12,91,58,.54)) !important;
  border-color:rgba(75,239,146,.58) !important;
}
.price-wrong {
  background:linear-gradient(135deg, rgba(42,121,183,.62), rgba(23,75,131,.54)) !important;
  border-color:rgba(102,183,255,.60) !important;
}
.report-btn.warning {
  background:linear-gradient(135deg, rgba(223,148,28,.68), rgba(142,84,14,.56)) !important;
  border-color:rgba(255,193,67,.66) !important;
  color:#FFF1C9 !important;
}
.report-btn.danger {
  background:linear-gradient(135deg, rgba(193,60,69,.70), rgba(113,30,42,.58)) !important;
  border-color:rgba(255,116,126,.66) !important;
  color:#FFE4E7 !important;
}
.quick-report-grid > button strong,
.quick-report-grid > button span { color:inherit !important; text-shadow:0 1px 2px rgba(0,0,0,.22) !important; }

/* LIVE section now matches the premium visual system. */
#liveSection {
  min-height:0 !important;
  background:
    radial-gradient(340px 240px at 18% 10%, rgba(91,222,167,.14), transparent 70%),
    linear-gradient(155deg, rgba(12,51,44,.87), rgba(6,29,28,.91)) !important;
  border:1px solid rgba(134,236,190,.25) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#liveSection .community-auto-detect {
  background:linear-gradient(135deg, rgba(8,37,33,.92), rgba(7,28,30,.94)) !important;
  border-color:rgba(117,222,169,.26) !important;
}
#liveSection .community-retry-btn {
  background:rgba(31,92,69,.72) !important;
  color:#E9FFF1 !important;
  border-color:rgba(115,232,168,.30) !important;
}
#missingStationBtn {
  background:linear-gradient(135deg, rgba(43,116,89,.82), rgba(25,76,62,.86)) !important;
  color:#FFFFFF !important;
  border-color:rgba(119,231,171,.30) !important;
}

/* SAVINGS: replace the old experimental circles with polished compact cards. */
#savingsSection {
  min-height:0 !important;
  background:
    radial-gradient(420px 260px at 80% 12%, rgba(91,230,145,.12), transparent 70%),
    linear-gradient(155deg, rgba(9,42,35,.90), rgba(5,28,25,.94)) !important;
  border:1px solid rgba(112,229,165,.24) !important;
  padding-bottom:24px !important;
}
#savingsSection .savings-moment {
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:14px 16px !important;
  background:linear-gradient(135deg, rgba(27,91,56,.58), rgba(15,58,43,.62)) !important;
  border:1px solid rgba(105,226,154,.26) !important;
}
#savingsSection .savings-moment strong { color:#F7FFF9 !important; }
#savingsSection .savings-moment small { color:#D1E3D8 !important; }
#savingsSection .savings-moment-icon {
  width:44px !important; height:44px !important; border-radius:15px !important;
  background:rgba(84,225,139,.16) !important; color:#82F0A8 !important;
}
#savingsSection .savings-total {
  position:static !important;
  display:grid !important;
  grid-template-columns:1.2fr .8fr !important;
  gap:12px !important;
  min-height:0 !important;
  place-items:stretch !important;
  margin:14px 0 !important;
}
#savingsSection .savings-total::before,
#savingsSection .savings-total::after { display:none !important; }
#savingsSection .savings-total > div,
#savingsSection .savings-total > div:nth-child(2) {
  position:static !important;
  width:auto !important; height:auto !important;
  min-height:118px !important;
  transform:none !important; inset:auto !important;
  padding:18px !important;
  border-radius:20px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
  background:linear-gradient(145deg, rgba(15,62,44,.78), rgba(8,39,32,.84)) !important;
  border:1px solid rgba(101,221,154,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(0,0,0,.16) !important;
}
#savingsSection .savings-total > div:nth-child(2) {
  background:linear-gradient(145deg, rgba(18,57,55,.78), rgba(8,39,38,.84)) !important;
}
#savingsSection .savings-total span { color:#CDE0D6 !important; font-size:13px !important; }
#savingsTotal { color:#75E69B !important; font-size:clamp(38px,8vw,48px) !important; font-weight:900 !important; margin-top:6px !important; }
#savingsMonth { color:#91E8C2 !important; font-size:clamp(28px,6vw,34px) !important; font-weight:850 !important; margin-top:6px !important; }
#savingsSection .savings-toolbar {
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important;
  padding:4px 2px 12px !important; color:#D6E3DE !important;
}
#savingsSection .savings-toolbar .text-btn {
  color:#FFD09A !important; background:rgba(245,158,11,.10) !important;
  border:1px solid rgba(245,158,11,.18) !important; border-radius:12px !important; padding:8px 10px !important;
}
#savingsSection .savings-month-card,
#savingsSection .saving-row {
  background:rgba(7,33,27,.76) !important;
  border:1px solid rgba(104,218,153,.16) !important;
  color:#F4FBF7 !important;
}
#savingsSection .savings-month-sum,
#savingsSection .saving-row strong { color:#78E7A0 !important; font-weight:850 !important; }
#savingsSection .savings-month-card span,
#savingsSection .saving-row span { color:#C7D8D2 !important; }

/* MAP status and popup contrast. */
#mapSection .map-status-line strong { color:#E7F2EE !important; }
.tl-map-popup { color:#FFFFFF !important; }
.tl-map-popup small { color:#D2DEDA !important; }
.tl-map-popup .price { color:#FFD166 !important; font-size:18px !important; font-weight:900 !important; }

@media (max-width:430px) {
  #savingsSection .savings-total { grid-template-columns:1fr !important; }
  #savingsSection .savings-toolbar { align-items:flex-start !important; flex-direction:column !important; }
}


/* ======================================================
   TANKLINA 0.10.59 — TYPOGRAFIE & KLARHEIT-FINETUNING
   Nur Darstellung / keine Logikänderung
   ====================================================== */

body, button, input, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.brand,
#decisionTitle,
.section h2,
.section h3,
.chapter-heading h2,
.recommendation-title strong,
.station-card h3,
.home-savings-line strong,
.home-card-kicker,
.big-price,
.station-card-price,
#bestPrice,
#netSaving,
.savings-total strong,
.station-route-main strong,
.primary-btn strong,
.map-live-btn span:last-child,
.bottom-nav .nav-item strong,
.hero-card .primary-btn,
.station-route-main {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.028em !important;
}

#decisionTitle {
  font-weight: 800 !important;
  line-height: .98 !important;
}

.hero-copy, .chapter-subtitle, .section-copy, .tagline, .map-status-line, .field-help, .sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* remove older pseudo-label hack so the real labels show */
#locateBtn span:last-child,
#placeSearchBtn span:last-child { font-size: 14px !important; }
#locateBtn span:last-child::before,
#placeSearchBtn span:last-child::before { content: none !important; }

.map-live-actions.map-live-actions-four { gap: 10px !important; }
.map-live-btn {
  position: relative !important;
  overflow: hidden !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
  align-items: center !important;
}
.map-live-btn span:last-child {
  font-size: 13px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  display: block !important;
  white-space: normal !important;
}
.map-live-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 16px !important;
  pointer-events: none !important;
  background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 26%, transparent 72%, rgba(255,255,255,.05));
  opacity: .9 !important;
}
#locateBtn {
  color: #08180F !important;
  background: linear-gradient(135deg, #9AF0B6 0%, #7FE7C2 100%) !important;
  border-color: rgba(221,255,228,.72) !important;
  box-shadow: 0 10px 28px rgba(102,243,171,.16) !important;
}
#placeSearchBtn {
  color: #EAF8FF !important;
  background: linear-gradient(135deg, rgba(68,124,168,.42), rgba(48,94,142,.32)) !important;
  border-color: rgba(127,191,255,.34) !important;
}
#livePriceRefreshBtn {
  color: #FFF2CC !important;
  background: linear-gradient(135deg, rgba(164,127,34,.42), rgba(103,76,15,.34)) !important;
  border-color: rgba(255,207,95,.36) !important;
}
#commuteBtn {
  color: #E8FFFB !important;
  background: linear-gradient(135deg, rgba(40,122,117,.42), rgba(20,76,82,.34)) !important;
  border-color: rgba(132,227,215,.28) !important;
}
#locateBtn span:last-child, #locateBtn span:first-child { color:#07170F !important; }
#placeSearchBtn span:last-child, #placeSearchBtn span:first-child,
#livePriceRefreshBtn span:last-child, #livePriceRefreshBtn span:first-child,
#commuteBtn span:last-child, #commuteBtn span:first-child { color: inherit !important; }

/* premium button sheen on key actions */
#navigateBtn, .featured-route, .primary-btn, .station-route-main, #livePriceRefreshBtn, #locateBtn, #placeSearchBtn, #commuteBtn {
  position: relative !important; overflow: hidden !important;
}
#navigateBtn::after, .featured-route::after, .primary-btn::after, .station-route-main::after,
#livePriceRefreshBtn::after, #locateBtn::after, #placeSearchBtn::after, #commuteBtn::after {
  content: '' !important;
  position: absolute !important; top: -22% !important; left: -36% !important; width: 34% !important; height: 160% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent) !important;
  transform: rotate(18deg) !important; animation: tl-btn-gleam 5.8s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes tl-btn-gleam {
  0%, 72%, 100% { transform: translateX(0) rotate(18deg); opacity: 0; }
  8% { opacity: .75; }
  22% { transform: translateX(360%) rotate(18deg); opacity: .18; }
}

/* keep fuel prices instantly recognizable */
.big-price,
.big-price .price-main,
.big-price .price-decimals,
.station-card-price,
.station-card-price *,
.station-price-wrap .station-card-price {
  color: #FFD166 !important;
  text-shadow: 0 0 18px rgba(255,209,102,.22) !important;
}

/* clearer button typography in recommendation / list */
#navigateBtn, .station-route-main, .primary-btn {
  font-size: 17px !important;
  font-weight: 800 !important;
}
#navigateBtn small, .station-route-main small {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

@media (max-width: 560px) {
  .map-live-actions.map-live-actions-four { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .map-live-btn { min-height: 62px !important; }
  .map-live-btn span:last-child { font-size: 12px !important; }
}


/* ======================================================
   TANKLINA 0.10.60 — FINAL TYPE & BUTTON CLARITY
   Nur Gestaltung / keine Technikänderung
   ====================================================== */

:root {
  --tl-font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tl-font-display: 'Sora', 'Inter', system-ui, sans-serif;
}
body, input, select, textarea, button {
  font-family: var(--tl-font-ui) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.brand,
h1, h2, h3, h4,
#decisionTitle,
.section h2,
.chapter-heading h2,
.today-recommendation-shell #decisionTitle,
.recommendation-title strong,
.home-savings-line strong,
.home-card-kicker,
.big-price, .big-price *,
.station-card-price, .station-card-price *,
.map-live-btn span:last-child,
.report-btn strong,
.report-btn span,
.primary-btn,
.station-route-main,
.bottom-nav .nav-item span,
.bottom-nav .nav-item strong {
  font-family: var(--tl-font-display) !important;
  letter-spacing: -0.03em !important;
}
.hero-copy, .tagline, .map-status-line, .field-help, .sub, .section p, small, .report-btn span {
  font-family: var(--tl-font-ui) !important;
  letter-spacing: -0.01em !important;
}
#decisionTitle { font-weight: 800 !important; }
.section h2, .chapter-heading h2 { font-weight: 800 !important; }

/* Ensure visible real labels on map action buttons */
#locateBtn span:last-child,
#placeSearchBtn span:last-child,
#livePriceRefreshBtn span:last-child,
#commuteBtn span:last-child {
  font-size: 13px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  text-wrap: balance !important;
}
#locateBtn span:last-child::before,
#placeSearchBtn span:last-child::before,
#livePriceRefreshBtn span:last-child::before,
#commuteBtn span:last-child::before {
  content: none !important;
  display: none !important;
}
.map-live-actions.map-live-actions-four { gap: 10px !important; }
.map-live-btn {
  min-height: 60px !important;
  padding: 11px 12px !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#locateBtn {
  background: linear-gradient(135deg, rgba(144,245,176,.98), rgba(123,228,194,.94)) !important;
  border-color: rgba(230,255,236,.72) !important;
  color: #082015 !important;
  box-shadow: 0 14px 28px rgba(76,243,156,.18), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
#placeSearchBtn {
  background: linear-gradient(135deg, rgba(71,121,186,.52), rgba(53,92,150,.42)) !important;
  border-color: rgba(140,200,255,.38) !important;
  color: #F2FAFF !important;
}
#livePriceRefreshBtn {
  background: linear-gradient(135deg, rgba(188,144,39,.56), rgba(123,90,18,.44)) !important;
  border-color: rgba(255,214,111,.46) !important;
  color: #FFF6D8 !important;
}
#commuteBtn {
  background: linear-gradient(135deg, rgba(45,136,132,.56), rgba(30,93,99,.44)) !important;
  border-color: rgba(143,236,223,.32) !important;
  color: #F1FFFD !important;
}
#locateBtn span:first-child, #locateBtn span:last-child { color:#081C14 !important; }
#placeSearchBtn span:first-child, #placeSearchBtn span:last-child,
#livePriceRefreshBtn span:first-child, #livePriceRefreshBtn span:last-child,
#commuteBtn span:first-child, #commuteBtn span:last-child { color:inherit !important; }

/* Elegant sheen on important buttons */
#navigateBtn::after, .featured-route::after, .primary-btn::after, .station-route-main::after,
#locateBtn::after, #placeSearchBtn::after, #livePriceRefreshBtn::after, #commuteBtn::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.40), transparent) !important;
}

/* Stronger semantic colors in community area */
.report-btn {
  border-radius: 22px !important;
  border-width: 1px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.16) !important;
}
.report-btn strong { font-size: 18px !important; font-weight: 800 !important; }
.report-btn span { font-size: 14px !important; font-weight: 700 !important; }
.wait-none {
  background: linear-gradient(135deg, rgba(44,168,95,.28), rgba(18,77,46,.28)) !important;
  border-color: rgba(94,240,144,.42) !important;
  color: #DCFFE9 !important;
}
.wait-short {
  background: linear-gradient(135deg, rgba(95,185,84,.28), rgba(37,93,39,.28)) !important;
  border-color: rgba(172,255,131,.40) !important;
  color: #ECFFDF !important;
}
.wait-mid {
  background: linear-gradient(135deg, rgba(178,156,65,.30), rgba(95,75,22,.28)) !important;
  border-color: rgba(255,216,110,.42) !important;
  color: #FFF4D0 !important;
}
.wait-long {
  background: linear-gradient(135deg, rgba(186,112,52,.30), rgba(98,49,24,.30)) !important;
  border-color: rgba(255,167,107,.42) !important;
  color: #FFE1D1 !important;
}
.price-ok {
  background: linear-gradient(135deg, rgba(33,150,84,.28), rgba(16,73,41,.28)) !important;
  border-color: rgba(101,239,147,.40) !important;
  color: #DEFFE9 !important;
}
.price-wrong {
  background: linear-gradient(135deg, rgba(60,103,145,.28), rgba(32,53,82,.28)) !important;
  border-color: rgba(142,189,255,.34) !important;
  color: #EAF3FF !important;
}
.report-btn.warning {
  background: linear-gradient(135deg, rgba(195,144,45,.34), rgba(106,72,18,.30)) !important;
  border-color: rgba(255,194,77,.46) !important;
  color: #FFF0C7 !important;
}
.report-btn.danger {
  background: linear-gradient(135deg, rgba(177,74,74,.34), rgba(92,30,30,.30)) !important;
  border-color: rgba(255,145,145,.46) !important;
  color: #FFE2E2 !important;
}
.report-btn:is(.wait-none,.wait-short,.wait-mid,.wait-long,.price-ok,.price-wrong,.warning,.danger):hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.08) brightness(1.04) !important;
}

/* prices remain highly visible */
.big-price, .big-price *, .station-card-price, .station-card-price * {
  color: #FFD56A !important;
  text-shadow: 0 0 20px rgba(255,213,106,.24) !important;
}

@media (max-width: 560px) {
  .map-live-btn span:last-child { font-size: 12px !important; }
}


/* ======================================================
   TANKLINA 0.10.61 — TYPO & DETAIL LEGIBILITY REPAIR
   Nur visuelle Korrekturen / keine Technikänderung
   ====================================================== */

:root {
  --tl-font-ui-final: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tl-font-display-final: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
body, button, input, select, textarea {
  font-family: var(--tl-font-ui-final) !important;
}
.brand,
h1, h2, h3, h4,
#decisionTitle,
.section h2, .section h3, .chapter-heading h2,
.station-card h3, .station-card strong,
.map-live-btn span:last-child,
.primary-btn, .station-route-main, .report-btn strong,
.big-price, .big-price *, .station-card-price, .station-card-price *,
.bottom-nav .nav-item span, .bottom-nav .nav-item strong,
.home-card-kicker, .home-savings-line strong, .section-heading .eyebrow {
  font-family: var(--tl-font-display-final) !important;
  letter-spacing: -0.024em !important;
}
.hero-copy, .section-copy, .chapter-subtitle, .tagline, .field-help, small, .report-btn span, .station-data-line, .service-info-row > span {
  font-family: var(--tl-font-ui-final) !important;
}
#decisionTitle {
  font-size: clamp(48px, 7vw, 66px) !important;
  line-height: .97 !important;
  font-weight: 800 !important;
}

/* remove explanatory savings card the user no longer wants */
.station-calc-card {
  display: none !important;
}

/* stronger, elegant contrast for station detail accordions */
.station-price-details > summary,
.station-service-details > summary {
  color: #EAF6F1 !important;
  font-family: var(--tl-font-display-final) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}
.station-price-details, .station-service-details {
  border-top-color: rgba(206,241,230,.14) !important;
}
.station-service-panel,
.station-price-details-body,
.station-service-details[open] .station-service-panel {
  background: linear-gradient(180deg, rgba(8,28,23,.88), rgba(10,33,27,.94)) !important;
  border: 1px solid rgba(148, 230, 193, .16) !important;
  color: #F4FBF8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.18) !important;
}
.service-info-row {
  border-bottom-color: rgba(206,241,230,.10) !important;
}
.service-info-row strong,
.station-service-panel strong,
.station-price-details-body strong {
  color: #F8FFFB !important;
  font-family: var(--tl-font-display-final) !important;
  font-weight: 700 !important;
}
.service-info-row > span,
.station-service-panel span,
.station-price-details-body span,
.service-source-note,
.inline-badge,
.service-unknown {
  color: #D9EAE4 !important;
}
.service-detail-item {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: #EDF8F3 !important;
}
.inline-badge {
  background: rgba(73,159,255,.14) !important;
  border-color: rgba(115,186,255,.22) !important;
}
.inline-badge.subtle {
  background: rgba(118,175,151,.12) !important;
  border-color: rgba(118,175,151,.18) !important;
}
.service-yes { color: #9DF0B9 !important; }
.service-no { color: #FFB5B0 !important; }
.service-unknown { color: #D7E7E1 !important; }
.service-source-note {
  margin-top: 12px !important;
  font-size: .76rem !important;
  line-height: 1.5 !important;
}

/* keep key savings / price areas crisp */
.price-main, .price-decimals, .station-card-price {
  color: #FFD56A !important;
  text-shadow: 0 0 16px rgba(255,213,106,.20) !important;
}

/* preserve clarity on small screens */
@media (max-width: 640px) {
  .station-price-details > summary, .station-service-details > summary {
    font-size: .84rem !important;
  }
  .service-info-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}


/* ======================================================
   TANKLINA 0.10.62 — GLOBAL CONTRAST AUDIT FIX
   Nur visuelle Korrekturen / keine Technikänderung
   ====================================================== */

/* Price details and all nested helper chips: always dark enough behind light text */
.station-price-details-body {
  background: linear-gradient(180deg, rgba(6,24,20,.82), rgba(6,24,20,.92)) !important;
  border: 1px solid rgba(141,225,191,.15) !important;
  border-radius: 0 0 18px 18px !important;
  padding: 12px 14px 14px !important;
  color: #F4FBF8 !important;
}
.station-price-details-body *,
.station-price-details-body strong,
.station-price-details-body span,
.station-price-details-body small {
  color: inherit;
}
.station-price-details .station-data-line {
  color: #E7F4EF !important;
  border-top-color: rgba(223,245,236,.11) !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
}
.station-price-details .station-data-line > span {
  color: #E7F4EF !important;
}
.station-price-details .reliability-pill {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #F7FFFB !important;
  font-weight: 800 !important;
}
.station-price-details .reliability-pill.warn {
  background: rgba(245,158,11,.18) !important;
  border-color: rgba(245,158,11,.24) !important;
  color: #FFD98D !important;
}
.station-price-details .reliability-pill.bad {
  background: rgba(214,83,83,.18) !important;
  border-color: rgba(214,83,83,.24) !important;
  color: #FFC0BC !important;
}
.price-change-row {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.price-change-row strong {
  color: #FFFFFF !important;
  font-family: var(--tl-font-display-final, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important;
}
.price-change-row span:not(.price-change-icon) {
  color: #D7E8E1 !important;
}
.price-change-icon {
  background: rgba(255,255,255,.10) !important;
  color: #F5FBF8 !important;
}
.price-change-row.down .price-change-icon,
.price-change-row.down strong { color: #9EF0BB !important; }
.price-change-row.up .price-change-icon,
.price-change-row.up strong { color: #FFBCB4 !important; }
.station-history-panel {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: #F1FAF7 !important;
}
.station-history-panel *, .history-copy strong { color: #F1FAF7 !important; }
.station-history-panel .history-kicker, .station-history-panel small { color: #D3E5DE !important; }
.station-live {
  color: #DDECE7 !important;
  font-size: .8rem !important;
}
.station-live span { color: inherit !important; }
.live-positive { color: #A0F2BC !important; }
.live-bad { color: #FFB8B2 !important; }

/* Service section headings and rows — eliminate white-on-light / pale-on-pale */
.station-service-details > summary span:first-child,
.station-price-details > summary span:first-child {
  color: #F4FBF8 !important;
}
.station-service-panel .inline-badge,
.station-service-panel .inline-badge.subtle,
.station-service-panel .service-detail-item,
.station-service-panel .service-info-row > span,
.station-service-panel .service-info-row strong {
  color: #F2FBF8 !important;
}

/* Broad safeguard for accidental low-contrast helper content */
.station-card details[open] .muted,
.station-card details[open] .subtle,
.station-card details[open] .meta,
.station-card details[open] .field-help,
.station-card details[open] small {
  color: #D8E9E3 !important;
}
.station-card details[open] strong,
.station-card details[open] b {
  color: #FFFFFF !important;
}

/* Navigation button helper line must remain readable too */
.station-route-main small {
  color: rgba(255,255,255,.82) !important;
}
body.theme-dark .station-route-main.featured-route small {
  color: rgba(9,25,19,.62) !important;
}


/* ======================================================
   TANKLINA 0.10.63 — AWARD CONSISTENCY & TEXT REDUCTION
   Nur Gestaltung und sichtbare Sprache. Keine App-Logik.
   ====================================================== */

/* 1. Klare Start-Hierarchie: Eintragen -> Empfehlung -> Ersparnis */
#heroCard {
  display:flex !important;
  flex-direction:column !important;
}
#heroCard > .today-recommendation-shell { order:1 !important; }
#heroCard > .home-savings-card { order:2 !important; margin-top:14px !important; }
#heroCard > .home-legacy-hidden { order:3 !important; }
#heroCard > .tank-stop-quick-card { order:0 !important; }
#heroCard > .hero-atmosphere { order:-2 !important; }

/* Der feste Eintragen-CTA muss der unmissverständliche erste Klick sein. */
.sticky-tank-ribbon {
  min-height:64px !important;
  padding:14px 18px !important;
  border-radius:20px !important;
  background:linear-gradient(100deg,#F59E0B 0%,#FBBF24 52%,#F5B52A 100%) !important;
  border:1px solid rgba(255,224,142,.72) !important;
  box-shadow:0 12px 34px rgba(245,158,11,.24), inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.sticky-tank-ribbon-text {
  font-family:var(--tl-font-display-final,'Plus Jakarta Sans','Inter',system-ui,sans-serif) !important;
  font-size:16px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  color:#172014 !important;
}
.sticky-tank-ribbon-icon { color:#172014 !important; }

/* 2. Empfehlung sichtbar zum Hauptblock machen. */
.today-recommendation-shell {
  border-color:rgba(91,239,151,.46) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.26), 0 0 34px rgba(16,185,129,.14), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.recommendation-title strong { color:#F5FFF9 !important; }

/* 3. Redundante Informationen entfernen, ohne Funktion zu verändern. */
.station-route-main small { display:none !important; }
.station-route-main {
  grid-template-columns:auto 1fr !important;
  justify-items:start !important;
  gap:10px !important;
}
.station-route-main strong { justify-self:start !important; }
/* Preis ist bereits groß oben in jeder Tankstellenkarte sichtbar. */
.station-key-grid > div:nth-child(2) { display:none !important; }
.station-key-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
/* Preisstatus ist doppelt: Freshness/Preisdetails zeigen ihn bereits. */
.compact-security { display:none !important; }
.compact-benefit-strip { grid-template-columns:1fr !important; }
/* €/l steht bereits direkt am Preis. */
#fuelLabelMirror { display:none !important; }

/* 4. Weniger Textgewicht: Antwort zuerst, Erklärung sekundär. */
#decisionText {
  max-width:30ch !important;
  color:#C9D9D5 !important;
  font-size:14px !important;
  line-height:1.42 !important;
}
.trust-line {
  font-size:12px !important;
  color:#C8D9D3 !important;
}
.why-card > summary {
  font-size:13px !important;
  color:#D9E8E3 !important;
}

/* 5. Ein einheitliches Liquid-Glass-System statt unterschiedlicher Blur-Werte. */
.glass-card,
.section,
.search-control-dock,
.station-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.savings-total > div,
.savings-month-groups > *,
.savings-history > *,
.dialog,
.bottom-nav,
.map-live-btn,
.search-control-chip,
.station-price-details-body,
.station-service-panel {
  -webkit-backdrop-filter:blur(20px) saturate(135%) !important;
  backdrop-filter:blur(20px) saturate(135%) !important;
}

/* 6. Aktiver Tab muss ohne Nachdenken erkennbar sein. */
.bottom-nav .nav-item { position:relative !important; }
.bottom-nav .nav-item.active {
  color:#F2FFF7 !important;
  background:linear-gradient(180deg,rgba(16,185,129,.18),rgba(16,185,129,.08)) !important;
  box-shadow:inset 0 0 0 1px rgba(94,236,155,.20),0 0 24px rgba(16,185,129,.12) !important;
}
.bottom-nav .nav-item.active::after {
  content:'' !important;
  position:absolute !important;
  left:22% !important;
  right:22% !important;
  bottom:3px !important;
  height:3px !important;
  border-radius:999px !important;
  background:#6FF0A6 !important;
  box-shadow:0 0 12px rgba(111,240,166,.62) !important;
}

/* 7. Einheitliche Hierarchie / Kontrast. */
.section h2, .chapter-heading h2, #decisionTitle { color:#FFFFFF !important; }
.eyebrow, .home-card-kicker, .decision-block-label { color:#A9EBC2 !important; }
.section-copy, .chapter-subtitle, .sub, .field-help, .station-meta { color:#D0DEDA !important; }

/* 8. Sanfter Bereichswechsel statt Sprung. */
.section, .station-card, .home-savings-card, .today-recommendation-shell {
  transition:transform .35s cubic-bezier(.4,0,.2,1), border-color .35s ease, box-shadow .35s ease, background .35s ease !important;
}

@media (max-width:560px) {
  .sticky-tank-ribbon { min-height:60px !important; padding:13px 14px !important; }
  .sticky-tank-ribbon-text { font-size:15px !important; }
  .station-key-grid { grid-template-columns:1fr 1fr !important; }
}


/* ======================================================
   TANKLINA 0.10.64 — BUTTON / ACCORDION POLISH
   Nur grafische und textliche Verfeinerung
   ====================================================== */

/* Hinfahren-Button: eleganter Navigationsakzent statt schwarzem Pfeil */
.station-route-main {
  min-height: 58px !important;
  padding: 12px 18px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 18px !important;
}
.station-route-main > span {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #0E2B20 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 18px rgba(10,31,24,.12) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.station-route-main strong {
  color: #F8FFFB !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
.station-route-main.featured-route > span,
#navigateBtn > span {
  color: #0A241A !important;
}
.station-route-main.secondary-route > span {
  background: linear-gradient(180deg, rgba(16,185,129,.17), rgba(16,185,129,.08)) !important;
  border-color: rgba(16,185,129,.18) !important;
  color: #A8F6C7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.10) !important;
}
.station-route-main.secondary-route strong { color:#ECFBF4 !important; }

/* Accordion header: perfekte Innenabstände und gleicher Sitz rechts */
.station-price-details > summary,
.station-service-details > summary {
  min-height: 52px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 14px !important;
}
.station-price-details > summary span:first-child,
.station-service-details > summary span:first-child {
  flex: 1 1 auto !important;
  padding-right: 8px !important;
}
.station-price-details > summary span:last-child,
.station-service-details > summary span:last-child {
  flex: 0 0 18px !important;
  width: 18px !important;
  text-align: center !important;
  opacity: .92 !important;
  transform: translateY(-1px) !important;
}

/* Überflüssige Erklärungen visuell entschlacken */
.compact-help, .long-explainer, .secondary-explainer {
  max-width: 34ch !important;
}

/* aktive Navigation deutlicher */
.bottom-nav .active, .nav-bar .nav-item.active, .tabbar .tab.active {
  text-shadow: 0 0 18px rgba(92,245,160,.22) !important;
}


/* ======================================================
   TANKLINA 0.10.65 — AWARD CHECKLIST PASS
   Ausschließlich Darstellung, Lesbarkeit und sichtbare Sprache.
   Keine App-Logik, Berechnung, API oder Navigationstechnik.
   ====================================================== */

:root {
  --award-space-1: 8px;
  --award-space-2: 16px;
  --award-space-3: 20px;
  --award-space-4: 24px;
  --award-radius: 20px;
  --award-green: #10B981;
  --award-green-deep: #047857;
  --award-green-deeper: #065F46;
  --award-gold: #A85F00;
  --award-gold-deep: #9A5400;
  --award-white: #FFFFFF;
  --award-text: #DCE9E5;
  --award-muted: #CBD8D4;
  --award-glass: rgba(10,31,24,.80);
  --award-line: rgba(139,230,190,.18);
}

/* 1 — VISUELLE HIERARCHIE */
.sticky-tank-ribbon {
  min-height: 66px !important;
  padding: 15px 20px !important;
  border-radius: var(--award-radius) !important;
  background: linear-gradient(100deg, var(--award-gold-deep), var(--award-gold)) !important;
  border: 1px solid rgba(255,211,126,.42) !important;
  color: var(--award-white) !important;
  box-shadow: 0 15px 36px rgba(154,84,0,.26), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.sticky-tank-ribbon-text,
.sticky-tank-ribbon-icon {
  color: var(--award-white) !important;
}
.sticky-tank-ribbon-text {
  font-size: 16px !important;
  font-weight: 800 !important;
}
.sticky-tank-ribbon-icon {
  width: 34px !important;
  height: 34px !important;
  background: rgba(255,255,255,.14) !important;
}

.today-recommendation-shell {
  padding: var(--award-space-3) !important;
  border-radius: var(--award-radius) !important;
  background:
    radial-gradient(340px 220px at 82% 10%, rgba(16,185,129,.18), transparent 70%),
    linear-gradient(155deg, rgba(8,42,31,.90), rgba(7,28,24,.92)) !important;
  border: 1px solid rgba(80,235,150,.50) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.28), 0 0 34px rgba(16,185,129,.17), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#netSaving,
.station-net-hero > strong,
#mapBestSaving {
  font-size: clamp(40px, 10vw, 50px) !important;
  line-height: .98 !important;
  font-weight: 800 !important;
}
.big-price,
.station-card-price {
  font-size: clamp(28px, 7vw, 32px) !important;
  line-height: 1 !important;
}
.section h2,
.chapter-heading h2,
#decisionTitle {
  font-size: clamp(20px, 5.5vw, 24px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
}

/* Nur eine klare Standort-Handlung im Empfehlungszustand; redundante Technikzeile ausblenden. */
#heroTrustLine { display: none !important; }

/* 2 — KONSISTENZ */
.glass-card,
.section,
.station-card,
.search-control-dock,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.savings-total > div,
.savings-month-groups > *,
.savings-history > *,
.dialog,
.bottom-nav,
.map-best-sheet,
.station-price-details-body,
.station-service-panel {
  border-radius: var(--award-radius) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
}
.map-live-btn,
.search-control-chip,
.primary-btn,
.secondary-btn,
.station-route-main,
.quick-report-grid > button,
.choice-btn,
.theme-btn,
.vehicle-profile-btn,
.profile-fuel-btn,
.input,
select.input,
input.input,
textarea.input {
  border-radius: var(--award-radius) !important;
  min-height: 48px !important;
}
.section,
.station-card,
.home-savings-card,
.today-recommendation-shell {
  padding: var(--award-space-3) !important;
}
.station-list,
.quick-report-grid,
.savings-history,
.savings-month-groups {
  gap: var(--award-space-2) !important;
}

/* Primärbutton: dunkleres Grün für AA-Kontrast mit Weiß. */
.primary-btn,
.featured-route,
#navigateBtn,
#mapBestNavigateBtn,
.map-best-go {
  background: linear-gradient(135deg, var(--award-green-deep), #059669) !important;
  color: var(--award-white) !important;
  border: 1px solid rgba(137,255,196,.28) !important;
  box-shadow: 0 12px 28px rgba(4,120,87,.24), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.primary-btn *,
.featured-route *,
#navigateBtn *,
#mapBestNavigateBtn *,
.map-best-go * {
  color: var(--award-white) !important;
}
.secondary-btn,
.station-route-main.secondary-route {
  background: rgba(8,45,34,.72) !important;
  color: #BDF6D2 !important;
  border: 1px solid rgba(99,224,151,.24) !important;
}
.secondary-btn *,
.station-route-main.secondary-route * { color: inherit !important; }

/* Aktiver Navigationstab unmissverständlich. */
.bottom-nav .nav-item.active {
  color: #FFFFFF !important;
  background: linear-gradient(180deg, rgba(16,185,129,.24), rgba(16,185,129,.10)) !important;
  box-shadow: inset 0 0 0 1px rgba(105,238,164,.28), 0 0 26px rgba(16,185,129,.16) !important;
}
.bottom-nav .nav-item.active .nav-icon,
.bottom-nav .nav-item.active span { color:#FFFFFF !important; }
.bottom-nav .nav-item.active::after {
  height: 3px !important;
  background: #76F2AA !important;
  box-shadow: 0 0 14px rgba(118,242,170,.70) !important;
}

/* 3 — KONTRAST & LESBARKEIT */
.section,
.hero-card,
.station-card,
.home-savings-card,
.search-control-dock,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.savings-total > div,
.savings-month-groups > *,
.savings-history > * {
  color: #FFFFFF !important;
}
.section:not(.section-map),
.station-card,
.home-savings-card,
.search-control-dock,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.savings-total > div,
.savings-month-groups > *,
.savings-history > * {
  background-color: var(--award-glass) !important;
}
.chapter-subtitle,
.section-copy,
.hero-copy,
.sub,
.station-meta,
.field-help,
.map-status-line,
.savings-toolbar,
.savings-since,
.station-now-line span,
.station-services span,
.community-detect-copy span,
.wait-report-heading small,
.search-control-copy small,
.hero-now-fact small {
  color: var(--award-text) !important;
  opacity: 1 !important;
}
.eyebrow,
.home-card-kicker,
.decision-block-label,
.map-best-kicker {
  color: #B7F4CF !important;
}
/* Sichtbare Informationstexte nicht unter 14px. Preis-Superscript bleibt davon unberührt. */
.chapter-subtitle,
.section-copy,
.hero-copy,
.sub,
.station-meta,
.field-help,
.map-status-line,
.savings-toolbar,
.savings-since,
.community-detect-copy span,
.wait-report-heading small,
.search-control-copy small,
.hero-now-fact small,
.why-card > summary,
.trust-line {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* 4 — MENSCHLICHE, KNAPPE SPRACHE */
/* Die sichtbaren Formulierungen werden zusätzlich in app-0.10.54.js gesetzt. */
.why-card > summary { color: #E6F3EE !important; }

/* 5 — HINTERGRUND & TIEFE */
body::before {
  background: linear-gradient(to bottom, rgba(10,31,24,.90), rgba(10,31,24,.92)) !important;
}
body {
  background-attachment: fixed !important;
}

/* 6 — MIKRODETAILS */
.reveal,
.home-savings-card,
.today-recommendation-shell,
.section,
.station-card {
  animation-duration: .35s !important;
  animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
}
.primary-btn,
.secondary-btn,
.station-route-main,
.map-live-btn,
.search-control-chip,
.quick-report-grid > button {
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease !important;
}
.primary-btn:hover,
.secondary-btn:hover,
.station-route-main:hover,
.map-live-btn:hover,
.search-control-chip:hover,
.quick-report-grid > button:hover {
  transform: translateY(-2px) !important;
}
.money-calculating,
.number-animate,
#netSaving.money-calculating,
#heroSavingsValue.money-calculating {
  animation-duration: .6s !important;
}

/* Leere Zustände freundlich und klar, nicht technisch. */
.empty-list-state,
.empty,
.savings-history:empty {
  color: var(--award-text) !important;
}

@media (max-width: 560px) {
  .sticky-tank-ribbon { min-height: 62px !important; padding: 13px 15px !important; }
  .sticky-tank-ribbon-text { font-size: 15px !important; }
  .section, .station-card, .home-savings-card, .today-recommendation-shell { padding: 16px !important; }
}


/* ======================================================
   TANKLINA 0.10.66 — ROUTE / LIVE / ADDRESS POLISH
   Nur grafische und textliche Verfeinerung
   ====================================================== */

/* Gespeicherte Wege: klar erkennbare Aktionen statt weißer Platzhalter */
.saved-route-row {
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(145,255,205,.12) !important;
  background: linear-gradient(145deg, rgba(12,38,42,.82), rgba(8,28,31,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 32px rgba(0,0,0,.18) !important;
}
.saved-route-row.active {
  border-color: rgba(141,255,196,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(141,255,196,.16), 0 18px 36px rgba(0,0,0,.22) !important;
}
.saved-route-main { color:#F6FFFA !important; }
.saved-route-icon {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color:#DDFDEB !important;
}
.saved-route-copy strong { color:#FFFFFF !important; font-size:1.04rem !important; }
.saved-route-copy small { color:#B8D8C9 !important; font-size:.92rem !important; }
.saved-route-state { color:#88F0AF !important; font-size:1rem !important; }
.saved-route-actions {
  display:grid !important;
  grid-template-columns: minmax(116px,1fr) minmax(116px,1fr) 54px !important;
  gap:8px !important;
}
.saved-route-direction,
.saved-route-edit {
  min-height: 52px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color:#F7FFFB !important;
  font-weight: 800 !important;
  letter-spacing:-.01em !important;
  background: linear-gradient(145deg, rgba(31,68,71,.72), rgba(16,45,49,.84)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.saved-route-direction[data-route-direction="toWork"] {
  background: linear-gradient(145deg, rgba(73,119,195,.26), rgba(21,53,78,.88)) !important;
  border-color: rgba(126,174,255,.26) !important;
}
.saved-route-direction[data-route-direction="toHome"] {
  background: linear-gradient(145deg, rgba(16,185,129,.24), rgba(7,63,45,.88)) !important;
  border-color: rgba(125,247,190,.26) !important;
}
.saved-route-direction.selected[data-route-direction="toWork"] {
  background: linear-gradient(145deg, rgba(99,159,255,.44), rgba(39,83,134,.96)) !important;
  border-color: rgba(172,210,255,.58) !important;
  box-shadow: 0 10px 24px rgba(41,98,255,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.saved-route-direction.selected[data-route-direction="toHome"] {
  background: linear-gradient(145deg, rgba(78,220,158,.44), rgba(12,109,76,.94)) !important;
  border-color: rgba(179,255,223,.54) !important;
  box-shadow: 0 10px 24px rgba(16,185,129,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.saved-route-edit {
  width:54px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: linear-gradient(145deg, rgba(255,214,93,.24), rgba(95,72,17,.88)) !important;
  border-color: rgba(255,214,93,.28) !important;
  color:#FFF5CC !important;
}
.route-stack-add-btn {
  min-height: 54px !important;
  border-radius: 20px !important;
  padding: 0 18px !important;
  background: linear-gradient(145deg, rgba(28,70,73,.82), rgba(13,39,42,.92)) !important;
  border:1px solid rgba(145,255,205,.14) !important;
  color:#F7FFFB !important;
}
@media (max-width:760px){
  .saved-route-actions { grid-template-columns: 1fr 1fr 54px !important; }
}

/* Live-Meldung: jede Aktion über Farbe sofort unterscheidbar */
.quick-report-grid > .wait-none:not(:disabled) {
  background: linear-gradient(145deg, rgba(18,128,94,.34), rgba(7,60,45,.90)) !important;
  border-color: rgba(130,255,194,.34) !important;
}
.quick-report-grid > .wait-short:not(:disabled) {
  background: linear-gradient(145deg, rgba(50,119,198,.30), rgba(16,47,73,.90)) !important;
  border-color: rgba(141,203,255,.32) !important;
}
.quick-report-grid > .wait-mid:not(:disabled),
.quick-report-grid > .warning:not(:disabled) {
  background: linear-gradient(145deg, rgba(181,138,34,.32), rgba(79,61,12,.92)) !important;
  border-color: rgba(255,218,119,.34) !important;
}
.quick-report-grid > .wait-long:not(:disabled),
.quick-report-grid > .danger:not(:disabled) {
  background: linear-gradient(145deg, rgba(150,65,77,.34), rgba(74,24,31,.94)) !important;
  border-color: rgba(255,150,166,.34) !important;
}
.quick-report-grid > .price-ok:not(:disabled) {
  background: linear-gradient(145deg, rgba(41,156,115,.33), rgba(9,72,52,.92)) !important;
  border-color: rgba(126,247,195,.34) !important;
}
.quick-report-grid > .price-wrong:not(:disabled) {
  background: linear-gradient(145deg, rgba(92,109,189,.32), rgba(32,42,88,.92)) !important;
  border-color: rgba(172,183,255,.32) !important;
}
.quick-report-grid > button strong,
.quick-report-grid > button span {
  color:#F8FFFB !important;
  opacity:1 !important;
}
.quick-report-grid > .wait-none strong { color:#D4FFE7 !important; }
.quick-report-grid > .wait-short strong { color:#DDF0FF !important; }
.quick-report-grid > .wait-mid strong,
.quick-report-grid > .warning strong { color:#FFF1BF !important; }
.quick-report-grid > .wait-long strong,
.quick-report-grid > .danger strong { color:#FFD6DE !important; }
.quick-report-grid > .price-ok strong { color:#D4FFE7 !important; }
.quick-report-grid > .price-wrong strong { color:#E2E8FF !important; }

/* Stationen: Adresse sauber umbrechen, PLZ in eigene Zeile */
.station-address-sub,
.station-address-lines,
#bestStationMeta {
  line-height: 1.4 !important;
}
.station-address-sub br,
.station-address-lines br,
#bestStationMeta br { content:""; }
.station-address-distance {
  display:inline !important;
  color:#BFD7CA !important;
}
.station-address-lines {
  display:block !important;
  color:#D5E7DE !important;
}
#bestStationMeta {
  color:#DDEBE4 !important;
}

/* Zusätzlicher Feinschliff für Preisdetails-Zeile */
.station-price-details > summary,
.station-service-details > summary {
  padding-right: 20px !important;
}
.station-price-details > summary span:last-child,
.station-service-details > summary span:last-child {
  min-width: 18px !important;
  text-align:center !important;
  margin-left: 12px !important;
}


/* ======================================================
   TANKLINA 0.10.67 — FUTURE-FEEL CTA + MOTION POLISH
   Nur grafische Veredelung, keine Technikänderung
   ====================================================== */

:root {
  --tl-amber-soft-1: #C97817;
  --tl-amber-soft-2: #E79B3B;
  --tl-amber-soft-3: #F6C66E;
  --tl-amber-glow: rgba(243, 176, 78, 0.34);
  --tl-glass-deep: rgba(8, 27, 24, 0.82);
  --tl-type-display: "SF Pro Display", "Segoe UI Variable Display", "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --tl-type-text: "Inter", "Segoe UI Variable Text", "SF Pro Text", system-ui, -apple-system, sans-serif;
}

html, body {
  font-family: var(--tl-type-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.brand,
h1, h2, h3,
.hero-card h1,
.section h2,
#decisionTitle,
.nav-item span,
.primary-btn,
.sticky-tank-ribbon-text,
.station-card-price,
.big-price,
.benefit-saving,
.map-best-saving,
.savings-total,
.savings-month,
.section-title,
.chapter-heading h2 {
  font-family: var(--tl-type-display) !important;
  letter-spacing: -0.028em !important;
}

.section,
.hero-card,
.station-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.map-best-sheet {
  background-color: var(--tl-glass-deep) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(124, 235, 189, .05) !important;
}

/* Oberer Eintragen-Button: von braun zu warmem, sauberem Amber */
.sticky-tank-ribbon-wrap {
  filter: drop-shadow(0 16px 34px rgba(70, 40, 8, .22));
}
.sticky-tank-ribbon {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  min-height: 66px !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 227, 166, .34) !important;
  background:
    radial-gradient(140px 80px at 12% 24%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(135deg, rgba(201,120,23,.96) 0%, rgba(231,155,59,.96) 52%, rgba(246,198,110,.92) 100%) !important;
  color: #FFFDF7 !important;
  box-shadow:
    0 18px 42px rgba(145, 84, 10, .28),
    0 0 0 1px rgba(255, 214, 132, .06),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, filter .35s ease !important;
}
.sticky-tank-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 14%, rgba(255,255,255,.18) 36%, rgba(255,255,255,.06) 44%, transparent 62%);
  transform: translateX(-140%);
  animation: tlRibbonSweep 5.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.sticky-tank-ribbon::after {
  content: "";
  position: absolute;
  inset: auto 8% -28px auto;
  width: 160px;
  height: 70px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,240,200,.22) 0%, rgba(255,214,128,.14) 42%, transparent 74%);
  filter: blur(12px);
  opacity: .85;
  animation: tlAmberPulse 6.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.sticky-tank-ribbon:hover {
  transform: translateY(-2px) scale(1.005) !important;
  box-shadow:
    0 22px 46px rgba(145, 84, 10, .34),
    0 0 0 1px rgba(255, 234, 180, .08),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}
.sticky-tank-ribbon-text,
.sticky-tank-ribbon-icon {
  position: relative;
  z-index: 1;
  color: #FFFDF8 !important;
  text-shadow: 0 1px 1px rgba(87, 49, 6, .20);
}
.sticky-tank-ribbon-text {
  font-size: 15px !important;
  font-weight: 800 !important;
}
.sticky-tank-ribbon-icon {
  display: inline-grid !important;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

/* Primäre Aktionen bekommen einen subtilen 2028-Glanz */
.primary-btn,
#navigateBtn,
.featured-route,
.station-route-main,
#mapBestNavigateBtn,
#locateBtn,
#placeSearchBtn,
#commuteBtn,
#livePriceRefreshBtn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: 20px !important;
  box-shadow:
    0 14px 32px rgba(16,185,129,.16),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.primary-btn::before,
#navigateBtn::before,
.featured-route::before,
.station-route-main::before,
#mapBestNavigateBtn::before,
#locateBtn::before,
#placeSearchBtn::before,
#commuteBtn::before,
#livePriceRefreshBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.18) 38%, rgba(255,255,255,.05) 46%, transparent 62%);
  transform: translateX(-135%);
  animation: tlRibbonSweep 6.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.primary-btn > *,
#navigateBtn > *,
.featured-route > *,
.station-route-main > *,
#mapBestNavigateBtn > *,
#locateBtn > *,
#placeSearchBtn > *,
#commuteBtn > *,
#livePriceRefreshBtn > * {
  position: relative;
  z-index: 1;
}
.primary-btn:hover,
#navigateBtn:hover,
.featured-route:hover,
.station-route-main:hover,
#mapBestNavigateBtn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  filter: saturate(1.06);
}

/* Zahlen und aktive Navigation wirken lebendiger, ohne zu schreien */
#heroSavingsValue,
#netSaving,
#mapBestSaving,
#savingsTotal,
#savingsMonth,
.benefit-saving,
.station-net-hero > strong {
  text-shadow: 0 0 18px rgba(126,247,190,.16), 0 0 34px rgba(126,247,190,.08) !important;
  animation: tlValueBreath 5.2s ease-in-out infinite;
}
.bottom-nav .nav-item.active,
.nav-bar .nav-item.active,
.tabbar .tab.active {
  box-shadow:
    inset 0 0 0 1px rgba(126,247,190,.15),
    0 10px 24px rgba(16,185,129,.10) !important;
}
.bottom-nav .nav-item.active::after,
.nav-bar .nav-item.active::after,
.tabbar .tab.active::after {
  animation: tlUnderlinePulse 3.2s ease-in-out infinite;
}

/* Reveals fühlen sich hochwertiger an */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  filter: blur(8px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1), filter .55s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Subtile aurorale Tiefenlichter für Premium-Fläche */
.hero-card,
.section.featured,
.map-best-sheet,
.savings-moment {
  background-image:
    radial-gradient(340px 180px at 85% 22%, rgba(126,247,190,.11), transparent 64%),
    radial-gradient(220px 120px at 18% 14%, rgba(84,210,255,.07), transparent 66%),
    linear-gradient(180deg, rgba(11,31,28,.92), rgba(8,28,24,.88)) !important;
}

@keyframes tlRibbonSweep {
  0%, 12% { transform: translateX(-140%); opacity: 0; }
  18% { opacity: 1; }
  38% { transform: translateX(140%); opacity: 1; }
  45%, 100% { transform: translateX(140%); opacity: 0; }
}
@keyframes tlAmberPulse {
  0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .78; }
  50% { transform: translate3d(-4px,-3px,0) scale(1.06); opacity: 1; }
}
@keyframes tlValueBreath {
  0%, 100% { transform: translateY(0); filter: saturate(1); }
  50% { transform: translateY(-1px); filter: saturate(1.06); }
}
@keyframes tlUnderlinePulse {
  0%, 100% { opacity: .72; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-tank-ribbon::before,
  .sticky-tank-ribbon::after,
  .primary-btn::before,
  #navigateBtn::before,
  .featured-route::before,
  .station-route-main::before,
  #mapBestNavigateBtn::before,
  #locateBtn::before,
  #placeSearchBtn::before,
  #commuteBtn::before,
  #livePriceRefreshBtn::before,
  #heroSavingsValue,
  #netSaving,
  #mapBestSaving,
  #savingsTotal,
  #savingsMonth,
  .benefit-saving,
  .station-net-hero > strong,
  .bottom-nav .nav-item.active::after {
    animation: none !important;
  }
}


/* ======================================================
   TANKLINA 0.10.68 — 2028 UI SYSTEM PASS
   Visual-only: layout, typography, color, depth, motion.
   No application logic is changed here.
   ====================================================== */

:root {
  --ui-bg: #081A16;
  --ui-surface: rgba(8, 28, 24, .82);
  --ui-surface-strong: rgba(8, 31, 26, .92);
  --ui-surface-soft: rgba(20, 49, 43, .66);
  --ui-border: rgba(189, 255, 222, .13);
  --ui-border-strong: rgba(168, 255, 211, .24);
  --ui-white: #F8FFFB;
  --ui-text: #E8F4EF;
  --ui-muted: #B9CDC4;
  --ui-green: #5CE09B;
  --ui-green-2: #8EF0BB;
  --ui-cyan: #73DDE2;
  --ui-blue: #7FAEFF;
  --ui-amber: #E79A3A;
  --ui-amber-2: #F4BF66;
  --ui-danger: #F0898F;
  --ui-radius-sm: 14px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 24px;
  --ui-radius-xl: 30px;
  --ui-shadow-1: 0 12px 34px rgba(0,0,0,.18);
  --ui-shadow-2: 0 22px 62px rgba(0,0,0,.28);
  --ui-ease: cubic-bezier(.22,.61,.36,1);
  --ui-font: "Inter", "Segoe UI Variable Text", system-ui, -apple-system, sans-serif;
  --ui-display: "Plus Jakarta Sans", "Inter", "Segoe UI Variable Display", system-ui, sans-serif;
}

/* ---------- TYPOGRAPHY: calmer, sharper, more premium ---------- */
body, button, input, select, textarea {
  font-family: var(--ui-font) !important;
  font-weight: 500;
  color: var(--ui-text);
}
.brand,
h1, h2, h3,
#decisionTitle,
.section h2,
.chapter-heading h2,
.recommendation-title strong,
.home-card-kicker,
.home-savings-line strong,
.station-card h3,
.station-card-price,
.big-price,
#netSaving,
#mapBestSaving,
#savingsTotal,
#savingsMonth,
.primary-btn,
.station-route-main,
.map-live-btn,
.bottom-nav .nav-item span:last-child,
.saved-route-direction,
.saved-route-edit {
  font-family: var(--ui-display) !important;
  letter-spacing: -.025em !important;
}
.brand { font-weight: 750 !important; }
h1, #decisionTitle { font-weight: 700 !important; }
.section h2, .chapter-heading h2 { font-weight: 700 !important; }
.hero-copy, .section-copy, .chapter-subtitle, .sub, small { color: var(--ui-muted) !important; }

/* ---------- SURFACE SYSTEM: one coherent glass language ---------- */
.topbar,
.search-control-dock,
.hero-card,
.section,
.station-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.map-best-sheet,
.dialog,
.bottom-nav {
  background:
    linear-gradient(180deg, rgba(14,42,36,.86), rgba(7,27,23,.92)) !important;
  border: 1px solid var(--ui-border) !important;
  backdrop-filter: blur(20px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(132%) !important;
  box-shadow: var(--ui-shadow-1), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.hero-card,
.section,
.station-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.map-best-sheet { border-radius: var(--ui-radius-lg) !important; }

/* Dynamic aurora highlight follows the same restrained system */
.hero-card::after,
.section::after,
.station-card::after,
.route-stack-panel::after,
.map-best-sheet::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(320px 180px at 92% 8%, rgba(92,224,155,.08), transparent 68%),
    radial-gradient(240px 140px at 8% 96%, rgba(115,221,226,.05), transparent 72%);
  opacity:.72;
  mix-blend-mode:screen;
}

/* ---------- ROUTES: no more clipped words ---------- */
.saved-route-row {
  display:grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(13,43,39,.88), rgba(7,27,25,.94)) !important;
  border: 1px solid rgba(139,247,199,.15) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.saved-route-main {
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns: 44px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  padding: 2px !important;
  color: var(--ui-white) !important;
}
.saved-route-copy {
  min-width:0 !important;
  overflow:visible !important;
}
.saved-route-copy strong,
.saved-route-copy small {
  display:block !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  word-break:normal !important;
}
.saved-route-copy strong {
  font-size:1.02rem !important;
  line-height:1.25 !important;
  color:var(--ui-white) !important;
}
.saved-route-copy small {
  margin-top:3px !important;
  font-size:.88rem !important;
  line-height:1.35 !important;
  color:var(--ui-muted) !important;
}
.saved-route-state { align-self:center !important; }
.saved-route-actions {
  width:100% !important;
  display:grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) 52px !important;
  gap:8px !important;
  margin:0 !important;
}
.saved-route-direction,
.saved-route-edit {
  min-width:0 !important;
  min-height:48px !important;
  padding: 0 14px !important;
  border-radius:16px !important;
}
.saved-route-direction {
  white-space:normal !important;
  line-height:1.15 !important;
}
.saved-route-edit { padding:0 !important; }

/* ---------- BUTTON LANGUAGE: clear hierarchy, richer tactile feel ---------- */
.primary-btn,
.station-route-main,
#navigateBtn,
#mapBestNavigateBtn,
.map-live-btn,
.saved-route-direction,
.saved-route-edit,
.report-btn,
.route-stack-add-btn,
.secondary-btn,
.icon-btn {
  transition: transform .32s var(--ui-ease), box-shadow .32s ease, border-color .32s ease, background .32s ease, filter .32s ease !important;
}
.primary-btn:hover,
.station-route-main:hover,
#navigateBtn:hover,
#mapBestNavigateBtn:hover,
.map-live-btn:hover,
.saved-route-direction:hover,
.saved-route-edit:hover,
.report-btn:hover,
.route-stack-add-btn:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.04) brightness(1.02);
}
.primary-btn:active,
.station-route-main:active,
#navigateBtn:active,
#mapBestNavigateBtn:active,
.map-live-btn:active,
.saved-route-direction:active,
.saved-route-edit:active,
.report-btn:active,
.route-stack-add-btn:active {
  transform: translateY(0) scale(.985) !important;
}

/* ---------- ACTIVE NAVIGATION: unmistakable without looking game-like ---------- */
.bottom-nav {
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(7,28,23,.92), rgba(5,22,18,.96)) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.bottom-nav .nav-item {
  min-height:58px !important;
  border-radius:18px !important;
  color:#C7D8D1 !important;
}
.bottom-nav .nav-item.active {
  color:#FFFFFF !important;
  background: linear-gradient(180deg, rgba(92,224,155,.18), rgba(92,224,155,.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(141,240,187,.15), 0 10px 26px rgba(16,185,129,.10) !important;
}
.bottom-nav .nav-item.active .nav-icon { filter: drop-shadow(0 0 9px rgba(92,224,155,.34)); }

/* ---------- STATIONS / VALUES: premium information hierarchy ---------- */
.station-card-price,
.big-price {
  color:#FFD66E !important;
  text-shadow: 0 0 22px rgba(255,214,110,.17) !important;
}
.station-net-hero > strong,
#netSaving,
#mapBestSaving,
#savingsTotal,
#savingsMonth,
#heroSavingsValue {
  color:#8EF0BB !important;
  font-weight:760 !important;
  letter-spacing:-.035em !important;
}
.station-net-hero,
.decision-benefit-strip,
.home-savings-card,
.map-best-sheet {
  border-color: rgba(141,240,187,.19) !important;
}

/* ---------- MICRO-MOTION: cinematic, not gimmicky ---------- */
.hero-card .recommendation-title,
.section .chapter-heading,
.home-savings-card,
.today-recommendation-shell,
.station-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment {
  will-change: transform, opacity;
}
.in-view .recommendation-title,
.in-view .chapter-heading,
.in-view .home-savings-card,
.in-view .today-recommendation-shell {
  animation: ui2028Settle .52s var(--ui-ease) both;
}
.station-card:hover,
.route-stack-panel:hover,
.map-best-sheet:hover {
  box-shadow: var(--ui-shadow-2), inset 0 1px 0 rgba(255,255,255,.055) !important;
  border-color: rgba(151,245,204,.21) !important;
}

/* light travels very slowly through hero surfaces */
.today-recommendation-shell,
.home-savings-card,
.map-best-sheet {
  position:relative !important;
  overflow:hidden !important;
}
.today-recommendation-shell::before,
.home-savings-card::before,
.map-best-sheet::before {
  content:"";
  position:absolute;
  width:46%;
  height:160%;
  top:-30%;
  left:-55%;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
  transform: rotate(14deg);
  animation: ui2028SurfaceSweep 12s ease-in-out infinite;
}

@keyframes ui2028Settle {
  0% { opacity:.0; transform:translateY(14px) scale(.988); filter:blur(5px); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes ui2028SurfaceSweep {
  0%, 68% { transform:translateX(0) rotate(14deg); opacity:0; }
  73% { opacity:.75; }
  88% { transform:translateX(350%) rotate(14deg); opacity:.18; }
  100% { transform:translateX(350%) rotate(14deg); opacity:0; }
}

/* ---------- FOCUS / ACCESSIBILITY ---------- */
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(142,240,187,.92) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(92,224,155,.14) !important;
}

/* ---------- MOBILE: preserve words and calm the density ---------- */
@media (max-width: 640px) {
  .saved-route-row { padding:12px !important; }
  .saved-route-main { grid-template-columns: 42px minmax(0,1fr) auto !important; gap:10px !important; }
  .saved-route-actions { grid-template-columns: 1fr 1fr 48px !important; gap:7px !important; }
  .saved-route-direction { padding:0 10px !important; font-size:.88rem !important; }
  .saved-route-copy strong { font-size:.98rem !important; }
  .saved-route-copy small { font-size:.82rem !important; }
  .section, .hero-card, .station-card { border-radius:22px !important; }
}

@media (max-width: 420px) {
  .saved-route-actions { grid-template-columns: 1fr 1fr !important; }
  .saved-route-edit { grid-column:1 / -1 !important; width:100% !important; min-height:44px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .in-view .recommendation-title,
  .in-view .chapter-heading,
  .in-view .home-savings-card,
  .in-view .today-recommendation-shell,
  .today-recommendation-shell::before,
  .home-savings-card::before,
  .map-best-sheet::before { animation:none !important; }
}


/* ===== TANKLINA 0.10.69 — TOPBAR BALANCE & HOME JUMP ===== */
html { scroll-behavior: smooth; }
.topbar {
  padding: 10px 12px 14px !important;
  gap: 16px !important;
}
.brand-home-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  color: inherit !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 8px 8px 8px 10px !important;
  border-radius: 24px !important;
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease !important;
}
.brand-home-link:hover,
.brand-home-link:focus-visible {
  background: linear-gradient(145deg, rgba(28,64,67,.18), rgba(8,28,33,.10)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}
.brand-row { gap: 14px !important; }
.brand-logo {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 20px !important;
  padding: 5px !important;
  margin-left: 2px !important;
  box-shadow: 0 0 0 1px rgba(156,255,206,.24), 0 16px 34px rgba(84,255,172,.18) !important;
}
.brand-copy {
  min-height: 64px !important;
  justify-content: center !important;
}
.brand {
  font-size: clamp(30px, 5.2vw, 36px) !important;
  line-height: .96 !important;
}
.tagline {
  margin-top: 4px !important;
  font-size: 14px !important;
  line-height: 1.18 !important;
}
.topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin-right: 6px !important;
}
.settings-access-btn {
  min-width: 52px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 20px !important;
  margin-right: 2px !important;
}
.settings-access-btn .profile-glyph {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.settings-access-btn .profile-glyph svg {
  width: 23px !important;
  height: 23px !important;
}
@media (max-width: 640px) {
  .topbar {
    padding: 10px 10px 14px !important;
    gap: 12px !important;
  }
  .brand-home-link {
    padding: 6px 6px 6px 8px !important;
    gap: 12px !important;
  }
  .brand-logo {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
  }
  .brand {
    font-size: clamp(28px, 8vw, 34px) !important;
  }
  .tagline {
    font-size: 13px !important;
  }
  .settings-access-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
}


/* ======================================================
   TANKLINA 0.10.70 — MEDIA ROTATION + 2028 UI SYSTEM PASS
   Presentation only: no API, routing, pricing or data logic changes.
   ====================================================== */

:root {
  --tl28-bg: rgba(7, 25, 22, .91);
  --tl28-bg-soft: rgba(12, 39, 34, .82);
  --tl28-edge: rgba(153, 244, 204, .16);
  --tl28-edge-hot: rgba(151, 255, 205, .30);
  --tl28-mint: #8EF0BB;
  --tl28-mint-strong: #66DFA1;
  --tl28-gold: #FFD66E;
  --tl28-text: #F8FCFA;
  --tl28-muted: #C9D9D3;
  --tl28-muted-2: #A9BDB6;
  --tl28-ease: cubic-bezier(.22,.61,.36,1);
  --tl28-radius: 22px;
}

/* ---- Compact controls: never overlap or clip ---- */
.search-control-dock {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
  overflow: visible !important;
}
.search-control-chip {
  min-width: 0 !important;
  min-height: 70px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) 14px !important;
  align-items: center !important;
  column-gap: 9px !important;
  padding: 10px 11px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}
.search-control-icon {
  width: 34px !important;
  height: 34px !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
}
.search-control-copy {
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
}
.search-control-copy small {
  display: block !important;
  margin: 0 0 3px !important;
  color: #BFD3CC !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-weight: 750 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.search-control-copy strong {
  display: block !important;
  max-width: 100% !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
  letter-spacing: -.015em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}
.search-control-chevron {
  min-width: 14px !important;
  width: 14px !important;
  justify-self: end !important;
  margin: 0 !important;
  color: #A8C2B8 !important;
}

/* ---- More refined 2028 surface system ---- */
.topbar,
.search-control-dock,
.hero-card,
.section,
.station-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.map-best-sheet,
.dialog,
.bottom-nav {
  background:
    radial-gradient(520px 240px at 88% -8%, rgba(101, 240, 175, .07), transparent 68%),
    linear-gradient(180deg, rgba(13, 39, 34, .88), rgba(6, 24, 21, .94)) !important;
  border-color: var(--tl28-edge) !important;
  backdrop-filter: blur(20px) saturate(138%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(138%) !important;
  box-shadow:
    0 22px 54px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(91, 225, 157, .025) !important;
}

/* stronger hierarchy without visual noise */
.section-heading h2,
#decisionTitle,
.station-title-copy h3,
.savings-heading,
.route-stack-title,
.community-heading {
  color: var(--tl28-text) !important;
  font-weight: 760 !important;
  letter-spacing: -.035em !important;
}
.chapter-subtitle,
.section-copy,
.station-card .sub,
.map-best-copy > span,
.field-help,
.savings-toolbar,
.trust-line {
  color: var(--tl28-muted) !important;
}

/* ---- Cinematic station imagery ---- */
.station-photo-wrap,
.station-card > .station-card-photo,
.map-best-photo {
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid rgba(205,255,229,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.22) !important;
}
.station-card-photo,
.map-best-photo {
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(1.04) contrast(1.035) brightness(.96) !important;
  transition: transform .7s var(--tl28-ease), filter .55s ease, opacity .45s ease !important;
}
.station-card-photo { aspect-ratio: 16 / 9 !important; }
.map-best-photo { aspect-ratio: 16 / 10 !important; }
.station-card:hover .station-card-photo,
.map-best-sheet:hover .map-best-photo {
  transform: scale(1.035) !important;
  filter: saturate(1.08) contrast(1.04) brightness(1) !important;
}
.visual-media-enter {
  animation: tl28MediaEnter .56s var(--tl28-ease) both !important;
}
.station-photo-vignette {
  background:
    linear-gradient(to top, rgba(5,20,17,.62), transparent 44%),
    radial-gradient(circle at 85% 15%, rgba(141,240,187,.06), transparent 42%) !important;
}

/* ---- Main information values ---- */
.station-card-price,
.big-price {
  color: var(--tl28-gold) !important;
  text-shadow: 0 0 20px rgba(255,214,110,.17) !important;
}
.station-net-hero > strong,
#netSaving,
#mapBestSaving,
#heroSavingsValue,
#savingsTotal,
#savingsMonth {
  color: var(--tl28-mint) !important;
  text-shadow: 0 0 22px rgba(102,223,161,.14) !important;
}

/* ---- Buttons: premium and consistent ---- */
.primary-btn,
#navigateBtn,
#mapBestNavigateBtn,
.station-route-main.featured-route {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #168B61 0%, #1D9D71 55%, #2FBF87 100%) !important;
  border: 1px solid rgba(180,255,220,.30) !important;
  box-shadow: 0 16px 34px rgba(13,132,88,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.primary-btn *,
#navigateBtn *,
#mapBestNavigateBtn *,
.station-route-main.featured-route * { color: inherit !important; }

/* ---- Active navigation is unmistakable ---- */
.bottom-nav .nav-item.active {
  color: #FFFFFF !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(142,240,187,.22), transparent 62%),
    linear-gradient(180deg, rgba(57,166,112,.20), rgba(18,81,57,.16)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(142,240,187,.18),
    0 12px 28px rgba(16,185,129,.12) !important;
}
.bottom-nav .nav-item.active::after {
  content: "";
  position: absolute;
  left: 24%; right: 24%; bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #8EF0BB, transparent);
  box-shadow: 0 0 12px rgba(142,240,187,.52);
}

/* ---- micro motion: refined rather than game-like ---- */
.station-card,
.hero-card,
.section,
.map-best-sheet,
.route-stack-panel,
.search-control-chip {
  transition: transform .38s var(--tl28-ease), border-color .38s ease, box-shadow .38s ease !important;
}
@media (hover:hover) {
  .search-control-chip:hover,
  .station-card:hover,
  .map-best-sheet:hover,
  .route-stack-panel:hover {
    transform: translateY(-2px) !important;
    border-color: var(--tl28-edge-hot) !important;
  }
}

@keyframes tl28MediaEnter {
  from { opacity:0; transform:scale(1.025); filter:blur(5px) saturate(.92); }
  to { opacity:1; transform:scale(1); filter:blur(0) saturate(1.04); }
}

@media (max-width: 600px) {
  .search-control-dock { gap: 7px !important; padding: 7px !important; }
  .search-control-chip {
    min-height: 64px !important;
    grid-template-columns: 30px minmax(0,1fr) 10px !important;
    column-gap: 6px !important;
    padding: 8px 7px !important;
  }
  .search-control-icon { width:30px !important; height:30px !important; }
  .search-control-copy small { font-size: 9px !important; }
  .search-control-copy strong { font-size: 11.5px !important; }
  .search-control-chevron { width:10px !important; min-width:10px !important; }
}

@media (max-width: 420px) {
  .search-control-chip {
    grid-template-columns: 28px minmax(0,1fr) !important;
  }
  .search-control-chevron { display:none !important; }
  .search-control-copy small { font-size: 8.7px !important; }
  .search-control-copy strong { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-media-enter { animation:none !important; }
  .station-card-photo,
  .map-best-photo,
  .station-card,
  .hero-card,
  .section,
  .map-best-sheet,
  .route-stack-panel,
  .search-control-chip { transition:none !important; }
}


/* ======================================================
   TANKLINA 0.10.71 — HEADER BALANCE + ALWAYS-AVAILABLE HOME JUMP
   Presentation only. No application logic changed.
   ====================================================== */

#appTop {
  scroll-margin-top: 96px !important;
}

.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 140 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 12px 18px 14px !important;
  margin-inline: 0 !important;
  background:
    linear-gradient(180deg, rgba(7, 28, 24, .90), rgba(7, 28, 24, .78)) !important;
  backdrop-filter: blur(24px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
  border: 1px solid rgba(151, 255, 207, .12) !important;
  border-radius: 28px !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.brand-home-link {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 8px 10px 8px 12px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
}

.brand-home-link:hover,
.brand-home-link:focus-visible {
  background: rgba(255,255,255,.035) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.14) !important;
  transform: translateY(-1px) !important;
  outline: 2px solid rgba(126, 247, 190, .30) !important;
  outline-offset: 2px !important;
}

.brand-logo {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  flex: 0 0 72px !important;
  padding: 5px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(154,255,200,.18), rgba(7,40,35,.54)) !important;
  border: 1px solid rgba(173,255,217,.30) !important;
  box-shadow:
    0 0 0 1px rgba(130,255,194,.05),
    0 14px 34px rgba(65,235,151,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.brand-copy {
  min-height: 72px !important;
  min-width: 0 !important;
  justify-content: center !important;
}

.brand {
  font-size: clamp(31px, 5vw, 38px) !important;
  line-height: .96 !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
}

.tagline {
  margin-top: 5px !important;
  color: #C4D8D0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

.topbar-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: 0 10px 0 0 !important;
}

.settings-access-btn {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(145deg, rgba(31,73,69,.72), rgba(8,35,31,.88)) !important;
  border: 1px solid rgba(155,255,209,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.16) !important;
}

.settings-access-btn .profile-glyph,
.settings-access-btn .profile-glyph svg {
  width: 25px !important;
  height: 25px !important;
}

@media (max-width: 640px) {
  .topbar {
    gap: 12px !important;
    padding: 10px 12px 12px !important;
    border-radius: 24px !important;
  }

  .brand-home-link {
    gap: 12px !important;
    padding: 7px 8px 7px 10px !important;
  }

  .brand-logo {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    flex-basis: 66px !important;
    border-radius: 20px !important;
  }

  .brand-copy {
    min-height: 66px !important;
  }

  .brand {
    font-size: clamp(28px, 8.2vw, 34px) !important;
  }

  .tagline {
    font-size: 13px !important;
  }

  .topbar-actions {
    margin-right: 6px !important;
  }

  .settings-access-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }
}

@media (max-width: 410px) {
  .brand-logo {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    flex-basis: 60px !important;
  }

  .brand-copy {
    min-height: 60px !important;
  }

  .brand {
    font-size: 27px !important;
  }

  .tagline {
    font-size: 12px !important;
  }

  .topbar {
    padding-inline: 10px !important;
  }

  .topbar-actions {
    margin-right: 4px !important;
  }
}


/* ======================================================
   TANKLINA 0.10.72 — ALWAYS-VISIBLE HOME LOGO
   Rein visuelle Ebene; keine App-Logik verändert.
   ====================================================== */

.floating-home-logo {
  position: fixed !important;
  z-index: 360 !important;
  top: max(34px, calc(env(safe-area-inset-top) + 18px)) !important;
  left: max(34px, calc(50vw - 216px)) !important;
  width: 72px !important;
  height: 72px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(154,255,200,.20), rgba(7,40,35,.90)) !important;
  border: 1px solid rgba(173,255,217,.34) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.28),
    0 0 28px rgba(75,238,159,.14),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  text-decoration: none !important;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s ease,
    border-color .28s ease !important;
}

.floating-home-logo img {
  width: 58px !important;
  height: 58px !important;
  display: block !important;
  border-radius: 17px !important;
  object-fit: cover !important;
}

.floating-home-logo:hover,
.floating-home-logo:focus-visible {
  transform: translateY(-2px) scale(1.035) !important;
  border-color: rgba(190,255,225,.54) !important;
  box-shadow:
    0 22px 44px rgba(0,0,0,.32),
    0 0 34px rgba(75,238,159,.22),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  outline: none !important;
}

/* Das ursprüngliche Logo behält seinen Platz im Header,
   wird aber visuell durch das feste, jederzeit anklickbare Logo ersetzt. */
.brand-home-link .brand-logo {
  visibility: hidden !important;
}

@media (max-width: 640px) {
  .floating-home-logo {
    width: 66px !important;
    height: 66px !important;
    top: max(33px, calc(env(safe-area-inset-top) + 17px)) !important;
    left: 34px !important;
    border-radius: 20px !important;
  }

  .floating-home-logo img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 410px) {
  .floating-home-logo {
    width: 60px !important;
    height: 60px !important;
    top: max(31px, calc(env(safe-area-inset-top) + 15px)) !important;
    left: 30px !important;
  }

  .floating-home-logo img {
    width: 49px !important;
    height: 49px !important;
    border-radius: 15px !important;
  }
}


/* ======================================================
   TANKLINA 0.10.73 — MAP COLOR + MARKER CLEANUP
   Rein visuelle Ebene; keine App-Logik geändert.
   ====================================================== */

:root {
  --tl-map-warning: #FF8A3D;
  --tl-map-warning-deep: #F26B2D;
  --tl-map-warning-glow: rgba(255, 138, 61, .28);
}

/* Sauberes, modernes Warm-Orange für negative Netto-Werte. */
.tl-price-bubble.net-bad,
.tl-net-map-bubble.net-bad {
  background: linear-gradient(145deg, var(--tl-map-warning), var(--tl-map-warning-deep)) !important;
  border-color: rgba(255, 213, 184, .62) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 10px 24px rgba(115, 48, 13, .22),
    0 0 22px var(--tl-map-warning-glow),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.tl-net-map-bubble.net-bad small,
.tl-net-map-bubble.net-bad strong,
.tl-price-bubble.net-bad small,
.tl-price-bubble.net-bad strong {
  color: #FFFFFF !important;
  text-shadow: 0 1px 1px rgba(96, 34, 9, .22) !important;
}

/* Die bisherigen tropfen-/ballonförmigen Stationsmarker werden
   durch reduzierte, moderne Punktmarker ersetzt. Klicklogik bleibt unverändert. */
.tl-location-pin {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  transform: none !important;
  color: transparent !important;
  background: radial-gradient(circle at 38% 34%, #EFFFF6 0 18%, #6DE6A2 20% 56%, #1BAA6E 58% 100%) !important;
  border: 2px solid rgba(236,255,244,.92) !important;
  box-shadow:
    0 0 0 5px rgba(45, 210, 127, .10),
    0 4px 14px rgba(0,0,0,.22),
    0 0 16px rgba(72, 238, 151, .20) !important;
}
.tl-location-pin::before {
  content: none !important;
  display: none !important;
}

/* Der Leaflet-Container des alten 38px-Pins bleibt nur als unsichtbare
   Klickfläche bestehen, der sichtbare Punkt sitzt mittig und unaufdringlich. */
.tl-location-marker {
  background: transparent !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
}

/* Einheitliche visuelle Rundung der Netto-Marker. */
.tl-price-bubble.tl-net-map-bubble {
  border-radius: 16px !important;
}

@media (max-width: 640px) {
  .tl-location-pin {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}


/* ======================================================
   TANKLINA 0.10.74 — RESPONSIVE + MEDIA PERFECTION PASS
   Nur Darstellung. Keine App-Logik geändert.
   ====================================================== */

/* --- Grundsicherheit gegen horizontales Überlaufen --- */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.app-shell,
.app-shell > *,
.section,
.hero-card,
.station-list,
.station-card,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.map-best-sheet,
.dialog,
fieldset,
form {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* --- Stationsbilder: keine weißen Haarlinien, kein Nachbarbild am Rand --- */
.station-photo-wrap,
.station-card > .station-card-photo,
.map-best-photo {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
  background: #0A231C !important;
  clip-path: inset(0 round 20px) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
}

.station-photo-wrap {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 0 12px !important;
  border-radius: 20px !important;
}

.station-card-photo,
.map-best-photo {
  display: block !important;
  width: calc(100% + 4px) !important;
  max-width: none !important;
  min-width: calc(100% + 4px) !important;
  height: 100% !important;
  margin-left: -2px !important;
  margin-right: -2px !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: translateZ(0) scale(1.012) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  image-rendering: auto !important;
}

.station-card > .station-card-photo {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 20px !important;
  clip-path: inset(0 round 20px) !important;
}

.map-best-photo {
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
}

.station-card:hover .station-card-photo,
.map-best-sheet:hover .map-best-photo {
  transform: translateZ(0) scale(1.035) !important;
}

/* Einblendung bleibt innerhalb des Beschnitts */
@keyframes tl28MediaEnter {
  from {
    opacity: 0;
    transform: translateZ(0) scale(1.04);
    filter: blur(4px) saturate(.94);
  }
  to {
    opacity: 1;
    transform: translateZ(0) scale(1.012);
    filter: blur(0) saturate(1.04);
  }
}

/* --- Text- und Button-Sicherheit --- */
button,
a,
summary,
input,
select,
textarea,
.search-control-chip,
.map-live-btn,
.report-btn,
.primary-btn,
.station-route-main,
.saved-route-direction,
.saved-route-edit {
  min-width: 0 !important;
  max-width: 100% !important;
}

button,
.search-control-chip,
.map-live-btn,
.report-btn,
.primary-btn,
.station-route-main,
.saved-route-direction,
.saved-route-edit {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.18 !important;
}

.station-title-copy,
.station-title-copy h3,
.station-title-copy .sub,
.station-address-sub,
.service-info-row,
.saved-route-copy,
.saved-route-copy strong,
.saved-route-copy small,
.chapter-heading,
.section-heading,
.search-control-copy,
.search-control-copy strong,
.search-control-copy small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* --- Handy: sehr schmale Geräte 320–359 px --- */
@media (max-width: 359px) {
  .app-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .section,
  .hero-card,
  .station-card,
  .route-stack-panel,
  .community-auto-detect,
  .savings-moment {
    border-radius: 20px !important;
  }

  .search-control-dock {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .search-control-chip {
    min-height: 58px !important;
    grid-template-columns: 34px minmax(0,1fr) 14px !important;
    padding: 9px 10px !important;
  }

  .search-control-copy small {
    font-size: 10px !important;
  }

  .search-control-copy strong {
    font-size: 12px !important;
  }

  .station-card {
    padding: 10px !important;
  }

  .station-card-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .station-price-wrap {
    max-width: 100% !important;
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .station-card-price {
    font-size: clamp(26px, 10vw, 34px) !important;
  }

  .quick-report-grid,
  .map-live-actions-four,
  .map-live-actions-three,
  .drive-metrics,
  .drive-actions {
    grid-template-columns: 1fr !important;
  }

  .bottom-nav {
    gap: 3px !important;
    padding-inline: 7px !important;
  }

  .bottom-nav .nav-item {
    min-width: 0 !important;
    font-size: 11px !important;
  }
}

/* --- Normale Smartphones 360–479 px --- */
@media (min-width: 360px) and (max-width: 479px) {
  .app-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .search-control-dock {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .search-control-dock > :nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  .search-control-chip {
    min-height: 60px !important;
    padding: 8px 9px !important;
    grid-template-columns: 32px minmax(0,1fr) 12px !important;
    gap: 7px !important;
  }

  .search-control-copy small {
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }

  .search-control-copy strong {
    font-size: 12.5px !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  .station-card {
    padding: 11px !important;
  }

  .station-card-top {
    gap: 10px !important;
  }

  .station-price-wrap {
    max-width: 44% !important;
  }

  .station-title-copy h3 {
    font-size: clamp(18px, 5.4vw, 23px) !important;
  }

  .quick-report-grid {
    gap: 10px !important;
  }

  .quick-report-grid > button {
    min-height: 92px !important;
    padding: 12px 10px !important;
  }
}

/* --- Große Smartphones / Foldables 480–699 px --- */
@media (min-width: 480px) and (max-width: 699px) {
  .app-shell {
    max-width: 580px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .search-control-dock {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }

  .station-card-photo {
    aspect-ratio: 16 / 9 !important;
  }
}

/* --- Tablets Hochformat / kleine Tablets --- */
@media (min-width: 700px) and (max-width: 899px) {
  .app-shell {
    max-width: 650px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section,
  .hero-card,
  .station-card,
  .route-stack-panel,
  .community-auto-detect,
  .savings-moment {
    border-radius: 28px !important;
  }

  .station-card {
    padding: 15px !important;
  }

  .station-title-copy h3 {
    font-size: 25px !important;
  }

  .station-card-price {
    font-size: 38px !important;
  }

  .search-control-chip {
    min-height: 72px !important;
  }

  .bottom-nav {
    width: min(calc(100% - 28px), 650px) !important;
  }
}

/* --- Tablets groß / Querformat --- */
@media (min-width: 900px) and (max-width: 1199px) {
  .app-shell {
    max-width: 700px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .station-card {
    padding: 16px !important;
  }

  .station-photo-wrap {
    max-height: 360px !important;
  }

  .bottom-nav {
    width: min(calc(100% - 32px), 700px) !important;
  }
}

/* --- Touch-Ziele: unabhängig von der Gerätegröße --- */
@media (pointer: coarse) {
  button,
  .nav-item,
  .search-control-chip,
  summary,
  .map-live-btn,
  .report-btn,
  .saved-route-direction,
  .saved-route-edit {
    min-height: 44px !important;
  }
}

/* --- Querformat auf kleinen Geräten --- */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar {
    position: relative !important;
  }

  .floating-home-logo {
    width: 54px !important;
    height: 54px !important;
    top: 12px !important;
  }

  .floating-home-logo img {
    width: 44px !important;
    height: 44px !important;
  }

  .bottom-nav {
    padding-top: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}


/* --- 0.10.74 QA-Nachschärfung nach Mehrbreiten-Test --- */
.search-control-copy small,
.search-control-copy strong {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}

.search-control-copy small {
  line-height: 1.08 !important;
}

/* Auf allen Smartphones Stationskopf stapeln:
   verhindert Kollision langer Stationsnamen mit Preis/Kraftstoff. */
@media (max-width: 560px) {
  .station-card-top {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    align-items: start !important;
    gap: 11px !important;
  }

  .station-identity {
    width: 100% !important;
    max-width: 100% !important;
  }

  .station-price-wrap {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 7px !important;
  }

  .station-fuel-chip {
    margin-bottom: 0 !important;
  }
}


/* --- 0.10.74 finale Smartphone-Preiszeile: höhere Spezifität --- */
@media (max-width: 560px) {
  .station-card.decision-card .station-price-wrap,
  .station-card.location-only .station-price-wrap,
  .station-card .station-price-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .station-card.decision-card .station-card-top,
  .station-card.location-only .station-card-top,
  .station-card .station-card-top {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
  }
}


/* ======================================================
   TANKLINA 0.10.75 — TANKSTOP CELEBRATION FIX
   Rein visuelle Stern-Konfetti-Darstellung.
   ====================================================== */
.fx-confetti-star {
  position: fixed !important;
  top: -28px !important;
  width: var(--size, 14px) !important;
  height: var(--size, 14px) !important;
  display: block !important;
  background: var(--star-color, #78F2A7) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 34%) !important;
  -webkit-clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 34%) !important;
  filter: drop-shadow(0 0 5px rgba(74,222,128,.34)) !important;
  text-shadow: none !important;
  opacity: 0;
  animation-name: tl75-star-fall !important;
  animation-timing-function: cubic-bezier(.18,.72,.28,1) !important;
  animation-fill-mode: forwards !important;
  pointer-events: none !important;
  z-index: 10020 !important;
}
@keyframes tl75-star-fall {
  0% { opacity:0; transform:translate3d(0,-5vh,0) rotate(0deg) scale(.72); }
  10% { opacity:1; }
  82% { opacity:.96; }
  100% { opacity:0; transform:translate3d(var(--tx),108vh,0) rotate(var(--rot)) scale(1.04); }
}
.fx-cheer-note {
  z-index:10030 !important;
  max-width:min(88vw,520px) !important;
  white-space:normal !important;
  text-align:center !important;
  padding:13px 18px !important;
  border-radius:18px !important;
  background:rgba(7,34,26,.94) !important;
  border:1px solid rgba(126,247,190,.36) !important;
  color:#F4FFF8 !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  box-shadow:0 16px 48px rgba(0,0,0,.28),0 0 30px rgba(52,211,153,.12) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}


/* ======================================================
   TANKLINA 0.10.77 — TRUST / UX / AWARD PASS
   Datenvertrauen, klare Entscheidungssemantik, ruhige Hierarchie.
   ====================================================== */

.tl-ui-icon {
  width: 1.05em !important;
  height: 1.05em !important;
  display: inline-block !important;
  vertical-align: -0.14em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex: 0 0 auto !important;
}

.recommendation-title .tl-ui-icon { width: 20px !important; height: 20px !important; color:#A7F3D0 !important; }
.sticky-tank-ribbon-icon .tl-ui-icon,
.tank-stop-quick-icon .tl-ui-icon { width: 22px !important; height: 22px !important; }
.search-control-icon .tl-ui-icon,
.fuel-switch-icon .tl-ui-icon { width: 18px !important; height: 18px !important; }
.map-live-btn .tl-ui-icon { width:18px !important; height:18px !important; }
.station-fuel-chip .tl-ui-icon,
.station-key-grid .tl-ui-icon,
.station-location-actions .tl-ui-icon,
.service-info-row .tl-ui-icon,
.service-mini-chip .tl-ui-icon,
.fuel-card-chip .tl-ui-icon { width:14px !important; height:14px !important; }
.station-now-chip .tl-ui-icon { width:14px !important; height:14px !important; margin-top:1px !important; }

/* Kernentscheidung vor Langzeitstatistik */
#heroCard { display:flex !important; flex-direction:column !important; gap:12px !important; }
#heroCard .today-recommendation-shell { order:0 !important; }
#heroCard .tank-stop-quick-card { order:1 !important; }
#heroCard .home-savings-card { order:2 !important; }
#heroCard .home-legacy-hidden { order:3 !important; }
.home-savings-card {
  background:linear-gradient(145deg,rgba(11,43,34,.78),rgba(10,31,25,.66)) !important;
  border-color:rgba(170,231,202,.13) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.home-savings-line strong { font-size:clamp(27px,7vw,38px) !important; }
.home-card-kicker { display:flex !important; align-items:center !important; gap:7px !important; color:#C8DED2 !important; }

/* Standort-Vertrauen direkt vor der Berechtigungsentscheidung */
.location-trust-note {
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr) !important;
  gap:9px !important;
  align-items:start !important;
  margin:10px 0 2px !important;
  padding:10px 11px !important;
  border-radius:15px !important;
  background:rgba(114,214,164,.055) !important;
  border:1px solid rgba(132,232,182,.12) !important;
  color:#BED4C9 !important;
  font-size:11.5px !important;
  line-height:1.42 !important;
}
.location-trust-note[hidden] { display:none !important; }
.location-trust-note > .tl-ui-icon { width:18px !important; height:18px !important; color:#8FE1B5 !important; margin-top:1px !important; }
.location-trust-note strong { color:#F3FFF8 !important; font-weight:780 !important; }

/* Preisvertrauen pro Station */
.station-trust-strip {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:9px 0 2px !important;
}
.station-trust-item {
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:28px !important;
  padding:5px 8px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(173,226,200,.09) !important;
  color:#C7D9D0 !important;
  font-size:10.5px !important;
  font-weight:720 !important;
  line-height:1.2 !important;
}
.station-trust-item i {
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#8FA79B !important;
  flex:none !important;
}
.station-trust-item.fetch i,
.station-trust-item.price i { background:#5EE29A !important; box-shadow:0 0 9px rgba(94,226,154,.35) !important; }
.station-trust-item.community i { background:#7DD3FC !important; box-shadow:0 0 9px rgba(125,211,252,.28) !important; }
.station-trust-item.conflict { color:#FFD29A !important; border-color:rgba(245,177,91,.24) !important; background:rgba(245,177,91,.07) !important; }
.station-trust-item.conflict i { background:#F5B15B !important; }
.station-trust-item.muted { color:#9FB4AA !important; }
.station-data-secondary { opacity:.82 !important; }

/* Unknown data is omitted; remaining now-chips use space naturally. */
.station-now-row { grid-template-columns:repeat(auto-fit,minmax(126px,1fr)) !important; }
.station-now-chip { align-items:center !important; }
.service-empty { padding:12px 2px 4px !important; color:#AFC3BA !important; font-size:12px !important; line-height:1.45 !important; }
.status-mini-dot { width:6px !important; height:6px !important; border-radius:50% !important; background:currentColor !important; opacity:.8 !important; }

/* Negative values are an avoidance decision, not a red financial loss. */
.station-net-hero.net-neutral,
.station-net-hero.net-negative {
  background:rgba(148,163,184,.055) !important;
  border-color:rgba(148,163,184,.14) !important;
  box-shadow:none !important;
}
.station-net-hero.net-neutral > strong,
.station-net-hero.net-negative > strong,
#netSaving.net-negative { color:#F2F6F4 !important; text-shadow:none !important; }
.tl-net-map-bubble.net-negative,
.map-popup-net.net-negative { border-color:rgba(160,181,171,.30) !important; background:rgba(24,45,38,.94) !important; color:#F0F6F3 !important; }

/* Rechenweg: sichtbar, ruhig, scanbar */
.why-grid .why-item:nth-child(3) { border-color:rgba(94,226,154,.20) !important; background:rgba(94,226,154,.055) !important; }
.station-calc-card { box-shadow:none !important; }

/* Einsparung: keine redundante zweite Kachel bei dünner Datenlage */
.savings-stat-tile[hidden] { display:none !important; }
.savings-total.single-stat { grid-template-columns:1fr !important; }
.savings-stat-wide { grid-column:1/-1 !important; }
.saving-row.saving-neutral strong { color:#C3D1CB !important; }
.saving-row.saving-negative strong { color:#E7D7BD !important; }

/* Einstellungen: Datenschutz als Produktinformation, nicht nur Legal-Fußnote */
.settings-local-note { display:flex !important; align-items:center !important; gap:7px !important; }
.settings-local-note .tl-ui-icon { width:15px !important; height:15px !important; }
.data-trust-settings { margin:16px 0 !important; }
.data-trust-list { display:grid !important; gap:8px !important; margin-top:10px !important; }
.data-trust-list > div {
  display:grid !important;
  grid-template-columns:20px minmax(0,1fr) !important;
  gap:9px !important;
  align-items:start !important;
  padding:9px 10px !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.055) !important;
  color:#BED0C7 !important;
  font-size:11.5px !important;
  line-height:1.4 !important;
}
.data-trust-list .tl-ui-icon { width:16px !important; height:16px !important; color:#8FE1B5 !important; margin-top:1px !important; }
.data-trust-list strong { color:#F1FFF6 !important; }
.data-trust-delete-link { display:inline-block !important; margin-top:10px !important; color:#A7F3D0 !important; font-size:12px !important; font-weight:750 !important; }

/* Ruhigere Hierarchie: nur Kernaktionen/Empfehlung erhalten starken Glow. */
.station-card:not(.best),
.section:not(#mapSection),
.route-stack-panel,
.community-auto-detect,
.savings-moment {
  box-shadow:0 10px 26px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.028) !important;
}
.station-card:not(.best):hover { box-shadow:0 14px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04) !important; }
body::before { background:linear-gradient(180deg,rgba(6,25,20,.93),rgba(6,25,20,.91)) !important; }

/* Responsive: Vertrauensdaten dürfen nie Karten sprengen. */
@media (max-width:560px) {
  .station-trust-strip { gap:5px !important; }
  .station-trust-item { width:100% !important; border-radius:12px !important; font-size:10.5px !important; }
  .location-trust-note { font-size:11px !important; }
  .trust-line { font-size:10px !important; line-height:1.45 !important; }
}

@media (min-width:700px) {
  .location-trust-note { grid-template-columns:22px minmax(0,1fr) !important; font-size:12px !important; }
}


/* ======================================================
   TANKLINA 0.10.78 — RESPONSIVE TYPOGRAPHY / CONTROL FIT
   Reine Darstellungsoptimierung. Keine App-Logik geändert.
   Ziel: keine Wortzerreißung, kein Textüberlauf, saubere
   Button-Hierarchie von 320 px bis Ultra-Wide Desktop.
   ====================================================== */

/* Frühere Schutzregel "overflow-wrap:anywhere" war für Fließtext sinnvoll,
   darf aber auf Bedienelementen niemals Wörter wie "Standort" zerreißen. */
button,
.search-control-chip,
.map-live-btn,
.report-btn,
.primary-btn,
.station-route-main,
.saved-route-direction,
.saved-route-edit,
.drive-action-btn,
.nav-item {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

button span,
.search-control-chip span,
.map-live-btn span,
.report-btn span,
.primary-btn span,
.station-route-main span,
.saved-route-direction span,
.saved-route-edit span,
.drive-action-btn span,
.nav-item span {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Karten-Aktionsleiste: Icon und Text bekommen feste Rollen.
   Text darf nur an echten Leerzeichen umbrechen, nie mitten im Wort. */
.map-live-actions.map-live-actions-four {
  display: grid !important;
  width: 100% !important;
  align-items: stretch !important;
  gap: clamp(8px, 1.2vw, 12px) !important;
}

.map-live-btn {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 8px !important;
  padding-inline: clamp(10px, 1.2vw, 14px) !important;
  text-align: center !important;
}

.map-live-btn > span:first-child {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
}

.map-live-btn > span:last-child {
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  line-height: 1.12 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Desktop / große Tablets: alle vier Aktionen in einer Zeile,
   bewusst einzeilige Labels für die ruhige Werkzeugleisten-Anmutung. */
@media (min-width: 761px) {
  .map-live-actions.map-live-actions-four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .map-live-btn {
    min-height: 66px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    padding-inline: clamp(9px, 1vw, 13px) !important;
  }

  .map-live-btn > span:first-child {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
  }

  .map-live-btn > span:last-child {
    white-space: nowrap !important;
    font-size: clamp(11.5px, 1.02vw, 13.5px) !important;
    letter-spacing: -0.015em !important;
  }
}

/* Kleine und mittlere Tablets: zwei klare Spalten geben längeren Labels Luft. */
@media (min-width: 481px) and (max-width: 760px) {
  .map-live-actions.map-live-actions-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .map-live-btn {
    min-height: 62px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
  }

  .map-live-btn > span:last-child {
    white-space: nowrap !important;
    font-size: 13px !important;
  }
}

/* Smartphones: Pixel-/iPhone-taugliche 2x2-Anordnung.
   Umbruch nur zwischen Wörtern, nicht innerhalb von Wörtern. */
@media (min-width: 360px) and (max-width: 480px) {
  .map-live-actions.map-live-actions-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .map-live-btn {
    min-height: 62px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    padding-inline: 9px !important;
  }

  .map-live-btn > span:first-child {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
  }

  .map-live-btn > span:last-child {
    white-space: normal !important;
    font-size: clamp(11px, 3.15vw, 12.5px) !important;
    line-height: 1.1 !important;
  }
}

/* Sehr kleine Geräte: eine Spalte verhindert jede Kollision. */
@media (max-width: 359px) {
  .map-live-actions.map-live-actions-four {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .map-live-btn {
    min-height: 54px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
  }

  .map-live-btn > span:last-child {
    white-space: nowrap !important;
    font-size: 12.5px !important;
  }
}

/* Such- und Aktionsbuttons generell: Wörter bleiben intakt; mehrteilige
   Beschriftungen dürfen auf schmalen Geräten nur an Leerzeichen umbrechen. */
.search-control-copy strong,
.search-control-copy small,
.primary-btn,
.report-btn,
.station-route-main,
.saved-route-direction,
.saved-route-edit,
.drive-action-btn {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Desktop bekommt etwas mehr Innenbreite. Die App bleibt bewusst kompakt,
   nutzt aber große Displays nicht künstlich mit Smartphone-Maßen. */
@media (min-width: 1180px) {
  .app-shell {
    max-width: 790px !important;
  }

  .bottom-nav {
    width: min(calc(100% - 32px), 790px) !important;
  }

  .section-map .section-heading,
  .section-map .map-live-actions,
  .section-map .map-status-line,
  .section-map .real-map-wrap,
  .section-map .map-best-sheet {
    max-width: 100% !important;
  }
}

/* Auf sehr breiten Screens bleibt die Arbeitsfläche lesbar statt beliebig breit. */
@media (min-width: 1600px) {
  .app-shell { max-width: 820px !important; }
  .bottom-nav { width: min(calc(100% - 40px), 820px) !important; }
  .map-live-btn > span:last-child { font-size: 13.5px !important; }
}

/* Landscape-Handys: kompakt, aber ohne gequetschte Viererspalte. */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 980px) {
  .map-live-actions.map-live-actions-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .map-live-btn { min-height: 52px !important; }
  .map-live-btn > span:last-child { white-space: nowrap !important; font-size: 12px !important; }
}


/* ======================================================
   TANKLINA 0.10.79 — FINAL UX / RESPONSIVE HARDENING
   Letzte Präsentationsschicht: komponentenbasiert statt
   geräte-/viewportbasiert. Kernlogik bleibt unangetastet.
   ====================================================== */

/* 1) Bedienelemente reagieren auf die TATSÄCHLICH verfügbare Breite. */
.search-control-dock {
  container-type: inline-size !important;
  container-name: tl-quick-controls !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  overflow: visible !important;
}

.search-control-chip {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  grid-template-columns: 38px minmax(0,1fr) 18px !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}

.search-control-copy {
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
.search-control-copy small,
.search-control-copy strong {
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}
.search-control-copy small {
  white-space: nowrap !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
}
.search-control-copy strong {
  white-space: nowrap !important;
  font-size: clamp(12px, 1.9vw, 14px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}
.search-control-chevron {
  width: 18px !important;
  min-width: 18px !important;
  justify-self: end !important;
}

@container tl-quick-controls (max-width: 520px) {
  .search-control-dock { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .search-control-dock > :nth-child(3) { grid-column: 1 / -1 !important; }
  .search-control-copy strong { font-size: 12.5px !important; }
}
@container tl-quick-controls (max-width: 335px) {
  .search-control-dock { grid-template-columns: 1fr !important; }
  .search-control-dock > :nth-child(3) { grid-column: auto !important; }
}

.map-live-actions.map-live-actions-four {
  container-type: inline-size !important;
  container-name: tl-map-actions !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}
.map-live-btn {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 11px 12px !important;
  overflow: hidden !important;
}
.map-live-btn > span:first-child {
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
}
.map-live-btn > span:last-child {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
}
@container tl-map-actions (max-width: 650px) {
  .map-live-actions.map-live-actions-four { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@container tl-map-actions (max-width: 310px) {
  .map-live-actions.map-live-actions-four { grid-template-columns: 1fr !important; }
}

/* 2) Rechenbasis immer kompakt beim Netto-Vorteil sichtbar. */
#calculationBasis {
  display: block !important;
  margin-top: 6px !important;
  max-width: 42ch !important;
  color: #DCEBE5 !important;
  font-size: clamp(10.5px, 1.5vw, 12px) !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}

/* 3) Prominenter, aber ruhiger GPS-Fallback. */
.location-fallback-panel {
  margin-top: 12px !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(255,196,92,.32) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(66,49,18,.88), rgba(18,43,34,.96)) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}
.location-fallback-panel[hidden] { display: none !important; }
.location-fallback-copy { min-width: 0 !important; }
.location-fallback-copy strong,
.location-fallback-copy span { display: block !important; }
.location-fallback-copy strong { color: #FFF4D4 !important; font-size: 13px !important; }
.location-fallback-copy span { margin-top: 3px !important; color: #E4ECE8 !important; font-size: 11.5px !important; line-height: 1.35 !important; }
.location-fallback-search {
  min-height: 46px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}
.location-fallback-search .tl-ui-icon { width: 17px !important; height: 17px !important; }
@media (max-width: 560px) {
  .location-fallback-panel { grid-template-columns: 1fr !important; }
  .location-fallback-search { width: 100% !important; }
}

/* 4) Stabile Ziffern: Preise und Distanzen springen bei Updates nicht. */
.big-price,
.big-price *,
.fuel-price,
.fuel-price *,
.station-card-price,
.station-card-price *,
#netSaving,
#heroSavingsValue,
#mapBestSaving,
.tl-price-bubble strong,
.tl-map-popup .price,
.why-item strong,
.hero-now-fact strong,
.station-meta,
.map-status-line,
[data-money-mode],
[data-value] {
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* 5) Funktionsflächen behalten auch bei hellem Hintergrundbild sicheren Kontrast. */
.today-recommendation-shell,
.home-savings-card,
.search-control-dock,
.section-map,
.station-card,
.map-best-sheet,
.route-stack-panel,
.community-auto-detect,
.savings-moment {
  background-color: rgba(7, 29, 24, .94) !important;
  border-color: rgba(158, 238, 199, .18) !important;
}
.search-control-chip,
.map-live-btn,
.primary-btn,
.secondary-btn,
.report-btn,
.station-route-main,
.saved-route-direction,
.saved-route-edit {
  text-shadow: none !important;
}
.search-control-chip {
  background: linear-gradient(145deg, rgba(18,58,48,.98), rgba(11,38,32,.98)) !important;
  border-color: rgba(168,238,207,.18) !important;
}
.search-control-copy small,
.decision-block-label,
.station-meta,
.trust-line,
.map-status-line,
.hero-now-fact small {
  color: #D5E6DF !important;
}
.search-control-copy strong,
.map-live-btn > span:last-child,
.primary-btn,
.secondary-btn,
.station-card h3,
.map-best-copy strong {
  color: #FFFFFF !important;
}

/* 6) Kleine Screens und Querformat: keine Fixhöhe erzwingt Abschneiden. */
@media (max-width: 430px) {
  .search-control-chip { min-height: 68px !important; }
  .search-control-copy strong { font-size: 12.5px !important; }
  #calculationBasis { max-width: none !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .map-live-actions.map-live-actions-four {
    grid-template-columns: repeat(auto-fit, minmax(145px,1fr)) !important;
  }
  .map-live-btn { min-height: 52px !important; }
  .search-control-chip { min-height: 58px !important; }
}


/* 0.10.79 Fallback für Browser ohne Container Queries + symmetrische Grids. */
@media (max-width: 600px) {
  .search-control-dock > :nth-child(3) { grid-column: 1 / -1 !important; }
}
@media (max-width: 350px) {
  .search-control-dock { grid-template-columns: 1fr !important; }
  .search-control-dock > :nth-child(3) { grid-column: auto !important; }
}
@media (min-width: 481px) and (max-width: 760px) {
  .map-live-actions.map-live-actions-four { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 480px) and (min-width: 330px) {
  .map-live-actions.map-live-actions-four { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 329px) {
  .map-live-actions.map-live-actions-four { grid-template-columns: 1fr !important; }
}

@media (min-width: 365px) and (max-width: 385px) {
  .search-control-chevron { display: none !important; }
  .search-control-chip { grid-template-columns: 34px minmax(0,1fr) !important; column-gap: 8px !important; }
}


/* ======================================================
   TANKLINA 0.10.80 — CI SIGNATURE / ULTRA PREMIUM PASS
   Reine Designschicht. Keine Texte, Logik, APIs, Routing-
   oder Speicherfunktionen werden verändert.
   ====================================================== */

:root {
  --tl-ink-0: #03130f;
  --tl-ink-1: #061d17;
  --tl-ink-2: #0a2b22;
  --tl-mint-1: #58f0b2;
  --tl-mint-2: #8cf8c8;
  --tl-mint-3: #c8ffe7;
  --tl-gold-1: #efb24b;
  --tl-gold-2: #ffd889;
  --tl-hairline: rgba(160,255,214,.18);
  --tl-hairline-strong: rgba(160,255,214,.31);
  --tl-glass-deep: rgba(5,27,21,.84);
  --tl-glass-soft: rgba(11,46,36,.68);
  --tl-glow-mint: 0 0 34px rgba(88,240,178,.16);
  --tl-glow-gold: 0 0 34px rgba(239,178,75,.14);
}

html { background: var(--tl-ink-0) !important; }
body.theme-dark {
  background:
    radial-gradient(circle at 50% -8%, rgba(60,229,160,.10), transparent 34%),
    radial-gradient(circle at 8% 38%, rgba(42,175,212,.06), transparent 32%),
    radial-gradient(circle at 92% 68%, rgba(116,255,190,.06), transparent 30%),
    #041710 !important;
}

/* The app gains a very subtle central stage without boxing in the content. */
.app-shell {
  position: relative !important;
  isolation: isolate !important;
}
.app-shell::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 50%;
  width: min(100vw, 840px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,50,38,.18), rgba(2,20,15,.42) 48%, rgba(2,16,12,.56)),
    radial-gradient(circle at 50% 12%, rgba(87,246,178,.08), transparent 40%);
  border-inline: 1px solid rgba(116,255,199,.055);
  box-shadow: 0 0 96px rgba(0,0,0,.20);
}

/* ---------- Brand lockup ---------- */
.topbar {
  background:
    linear-gradient(145deg, rgba(8,37,29,.88), rgba(4,24,19,.92)) !important;
  border: 1px solid rgba(147,255,210,.18) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.065),
    0 0 0 1px rgba(31,140,101,.04) !important;
  backdrop-filter: blur(28px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
}
.topbar::before {
  content:"";
  position:absolute;
  inset:0 12% auto;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(142,255,208,.68), transparent);
  opacity:.72;
  pointer-events:none;
}
.brand-logo,
.floating-home-logo img {
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.30))
    drop-shadow(0 0 16px rgba(85,237,174,.13)) !important;
}
.brand-copy .brand {
  letter-spacing: -.045em !important;
  text-shadow: 0 8px 24px rgba(0,0,0,.30) !important;
}

/* The existing TankLina tagline becomes the human brand signature.
   No wording changes: only the typeface and presentation change. */
.brand-copy .tagline {
  font-family: 'Sacramento', 'Segoe Script', 'Brush Script MT', cursive !important;
  font-size: clamp(21px, 3.4vw, 27px) !important;
  line-height: .98 !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
  color: #72f4b7 !important;
  margin-top: -1px !important;
  transform: rotate(-1.25deg) !important;
  transform-origin: left center !important;
  text-shadow:
    0 0 16px rgba(78,242,171,.26),
    0 2px 10px rgba(0,0,0,.34) !important;
  position: relative !important;
  width: max-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}
.brand-copy .tagline::after {
  content:"";
  position:absolute;
  left:10%;
  right:-5%;
  bottom:-5px;
  height:9px;
  border-bottom: 1.6px solid rgba(112,244,183,.84);
  border-radius: 50%;
  transform: rotate(-2deg) skewX(-12deg);
  filter: drop-shadow(0 0 6px rgba(88,240,178,.20));
}

/* A second, deliberately small signature accent for existing emotional copy. */
.tank-stop-quick-copy small {
  font-family: 'Sacramento', 'Segoe Script', 'Brush Script MT', cursive !important;
  font-size: clamp(18px, 4.6vw, 22px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  color: #a7fbd3 !important;
  text-shadow: 0 0 12px rgba(86,241,175,.16) !important;
}

/* ---------- Hero: flagship surface ---------- */
.hero-card {
  position: relative !important;
  overflow: visible !important;
}
.hero-card::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:4%; right:4%; top:3%;
  height:46%;
  border-radius: 44px;
  background: radial-gradient(circle at 50% 12%, rgba(83,247,179,.12), transparent 66%);
  filter: blur(20px);
  pointer-events:none;
}
.today-recommendation-shell {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 82% 2%, rgba(80,244,178,.12), transparent 31%),
    linear-gradient(145deg, rgba(10,49,38,.94), rgba(4,26,20,.96) 60%, rgba(3,21,16,.98)) !important;
  border: 1px solid rgba(151,255,211,.22) !important;
  box-shadow:
    0 34px 80px rgba(0,0,0,.34),
    0 0 42px rgba(74,236,166,.06),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.44) !important;
}
.today-recommendation-shell::before {
  content:"";
  position:absolute;
  inset:0 8% auto;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(144,255,209,.64), transparent);
  opacity:.80;
  pointer-events:none;
}
.today-recommendation-shell::after {
  content:"";
  position:absolute;
  width:220px; height:220px;
  right:-90px; top:-110px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(74,239,170,.13), transparent 68%);
  pointer-events:none;
}
.recommendation-title {
  color:#dff9ed !important;
  letter-spacing:-.025em !important;
}
.recommendation-title > span {
  background: linear-gradient(145deg, rgba(88,240,178,.18), rgba(88,240,178,.05)) !important;
  border: 1px solid rgba(128,255,201,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.16) !important;
}

.decision-target-grid,
.decision-benefit-strip {
  gap: 10px !important;
}
.decision-station-block,
.decision-price-block,
.benefit-saving,
.benefit-security {
  background:
    linear-gradient(145deg, rgba(12,55,42,.76), rgba(7,34,27,.70)) !important;
  border: 1px solid rgba(139,255,207,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 28px rgba(0,0,0,.16) !important;
}
.decision-price-block {
  background:
    radial-gradient(circle at 82% 18%, rgba(239,178,75,.10), transparent 46%),
    linear-gradient(145deg, rgba(34,57,38,.82), rgba(10,36,28,.78)) !important;
  border-color: rgba(246,200,111,.18) !important;
}
.big-price {
  color: #ffd685 !important;
  text-shadow: 0 0 18px rgba(239,178,75,.13) !important;
}
#netSaving {
  letter-spacing: -.045em !important;
  text-shadow: 0 0 20px rgba(89,244,178,.13) !important;
}

/* Trust information reads like an instrument strip instead of a paragraph. */
.trust-line {
  background: rgba(2,20,15,.42) !important;
  border: 1px solid rgba(147,255,210,.10) !important;
  border-radius: 999px !important;
  padding: 8px 11px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.trust-dot { box-shadow: 0 0 12px currentColor !important; }

/* ---------- Controls: premium tactile material ---------- */
.primary-btn,
.map-live-btn.primary-map,
.map-best-go,
.saved-route-direction.primary {
  background:
    linear-gradient(180deg, rgba(139,255,205,.96), rgba(64,205,141,.98)) !important;
  color: #06271d !important;
  border: 1px solid rgba(210,255,234,.55) !important;
  box-shadow:
    0 14px 30px rgba(26,171,109,.23),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.12) !important;
  text-shadow: none !important;
}
.primary-btn:hover,
.map-live-btn.primary-map:hover,
.map-best-go:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.05) brightness(1.035) !important;
}
.primary-btn:active,
.map-live-btn.primary-map:active,
.map-best-go:active {
  transform: translateY(1px) scale(.995) !important;
}
.secondary-btn,
.map-live-btn:not(.primary-map),
.search-control-chip,
.fuel-switch-btn {
  background:
    linear-gradient(145deg, rgba(20,66,51,.82), rgba(7,38,29,.78)) !important;
  border: 1px solid rgba(145,255,209,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 24px rgba(0,0,0,.15) !important;
}
.secondary-btn:hover,
.map-live-btn:not(.primary-map):hover,
.search-control-chip:hover,
.fuel-switch-btn:hover {
  border-color: rgba(145,255,209,.30) !important;
  background:
    linear-gradient(145deg, rgba(25,79,60,.88), rgba(8,44,34,.84)) !important;
}

/* The tank ribbon becomes a refined gold material, not a flat orange bar. */
.sticky-tank-ribbon {
  background:
    radial-gradient(circle at 82% 0%, rgba(255,237,187,.35), transparent 30%),
    linear-gradient(135deg, #b96b1c 0%, #db942d 48%, #f3c76b 100%) !important;
  border: 1px solid rgba(255,223,155,.56) !important;
  color: #fffaf0 !important;
  box-shadow:
    0 16px 34px rgba(112,64,14,.27),
    0 0 28px rgba(238,177,70,.12),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(83,44,5,.18) !important;
}
.sticky-tank-ribbon-icon {
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* ---------- Search command deck ---------- */
.search-control-dock {
  position: relative !important;
  padding: 10px !important;
  border-radius: 25px !important;
  background:
    linear-gradient(145deg, rgba(7,34,27,.94), rgba(4,25,20,.91)) !important;
  border: 1px solid rgba(150,255,211,.16) !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.search-control-dock::before {
  content:"";
  position:absolute;
  left:12%; right:12%; top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(119,247,191,.46),transparent);
}
.search-control-icon,
.fuel-switch-icon {
  background: linear-gradient(145deg, rgba(82,240,173,.13), rgba(30,115,83,.10)) !important;
  border-color: rgba(122,252,195,.16) !important;
}

/* ---------- Sections / map / station cards ---------- */
.section.section-chapter {
  background:
    linear-gradient(160deg, rgba(7,36,28,.86), rgba(4,24,19,.90)) !important;
  border: 1px solid rgba(145,255,209,.13) !important;
  box-shadow:
    0 28px 58px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.chapter-icon {
  background:
    radial-gradient(circle at 50% 38%, rgba(84,243,176,.14), transparent 62%),
    rgba(16,57,45,.70) !important;
  border-color: rgba(130,255,200,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.16) !important;
}
.eyebrow {
  color:#90f5c4 !important;
  letter-spacing:.13em !important;
}
.chapter-heading h2 {
  letter-spacing:-.045em !important;
  text-shadow:0 12px 30px rgba(0,0,0,.28) !important;
}
.chapter-subtitle { color:#d2e3dc !important; }

.real-map-wrap {
  border: 1px solid rgba(161,255,216,.22) !important;
  box-shadow:
    0 24px 52px rgba(0,0,0,.28),
    0 0 28px rgba(72,224,160,.055),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.map-best-sheet {
  background:
    linear-gradient(145deg, rgba(7,35,27,.96), rgba(3,22,17,.97)) !important;
  border:1px solid rgba(148,255,211,.17) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.station-card {
  background:
    radial-gradient(circle at 88% 8%, rgba(78,238,170,.07), transparent 35%),
    linear-gradient(150deg, rgba(8,39,30,.95), rgba(4,25,20,.97)) !important;
  border:1px solid rgba(144,255,208,.14) !important;
  box-shadow:
    0 22px 46px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.station-card:hover {
  border-color: rgba(144,255,208,.26) !important;
  box-shadow:
    0 28px 58px rgba(0,0,0,.28),
    0 0 28px rgba(77,235,168,.055),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.station-card-photo,
.map-best-photo {
  filter: saturate(1.05) contrast(1.02) brightness(.96) !important;
}

/* ---------- Bottom nav: floating product-grade dock ---------- */
.bottom-nav {
  background:
    linear-gradient(145deg, rgba(5,29,22,.96), rgba(3,21,16,.95)) !important;
  border:1px solid rgba(147,255,210,.16) !important;
  box-shadow:
    0 24px 56px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 30px rgba(73,223,159,.045) !important;
  backdrop-filter: blur(28px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
}
.bottom-nav .nav-item {
  transition: transform .22s ease, background .22s ease, color .22s ease !important;
}
.bottom-nav .nav-item.active {
  color:#e9fff4 !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(95,244,181,.18), transparent 66%),
    rgba(30,98,72,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(73,225,160,.07) !important;
}
.bottom-nav .nav-item.active::after {
  background: linear-gradient(90deg, transparent, #75f4b9, transparent) !important;
  box-shadow: 0 0 12px rgba(88,240,178,.38) !important;
}

/* ---------- Focus/accessibility remains first-class ---------- */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(132,255,204,.95) !important;
  outline-offset: 3px !important;
}

@media (max-width: 560px) {
  .brand-copy .tagline {
    font-size: clamp(20px, 6.4vw, 24px) !important;
  }
  .today-recommendation-shell {
    box-shadow:
      0 24px 52px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.065) !important;
  }
  .search-control-dock { padding:8px !important; }
  .section.section-chapter { box-shadow:0 20px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035) !important; }
}

@media (min-width: 900px) {
  .topbar,
  .today-recommendation-shell,
  .section.section-chapter,
  .search-control-dock {
    backdrop-filter: blur(30px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(140%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-btn,
  .map-live-btn,
  .station-card,
  .bottom-nav .nav-item { transition:none !important; }
}

@media (forced-colors: active) {
  .brand-copy .tagline,
  .tank-stop-quick-copy small {
    font-family: Inter, system-ui, sans-serif !important;
    color: CanvasText !important;
    text-shadow:none !important;
    transform:none !important;
  }
  .brand-copy .tagline::after { display:none !important; }
}

/* ======================================================
   TANKLINA 0.10.81 — GLOBAL FLAGSHIP / REFERENCE SIGNATURE
   Ausschließlich visuelle Ebene. Keine Texte, Datenlogik,
   Standort-, API-, Routing-, Community- oder Speicherlogik.
   ====================================================== */

:root {
  --tl81-obsidian: #031510;
  --tl81-emerald-black: #06241b;
  --tl81-emerald-deep: #0a3528;
  --tl81-mint: #79f3bc;
  --tl81-mint-bright: #b9ffdc;
  --tl81-gold: #e7aa43;
  --tl81-gold-light: #f7d783;
  --tl81-white: #f6fff9;
  --tl81-muted: #b9cec4;
  --tl81-border: rgba(151,255,210,.22);
  --tl81-border-soft: rgba(151,255,210,.115);
  --tl81-shadow: 0 28px 76px rgba(0,0,0,.38);
  --tl81-radius-xl: 30px;
  --tl81-radius-lg: 24px;
  --tl81-radius-md: 18px;
}

/* The background remains cinematic, but behaves like a premium backdrop,
   not like competing content. */
.cinematic-backdrop::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 13%, rgba(87,241,178,.07), transparent 28%),
    linear-gradient(90deg, rgba(2,17,13,.56) 0%, rgba(2,17,13,.24) 24%, rgba(2,17,13,.10) 50%, rgba(2,17,13,.24) 76%, rgba(2,17,13,.56) 100%),
    linear-gradient(180deg, rgba(2,14,11,.10), rgba(2,14,11,.32));
  z-index:1;
}

.app-shell {
  width: min(100%, 748px) !important;
  max-width: 748px !important;
}

/* ----- Reference-matched brand signature ----- */
.brand-copy .tagline {
  display:block !important;
  width: clamp(182px, 30vw, 226px) !important;
  height: clamp(70px, 11.5vw, 87px) !important;
  margin-top: -8px !important;
  background: url('assets/ci/tanklina-signature-reference.png') left center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  transform: none !important;
  filter:
    drop-shadow(0 0 8px rgba(115,244,184,.16))
    drop-shadow(0 8px 14px rgba(0,0,0,.18));
  opacity:.98 !important;
}
.brand-copy .tagline::after { display:none !important; }

/* Only human/emotional microcopy receives the same restrained handwriting
   language. Functional labels and numbers remain precise sans-serif. */
.tank-stop-quick-copy small,
.savings-since {
  font-family: 'Bad Script', 'Segoe Print', cursive !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  color: #a8f6cf !important;
  text-shadow: 0 0 12px rgba(91,239,176,.13) !important;
}
.tank-stop-quick-copy small {
  font-size: clamp(17px, 3.2vw, 21px) !important;
  line-height: 1.08 !important;
}
.savings-since {
  font-size: clamp(18px, 3.4vw, 23px) !important;
  line-height: 1.12 !important;
}

/* ----- Brand header: machined glass + precise light ----- */
.topbar {
  min-height: 126px !important;
  padding: 17px 20px !important;
  border-radius: 31px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(126,255,203,.105), transparent 34%),
    linear-gradient(154deg, rgba(8,41,31,.965), rgba(3,23,18,.975) 62%, rgba(2,17,13,.985)) !important;
  border: 1px solid rgba(164,255,214,.245) !important;
  box-shadow:
    0 30px 70px rgba(0,0,0,.40),
    0 0 0 1px rgba(10,89,64,.15),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.24) !important;
}
.topbar::before {
  inset:0 8% auto !important;
  background:linear-gradient(90deg, transparent, rgba(197,255,230,.74), rgba(94,245,176,.68), transparent) !important;
  opacity:.62 !important;
}
.topbar::after {
  content:"";
  position:absolute;
  pointer-events:none;
  top:1px; left:9%; right:9%;
  height:38%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent);
  filter:blur(4px);
}
.brand-home-link {
  min-width:0 !important;
  align-items:center !important;
}
.brand-logo {
  border-radius:24px !important;
  box-shadow:
    0 0 0 1px rgba(177,255,221,.22),
    0 18px 34px rgba(0,0,0,.34),
    0 0 28px rgba(80,241,171,.09) !important;
}
.brand-copy .brand {
  color:var(--tl81-white) !important;
  font-size:clamp(38px,7vw,53px) !important;
  line-height:.88 !important;
  letter-spacing:-.055em !important;
}
.settings-access-btn,
.icon-btn.settings-access-btn {
  border:1px solid rgba(169,255,215,.17) !important;
  background:linear-gradient(160deg, rgba(16,53,42,.80), rgba(5,28,22,.91)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.22) !important;
}

/* ----- Tankstop ribbon: satin metal instead of startup orange ----- */
.sticky-tank-ribbon {
  position:relative !important;
  overflow:hidden !important;
  min-height:74px !important;
  border-radius:25px !important;
  color:#fffaf0 !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,231,167,.30), transparent 28%),
    linear-gradient(105deg, #a86d25 0%, #c98b34 28%, #e6b554 66%, #d29a3f 100%) !important;
  border:1px solid rgba(255,225,158,.50) !important;
  box-shadow:
    0 18px 38px rgba(71,42,5,.30),
    inset 0 1px 0 rgba(255,255,255,.33),
    inset 0 -1px 0 rgba(92,51,5,.22) !important;
}
.sticky-tank-ribbon::after {
  content:"";
  position:absolute;
  inset:-70% auto -70% -28%;
  width:34%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  pointer-events:none;
}
.sticky-tank-ribbon-icon {
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.24) !important;
}

/* ----- Flagship recommendation panel ----- */
.today-recommendation-shell {
  border-radius:var(--tl81-radius-xl) !important;
  background:
    radial-gradient(circle at 84% 0%, rgba(82,246,178,.125), transparent 30%),
    linear-gradient(152deg, rgba(8,45,34,.98), rgba(3,25,19,.985) 62%, rgba(2,18,14,.99)) !important;
  border:1px solid rgba(157,255,211,.245) !important;
  box-shadow:
    0 38px 88px rgba(0,0,0,.42),
    0 0 46px rgba(64,227,157,.045),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(0,0,0,.15) !important;
}
.today-recommendation-shell::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(120deg, rgba(255,255,255,.03), transparent 24%),
    radial-gradient(circle at 6% 2%, rgba(120,255,201,.085), transparent 25%);
}
.today-recommendation-shell > * { position:relative; z-index:1; }
.recommendation-title strong {
  font-size:clamp(23px,4.5vw,31px) !important;
  letter-spacing:-.035em !important;
}
.decision-badge,
.fuel-label {
  border-radius:999px !important;
  background:rgba(6,30,23,.60) !important;
  border:1px solid rgba(159,255,214,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#decisionTitle,
.decision-intro h2 {
  font-size:clamp(35px,7.2vw,52px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  max-width:13ch !important;
}
.hero-copy,
#decisionText {
  color:#d2e4dc !important;
  line-height:1.45 !important;
}

/* ----- The actual decision numbers read like a premium instrument panel ----- */
.hero-station-row,
.hero-net-card,
.hero-distance-row,
.calculation-card,
.station-meta,
.station-benefit-box {
  border-color:rgba(155,255,211,.15) !important;
}
.hero-station-row {
  gap:12px !important;
  padding:12px !important;
  border-radius:22px !important;
  background:rgba(7,34,26,.64) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.hero-station-row > * {
  border-radius:18px !important;
  background:linear-gradient(160deg, rgba(8,40,31,.88), rgba(4,27,21,.92)) !important;
  border:1px solid rgba(155,255,211,.115) !important;
}
.hero-net-card {
  position:relative !important;
  overflow:hidden !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(239,183,75,.11), transparent 36%),
    linear-gradient(152deg, rgba(8,44,32,.92), rgba(5,31,23,.96)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.hero-net-card::after {
  content:"";
  position:absolute;
  width:240px; height:90px;
  right:-86px; bottom:-62px;
  border:1px solid rgba(158,255,212,.17);
  border-radius:50%;
  transform:rotate(-8deg);
  pointer-events:none;
}
#decisionNet,
.hero-net-value {
  color:#f3cc68 !important;
  text-shadow:0 9px 24px rgba(138,84,0,.17) !important;
  letter-spacing:-.055em !important;
  font-variant-numeric:tabular-nums !important;
}
.hero-price,
.station-card-price,
.savings-amount,
.savings-stat-value,
.map-best-net,
.map-net-bubble {
  font-variant-numeric:tabular-nums !important;
}

/* ----- Main action controls: calmer, richer, more exact ----- */
.primary-btn,
.drive-action-primary,
.station-route-main,
.location-primary-btn,
.settings-save-btn {
  border-radius:18px !important;
  background:
    linear-gradient(180deg, rgba(124,246,187,.98), rgba(63,201,139,.96)) !important;
  color:#041812 !important;
  border:1px solid rgba(201,255,229,.54) !important;
  box-shadow:
    0 16px 34px rgba(25,157,101,.18),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(2,77,49,.18) !important;
  font-weight:800 !important;
}
.primary-btn:hover,
.drive-action-primary:hover,
.station-route-main:hover,
.location-primary-btn:hover,
.settings-save-btn:hover {
  transform:translateY(-1px) !important;
  box-shadow:
    0 19px 42px rgba(25,157,101,.22),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
}

/* ----- Search / preference dock: precise dashboard controls ----- */
.search-control-dock {
  background:linear-gradient(154deg, rgba(6,34,26,.91), rgba(3,23,18,.95)) !important;
  border:1px solid rgba(155,255,211,.16) !important;
  box-shadow:0 24px 52px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.search-control-chip {
  border-radius:18px !important;
  background:linear-gradient(160deg, rgba(11,47,36,.76), rgba(4,29,22,.82)) !important;
  border:1px solid rgba(155,255,211,.125) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.search-control-chip:hover {
  border-color:rgba(155,255,211,.25) !important;
  background:linear-gradient(160deg, rgba(14,57,43,.84), rgba(5,33,25,.89)) !important;
}
.search-control-icon {
  border-radius:14px !important;
  background:rgba(70,226,157,.075) !important;
  border:1px solid rgba(123,246,188,.13) !important;
}

/* ----- Sections and cards share one executive material system ----- */
.section,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.station-card,
.map-best-sheet,
.settings-panel,
.dialog-card {
  background:
    linear-gradient(154deg, rgba(7,39,30,.935), rgba(3,24,18,.965)) !important;
  border-color:rgba(155,255,211,.145) !important;
  box-shadow:
    0 26px 64px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.station-card {
  border-radius:26px !important;
}
.station-photo-wrap,
.station-card-photo,
.map-best-photo {
  border-radius:20px !important;
}
.station-card:hover {
  border-color:rgba(155,255,211,.245) !important;
  transform:translateY(-2px) !important;
  box-shadow:
    0 30px 72px rgba(0,0,0,.35),
    0 0 30px rgba(66,229,159,.04),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* ----- Map gets its own premium instrument frame ----- */
.map-frame,
.map-wrap,
#map {
  border-radius:24px !important;
}
.map-frame,
.map-wrap {
  border:1px solid rgba(159,255,214,.18) !important;
  box-shadow:
    0 26px 64px rgba(0,0,0,.34),
    0 0 0 5px rgba(3,27,20,.42),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ----- Bottom navigation: automotive-console restraint ----- */
.bottom-nav {
  background:linear-gradient(180deg, rgba(5,31,24,.955), rgba(2,20,15,.985)) !important;
  border:1px solid rgba(156,255,211,.15) !important;
  box-shadow:
    0 -8px 34px rgba(0,0,0,.24),
    0 18px 48px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter:blur(26px) saturate(128%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(128%) !important;
}
.bottom-nav .nav-item {
  border-radius:15px !important;
}
.bottom-nav .nav-item.active {
  background:linear-gradient(180deg, rgba(78,225,159,.15), rgba(61,189,134,.075)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 22px rgba(70,229,158,.055) !important;
}

/* ----- Typography / contrast polish ----- */
.section-heading,
.chapter-heading,
.station-title-copy h3,
.saved-route-copy strong,
.savings-head h2,
.map-heading h2 {
  color:var(--tl81-white) !important;
  letter-spacing:-.035em !important;
}
.sub,
.meta,
.station-address-sub,
.search-control-copy small,
.saved-route-copy small,
.savings-moment small {
  color:var(--tl81-muted) !important;
}

/* Slightly larger breathing room on desktop without changing mobile behavior. */
@media (min-width: 900px) {
  .app-shell { padding-inline: 20px !important; }
  .topbar { padding-inline: 24px !important; }
  .today-recommendation-shell { padding: 24px !important; }
  .section { padding: 22px !important; }
}

@media (max-width: 560px) {
  .topbar {
    min-height:112px !important;
    padding:14px 14px !important;
    border-radius:27px !important;
  }
  .brand-copy .brand {
    font-size:clamp(31px, 10vw, 43px) !important;
  }
  .brand-copy .tagline {
    width:clamp(150px, 49vw, 194px) !important;
    height:clamp(58px, 18.8vw, 75px) !important;
    margin-top:-8px !important;
  }
  .sticky-tank-ribbon {
    min-height:66px !important;
    border-radius:22px !important;
  }
  #decisionTitle,
  .decision-intro h2 {
    font-size:clamp(32px, 10.8vw, 45px) !important;
  }
  .today-recommendation-shell {
    border-radius:27px !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .topbar,
  .today-recommendation-shell,
  .sticky-tank-ribbon,
  .search-control-dock {
    animation: tl81-material-in .55s cubic-bezier(.2,.72,.25,1) both;
  }
  .today-recommendation-shell { animation-delay:.04s; }
  .search-control-dock { animation-delay:.08s; }
}
@keyframes tl81-material-in {
  from { opacity:.93; transform:translateY(5px); }
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .today-recommendation-shell,
  .sticky-tank-ribbon,
  .search-control-dock { animation:none !important; }
}

/* ======================================================
   TANKLINA 0.10.82 — CORPORATE FLAGSHIP / CI MASTER PASS
   Ausschließlich Design und Präsentation. Keine sichtbaren
   Texte, Datenlogik, API-, Standort-, Routing-, Community-
   oder Speicherfunktionen werden verändert.
   ====================================================== */

:root {
  --tl82-ink-0:#02120e;
  --tl82-ink-1:#051c16;
  --tl82-ink-2:#0a2a21;
  --tl82-surface:rgba(5,29,22,.965);
  --tl82-surface-2:rgba(8,39,30,.93);
  --tl82-mint:#75efb8;
  --tl82-mint-hi:#baf9d9;
  --tl82-gold:#e7ad4a;
  --tl82-gold-hi:#f5cf78;
  --tl82-text:#f7fff9;
  --tl82-muted:#b7cbc2;
  --tl82-line:rgba(155,255,211,.155);
  --tl82-line-hi:rgba(170,255,220,.27);
  --tl82-shadow-lg:0 30px 72px rgba(0,0,0,.36);
  --tl82-shadow-md:0 18px 42px rgba(0,0,0,.27);
  --tl82-radius-xl:28px;
  --tl82-radius-lg:22px;
  --tl82-radius-md:17px;
}

html,
body {
  background-color:var(--tl82-ink-0) !important;
}

body.theme-dark {
  color:var(--tl82-text) !important;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 1 !important;
  text-rendering:optimizeLegibility;
}

/* Central stage: quieter, more architectural, less startup-glow. */
.cinematic-backdrop::after {
  background:
    radial-gradient(circle at 51% 7%, rgba(102,241,179,.055), transparent 29%),
    linear-gradient(90deg, rgba(2,16,12,.62), rgba(2,16,12,.21) 25%, rgba(2,16,12,.10) 50%, rgba(2,16,12,.21) 75%, rgba(2,16,12,.62)),
    linear-gradient(180deg, rgba(2,13,10,.09), rgba(2,13,10,.38)) !important;
}

.app-shell {
  width:min(100%, 770px) !important;
  max-width:770px !important;
  padding-inline:clamp(10px, 2.1vw, 20px) !important;
}

/* ---------- Header / corporate brand lockup ---------- */
.topbar {
  min-height:118px !important;
  padding:17px 20px !important;
  border-radius:26px !important;
  background:
    linear-gradient(155deg, rgba(8,40,31,.965), rgba(3,24,18,.985) 67%, rgba(2,18,14,.992)) !important;
  border:1px solid var(--tl82-line-hi) !important;
  box-shadow:
    0 30px 68px rgba(0,0,0,.39),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.36) !important;
  overflow:hidden !important;
}
.topbar::before {
  inset:0 9% auto !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(200,255,231,.66), rgba(110,244,184,.58), transparent) !important;
  opacity:.78 !important;
}
.topbar::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), transparent 33%),
    radial-gradient(circle at 12% 0%, rgba(120,255,201,.045), transparent 27%) !important;
  filter:none !important;
}

/* The in-flow symbol stays removed. The always-visible home logo is the
   single authoritative TankLina symbol and sits on the RIGHT. */
.brand-home-link .brand-logo {
  display:none !important;
}
.brand-home-link {
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  max-width:calc(100% - 164px) !important;
  padding-left:2px !important;
}
.brand-copy {
  min-width:0 !important;
  display:grid !important;
  align-content:center !important;
  justify-items:start !important;
  gap:0 !important;
}
.brand-copy .brand {
  color:var(--tl82-text) !important;
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif !important;
  font-size:clamp(37px, 6.2vw, 51px) !important;
  line-height:.93 !important;
  letter-spacing:-.058em !important;
  font-weight:800 !important;
  text-shadow:0 12px 26px rgba(0,0,0,.28) !important;
}

/* Exact reference-style handwriting as a fixed image asset: same rendering
   on Pixel, Samsung, iPhone, tablet and desktop. */
.brand-copy .tagline {
  display:block !important;
  width:clamp(166px, 27vw, 196px) !important;
  height:clamp(72px, 11.7vw, 86px) !important;
  margin-top:-7px !important;
  background:url('assets/ci/signature-tanken-reference-style.png') left center / 100% 100% no-repeat !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
  transform:none !important;
  filter:drop-shadow(0 0 7px rgba(110,244,184,.14)) drop-shadow(0 7px 13px rgba(0,0,0,.20)) !important;
}
.brand-copy .tagline::after { display:none !important; }

/* Always-visible logo: fixed on the RIGHT edge of the app stage. */
.floating-home-logo {
  position:fixed !important;
  z-index:520 !important;
  top:max(18px, calc(env(safe-area-inset-top) + 14px)) !important;
  left:auto !important;
  right:max(16px, calc((100vw - 770px)/2 + 28px)) !important;
  width:72px !important;
  height:72px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.13), transparent 33%),
    linear-gradient(150deg, rgba(15,57,44,.96), rgba(3,27,20,.98)) !important;
  border:1px solid rgba(184,255,223,.31) !important;
  box-shadow:
    0 22px 50px rgba(0,0,0,.38),
    0 0 0 1px rgba(81,220,157,.08),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
  backdrop-filter:blur(24px) saturate(128%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(128%) !important;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.floating-home-logo img {
  width:57px !important;
  height:57px !important;
  border-radius:17px !important;
  object-fit:cover !important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.26)) !important;
}
.floating-home-logo:hover,
.floating-home-logo:focus-visible {
  transform:translateY(-2px) scale(1.025) !important;
  border-color:rgba(195,255,229,.50) !important;
  box-shadow:
    0 26px 58px rgba(0,0,0,.42),
    0 0 24px rgba(83,235,169,.08),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  outline:none !important;
}
.floating-home-logo:active { transform:translateY(0) scale(.985) !important; }

/* Reserve the right side of the header for the persistent logo. */
.topbar-actions {
  margin-left:auto !important;
  margin-right:84px !important;
  min-width:54px !important;
}
.settings-access-btn,
.icon-btn.settings-access-btn {
  width:54px !important;
  min-width:54px !important;
  height:54px !important;
  min-height:54px !important;
  border-radius:18px !important;
  background:linear-gradient(155deg, rgba(13,50,39,.84), rgba(4,28,21,.94)) !important;
  border:1px solid rgba(170,255,218,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 12px 26px rgba(0,0,0,.20) !important;
}

/* ---------- Handwriting language: only emotional microcopy ---------- */
.tank-stop-quick-copy small {
  display:block !important;
  width:clamp(126px, 25vw, 162px) !important;
  height:clamp(34px, 6.6vw, 44px) !important;
  margin-top:2px !important;
  background:url('assets/ci/signature-jeder-liter-zaehlt.png') left center / 100% 100% no-repeat !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-shadow:none !important;
  filter:drop-shadow(0 0 6px rgba(109,244,184,.11)) !important;
}

/* Keep the full original sentence while using the signature only where it
   adds humanity. The visible wording remains exactly the same. */
.savings-since {
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  color:transparent !important;
  font-size:0 !important;
  font-family:'Inter',system-ui,sans-serif !important;
  text-shadow:none !important;
}
.savings-since::before {
  content:"";
  display:block;
  flex:0 0 auto;
  width:clamp(138px, 28vw, 176px);
  height:clamp(38px, 7.6vw, 50px);
  background:url('assets/ci/signature-jeder-liter-zaehlt.png') left center / 100% 100% no-repeat;
  filter:drop-shadow(0 0 6px rgba(109,244,184,.10));
}
.savings-since::after {
  content:"– seit dem ersten Tag";
  color:#aebfb7;
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;
  line-height:1.2;
  font-weight:650;
  letter-spacing:.025em;
  white-space:nowrap;
}

/* ---------- Surface system: less template-like, more executive ---------- */
.today-recommendation-shell,
.section,
.station-card,
.map-best-sheet,
.route-stack-panel,
.community-auto-detect,
.savings-moment,
.search-control-dock,
.settings-panel,
.dialog-card {
  border-color:var(--tl82-line) !important;
  background:
    linear-gradient(152deg, rgba(8,41,31,.955), rgba(3,25,19,.976) 66%, rgba(2,19,15,.985)) !important;
  box-shadow:
    var(--tl82-shadow-md),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.26) !important;
}
.today-recommendation-shell {
  border-radius:26px !important;
  box-shadow:
    0 34px 82px rgba(0,0,0,.41),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 0 0 1px rgba(44,126,93,.08) !important;
}
.today-recommendation-shell::before {
  background:
    linear-gradient(118deg, rgba(255,255,255,.026), transparent 22%),
    radial-gradient(circle at 8% 0%, rgba(114,244,184,.055), transparent 23%) !important;
}

/* Visual hierarchy: one dominant decision, supporting data stays quiet. */
.recommendation-title strong,
.section-heading,
.savings-head h2,
.map-heading h2 {
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
}
#decisionTitle,
.decision-intro h2 {
  max-width:14ch !important;
  text-wrap:balance !important;
  color:var(--tl82-text) !important;
}
.hero-copy,
#decisionText,
.station-address-sub,
.sub,
.meta,
.search-control-copy small,
.saved-route-copy small {
  color:var(--tl82-muted) !important;
}

.hero-station-row,
.hero-net-card,
.hero-distance-row,
.calculation-card,
.station-meta,
.station-benefit-box {
  border-color:rgba(166,255,217,.13) !important;
}
.hero-station-row {
  background:rgba(4,28,21,.52) !important;
}
.hero-station-row > * {
  background:linear-gradient(155deg, rgba(9,42,32,.82), rgba(4,28,21,.90)) !important;
}
.hero-net-card {
  background:
    radial-gradient(circle at 91% 10%, rgba(235,177,72,.085), transparent 34%),
    linear-gradient(150deg, rgba(8,41,31,.92), rgba(4,29,22,.96)) !important;
}
#decisionNet,
.hero-net-value {
  color:#f0cc70 !important;
  text-shadow:none !important;
}
.big-price,
.station-card-price,
.savings-amount,
.savings-stat-value,
.map-best-net,
.map-net-bubble,
#decisionNet,
.hero-net-value {
  font-variant-numeric:tabular-nums !important;
  font-feature-settings:"tnum" 1,"kern" 1 !important;
}

/* Premium controls: simpler materials, stronger hierarchy. */
.primary-btn,
.drive-action-primary,
.station-route-main,
.location-primary-btn,
.settings-save-btn,
.map-live-btn.primary-map,
.map-best-go {
  border-radius:17px !important;
  background:linear-gradient(180deg, #8cf2bf, #4dce90) !important;
  color:#031a13 !important;
  border:1px solid rgba(214,255,235,.48) !important;
  box-shadow:
    0 14px 28px rgba(22,146,93,.18),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(4,79,51,.19) !important;
}

/* Champagne action – metallic, not orange. */
.sticky-tank-ribbon {
  min-height:72px !important;
  border-radius:22px !important;
  background:
    linear-gradient(104deg, #9c6a2d 0%, #b98235 24%, #d9aa55 61%, #e9c66f 78%, #c7903f 100%) !important;
  border:1px solid rgba(255,225,164,.43) !important;
  box-shadow:
    0 18px 38px rgba(55,35,8,.27),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(79,48,9,.24) !important;
}
.sticky-tank-ribbon::after {
  width:24% !important;
  opacity:.54 !important;
}

/* Search controls read as one calibrated console, not three unrelated cards. */
.search-control-dock {
  border-radius:24px !important;
  gap:8px !important;
  padding:10px !important;
  background:linear-gradient(155deg, rgba(5,31,24,.94), rgba(2,22,17,.97)) !important;
}
.search-control-chip {
  border-radius:16px !important;
  background:rgba(8,39,30,.72) !important;
  border-color:rgba(155,255,211,.095) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.032) !important;
}
.search-control-chip:hover,
.search-control-chip:focus-visible {
  background:rgba(11,49,37,.82) !important;
  border-color:rgba(167,255,216,.20) !important;
}
.search-control-icon {
  background:rgba(103,235,171,.065) !important;
  border-color:rgba(139,246,196,.10) !important;
}

/* Cards: restrained corporate depth. */
.section,
.station-card,
.map-best-sheet,
.route-stack-panel,
.community-auto-detect,
.savings-moment {
  border-radius:24px !important;
}
.station-card:hover {
  transform:translateY(-1px) !important;
  border-color:rgba(172,255,219,.22) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Map is framed like a primary instrument, not an embedded widget. */
.map-frame,
.map-wrap,
#map {
  border-radius:22px !important;
}
.map-frame,
.map-wrap {
  border:1px solid rgba(163,255,215,.17) !important;
  box-shadow:
    0 24px 56px rgba(0,0,0,.34),
    0 0 0 4px rgba(2,24,18,.40),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Bottom navigation becomes a stable automotive control deck. */
.bottom-nav {
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(4,29,22,.97), rgba(2,18,14,.99)) !important;
  border:1px solid rgba(162,255,214,.14) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.bottom-nav .nav-item {
  border-radius:14px !important;
}
.bottom-nav .nav-item.active {
  background:linear-gradient(180deg, rgba(111,239,181,.14), rgba(63,191,136,.07)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.bottom-nav .nav-item.active::after {
  background:var(--tl82-mint) !important;
  box-shadow:0 0 10px rgba(117,239,184,.25) !important;
}

/* Responsive header geometry: no collisions on any common width. */
@media (max-width:700px) {
  .topbar {
    min-height:108px !important;
    padding:14px 14px !important;
    border-radius:24px !important;
  }
  .brand-home-link { max-width:calc(100% - 146px) !important; }
  .brand-copy .brand { font-size:clamp(31px, 8.7vw, 42px) !important; }
  .brand-copy .tagline {
    width:clamp(144px, 39vw, 174px) !important;
    height:clamp(63px, 17.2vw, 77px) !important;
    margin-top:-6px !important;
  }
  .floating-home-logo {
    right:max(12px, calc((100vw - 700px)/2 + 16px)) !important;
    width:64px !important;
    height:64px !important;
    border-radius:20px !important;
  }
  .floating-home-logo img { width:51px !important; height:51px !important; border-radius:15px !important; }
  .topbar-actions { margin-right:72px !important; }
  .settings-access-btn,
  .icon-btn.settings-access-btn {
    width:50px !important; min-width:50px !important; height:50px !important; min-height:50px !important;
    border-radius:16px !important;
  }
}

@media (max-width:430px) {
  .topbar {
    min-height:101px !important;
    padding:12px 12px !important;
  }
  .brand-home-link { max-width:calc(100% - 126px) !important; }
  .brand-copy .brand { font-size:clamp(29px, 9vw, 37px) !important; }
  .brand-copy .tagline {
    width:clamp(128px, 39vw, 150px) !important;
    height:clamp(56px, 17vw, 67px) !important;
    margin-top:-5px !important;
  }
  .floating-home-logo {
    top:max(12px, calc(env(safe-area-inset-top) + 10px)) !important;
    right:10px !important;
    width:58px !important;
    height:58px !important;
    border-radius:18px !important;
  }
  .floating-home-logo img { width:46px !important; height:46px !important; border-radius:14px !important; }
  .topbar-actions { margin-right:64px !important; }
  .settings-access-btn,
  .icon-btn.settings-access-btn {
    width:46px !important; min-width:46px !important; height:46px !important; min-height:46px !important;
    border-radius:15px !important;
  }
  .savings-since {
    flex-wrap:wrap !important;
    gap:1px 7px !important;
  }
  .savings-since::after { white-space:normal !important; }
}

@media (max-width:350px) {
  .brand-home-link { max-width:calc(100% - 112px) !important; }
  .brand-copy .brand { font-size:28px !important; }
  .brand-copy .tagline { width:120px !important; height:54px !important; }
  .floating-home-logo { width:54px !important; height:54px !important; }
  .floating-home-logo img { width:43px !important; height:43px !important; }
  .topbar-actions { margin-right:58px !important; }
  .settings-access-btn,
  .icon-btn.settings-access-btn { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; }
}

@media (min-width:900px) {
  .app-shell { padding-inline:20px !important; }
  .topbar { padding-inline:22px !important; }
  .today-recommendation-shell { padding:24px !important; }
  .section { padding:22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-home-logo,
  .station-card,
  .primary-btn,
  .search-control-chip { transition:none !important; }
}

/* ======================================================================
   TankLina 0.10.83 – Award-level app refinement based on the agreed
   visual direction: darker premium surfaces, clearer hierarchy, stronger
   net-savings focus, and corrected high-resolution brand signatures.
   ====================================================================== */

:root {
  --tl83-panel: rgba(5, 22, 17, 0.88);
  --tl83-panel-strong: rgba(4, 18, 14, 0.94);
  --tl83-border: rgba(169, 255, 214, 0.14);
  --tl83-border-strong: rgba(187, 255, 222, 0.28);
  --tl83-soft: rgba(127, 255, 199, 0.08);
  --tl83-glow: rgba(110, 244, 184, 0.18);
  --tl83-text: #f3f7f4;
  --tl83-muted: #bdd0c7;
  --tl83-lime: #bafcb6;
}

body.app-final-01083 {
  color: var(--tl83-text) !important;
}

body.app-final-01083 .topbar {
  padding-bottom: 10px !important;
}

body.app-final-01083 .brand-copy {
  gap: 3px !important;
}
body.app-final-01083 .brand-copy .brand {
  text-wrap: balance;
}
body.app-final-01083 .brand-copy .tagline {
  width: clamp(160px, 28vw, 196px) !important;
  height: clamp(54px, 9vw, 76px) !important;
  margin-top: 1px !important;
  background: url('assets/ci/signature-tanken-reference-style.png') left center / contain no-repeat !important;
  filter: drop-shadow(0 0 9px rgba(110,244,184,.10)) drop-shadow(0 8px 18px rgba(0,0,0,.18)) !important;
}

body.app-final-01083 .hero-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(110,244,184,.07), transparent 36%),
    radial-gradient(circle at 83% 12%, rgba(42,159,255,.05), transparent 30%),
    linear-gradient(180deg, rgba(8,29,23,.94), rgba(4,19,15,.98)) !important;
  border: 1px solid var(--tl83-border-strong) !important;
  box-shadow:
    0 28px 64px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(125,255,198,.03) !important;
  overflow: hidden !important;
}

body.app-final-01083 .today-recommendation-shell,
body.app-final-01083 .home-savings-card,
body.app-final-01083 .section-chapter,
body.app-final-01083 .search-control-dock {
  background:
    radial-gradient(circle at 80% 0%, rgba(110,244,184,.05), transparent 30%),
    linear-gradient(165deg, rgba(8,31,24,.92), rgba(5,20,16,.96)) !important;
  border: 1px solid var(--tl83-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 20px 46px rgba(0,0,0,.28) !important;
}

body.app-final-01083 .today-recommendation-shell {
  padding: 24px !important;
  border-radius: 30px !important;
}
body.app-final-01083 .recommendation-title strong {
  font-size: 1.18rem !important;
  letter-spacing: -.02em !important;
}
body.app-final-01083 .hero-topline {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}
body.app-final-01083 .hero-intro h2,
body.app-final-01083 #decisionTitle {
  font-size: clamp(2.05rem, 5.9vw, 3.45rem) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  margin-bottom: 6px !important;
  text-wrap: balance;
}
body.app-final-01083 .hero-copy,
body.app-final-01083 #decisionText {
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
  color: var(--tl83-muted) !important;
  max-width: 42ch !important;
}
body.app-final-01083 .decision-target-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(185px, .88fr) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}
body.app-final-01083 .decision-station-block,
body.app-final-01083 .decision-price-block,
body.app-final-01083 .hero-now-fact {
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(10,34,27,.93), rgba(7,22,17,.98)) !important;
  border: 1px solid rgba(181,255,221,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(0,0,0,.18) !important;
}
body.app-final-01083 .decision-station-block,
body.app-final-01083 .decision-price-block {
  padding: 18px 18px 16px !important;
}
body.app-final-01083 .decision-block-label {
  font-size: .78rem !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: #a9c4b8 !important;
}
body.app-final-01083 #bestStationName {
  font-size: clamp(1.3rem, 3.2vw, 1.72rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  color: #ffffff !important;
}
body.app-final-01083 #bestStationMeta,
body.app-final-01083 #fuelLabelMirror {
  color: var(--tl83-muted) !important;
}
body.app-final-01083 #bestPrice {
  font-size: clamp(2.15rem, 5vw, 3.05rem) !important;
  line-height: .95 !important;
  letter-spacing: -.05em !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
body.app-final-01083 .decision-benefit-strip {
  margin-top: 14px !important;
  padding: 18px 18px 17px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 92% 32%, rgba(135,255,192,.11), transparent 28%),
    linear-gradient(180deg, rgba(14,46,35,.94), rgba(8,28,22,.98)) !important;
  border: 1px solid rgba(167,255,215,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 34px rgba(0,0,0,.20) !important;
}
body.app-final-01083 .decision-benefit-strip span,
body.app-final-01083 .benefit-saving span {
  color: #d6e8df !important;
}
body.app-final-01083 #netSaving {
  display: block !important;
  margin-top: 6px !important;
  font-size: clamp(2.4rem, 6.3vw, 3.7rem) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  color: var(--tl83-lime) !important;
  text-shadow: 0 0 22px rgba(130,255,170,.08) !important;
}
body.app-final-01083 #calculationBasis,
body.app-final-01083 #priceSecureDetail,
body.app-final-01083 .trust-line,
body.app-final-01083 .location-trust-note span,
body.app-final-01083 .location-fallback-copy span,
body.app-final-01083 .why-grid,
body.app-final-01083 .chapter-subtitle,
body.app-final-01083 .sub,
body.app-final-01083 small {
  color: var(--tl83-muted) !important;
}
body.app-final-01083 .hero-actions {
  margin-top: 18px !important;
  gap: 12px !important;
}
body.app-final-01083 .hero-actions .primary-btn,
body.app-final-01083 .hero-actions .secondary-btn,
body.app-final-01083 .map-live-btn,
body.app-final-01083 .search-control-chip,
body.app-final-01083 .station-route-main {
  border-radius: 20px !important;
  min-height: 60px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.18) !important;
}
body.app-final-01083 .hero-actions .primary-btn,
body.app-final-01083 .station-route-main {
  background: linear-gradient(90deg, rgba(136,238,171,.88), rgba(187,255,187,.94)) !important;
  color: #0c1b14 !important;
  border: 1px solid rgba(212,255,226,.46) !important;
  font-weight: 800 !important;
}
body.app-final-01083 .hero-actions .secondary-btn,
body.app-final-01083 .search-control-chip,
body.app-final-01083 .map-live-btn {
  background: linear-gradient(180deg, rgba(11,36,28,.94), rgba(6,24,18,.98)) !important;
  color: var(--tl83-text) !important;
  border: 1px solid rgba(178,255,219,.12) !important;
}
body.app-final-01083 .home-savings-card {
  margin-top: 18px !important;
  border-radius: 28px !important;
  padding: 22px 22px 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
body.app-final-01083 .home-savings-card::after {
  content: "";
  position: absolute;
  right: -56px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(from 220deg, rgba(140,255,183,.08), rgba(140,255,183,.48), rgba(140,255,183,.08));
  box-shadow: 0 0 0 14px rgba(140,255,183,.05) inset;
  filter: blur(.2px);
}
body.app-final-01083 .home-card-kicker {
  color: #d5e7de !important;
}
body.app-final-01083 .home-savings-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.app-final-01083 .home-savings-line strong,
body.app-final-01083 #heroSavingsValue {
  font-size: clamp(2.5rem, 6vw, 3.6rem) !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
  color: var(--tl83-lime) !important;
}
body.app-final-01083 .home-savings-line span {
  color: #eef7f2 !important;
  font-weight: 700 !important;
}
body.app-final-01083 .home-savings-mini {
  position: relative !important;
  z-index: 1 !important;
}
body.app-final-01083 .home-savings-mini div {
  background: rgba(8,25,20,.46) !important;
  border: 1px solid rgba(181,255,221,.10) !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
}

body.app-final-01083 .search-control-dock {
  border-radius: 24px !important;
  padding: 8px !important;
  gap: 8px !important;
}
body.app-final-01083 .search-control-chip {
  border-radius: 18px !important;
}

body.app-final-01083 .section-chapter {
  border-radius: 30px !important;
  padding: 22px !important;
}
body.app-final-01083 .section-heading h2 {
  font-size: clamp(1.95rem, 4.2vw, 2.65rem) !important;
  letter-spacing: -.045em !important;
}
body.app-final-01083 .chapter-heading .eyebrow,
body.app-final-01083 .home-card-kicker,
body.app-final-01083 .decision-block-label {
  letter-spacing: .1em !important;
  font-weight: 800 !important;
}
body.app-final-01083 .real-map-wrap,
body.app-final-01083 .map-best-sheet,
body.app-final-01083 .trend-card {
  border-radius: 26px !important;
  overflow: hidden !important;
}
body.app-final-01083 .map-best-sheet {
  border: 1px solid rgba(181,255,221,.12) !important;
  background: linear-gradient(180deg, rgba(8,30,24,.95), rgba(6,22,18,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 32px rgba(0,0,0,.22) !important;
}
body.app-final-01083 .map-best-saving b {
  font-size: 1.6rem !important;
  color: var(--tl83-lime) !important;
}

body.app-final-01083 .station-list {
  gap: 18px !important;
}
body.app-final-01083 .station-card {
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(8,28,23,.97), rgba(5,18,15,.99)) !important;
  border: 1px solid rgba(180,255,220,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 20px 42px rgba(0,0,0,.24) !important;
  overflow: hidden !important;
}
body.app-final-01083 .station-card-photo {
  height: 168px !important;
  object-fit: cover !important;
}
body.app-final-01083 .station-card-headline {
  padding: 14px 18px 0 !important;
}
body.app-final-01083 .station-card-top,
body.app-final-01083 .station-net-hero,
body.app-final-01083 .station-key-grid,
body.app-final-01083 .station-price-details,
body.app-final-01083 .service-summary,
body.app-final-01083 .station-trust,
body.app-final-01083 .station-now {
  margin-left: 18px !important;
  margin-right: 18px !important;
}
body.app-final-01083 .station-card-top {
  margin-top: 8px !important;
}
body.app-final-01083 .station-title-copy h3 {
  font-size: clamp(1.35rem, 3vw, 1.7rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em !important;
}
body.app-final-01083 .station-card-price {
  font-size: clamp(2rem, 4.4vw, 2.9rem) !important;
  line-height: .95 !important;
  letter-spacing: -.05em !important;
}
body.app-final-01083 .station-net-hero {
  border-radius: 22px !important;
  padding: 16px 18px !important;
  background:
    radial-gradient(circle at 92% 45%, rgba(122,255,177,.13), transparent 24%),
    linear-gradient(180deg, rgba(14,48,36,.95), rgba(8,30,22,.99)) !important;
  border: 1px solid rgba(173,255,216,.12) !important;
}
body.app-final-01083 .station-net-hero strong {
  font-size: clamp(2.1rem, 5vw, 3rem) !important;
  line-height: .95 !important;
  letter-spacing: -.05em !important;
  color: var(--tl83-lime) !important;
}
body.app-final-01083 .station-key-grid {
  gap: 12px !important;
}
body.app-final-01083 .station-key-grid > div,
body.app-final-01083 .station-calc-card {
  background: rgba(8,25,19,.56) !important;
  border: 1px solid rgba(180,255,221,.10) !important;
  border-radius: 18px !important;
}
body.app-final-01083 .station-route-main {
  margin: 18px !important;
}

body.app-final-01083 .bottom-nav {
  border-radius: 28px 28px 0 0 !important;
  background: linear-gradient(180deg, rgba(8,28,22,.96), rgba(4,18,14,.99)) !important;
  border-top: 1px solid rgba(177,255,219,.11) !important;
  box-shadow: 0 -16px 36px rgba(0,0,0,.28) !important;
}
body.app-final-01083 .bottom-nav .nav-item.active {
  color: #eafff1 !important;
}

/* High-resolution emotional micro-signature without typeface change */
body.app-final-01083 .tank-stop-quick-copy small,
body.app-final-01083 .savings-since::before {
  background: url('assets/ci/signature-jeder-liter-zaehlt.png') left center / contain no-repeat !important;
  filter: drop-shadow(0 0 7px rgba(110,244,184,.08)) !important;
}
body.app-final-01083 .tank-stop-quick-copy small {
  width: clamp(142px, 23vw, 186px) !important;
  height: clamp(44px, 7vw, 60px) !important;
}
body.app-final-01083 .savings-since::before {
  width: clamp(148px, 24vw, 196px) !important;
  height: clamp(46px, 7.5vw, 68px) !important;
}

@media (max-width: 860px) {
  body.app-final-01083 .decision-target-grid {
    grid-template-columns: 1fr !important;
  }
  body.app-final-01083 .home-savings-card::after {
    width: 142px;
    height: 142px;
    right: -44px;
  }
}

@media (max-width: 640px) {
  body.app-final-01083 .today-recommendation-shell,
  body.app-final-01083 .section-chapter,
  body.app-final-01083 .home-savings-card {
    border-radius: 26px !important;
    padding: 18px !important;
  }
  body.app-final-01083 .brand-copy .tagline {
    width: 146px !important;
    height: 56px !important;
  }
  body.app-final-01083 .station-card-photo {
    height: 150px !important;
  }
}