/* =====================================================================
   TankLina 0.10.84 – Reference graphic pass
   Scope: purely visual redesign based on the approved reference screens.
   No business logic, navigation, API flow or calculations are changed.
   ===================================================================== */

:root {
  --tl84-bg-top: #04130f;
  --tl84-bg-mid: #071d17;
  --tl84-bg-bottom: #061711;
  --tl84-panel: rgba(8, 28, 23, 0.92);
  --tl84-panel-2: rgba(10, 34, 27, 0.96);
  --tl84-panel-soft: rgba(12, 40, 31, 0.72);
  --tl84-border: rgba(171, 255, 219, 0.14);
  --tl84-border-strong: rgba(199, 255, 226, 0.28);
  --tl84-glow: rgba(113, 255, 180, 0.16);
  --tl84-green: #BDF7B6;
  --tl84-green-2: #7EECA8;
  --tl84-green-3: #54D58D;
  --tl84-teal: #7DE9C7;
  --tl84-gold: #C9A768;
  --tl84-gold-2: #E2C587;
  --tl84-text: #F5FBF7;
  --tl84-muted: #C7D9D0;
  --tl84-subtle: #93AAA0;
  --tl84-shadow: 0 28px 70px rgba(0,0,0,.34);
  --tl84-inner: inset 0 1px 0 rgba(255,255,255,.06);
  --tl84-radius-xl: 30px;
  --tl84-radius-lg: 24px;
  --tl84-radius-md: 18px;
}

html, body {
  background:
    radial-gradient(circle at 20% 0%, rgba(49, 143, 114, .20), transparent 26%),
    radial-gradient(circle at 82% 4%, rgba(94, 190, 162, .18), transparent 23%),
    linear-gradient(180deg, var(--tl84-bg-top), var(--tl84-bg-mid) 46%, var(--tl84-bg-bottom)) !important;
}

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

body.app-final-01083 .cinematic-backdrop {
  opacity: .92 !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(76, 165, 130, .16), transparent 28%),
    radial-gradient(circle at 75% 0%, rgba(69, 147, 138, .12), transparent 24%),
    linear-gradient(180deg, rgba(4,17,13,.98), rgba(4,17,13,.84)) !important;
}
body.app-final-01083 .cinematic-backdrop i {
  filter: blur(10px) saturate(1.08) !important;
  opacity: .45 !important;
}

/* Global premium surfaces */
body.app-final-01083 .hero-card,
body.app-final-01083 .section,
body.app-final-01083 .section-chapter,
body.app-final-01083 .search-control-dock,
body.app-final-01083 .station-card,
body.app-final-01083 .bottom-nav,
body.app-final-01083 .dialog,
body.app-final-01083 .route-stack-panel,
body.app-final-01083 .community-auto-detect,
body.app-final-01083 .savings-moment,
body.app-final-01083 .savings-total > div,
body.app-final-01083 .savings-month-groups > *,
body.app-final-01083 .savings-history > * {
  background:
    radial-gradient(circle at 100% 0%, rgba(119, 255, 188, 0.05), transparent 28%),
    linear-gradient(180deg, var(--tl84-panel), rgba(5, 18, 15, 0.98)) !important;
  border: 1px solid var(--tl84-border) !important;
  box-shadow: var(--tl84-inner), var(--tl84-shadow) !important;
}

body.app-final-01083 .topbar {
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 2px 10px !important;
}
body.app-final-01083 .brand-row,
body.app-final-01083 .brand-home-link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-width: 0 !important;
}
body.app-final-01083 .brand-logo,
body.app-final-01083 .floating-home-logo img,
body.app-final-01083 .onboarding-logo,
body.app-final-01083 .map-best-photo,
body.app-final-01083 .station-card-photo,
body.app-final-01083 .station-brand-logo img {
  image-rendering: auto !important;
  object-fit: contain !important;
}
body.app-final-01083 .brand-logo {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  padding: 8px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.25) !important;
}
body.app-final-01083 .brand-copy {
  gap: 3px !important;
  min-height: 58px !important;
}
body.app-final-01083 .brand-copy .brand {
  font-size: clamp(1.95rem, 8.2vw, 2.55rem) !important;
  line-height: .90 !important;
  letter-spacing: -.055em !important;
  font-weight: 900 !important;
  color: #fff !important;
}
body.app-final-01083 .brand-copy .tagline {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  width: clamp(180px, 46vw, 248px) !important;
  height: clamp(52px, 12vw, 74px) !important;
  margin-top: 2px !important;
  background: url('assets/ci/signature-tanken-exact.png') left center / contain no-repeat !important;
  filter: drop-shadow(0 0 8px rgba(121,255,188,.11)) drop-shadow(0 10px 24px rgba(0,0,0,.16)) !important;
}
body.app-final-01083 .floating-home-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(7,26,21,.93), rgba(4,17,14,.97)) !important;
  border: 1px solid rgba(174,255,219,.12) !important;
}
body.app-final-01083 .settings-access-btn {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(8,29,23,.94), rgba(5,18,15,.98)) !important;
  border: 1px solid rgba(181,255,221,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 28px rgba(0,0,0,.22) !important;
}
body.app-final-01083 .settings-access-label { display:none !important; }

/* Gold helper ribbon similar to reference */
body.app-final-01083 .sticky-tank-ribbon-wrap {
  margin: 6px 0 12px !important;
}
body.app-final-01083 .sticky-tank-ribbon {
  min-height: 50px !important;
  border-radius: 18px !important;
  padding: 0 16px !important;
  background: linear-gradient(180deg, rgba(192, 157, 93, .95), rgba(175, 138, 75, .96)) !important;
  border: 1px solid rgba(237, 204, 135, .34) !important;
  color: #fff7e7 !important;
  box-shadow: 0 18px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.app-final-01083 .sticky-tank-ribbon-text { font-weight: 800 !important; letter-spacing: -.01em !important; }

/* Home / Start screen */
body.app-final-01083 .hero-card {
  position: relative !important;
  padding: 20px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 82% 20%, rgba(120,255,188,.10), transparent 24%),
    radial-gradient(circle at 14% 0%, rgba(58, 160, 123, .13), transparent 28%),
    linear-gradient(180deg, rgba(7, 27, 22, .96), rgba(4, 18, 15, .99)) !important;
  border-color: var(--tl84-border-strong) !important;
}
body.app-final-01083 .hero-card::before {
  content: "";
  position: absolute;
  inset: auto -16% -22% auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(101,255,175,.12), rgba(101,255,175,0) 68%);
  pointer-events: none;
}
body.app-final-01083 .today-recommendation-shell {
  position: relative !important;
  z-index: 1 !important;
  padding: 22px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(110,244,184,.07), transparent 28%),
    linear-gradient(180deg, rgba(9, 34, 27, .98), rgba(6, 22, 18, .98)) !important;
  border: 1px solid rgba(193,255,225,.14) !important;
}
body.app-final-01083 .today-recommendation-shell::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141,255,185,.16), rgba(141,255,185,0) 70%);
  opacity: .7;
  pointer-events: none;
}
body.app-final-01083 .recommendation-title {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom: 8px !important;
}
body.app-final-01083 .recommendation-title strong {
  font-size: clamp(1.35rem, 4vw, 1.8rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.03em !important;
}
body.app-final-01083 .decision-badge,
body.app-final-01083 .fuel-label,
body.app-final-01083 .station-fuel-chip,
body.app-final-01083 .station-decision-tag {
  border-radius: 999px !important;
  border: 1px solid rgba(190,255,224,.14) !important;
  background: rgba(255,255,255,.055) !important;
  color: #E7F4ED !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
body.app-final-01083 .decision-badge,
body.app-final-01083 .fuel-label {
  padding: 8px 12px !important;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body.app-final-01083 #decisionTitle {
  font-size: clamp(2.25rem, 8vw, 3.25rem) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  margin: 2px 0 6px !important;
  color: #fff !important;
}
body.app-final-01083 #decisionText {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--tl84-muted) !important;
  max-width: 38ch !important;
}
body.app-final-01083 .decision-target-grid {
  display:grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) !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,
body.app-final-01083 .location-trust-note,
body.app-final-01083 .location-fallback-panel,
body.app-final-01083 .why-card {
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(11,39,30,.94), rgba(8,26,21,.98)) !important;
  border: 1px solid rgba(184,255,221,.11) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 32px rgba(0,0,0,.19) !important;
}
body.app-final-01083 .decision-station-block,
body.app-final-01083 .decision-price-block { padding: 18px !important; }
body.app-final-01083 .decision-block-label {
  display:inline-block !important;
  margin-bottom: 8px !important;
  color: #B8CEC3 !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
body.app-final-01083 #bestStationName {
  font-size: clamp(1.28rem, 5vw, 1.72rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
}
body.app-final-01083 #bestStationMeta,
body.app-final-01083 #fuelLabelMirror,
body.app-final-01083 #heroFreshness,
body.app-final-01083 #heroReliability,
body.app-final-01083 #heroSource,
body.app-final-01083 #calculationBasis,
body.app-final-01083 .field-help,
body.app-final-01083 .sub,
body.app-final-01083 small,
body.app-final-01083 .chapter-subtitle,
body.app-final-01083 .section-copy,
body.app-final-01083 .station-address-sub,
body.app-final-01083 .station-data-line,
body.app-final-01083 .station-trust,
body.app-final-01083 .service-info-row > span,
body.app-final-01083 .savings-since,
body.app-final-01083 .savings-toolbar,
body.app-final-01083 .savings-month-card span,
body.app-final-01083 .saving-row span {
  color: var(--tl84-muted) !important;
}
body.app-final-01083 #bestPrice,
body.app-final-01083 .station-card-price,
body.app-final-01083 .fuel-price-main {
  font-size: clamp(2.15rem, 9vw, 3.1rem) !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
  font-weight: 850 !important;
  color: #fff !important;
}
body.app-final-01083 .fuel-price-tenth {
  font-size: .42em !important;
  top: -.48em !important;
  margin-left: 1px !important;
}
body.app-final-01083 .fuel-price-unit { color: #D6E6DE !important; font-size: .34em !important; }
body.app-final-01083 .decision-benefit-strip {
  position: relative !important;
  overflow: hidden !important;
  margin-top: 14px !important;
  padding: 18px 18px 18px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 92% 42%, rgba(140,255,183,.14), transparent 28%),
    linear-gradient(180deg, rgba(16, 50, 37, .98), rgba(10, 33, 24, .99)) !important;
  border: 1px solid rgba(177,255,218,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 38px rgba(0,0,0,.22) !important;
}
body.app-final-01083 .decision-benefit-strip::after,
body.app-final-01083 .station-net-hero::after,
body.app-final-01083 .map-best-sheet::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 110px;
  height: 38px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 8% 50%, rgba(173,255,218,.0) 0 5px, rgba(173,255,218,.38) 6px, rgba(173,255,218,0) 10px),
    linear-gradient(90deg, rgba(173,255,218,.0) 0%, rgba(173,255,218,.16) 12%, rgba(173,255,218,.34) 52%, rgba(173,255,218,.12) 70%, rgba(173,255,218,.0) 100%);
  filter: blur(.15px);
  opacity: .85;
  pointer-events: none;
}
body.app-final-01083 .benefit-saving span,
body.app-final-01083 .benefit-security span { color: #E2F1EA !important; }
body.app-final-01083 #netSaving {
  display:block !important;
  margin-top: 6px !important;
  font-size: clamp(2.45rem, 10vw, 3.8rem) !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
  color: var(--tl84-green) !important;
  text-shadow: 0 0 28px rgba(129,255,180,.10) !important;
}
body.app-final-01083 .hero-now-grid {
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}
body.app-final-01083 .hero-now-fact {
  min-height: 82px !important;
  padding: 14px 14px !important;
  align-items: flex-start !important;
}
body.app-final-01083 .hero-actions {
  display:grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,.75fr) !important;
  gap: 12px !important;
  margin-top: 18px !important;
}
body.app-final-01083 .primary-btn,
body.app-final-01083 .secondary-btn,
body.app-final-01083 .map-live-btn,
body.app-final-01083 .search-control-chip,
body.app-final-01083 .profile-fuel-btn,
body.app-final-01083 .vehicle-profile-btn,
body.app-final-01083 .theme-btn,
body.app-final-01083 .fill-plan-btn,
body.app-final-01083 .choice-btn,
body.app-final-01083 .commute-setup-btn,
body.app-final-01083 .report-btn,
body.app-final-01083 .station-route-main {
  border-radius: 20px !important;
  min-height: 58px !important;
  border: 1px solid rgba(189,255,224,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.18) !important;
}
body.app-final-01083 .primary-btn,
body.app-final-01083 .station-route-main,
body.app-final-01083 .choice-btn.active,
body.app-final-01083 .theme-btn.active,
body.app-final-01083 .vehicle-profile-btn.active,
body.app-final-01083 .fill-plan-btn.active,
body.app-final-01083 .report-btn.active {
  background: linear-gradient(180deg, #BFF4B2, #98EAAC) !important;
  color: #0B1C14 !important;
  border-color: rgba(240,255,245,.42) !important;
  font-weight: 800 !important;
}
body.app-final-01083 .secondary-btn,
body.app-final-01083 .map-live-btn,
body.app-final-01083 .search-control-chip,
body.app-final-01083 .profile-fuel-btn,
body.app-final-01083 .vehicle-profile-btn,
body.app-final-01083 .theme-btn,
body.app-final-01083 .fill-plan-btn,
body.app-final-01083 .choice-btn,
body.app-final-01083 .commute-setup-btn,
body.app-final-01083 .report-btn {
  background: linear-gradient(180deg, rgba(10,36,29,.94), rgba(7,23,19,.98)) !important;
  color: var(--tl84-text) !important;
}
body.app-final-01083 .location-trust-note,
body.app-final-01083 .location-fallback-panel { margin-top: 14px !important; padding: 14px 16px !important; }
body.app-final-01083 .trust-line {
  display:flex !important;
  gap:7px !important;
  align-items:center !important;
  margin-top: 14px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(189,255,223,.1) !important;
}
body.app-final-01083 .why-card { margin-top: 14px !important; padding: 0 16px !important; }
body.app-final-01083 .why-card summary { padding: 16px 0 !important; }

/* Home balance block */
body.app-final-01083 .home-savings-card {
  position: relative !important;
  overflow: hidden !important;
  margin-top: 16px !important;
  border-radius: 30px !important;
  padding: 22px !important;
  display:grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  gap: 16px !important;
}
body.app-final-01083 .home-savings-card::before {
  content: "";
  position: absolute;
  right: -64px;
  top: 50%;
  transform: translateY(-50%);
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    conic-gradient(from 200deg, rgba(146,255,186,.05), rgba(146,255,186,.42), rgba(146,255,186,.10), rgba(146,255,186,.05));
  box-shadow: 0 0 0 14px rgba(146,255,186,.045) inset;
  opacity: .95;
}
body.app-final-01083 .home-card-kicker {
  font-size: .8rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #D7E7DF !important;
  font-weight: 800 !important;
}
body.app-final-01083 .home-savings-line {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
body.app-final-01083 #heroSavingsValue {
  font-size: clamp(2.6rem, 10vw, 3.8rem) !important;
  line-height: .9 !important;
  letter-spacing: -.07em !important;
  color: var(--tl84-green) !important;
  text-shadow: 0 0 26px rgba(118,255,182,.12) !important;
}
body.app-final-01083 .home-savings-line > span {
  font-size: 1rem !important;
  color: #fff !important;
  font-weight: 700 !important;
}
body.app-final-01083 .home-savings-mini {
  position: relative !important;
  z-index: 1 !important;
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
body.app-final-01083 .home-savings-mini > div {
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(190,255,224,.10) !important;
}
body.app-final-01083 .home-savings-mini small { color: #A7BBB1 !important; font-size: 11px !important; }
body.app-final-01083 .home-savings-mini strong { color: #fff !important; font-size: 16px !important; font-weight: 800 !important; }

/* Search dock */
body.app-final-01083 .search-control-dock {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  margin: 14px 0 0 !important;
  padding: 8px !important;
  gap: 8px !important;
  border-radius: 24px !important;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
body.app-final-01083 .search-control-chip {
  min-height: 56px !important;
  padding: 12px 12px !important;
}
body.app-final-01083 .search-control-copy small { color: #A9BEB4 !important; }
body.app-final-01083 .search-control-copy strong { color: #fff !important; }

/* Section headings */
body.app-final-01083 .section-chapter {
  border-radius: 32px !important;
  padding: 22px !important;
}
body.app-final-01083 .section-heading {
  margin-bottom: 16px !important;
}
body.app-final-01083 .chapter-heading .eyebrow,
body.app-final-01083 .section-heading .eyebrow {
  color: #D6E8DF !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
}
body.app-final-01083 .section-heading h2,
body.app-final-01083 .chapter-heading h2 {
  font-size: clamp(2rem, 8vw, 2.8rem) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  color: #fff !important;
}
body.app-final-01083 .chapter-subtitle { max-width: 34ch !important; }
body.app-final-01083 .chapter-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(191,255,224,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Map / Karte */
body.app-final-01083 .map-live-actions {
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
body.app-final-01083 .map-status-line {
  min-height: 46px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(190,255,223,.09) !important;
}
body.app-final-01083 .real-map-wrap {
  position: relative !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 1px solid rgba(191,255,224,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 42px rgba(0,0,0,.22) !important;
}
body.app-final-01083 .real-map {
  min-height: 430px !important;
  height: min(74vw, 540px) !important;
  background: linear-gradient(180deg, #071a17, #081813) !important;
}
body.app-final-01083 .map-empty-state {
  border-radius: 24px !important;
  background: rgba(6, 20, 16, .72) !important;
  border: 1px solid rgba(190,255,223,.10) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.app-final-01083 .map-best-sheet {
  position: relative !important;
  display:grid !important;
  grid-template-columns: 92px 1fr 46px !important;
  gap: 12px !important;
  align-items:center !important;
  margin-top: 14px !important;
  padding: 10px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(131,255,186,.08), transparent 28%),
    linear-gradient(180deg, rgba(8, 31, 25, .98), rgba(6, 22, 18, .99)) !important;
  border: 1px solid rgba(191,255,224,.13) !important;
}
body.app-final-01083 .map-best-photo {
  width: 92px !important;
  height: 92px !important;
  border-radius: 18px !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
body.app-final-01083 .map-best-kicker,
body.app-final-01083 .map-best-meta { color: var(--tl84-muted) !important; }
body.app-final-01083 #mapBestName {
  font-size: 1.28rem !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
}
body.app-final-01083 #mapBestSaving {
  display:block !important;
  margin-top: 4px !important;
  font-size: 1.95rem !important;
  line-height: .94 !important;
  color: var(--tl84-green) !important;
}
body.app-final-01083 .map-best-go {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #BFF4B2, #98EAAC) !important;
  color: #0B1C14 !important;
  border: 1px solid rgba(240,255,245,.42) !important;
}

/* Station list / comparison */
body.app-final-01083 .station-list {
  display:grid !important;
  gap: 18px !important;
}
body.app-final-01083 .station-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  padding: 0 0 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(121,255,188,.06), transparent 26%),
    linear-gradient(180deg, rgba(8,28,23,.98), rgba(5,18,15,.99)) !important;
}
body.app-final-01083 .station-card.best {
  border-color: rgba(206,255,228,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 56px rgba(0,0,0,.28), 0 0 0 1px rgba(167,255,217,.05) !important;
}
body.app-final-01083 .station-photo-wrap {
  position: relative !important;
  margin: 14px 14px 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
body.app-final-01083 .station-card-photo {
  width: 100% !important;
  height: 196px !important;
  object-fit: cover !important;
  object-position: center !important;
  display:block !important;
  border-radius: 24px !important;
}
body.app-final-01083 .station-photo-vignette {
  position:absolute !important;
  inset:0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.28)) !important;
}
body.app-final-01083 .station-card-headline {
  padding: 14px 18px 0 !important;
}
body.app-final-01083 .station-decision-tag {
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding: 8px 12px !important;
  font-size: .78rem !important;
  letter-spacing: .03em !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 {
  display:grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 14px !important;
  margin-top: 10px !important;
  align-items:flex-start !important;
}
body.app-final-01083 .station-identity {
  display:flex !important;
  align-items:flex-start !important;
  gap: 12px !important;
}
body.app-final-01083 .station-brand-logo {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display:grid !important;
  place-items:center !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
body.app-final-01083 .station-brand-logo img {
  width: 34px !important;
  height: 34px !important;
}
body.app-final-01083 .station-title-copy h3 {
  font-size: clamp(1.4rem, 5vw, 1.76rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}
body.app-final-01083 .station-price-wrap {
  text-align:right !important;
}
body.app-final-01083 .station-fuel-chip { padding: 7px 10px !important; margin-bottom: 8px !important; }
body.app-final-01083 .station-card-price {
  font-size: clamp(2.2rem, 9vw, 3rem) !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
  color: #fff !important;
}
body.app-final-01083 .station-net-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 16px 18px !important;
  margin-top: 14px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 50%, rgba(131,255,186,.16), transparent 26%),
    linear-gradient(180deg, rgba(17,56,40,.98), rgba(9,32,24,.99)) !important;
  border: 1px solid rgba(181,255,221,.16) !important;
}
body.app-final-01083 .station-net-hero span { color: #E6F1EA !important; }
body.app-final-01083 .station-net-hero strong {
  display:block !important;
  margin-top: 6px !important;
  font-size: clamp(2.3rem, 10vw, 3.2rem) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  color: var(--tl84-green) !important;
  text-shadow: 0 0 22px rgba(126,236,168,.10) !important;
}
body.app-final-01083 .station-key-grid {
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
body.app-final-01083 .station-key-grid > div,
body.app-final-01083 .station-calc-card,
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 {
  border-radius: 18px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(190,255,223,.09) !important;
}
body.app-final-01083 .station-key-grid > div {
  padding: 12px 12px !important;
}
body.app-final-01083 .station-key-grid span { display:block !important; margin-bottom: 4px !important; color:#BFD2C8 !important; }
body.app-final-01083 .station-key-grid strong { color:#fff !important; font-size:1.06rem !important; }
body.app-final-01083 .station-route-main {
  margin: 16px 18px 0 !important;
  min-height: 62px !important;
}
body.app-final-01083 .station-price-details summary {
  padding: 14px 16px !important;
}
body.app-final-01083 .station-price-details-body { padding: 0 16px 16px !important; }

/* Prices and live/community keep the same tech, stronger UI only */
body.app-final-01083 .trend-card,
body.app-final-01083 .community-auto-detect {
  border-radius: 24px !important;
  padding: 16px !important;
}
body.app-final-01083 .wait-report-heading,
body.app-final-01083 .live-report-heading {
  color: #fff !important;
}
body.app-final-01083 .quick-report-grid {
  gap: 10px !important;
}

/* Savings / Bilanz screen with ring focus */
body.app-final-01083 #savingsSection {
  background:
    radial-gradient(circle at 82% 0%, rgba(121,255,188,.08), transparent 24%),
    linear-gradient(180deg, rgba(8,28,23,.98), rgba(5,18,15,.99)) !important;
}
body.app-final-01083 #savingsSection .savings-moment {
  padding: 16px 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(190,255,223,.10) !important;
}
body.app-final-01083 #savingsSection .savings-total {
  display:grid !important;
  grid-template-columns: 1fr !important;
  justify-items:center !important;
  gap: 18px !important;
  margin-top: 18px !important;
}
body.app-final-01083 #savingsSection .savings-total > div:first-child {
  position: relative !important;
  width: min(84vw, 330px) !important;
  height: min(84vw, 330px) !important;
  border-radius: 50% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(17,45,35,.96) 0 56%, transparent 56% 100%),
    conic-gradient(from 230deg, rgba(136,255,181,.10), rgba(148,255,189,.72), rgba(136,255,181,.18), rgba(136,255,181,.08)) !important;
  border: 1px solid rgba(198,255,226,.26) !important;
  box-shadow: inset 0 0 0 14px rgba(113,255,180,.06), inset 0 0 0 1px rgba(255,255,255,.08), 0 34px 58px rgba(0,0,0,.26), 0 0 34px rgba(113,255,180,.08) !important;
}
body.app-final-01083 #savingsSection .savings-total > div:first-child::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px solid rgba(194,255,225,.16);
  pointer-events: none;
}
body.app-final-01083 #savingsSection .savings-total > div:first-child span {
  color: #E4F1EA !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
}
body.app-final-01083 #savingsTotal {
  margin-top: 10px !important;
  font-size: clamp(2.9rem, 12vw, 4.2rem) !important;
  line-height: .88 !important;
  letter-spacing: -.07em !important;
  color: #EEFFF1 !important;
  text-shadow: 0 0 26px rgba(113,255,180,.12) !important;
}
body.app-final-01083 #savingsSection .savings-total > div:nth-child(2) {
  width: 100% !important;
  max-width: 420px !important;
  padding: 18px 20px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(190,255,223,.10) !important;
}
body.app-final-01083 #savingsMonth {
  display:block !important;
  margin-top: 6px !important;
  font-size: clamp(2rem, 8vw, 2.6rem) !important;
  color: var(--tl84-green) !important;
  font-weight: 850 !important;
}
body.app-final-01083 #savingsSection .savings-toolbar {
  display:flex !important;
  justify-content:space-between !important;
  gap: 12px !important;
  align-items:center !important;
  margin-top: 16px !important;
}
body.app-final-01083 .savings-since {
  position: relative !important;
  min-height: 62px !important;
  padding-left: 0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}
body.app-final-01083 .savings-since::before {
  content: "";
  display:block !important;
  width: 162px !important;
  height: 44px !important;
  margin-bottom: 6px !important;
  background: url('assets/ci/signature-jeder-liter-zaehlt-exact.png') left center / contain no-repeat !important;
  filter: drop-shadow(0 0 6px rgba(121,255,188,.10)) !important;
}
body.app-final-01083 .savings-history,
body.app-final-01083 .savings-month-groups {
  display:grid !important;
  gap: 12px !important;
  margin-top: 14px !important;
}
body.app-final-01083 .savings-month-card,
body.app-final-01083 .saving-row {
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(190,255,223,.09) !important;
}
body.app-final-01083 .savings-month-sum,
body.app-final-01083 .saving-row strong {
  color: var(--tl84-green-2) !important;
  font-weight: 800 !important;
}

/* Bottom nav */
body.app-final-01083 .bottom-nav {
  gap: 6px !important;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  border-radius: 28px 28px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(8,28,23,.96), rgba(4,18,15,.995)) !important;
  border-top: 1px solid rgba(190,255,223,.10) !important;
  box-shadow: 0 -18px 38px rgba(0,0,0,.26) !important;
}
body.app-final-01083 .nav-item {
  border-radius: 18px !important;
  padding: 10px 8px !important;
  min-height: 58px !important;
}
body.app-final-01083 .nav-item.active {
  background: linear-gradient(180deg, rgba(191,244,178,.18), rgba(126,236,168,.18)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.app-final-01083 .nav-item.active .nav-icon,
body.app-final-01083 .nav-item.active span { color: #fff !important; }

/* Dialogs / settings */
body.app-final-01083 .dialog {
  border-radius: 30px !important;
  padding: 22px !important;
  color: var(--tl84-text) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(121,255,188,.06), transparent 25%),
    linear-gradient(180deg, rgba(10,35,28,.98), rgba(6,22,18,.995)) !important;
  border: 1px solid rgba(198,255,226,.16) !important;
}
body.app-final-01083 .input,
body.app-final-01083 select,
body.app-final-01083 input[type="number"],
body.app-final-01083 input[type="text"],
body.app-final-01083 input[type="search"] {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(190,255,223,.11) !important;
  color: #fff !important;
  border-radius: 16px !important;
}

/* Prevent logo distortion globally */
body.app-final-01083 img,
body.app-final-01083 svg {
  max-width: 100%;
}
body.app-final-01083 .brand-logo,
body.app-final-01083 .station-brand-logo img,
body.app-final-01083 .floating-home-logo img,
body.app-final-01083 .onboarding-logo {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Responsive tuning */
@media (max-width: 860px) {
  body.app-final-01083 .decision-target-grid,
  body.app-final-01083 .hero-actions,
  body.app-final-01083 .home-savings-card {
    grid-template-columns: 1fr !important;
  }
  body.app-final-01083 .hero-now-grid,
  body.app-final-01083 .station-key-grid {
    grid-template-columns: 1fr !important;
  }
  body.app-final-01083 .map-live-actions {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  body.app-final-01083 .app-shell { padding-inline: 12px !important; }
  body.app-final-01083 .topbar { padding-top: 10px !important; }
  body.app-final-01083 .brand-logo { width: 54px !important; height: 54px !important; min-width:54px !important; }
  body.app-final-01083 .brand-copy .tagline {
    width: min(46vw, 182px) !important;
    height: 46px !important;
  }
  body.app-final-01083 .hero-card,
  body.app-final-01083 .section-chapter,
  body.app-final-01083 .home-savings-card,
  body.app-final-01083 .today-recommendation-shell {
    padding: 18px !important;
    border-radius: 28px !important;
  }
  body.app-final-01083 .today-recommendation-shell,
  body.app-final-01083 .home-savings-card,
  body.app-final-01083 .section-chapter {
    box-shadow: var(--tl84-inner), 0 20px 42px rgba(0,0,0,.26) !important;
  }
  body.app-final-01083 .station-photo-wrap { margin: 12px 12px 0 !important; }
  body.app-final-01083 .station-card-photo { height: 172px !important; }
  body.app-final-01083 .map-best-sheet { grid-template-columns: 76px 1fr 42px !important; }
  body.app-final-01083 .map-best-photo { width: 76px !important; height: 76px !important; }
  body.app-final-01083 #savingsSection .savings-total > div:first-child {
    width: min(86vw, 304px) !important;
    height: min(86vw, 304px) !important;
  }
  body.app-final-01083 .home-savings-card::before {
    width: 160px !important;
    height: 160px !important;
    right: -48px !important;
  }
}