:root {
  --bg: #f5f4f0;
  --white: #ffffff;
  --border: #e8e4dc;
  --border2: #f0ede6;
  --ink: #1a1a1a;
  --ink2: #5a5a5a;
  --ink3: #9a9a9a;
  --accent: #1c3d2e;
  --accent-hover: #254e3a;
  --accent-mid: #0c7c6e;
  --accent-light: #e8f4ee;
  --accent-pill: #d0edda;
  --green: #1a7a4a;
  --green-bg: #e6f4ed;
  --red: #c0392b;
  --red-bg: #fdf0ee;
  --radius-card: 18px;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: #e0ddd8;
  color: var(--ink);
  display: flex;
  justify-content: center;
}
#app {
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* ── HEADER ── */
.header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 50;
}
.logo-block { display: flex; align-items: center; gap: 8px; }
.logo-text { font-size: 17px; font-weight: 800; letter-spacing: -0.8px; color: var(--ink); }
.logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.logo-sub { font-size: 11px; color: var(--ink3); font-weight: 400; }
.live-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  background: var(--accent-light); color: var(--green);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.header-gear {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink2); flex-shrink: 0;
}
.header-gear svg { width: 18px; height: 18px; }

/* ── FUEL CHIPS ── */
.fuel-bar {
  display: flex; gap: 7px; padding: 10px 14px;
  overflow-x: auto; background: var(--white);
  border-bottom: 1px solid var(--border2);
  scrollbar-width: none; flex-shrink: 0;
}
.fuel-bar::-webkit-scrollbar { display: none; }
.fuel-chip {
  flex-shrink: 0; padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all 0.15s; white-space: nowrap; color: var(--ink2);
}
.fuel-chip.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--white); font-weight: 600;
}

/* ── VIEWS ── */
.view { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.view.active { display: flex; }

/* ── SCROLL AREA ── */
.scroll-area {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}
.scroll-area::-webkit-scrollbar { display: none; }

/* ── LOCATION BANNER ── */
.location-banner {
  background: #fff8e1; color: #7a5c00;
  font-size: 12px; padding: 7px 16px; text-align: center; display: none;
}
.location-banner.visible { display: block; }

/* ── SEARCH ROW ── */
.search-row {
  position: relative; display: flex; gap: 8px; align-items: center;
  padding: 8px 14px; background: var(--white);
  border-bottom: 1px solid var(--border2); flex-shrink: 0;
}
.search-input {
  flex: 1; height: 40px; padding: 0 14px;
  border: 1.5px solid var(--border); border-radius: 20px;
  background: var(--bg); font: inherit; font-size: 14px; color: var(--ink);
  outline: none; min-width: 0;
}
.search-input:focus { border-color: var(--accent); background: var(--white); }
.locate-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--white);
  cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0;
  transition: all 0.15s; color: var(--ink2);
}
.locate-btn svg { width: 18px; height: 18px; }
.locate-btn:hover { border-color: var(--accent); }
.locate-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
.search-results {
  position: absolute; top: 100%; left: 14px; right: 14px;
  margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  max-height: 280px; overflow-y: auto; z-index: 500;
}
.search-results[hidden] { display: none; }
.search-result-item {
  padding: 10px 14px; font-size: 13px; color: var(--ink);
  cursor: pointer; line-height: 1.35;
}
.search-result-item:hover, .search-result-item:focus { background: var(--accent-light); }
.search-result-empty { padding: 10px 14px; font-size: 13px; color: var(--ink3); }
.search-attr { padding: 6px 14px 2px; font-size: 10px; color: var(--ink3); text-align: right; }

/* ── MAP SECTION ── */
.map-section {
  height: 230px; position: relative; overflow: hidden;
  background: #dce8dc; flex-shrink: 0; z-index: 0;
}
#map-canvas { width: 100%; height: 100%; }
.map-badge-tl {
  position: absolute; bottom: 10px; left: 12px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
  border-radius: 10px; padding: 4px 10px;
  font-size: 11px; font-weight: 500; color: var(--ink2);
}
.map-badge-tr {
  position: absolute; bottom: 10px; right: 12px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
  border-radius: 10px; padding: 4px 10px;
  font-size: 11px; font-weight: 500; color: var(--ink2);
}

/* ── PRICE STATS STRIP ── */
.price-stats {
  display: flex; gap: 8px;
  padding: 10px 14px 12px;
  background: var(--bg);
}
.price-stat {
  flex: 1; padding: 11px 12px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.stat-min {
  border-top: 3px solid var(--green); background: var(--green-bg);
  cursor: pointer;
}
.stat-min:active { opacity: 0.8; }
.stat-max {
  border-top: 3px solid var(--red); background: var(--red-bg);
  cursor: pointer;
}
.stat-max:active { opacity: 0.8; }
.stat-avg { border-top: 3px solid var(--border2); }
.price-stat-label {
  font-size: 9px; color: var(--ink3); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.price-stat-val {
  font-family: 'DM Mono', monospace; font-size: 17px;
  font-weight: 500; margin-top: 3px; color: var(--ink);
  letter-spacing: -0.5px;
}
.price-stat-val.green { color: var(--green); }
.price-stat-val.red { color: var(--red); }
.price-stat-name {
  font-size: 10px; color: var(--ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── CAR BANNER ── */
.car-banner {
  margin: 10px 14px; padding: 11px 14px;
  background: var(--accent-light);
  border: 1px solid var(--accent-pill);
  border-radius: 14px; display: flex;
  align-items: center; gap: 10px; cursor: pointer;
}
.car-banner-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--accent); }
.car-banner-icon svg { width: 22px; height: 22px; }
.car-banner-text { flex: 1; min-width: 0; }
.car-banner-name { font-size: 13px; font-weight: 700; color: var(--accent); }
.car-banner-sub { font-size: 11px; color: var(--ink3); margin-top: 1px; }
.car-banner-btn {
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--accent); background: var(--white);
  font-family: 'DM Sans', sans-serif; font-size: 12px;
  font-weight: 600; color: var(--accent); cursor: pointer; flex-shrink: 0;
}

/* ── SECTION HEADER ── */
.section-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 6px;
}
.section-title { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; flex: 1; }
.section-badge {
  min-width: 24px; height: 24px; border-radius: 12px;
  background: var(--border2); color: var(--ink2);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}

/* ── SORT BAR ── */
.sort-bar {
  display: flex; gap: 7px; padding: 4px 16px 10px;
  overflow-x: auto; scrollbar-width: none;
}
.sort-bar::-webkit-scrollbar { display: none; }
.sort-pill {
  flex-shrink: 0; padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--ink2); white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}
.sort-pill.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--white); font-weight: 600;
}

/* ── CARTE STATION ROWS ── */
.station-list { display: flex; flex-direction: column; padding: 0 12px 12px; gap: 8px; }
.station-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.12s;
}
.station-card:active { transform: scale(0.985); box-shadow: none; }
.card-main { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px 9px; }
.rank-badge {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
  background: transparent; color: var(--ink3);
}
.rank-badge.first {
  background: var(--accent); color: var(--white);
}
.rank-badge.first svg { width: 10px; height: 10px; }
.card-brand-logo {
  width: 32px; height: 32px; min-width: 32px; max-width: 32px;
  border-radius: 50%; object-fit: contain; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--border2);
  padding: 3px; display: block;
}
.card-info { flex: 1; min-width: 0; }
.card-name {
  font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.card-meta { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.card-price-col { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.card-price {
  font-family: 'DM Mono', monospace; font-size: 21px;
  font-weight: 500; color: var(--ink); line-height: 1;
}
.card-price.best { color: var(--accent); }
.card-price-unit { font-size: 10px; color: var(--ink3); margin-top: 2px; text-align: right; }
.card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 14px 10px;
}
.tag {
  font-size: 11px; font-weight: 500; padding: 3px 9px;
  border-radius: 10px; white-space: nowrap;
}
.tag-dist { background: var(--border2); color: var(--ink2); }
.tag-up { background: var(--red-bg); color: var(--red); }
.tag-down { background: var(--green-bg); color: var(--green); }
.tag-stable { background: var(--border2); color: var(--ink3); }
.tag-rarity { background: #fff8e1; color: #7a5c00; }
.tag-win { background: var(--green-bg); color: var(--green); }
.card-sparkline { display: none; padding: 0 14px 12px; }
.card-sparkline.open { display: block; }

/* ── SKELETON ── */
.skeleton-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px; display: flex; gap: 12px;
}
.skel {
  background: linear-gradient(90deg, #f0ede8 25%, #e6e2db 50%, #f0ede8 75%);
  background-size: 200% 100%; border-radius: 6px;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-circle { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.skel-line { height: 11px; }
.skel-line.w60 { width: 60%; }
.skel-line.w40 { width: 40%; }

/* ── LISTE VIEW ── */
.liste-sticky {
  background: var(--white); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.liste-context-header { padding: 14px 16px 2px; }
.liste-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 4px;
}
.liste-hero-row { display: flex; align-items: baseline; gap: 8px; }
.liste-hero-cost {
  font-family: 'DM Mono', monospace; font-size: 40px;
  font-weight: 500; letter-spacing: -1.5px; color: var(--ink);
  line-height: 1;
}
.liste-hero-sub { font-size: 14px; color: var(--ink3); font-weight: 400; }
.liste-savings {
  font-size: 12px; color: var(--green); font-weight: 500;
  margin-top: 5px; padding-bottom: 12px;
}
.liste-sort-bar {
  display: flex; align-items: center; gap: 0;
  padding: 8px 14px; overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--border2); gap: 6px;
}
.liste-sort-bar::-webkit-scrollbar { display: none; }
.liste-sort-pill {
  flex-shrink: 0; padding: 6px 13px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--ink2); white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
.liste-sort-pill.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--white); font-weight: 700;
}
.liste-view-toggle {
  margin-left: auto; display: flex; gap: 4px; flex-shrink: 0;
}
.view-toggle-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; color: var(--ink2);
}
.view-toggle-btn svg { width: 16px; height: 16px; }
.view-toggle-btn.active { background: var(--border2); }

/* Station rows in Liste */
.list-rows { display: flex; flex-direction: column; padding-bottom: 90px; }
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border2);
  cursor: pointer; background: var(--white);
  transition: background 0.1s;
}
.list-row:active { background: var(--bg); }
.list-rank {
  width: 28px; text-align: center; flex-shrink: 0;
  font-size: 13px; font-weight: 700; color: var(--ink3);
}
.list-rank.best { color: var(--accent); font-size: 16px; }
.list-info { flex: 1; min-width: 0; }
.list-name-row { display: flex; align-items: center; gap: 5px; }
.list-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.list-trend { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.list-trend.down { color: var(--green); }
.list-trend.up { color: var(--red); }
.list-meta { font-size: 11px; color: var(--ink3); margin-top: 3px; }
.list-prices { text-align: right; flex-shrink: 0; }
.list-total {
  font-family: 'DM Mono', monospace; font-size: 16px;
  font-weight: 500; color: var(--ink);
}
.list-total.best { color: var(--accent); }
.list-unit { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.list-diff { font-size: 11px; color: var(--red); }

/* ── ALERTES VIEW ── */
.alertes-scroll { flex: 1; overflow-y: auto; padding: 0 0 90px; }
.alertes-scroll::-webkit-scrollbar { display: none; }
.alertes-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink3);
  padding: 18px 18px 8px;
}
.alertes-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 60px 24px; color: var(--ink3);
}
.alertes-placeholder .big-icon {
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--border2); display: flex; align-items: center;
  justify-content: center; color: var(--ink3); opacity: 0.7;
}
.alertes-placeholder .big-icon svg { width: 26px; height: 26px; }
.alertes-placeholder h3 { font-size: 17px; font-weight: 700; color: var(--ink2); }
.alertes-placeholder p { font-size: 13px; text-align: center; line-height: 1.5; }
.alert-card {
  margin: 0 16px 10px; padding: 14px 16px; border-radius: 16px;
  background: var(--white); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.alert-card-info { flex: 1; min-width: 0; }
.alert-card-name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-card-sub { font-size: 12px; color: var(--ink3); margin-top: 2px; }
.alert-card-prices { text-align: right; flex-shrink: 0; }
.alert-target { font-family: 'DM Mono', monospace; font-size: 16px; font-weight: 500; color: var(--accent); }
.alert-current { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.alert-badge {
  padding: 4px 8px; border-radius: 8px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0;
}
.alert-badge.active { background: var(--accent-light); color: var(--accent); }
.alert-badge.triggered { background: var(--green-bg); color: var(--green); }
.alert-badge.expired { background: var(--border2); color: var(--ink3); }
.alert-delete {
  width: 28px; height: 28px; border-radius: 14px; border: none;
  background: var(--bg); color: var(--ink3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}

/* ── ALERT SHEET ── */
.alert-sheet {
  position: absolute; inset: 0; z-index: 300;
  pointer-events: none; opacity: 0;
  transition: opacity 0.25s;
}
.alert-sheet.open { pointer-events: auto; opacity: 1; }
.alert-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.alert-sheet-body {
  position: absolute; bottom: 0; left: 50%;
  width: min(430px, 100vw);
  transform: translate(-50%, 100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  background: var(--white); border-radius: 20px 20px 0 0;
  padding: 0 20px 40px;
}
.alert-sheet.open .alert-sheet-body { transform: translate(-50%, 0); }
.alert-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 12px auto 18px;
}
.alert-sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 4px; }
.alert-sheet-subtitle { font-size: 13px; color: var(--ink3); margin-bottom: 18px; }
.alert-price-ref {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--bg);
  margin-bottom: 14px;
}
.alert-price-ref-label { font-size: 12px; color: var(--ink3); }
.alert-price-ref-val { font-family: 'DM Mono', monospace; font-size: 20px; font-weight: 500; color: var(--ink); }
.alert-input-label { font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 6px; }
.alert-input-wrap {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--white);
}
.alert-input-wrap:focus-within { border-color: var(--accent); }
.alert-input-prefix { font-family: 'DM Mono', monospace; font-size: 18px; color: var(--ink3); }
.alert-input {
  flex: 1; border: none; outline: none; font-family: 'DM Mono', monospace;
  font-size: 22px; font-weight: 500; color: var(--ink);
  background: transparent;
}
.alert-cta-row { display: flex; gap: 10px; }
.alert-cancel {
  flex: 0 0 100px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--ink2); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.alert-save {
  flex: 1; padding: 14px; border-radius: 14px; border: none;
  background: var(--accent); color: white;
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

/* ── OPTIONS VIEW ── */
.options-scroll { flex: 1; overflow-y: auto; padding: 0 0 90px; }
.options-section { padding: 18px 16px 8px; }
.options-section-title {
  font-size: 11px; color: var(--ink3); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
}
.options-card {
  background: var(--white); border-radius: 14px;
  border: 1px solid var(--border); overflow: hidden;
}
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-bottom: 1px solid var(--border2);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-text { flex: 1; }
.toggle-label { font-size: 14px; font-weight: 500; }
.toggle-sub { font-size: 11px; color: var(--ink3); margin-top: 1px; }
.toggle {
  width: 44px; height: 26px; border-radius: 13px;
  background: var(--border); position: relative; cursor: pointer;
  flex-shrink: 0; transition: background 0.2s; margin-left: 12px;
}
.toggle.on { background: var(--accent); }
.toggle::after {
  content: ''; position: absolute; width: 20px; height: 20px;
  border-radius: 50%; background: white; top: 3px; left: 3px;
  transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on::after { left: 21px; }
.select-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px;
}
.options-select {
  padding: 7px 10px; border: 1.5px solid var(--border);
  border-radius: 10px; font-family: 'DM Sans', sans-serif;
  font-size: 13px; background: var(--white); color: var(--ink);
}
.car-form-card { background: var(--white); border-radius: 14px; border: 1px solid var(--border); padding: 14px; }
.car-input-label { font-size: 10px; color: var(--ink3); font-weight: 600; margin-bottom: 5px; }
.car-input {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13px;
  background: var(--white); color: var(--ink); margin-bottom: 10px;
}
.car-input:focus { outline: none; border-color: var(--accent); }
.car-input-row { display: flex; gap: 10px; }
.car-input-row > div { flex: 1; }

/* ── STATION DETAIL PANEL ── */
.detail-panel {
  position: absolute; inset: 0; z-index: 200;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column;
}
.detail-panel.open { transform: translateX(0); }

/* Detail Nav */
.detail-nav {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 44px) + 8px) 16px 12px;
  background: var(--bg); flex-shrink: 0;
}
.detail-back-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink2); flex-shrink: 0;
}
.detail-back-btn svg { width: 20px; height: 20px; }
.detail-nav-title {
  flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 4px;
}
.detail-nav-actions { display: flex; gap: 8px; flex-shrink: 0; }
.detail-icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink2);
}
.detail-icon-btn svg { width: 18px; height: 18px; }
.detail-icon-btn.faved { color: var(--accent); border-color: var(--accent-pill); background: var(--accent-light); }

.detail-scroll { flex: 1; overflow-y: auto; padding-bottom: 110px; }
.detail-scroll::-webkit-scrollbar { display: none; }

/* Detail Hero */
.detail-hero {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 0 16px 16px; background: var(--bg);
}
.brand-badge {
  width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: white; flex-shrink: 0;
}
.hero-text { flex: 1; min-width: 0; }
.hero-name {
  font-size: 20px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--ink); line-height: 1.2;
}
.hero-addr { font-size: 13px; color: var(--ink3); margin-top: 3px; line-height: 1.4; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hero-chip {
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.hero-chip.auto { background: var(--accent-light); color: var(--accent); }
.hero-chip.autoroute { background: var(--border2); color: var(--ink2); }

/* Detail Info Strip */
.detail-info-strip {
  display: flex; margin: 0 16px 12px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.info-strip-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 12px 8px;
  border-right: 1px solid var(--border2);
}
.info-strip-item:last-child { border-right: none; }
.info-strip-icon { color: var(--ink3); margin-bottom: 4px; }
.info-strip-icon svg { width: 17px; height: 17px; }
.info-strip-val { font-size: 13px; font-weight: 700; color: var(--ink); }
.info-strip-label { font-size: 10px; color: var(--ink3); margin-top: 1px; }

/* Detail Price Card */
.detail-price-section { padding: 0 16px 12px; }
.detail-price-card {
  background: var(--white); border-radius: 20px;
  border: 1px solid var(--border); padding: 18px 20px;
}
.price-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.detail-fuel-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--ink3);
}
.detail-price-big {
  font-family: 'DM Mono', monospace; font-size: 50px;
  font-weight: 500; letter-spacing: -2.5px;
  color: var(--ink); line-height: 1;
}
.detail-price-unit { font-size: 12px; color: var(--ink3); margin-top: 4px; }
.detail-trend-chip {
  padding: 6px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.detail-trend-chip.down { background: var(--green-bg); color: var(--green); }
.detail-trend-chip.up { background: var(--red-bg); color: var(--red); }
.detail-trend-chip.stable { background: var(--border2); color: var(--ink3); }

/* Fuel Switcher */
.fuel-switcher {
  display: flex; gap: 8px; overflow-x: auto;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border2);
  scrollbar-width: none;
}
.fuel-switcher::-webkit-scrollbar { display: none; }
.fuel-pill {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 8px 14px; border-radius: 24px;
  border: 1.5px solid var(--border); background: var(--bg);
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}
.fuel-pill.active {
  background: var(--accent); border-color: var(--accent);
}
.fuel-pill.unavail { opacity: 0.38; cursor: default; }
.pill-name {
  font-size: 11px; font-weight: 700; color: var(--ink2);
  letter-spacing: 0.2px;
}
.fuel-pill.active .pill-name { color: rgba(255,255,255,0.75); }
.pill-price {
  font-family: 'DM Mono', monospace; font-size: 13px;
  font-weight: 500; color: var(--ink);
}
.fuel-pill.active .pill-price { color: var(--white); }

/* Car cost block */
/* Car cost card */
.car-cost-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.car-cost-prompt {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
}
.car-cost-prompt-icon { color: var(--ink3); flex-shrink: 0; }
.car-cost-prompt-icon svg { width: 20px; height: 20px; display: block; }
.car-cost-prompt-text { flex: 1; min-width: 0; }
.car-cost-prompt-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.car-cost-prompt-sub { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.car-cost-prompt-btn {
  flex-shrink: 0; padding: 8px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.car-cost-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--border2);
}
.car-cost-icon { color: var(--ink3); flex-shrink: 0; }
.car-cost-icon svg { width: 16px; height: 16px; display: block; }
.car-cost-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--ink3);
}
.car-cost-title span { color: var(--ink2); }
.car-cost-rows { padding: 4px 0; }
.car-cost-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; font-size: 13px; color: var(--ink2);
  border-bottom: 1px solid var(--border2);
}
.car-cost-val { font-family: 'DM Mono', monospace; font-weight: 500; color: var(--ink); }
.car-cost-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--ink);
}
.car-cost-total-val {
  font-family: 'DM Mono', monospace; font-size: 18px;
  font-weight: 500; color: var(--accent);
}

/* Outage Banner */
.detail-outage-banner {
  margin: 0 16px 12px; padding: 12px 14px;
  border-radius: 14px; background: var(--red-bg);
  border: 1px solid rgba(192,57,43,0.18);
}
.outage-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--red);
  padding: 3px 0;
}
.outage-row svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Detail sections */
.detail-section { padding: 0 16px 16px; }
.detail-section-header {
  display: flex; align-items: center; margin-bottom: 12px;
}
.detail-section-header .detail-section-title { margin-bottom: 0; }
.detail-section-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
  flex: 1; color: var(--ink); margin-bottom: 12px;
}
.range-pills {
  display: flex; gap: 3px; background: var(--border2);
  padding: 3px; border-radius: 9px;
}
.range-pill {
  padding: 4px 10px; border-radius: 7px; border: none;
  background: transparent; color: var(--ink3);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.range-pill.active {
  background: var(--white); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Info card */
.info-card {
  background: var(--white); border-radius: 16px;
  border: 1px solid var(--border); overflow: hidden;
}
.info-card-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--border2);
}
.info-card-row:last-child { border-bottom: none; }
.info-card-icon { color: var(--ink3); flex-shrink: 0; }
.info-card-icon svg { width: 17px; height: 17px; display: block; }
.info-card-label { flex: 1; font-size: 13px; color: var(--ink2); }
.info-card-val { font-size: 13px; font-weight: 600; color: var(--ink); text-align: right; }
.info-card-val.green { color: var(--green); }

/* Services */
.services-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.service-tag {
  padding: 5px 11px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border2);
  font-size: 12px; font-weight: 500; color: var(--ink2);
  line-height: 1.3;
}

/* Detail sticky CTA */
.detail-cta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 20px) + 16px);
  background: linear-gradient(to top, var(--white) 55%, rgba(255,255,255,0));
  display: flex; gap: 10px;
}
.cta-alert {
  padding: 15px 18px; border-radius: 16px;
  border: 1.5px solid var(--border); background: var(--white);
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; color: var(--ink); white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.cta-alert svg { width: 16px; height: 16px; }
.cta-go {
  flex: 1; padding: 15px 16px; border-radius: 16px; border: none;
  background: var(--accent); color: white;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 7px; letter-spacing: -0.2px;
}
.cta-go svg { width: 18px; height: 18px; }

/* ── BOTTOM NAV ── */
.bottom-nav {
  height: 64px; background: var(--white);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px; cursor: pointer;
  padding: 8px 0; color: var(--ink3);
  transition: color 0.15s;
}
.nav-icon { display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 22px; height: 22px; }
.nav-label { font-size: 10px; font-weight: 500; }
.nav-item.active { color: var(--accent); }
.nav-item.active .nav-label { font-weight: 700; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 76px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: white;
  padding: 10px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
  opacity: 0; transition: all 0.3s; pointer-events: none;
  z-index: 400; white-space: nowrap; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ── OFFLINE BANNER ── */
.offline-banner {
  background: var(--ink); color: white; font-size: 12px;
  padding: 7px 16px; text-align: center; display: none; flex-shrink: 0;
}
.offline-banner.visible { display: block; }

/* ── PRICE FLASH ── */
@keyframes flash-green { 0%,100%{background:transparent} 50%{background:var(--green-bg)} }
@keyframes flash-red { 0%,100%{background:transparent} 50%{background:var(--red-bg)} }
.flash-down { animation: flash-green 1s ease; }
.flash-up { animation: flash-red 1s ease; }

/* ── PTR ── */
.ptr-spinner {
  text-align: center; padding: 10px; color: var(--accent-mid);
  font-size: 13px; display: none;
}
.ptr-spinner.visible { display: block; }

/* ── LEAFLET MAP MARKERS ── */
.lf-bubble {
  background: var(--accent); color: white;
  border-radius: 8px; padding: 4px 9px;
  font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 700;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  position: relative; cursor: pointer; line-height: 1.4;
}
.lf-bubble.expensive { background: var(--red); }
.lf-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--accent);
}
.lf-bubble.expensive::after { border-top-color: var(--red); }
.lf-user {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid white;
  box-shadow: 0 0 0 3px rgba(28,61,46,0.3);
}