:root {
  --bg: #e8eff0;
  --surface: #f8f7f2;
  --surface-strong: #fffdf7;
  --surface-soft: #eef2f1;
  --ink: #203944;
  --ink-muted: #66808a;
  --ink-soft: #8ea1a8;
  --line: rgba(32, 57, 68, 0.14);
  --line-strong: rgba(32, 57, 68, 0.28);
  --accent: #35bfd3;
  --accent-dark: #198da4;
  --accent-soft: rgba(53, 191, 211, 0.18);
  --fuel-regular: #2f9b62;
  --fuel-premium: #c84545;
  --fuel-diesel: #1e2f37;
  --good: #338d69;
  --warn: #c7892f;
  --bad: #b95858;
  --shadow: 0 16px 38px rgba(31, 54, 64, 0.22);
  --shadow-soft: 8px 8px 20px rgba(58, 83, 91, 0.14), -8px -8px 18px rgba(255, 255, 255, 0.78);
  --radius: 22px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --system-nav-backdrop: max(var(--safe-bottom), 42px);
  --collapsed-nav-backdrop: max(var(--safe-bottom), 28px);
}

.sheet-bottom .sheet-handle {
  background: rgba(248, 247, 242, 0.94);
  border: 0;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 2;
}

* {
  box-sizing: border-box;
}

html,
body,
.app-shell,
.screen {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.onboarding {
  align-items: stretch;
  background: linear-gradient(180deg, #f8f7f2, #eef2f1);
  display: grid;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 2000;
}

html[data-platform="web"] .onboarding {
  display: none;
}

.onboarding.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.onboarding-track {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  height: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.onboarding-track::-webkit-scrollbar {
  display: none;
}

.onboarding-slide {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0;
  position: relative;
  scroll-snap-align: start;
}

.onboarding-slide img {
  display: block;
  height: auto;
  max-height: 100dvh;
  object-fit: contain;
  width: 100vw;
}

.onboarding-continue {
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  bottom: calc(var(--safe-bottom) + 62px);
  box-shadow: 0 12px 28px rgba(25, 141, 164, 0.28);
  color: var(--surface-strong);
  font-weight: 900;
  left: 50%;
  min-width: 180px;
  padding: 14px 24px;
  position: absolute;
  transform: translateX(-50%);
}

.onboarding-dots {
  align-items: center;
  bottom: calc(var(--safe-bottom) + 20px);
  display: flex;
  gap: 10px;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
}

.onboarding-dots span {
  background: #b8c6cc;
  border-radius: 999px;
  height: 5px;
  transition: width 160ms ease, background 160ms ease;
  width: 34px;
}

.onboarding-dots span.active {
  background: var(--accent);
  width: 44px;
}

.app-shell {
  min-height: 100dvh;
  position: relative;
}

.screen {
  display: none;
  position: relative;
}

.screen.active {
  display: block;
}

.map {
  height: 100%;
  width: 100%;
  background: var(--surface-soft);
  z-index: 1;
}

.brand-bar {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  left: 16px;
  pointer-events: none;
  position: fixed;
  right: 16px;
  top: calc(var(--safe-top) + 28px);
  z-index: 1250;
}

.brand-bar h1,
.brand-bar p {
  margin: 0;
}

.brand-bar h1 {
  font-size: clamp(1.35rem, 7vw, 1.5rem);
  letter-spacing: -0.04em;
}

.eyebrow {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.screen-switch,
.menu-button,
.settings-card,
.sheet,
.statistics-card,
.list-panel {
  backdrop-filter: blur(18px);
  background: rgba(248, 247, 242, 0.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.screen-switch {
  border-radius: 999px;
  display: flex;
  padding: 5px;
  pointer-events: auto;
}

.top-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  pointer-events: auto;
  position: relative;
  z-index: 1251;
}

.screen-switch button,
.segmented button,
.pill-button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink-muted);
  font-weight: 800;
  padding: 10px 14px;
  position: relative;
}

.menu-button {
  align-items: center;
  border-radius: 999px;
  display: inline-grid;
  gap: 3px;
  height: 42px;
  justify-content: center;
  padding: 0;
  width: 42px;
}

.menu-button svg {
  height: 23px;
  width: 23px;
}

.menu-button path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-width: 2.4;
}

.screen-switch button.active,
.segmented button.active,
.pill-button {
  background: var(--accent);
  color: var(--surface-strong);
  box-shadow: 0 8px 18px rgba(25, 141, 164, 0.28);
}

.sheet {
  left: 12px;
  overflow: hidden;
  position: fixed;
  right: 12px;
  z-index: 700;
}

.sheet-top {
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 360px;
  top: calc(var(--safe-top) + 102px);
  z-index: 820;
}

.sheet-top.collapsed {
  max-height: 92px;
}

.sheet-bottom {
  border-radius: var(--radius) var(--radius) 0 0;
  bottom: 0;
  max-height: calc(100dvh - var(--safe-top) - 236px);
  overflow-y: auto;
  padding-bottom: var(--system-nav-backdrop);
  z-index: 720;
}

.sheet-bottom.collapsed {
  height: calc(68px + var(--collapsed-nav-backdrop));
  overflow: hidden;
  transform: none;
}

.sheet-top,
.sheet-bottom {
  max-width: 720px;
  margin-inline: auto;
  transition: transform 180ms ease, height 180ms ease;
}

.sheet-handle {
  align-items: center;
  background: transparent;
  color: var(--ink);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 64px;
  padding: 14px clamp(14px, 4vw, 18px);
  touch-action: none;
  user-select: none;
  width: 100%;
}

.sheet-handle::before {
  background: var(--line-strong);
  border-radius: 999px;
  content: "";
  height: 5px;
  left: 50%;
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  width: 42px;
}

.sheet-toggle {
  background: transparent;
  border: 0;
  color: var(--ink);
  flex: 1;
  padding: 0;
  text-align: left;
}

.sheet-toggle span,
.sheet-handle span {
  color: var(--ink-muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sheet-toggle strong,
.sheet-handle strong {
  display: block;
  font-size: clamp(0.76rem, 4.3vw, 0.95rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

#filter-summary {
  display: -webkit-box;
  max-width: min(58vw, 430px);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.view-actions {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.view-action {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 7px clamp(8px, 2.8vw, 10px);
}

.view-action.active {
  background: var(--accent);
  color: var(--surface-strong);
}

.sheet-content {
  padding: 0 18px 18px;
}

.sheet-bottom .sheet-content {
  padding-bottom: calc(var(--system-nav-backdrop) + 24px);
}

.sheet.collapsed .sheet-content {
  display: none;
}

.control-row,
.control-grid,
.toggle-row {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.control-row label,
.control-grid > label > span {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.segmented {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
}

.control-grid {
  grid-template-columns: 1fr;
}

.control-grid label {
  display: grid;
  gap: 8px;
}

.control-fieldset {
  border: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
}

.control-fieldset[hidden],
#list-sort-control[hidden] {
  display: none;
}

.control-fieldset legend {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 800;
  grid-column: 1 / -1;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.radio-pill {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink-muted);
  display: flex;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 900;
  justify-content: center;
  padding: 10px 12px;
  position: relative;
}

.radio-pill input {
  inset: 0;
  opacity: 0;
  position: absolute;
}

.radio-pill:has(input:checked) {
  background: var(--accent);
  color: var(--surface-strong);
}

.overlay-segmented {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 5px;
}

.settings-menu {
  background: linear-gradient(180deg, rgba(32, 57, 68, 0.05), rgba(32, 57, 68, 0.18));
  inset: 0;
  pointer-events: auto;
  position: fixed;
  z-index: 1100;
}

.settings-menu[hidden] {
  display: none;
}

.settings-card {
  border-radius: 24px;
  display: grid;
  gap: 14px;
  margin: calc(var(--safe-top) + 86px) 16px 0 auto;
  max-width: min(360px, calc(100vw - 24px));
  padding: 16px;
}

.settings-header {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto;
}

.settings-header h2 {
  font-size: 1.25rem;
  margin: 2px 0 0;
}

.menu-close {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 1.4rem;
  height: 36px;
  justify-content: center;
  line-height: 1;
  width: 36px;
}

.settings-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.settings-actions[hidden],
.auth-choice-row[hidden],
.settings-divider[hidden] {
  display: none;
}

.settings-wide-button {
  grid-column: 1 / -1;
}

.auth-choice-row {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1.1fr) minmax(116px, 0.9fr);
}

.auth-mode-toggle {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
}

.auth-mode-toggle button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 900;
  padding: 9px 8px;
}

.auth-mode-toggle button.active {
  background: var(--accent);
  color: var(--surface-strong);
}

.google-login-button {
  font-size: 0.76rem;
  padding-inline: 8px;
  white-space: normal;
}

.settings-divider {
  border-top: 1px solid var(--line);
  height: 0;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form[hidden] {
  display: none;
}

.auth-form label {
  display: grid;
  gap: 5px;
}

.auth-form span {
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-form input {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}

.auth-required {
  background: rgba(53, 191, 211, 0.12);
  border: 1px solid rgba(53, 191, 211, 0.32);
  border-radius: 14px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 800;
  margin: 0;
  padding: 10px 12px;
}

button:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-row {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
  padding: 12px;
}

.settings-row > span {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.language-toggle {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  padding: 3px;
}

.language-toggle button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 7px 10px;
}

.language-toggle button.active {
  background: var(--accent);
  color: var(--surface-strong);
}

.screen.menu-open .sheet,
.screen.menu-open .list-panel {
  display: none;
}

input[type="search"],
select {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  outline: none;
  padding: 12px 14px;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding-right: 34px;
}

textarea {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  font: inherit;
  outline: none;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}

input[type="range"] {
  accent-color: var(--accent);
}

.toggle-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.switch {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  gap: 8px;
  font-weight: 700;
}

.list-panel {
  border-radius: var(--radius);
  left: 12px;
  max-height: calc(100dvh - var(--list-panel-top, 166px) - 92px);
  max-width: 720px;
  margin-inline: auto;
  overflow: hidden;
  position: fixed;
  right: 12px;
  top: var(--list-panel-top, 166px);
  z-index: 620;
}

.list-header {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px 8px;
}

.list-header span {
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.station-list {
  display: grid;
  gap: 8px;
  max-height: calc(100dvh - var(--list-panel-top, 166px) - 154px);
  overflow: auto;
  padding: 8px 12px 14px;
}

.empty-list {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink-muted);
  line-height: 1.45;
  padding: 16px;
}

.station-row {
  align-items: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
  padding: 12px;
  text-align: left;
}

.station-row small {
  color: var(--ink-muted);
  display: block;
  margin-top: 2px;
}

.station-row-main {
  align-items: center;
  display: grid;
  gap: 4px 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.station-row-content {
  display: contents;
}

.station-row-content strong {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-row-content small,
.station-row-content .source-badges {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-brand-pill {
  justify-self: start;
  max-width: 104px;
}

.source-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
}

.source-badge {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 4px 7px;
}

.source-badge.danger {
  background: rgba(185, 88, 88, 0.12);
  border-color: rgba(185, 88, 88, 0.34);
  color: #9d3434;
}

.source-badge.good {
  background: rgba(51, 141, 105, 0.12);
  border-color: rgba(51, 141, 105, 0.34);
  color: #23694d;
}

.price-chip {
  align-items: center;
  background: var(--accent);
  border-radius: 999px;
  color: var(--surface-strong);
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-width: 64px;
  padding: 8px 10px;
}

.list-metrics {
  align-items: end;
  display: grid;
  gap: 6px;
  justify-items: end;
}

.confidence-chip {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 8px;
}

.price-chip.missing {
  background: var(--ink-soft);
}

.station-detail h2 {
  font-size: 1.35rem;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 8px;
}

.station-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-pill {
  background: var(--brand-color, var(--ink-soft));
  border-radius: 999px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  max-width: 128px;
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
  text-transform: none;
  white-space: nowrap;
}

.muted {
  color: var(--ink-muted);
}

.detail-address {
  margin: 0 0 14px;
}

.profeco-section {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.profeco-section h3 {
  font-size: 1rem;
  margin: 2px 0 4px;
}

.profeco-section p {
  margin: 0;
}

.profeco-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 18px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.profeco-card.danger {
  background: rgba(185, 88, 88, 0.1);
  border-color: rgba(185, 88, 88, 0.35);
  border-left-color: var(--bad);
}

.profeco-card.good {
  background: rgba(51, 141, 105, 0.1);
  border-color: rgba(51, 141, 105, 0.32);
  border-left-color: var(--good);
}

.profeco-card.warning {
  background: rgba(199, 137, 47, 0.12);
  border-color: rgba(199, 137, 47, 0.38);
  border-left-color: var(--warn);
}

.profeco-card > strong {
  font-size: 0.95rem;
}

.profeco-card small {
  color: var(--ink-muted);
  line-height: 1.35;
}

.profeco-records {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.profeco-record-toggle {
  margin-top: 2px;
}

.profeco-record-toggle summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  list-style-position: inside;
}

.profeco-record {
  background: rgba(248, 247, 242, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 3px;
  padding: 9px;
}

.profeco-record span,
.profeco-record small {
  color: var(--ink-muted);
}

.price-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0;
}

.price-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  position: relative;
}

.price-card::before {
  border-radius: 999px;
  content: "";
  height: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 10px;
}

.price-card.regular::before {
  background: var(--fuel-regular);
}

.price-card.premium::before {
  background: var(--fuel-premium);
}

.price-card.diesel::before {
  background: var(--fuel-diesel);
}

.price-card span {
  color: var(--ink-muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.price-card strong {
  display: block;
  font-size: 1.08rem;
  margin-top: 5px;
}

.detail-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 12px;
}

.rating-section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
}

.rating-section h3 {
  font-size: 1rem;
  margin: 0;
}

.rating-overall-row,
.rating-title-row {
  align-items: baseline;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto;
}

.rating-overall {
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 950;
  margin: 0;
  text-align: right;
}

.rating-vote-count {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 600;
  margin: 2px 0 0;
  text-align: right;
}

.rating-grid {
  display: grid;
  gap: 12px;
}

.rating-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 20px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.rating-card strong {
  display: block;
}

.rating-header span {
  color: var(--ink-muted);
  display: block;
  font-size: 0.82rem;
  line-height: 1.25;
}

.rating-header {
  display: block;
}

.rating-label {
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin: 0 0 4px;
}

.rating-header strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 3px;
  text-align: right;
}

.rating-vote {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  display: inline-flex;
  font-size: 1.35rem;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-align: center;
  width: 48px;
}

.rating-card .rating-vote {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.rating-prompt {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 800;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

.rating-vote-row {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr auto;
}

.rating-votes {
  display: grid;
  gap: clamp(3px, 1.6vw, 7px);
  grid-template-columns: repeat(5, max-content);
  justify-self: end;
}

.rating-vote {
  background: var(--surface-soft);
  cursor: pointer;
}

.rating-vote:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.42;
}

.feedback-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.inline-form {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
}

.inline-form[hidden] {
  display: none;
}

.inline-form label {
  display: grid;
  gap: 6px;
}

.inline-form label span {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-status {
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0;
}

.comments-section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
}

.comment-record-toggle {
  margin-top: 2px;
}

.comment-record-toggle summary {
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  list-style-position: inside;
}

.comment-records {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.comment-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}

.comment-card p {
  margin: 4px 0 0;
}

.secondary-button {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 800;
  padding: 10px clamp(7px, 2.5vw, 14px);
  text-decoration: none;
}

.detail-actions .pill-button,
.detail-actions .secondary-button {
  align-items: center;
  display: inline-flex;
  font-size: clamp(0.72rem, 3.4vw, 0.92rem);
  justify-content: center;
  min-height: 44px;
  min-width: 118px;
  padding-inline: 16px;
  text-align: center;
  white-space: nowrap;
}

.quality-note {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  font-size: 0.86rem;
  padding: 10px 12px;
}

.station-pin {
  align-items: center;
  background: var(--surface-strong);
  border: 2px solid var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--ink);
  display: flex;
  font-size: 0.76rem;
  gap: 4px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  letter-spacing: -0.04em;
  min-width: 64px;
  padding: 0 8px;
  white-space: nowrap;
}

.station-pin:has(.pin-rating) {
  min-width: 86px;
}

.pin-status {
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-style: normal;
  line-height: 1;
}

.pin-status.green {
  color: #27b05f;
}

.pin-status.red {
  color: var(--bad);
}

.pin-status.none {
  color: var(--fuel-diesel);
}

.pin-rating {
  color: var(--accent);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.station-pin.selected .pin-rating {
  color: var(--surface-strong);
}

.station-pin.low {
  border-color: var(--warn);
}

.station-pin.selected {
  background: var(--accent);
  color: var(--surface-strong);
  transform: scale(1.12);
}

.municipality-pin,
.state-pin {
  align-items: center;
  background: rgba(248, 247, 242, 0.95);
  border: 2px solid var(--accent-dark);
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: 48px;
  justify-content: center;
  line-height: 1;
  min-width: 76px;
  padding: 6px 8px;
}

.municipality-pin strong,
.state-pin strong {
  font-size: 1rem;
}

.municipality-pin small,
.state-pin small {
  color: var(--ink-muted);
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  margin-top: 3px;
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.state-pin {
  border-color: var(--fuel-diesel);
  min-width: 84px;
}

.state-pin small {
  max-width: 70px;
}

.leaflet-control-zoom {
  display: none;
}

.leaflet-control-zoom a {
  background: var(--surface-strong) !important;
  color: var(--ink) !important;
}

html[data-platform="web"] .leaflet-tile-pane {
  filter: saturate(0.35) contrast(0.9) brightness(1.1);
}

@media (max-width: 899px) {
  .stats-state-history-card,
  .stats-tank-card {
    display: none;
  }

  .premium-stats-teaser {
    display: block;
  }

  .premium-stats-teaser-message {
    gap: 6px;
    padding: 18px;
  }

  .premium-stats-teaser-message strong {
    font-size: clamp(1.55rem, 9vw, 2.6rem);
  }

  .premium-stats-teaser-message span {
    font-size: 0.9rem;
  }
}

.statistics-screen {
  background: radial-gradient(circle at 50% 20%, var(--surface-strong), var(--bg));
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(var(--safe-top) + 116px) 12px calc(var(--safe-bottom) + 24px);
}

.analytics-nav,
.analytics-prices-card,
.analytics-movers-card,
.analytics-anomalies-card,
.analytics-map-card,
.analytics-profeco-card,
.analytics-complaints-card,
.analytics-inspections-card,
.analytics-brands-card,
.analytics-coverage-card,
.analytics-reports-card,
.analytics-international-latest-card,
.analytics-international-card,
.analytics-methodology-card,
.analytics-placeholder-grid {
  display: none;
}

@media (max-width: 420px) {
  .brand-bar {
    gap: 10px;
    left: 12px;
    right: 12px;
  }

  .screen-switch button {
    padding: 9px 12px;
  }

  .sheet-top {
    left: 6px;
    right: 6px;
  }

  .sheet-bottom {
    left: 6px;
    right: 6px;
  }
}

.statistics-stack {
  display: grid;
  gap: 14px;
  margin: 0 auto;
  max-width: 720px;
  overflow: hidden;
  width: 100%;
}

.statistics-layout {
  margin: 0 auto;
  max-width: 720px;
  width: 100%;
}

.statistics-card {
  border-radius: 28px;
  max-width: 100%;
  overflow: hidden;
  padding: 16px;
}

.statistics-card h2 {
  font-size: clamp(1.25rem, 6vw, 2rem);
  letter-spacing: -0.06em;
  line-height: 1;
  margin: 4px 0 12px;
}

.statistics-card p {
  color: var(--ink-muted);
  line-height: 1.55;
}

.analytics-overview-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 14px;
  padding: 0;
}

.analytics-overview-header,
.analytics-overview-card > .stats-overview-grid {
  display: none;
}

.stats-overview-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.stats-kpi-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
}

.stats-kpi-card span,
.stats-kpi-card small {
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.stats-kpi-card strong {
  color: var(--ink);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -0.06em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.analytics-placeholder-grid {
  gap: 14px;
}

.analytics-placeholder-card h2 {
  font-size: 1.2rem;
}

.premium-stats-teaser,
.premium-access-gate {
  display: none;
}

.premium-stats-teaser {
  position: relative;
}

.premium-stats-teaser img {
  border-radius: 24px;
  display: block;
  height: auto;
  width: 100%;
}

.premium-stats-teaser-message {
  align-content: start;
  align-items: start;
  background: linear-gradient(180deg, rgba(32, 57, 68, 0.84), rgba(32, 57, 68, 0.18));
  color: var(--surface-strong);
  display: grid;
  gap: 8px;
  inset: 0;
  justify-items: center;
  padding: clamp(18px, 3vw, 34px);
  position: absolute;
  text-align: center;
}

.premium-stats-teaser-message strong {
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 0.9;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.premium-stats-teaser-message span {
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  font-weight: 850;
  max-width: 920px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
}

.premium-stats-teaser-message .pill-button {
  background: var(--accent);
  color: var(--surface-strong);
  margin-top: 4px;
  text-decoration: none;
}

.premium-access-gate {
  background: rgba(248, 247, 242, 0.94);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  gap: 18px;
  padding: clamp(22px, 4vw, 42px);
}

.premium-access-gate h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.08em;
  line-height: 0.95;
  margin: 6px 0 12px;
}

.premium-access-gate p {
  color: var(--ink-muted);
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}

.premium-access-gate .premium-access-debug {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 14px;
  padding: 10px 12px;
}

.premium-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stats-price-table {
  border: 1px solid var(--line);
  border-radius: 18px;
  max-height: 560px;
  overflow: auto;
}

.price-table-header,
.price-table-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 48px minmax(140px, 1fr) minmax(86px, auto) minmax(86px, auto);
  padding: 10px 12px;
}

.metro-table-row {
  grid-template-columns: 48px minmax(150px, 1fr) minmax(76px, auto) minmax(76px, auto) minmax(76px, auto);
}

.tank-table-row {
  grid-template-columns: 48px minmax(150px, 1fr) minmax(90px, auto) minmax(110px, auto);
}

.brand-table-header,
.brand-table-row,
.international-table-header,
.international-table-row {
  grid-template-columns: minmax(160px, 1fr) minmax(70px, auto) minmax(86px, auto) minmax(130px, auto);
}

.brand-insight-grid {
  display: grid;
  gap: 16px;
}

.brand-insight-card {
  background: linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.brand-insight-card h3 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.04em;
  margin: 0 0 6px;
}

.brand-insight-card p {
  color: var(--ink-muted);
  margin: 0;
}

.brand-insight-table {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow-x: auto;
  overflow-y: visible;
}

.brand-insight-header,
.brand-insight-row {
  align-items: center;
  display: grid;
  gap: 10px;
  min-width: 620px;
  padding: 10px 12px;
}

.brand-insight-header {
  background: rgba(32, 57, 68, 0.07);
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.brand-insight-row {
  background: rgba(255, 255, 255, 0.36);
  border-top: 1px solid var(--line);
}

.brand-price-row,
.brand-signal-row {
  grid-template-columns: minmax(150px, 1.4fr) minmax(74px, 0.5fr) minmax(94px, 0.6fr) minmax(110px, 0.7fr);
}

.brand-sort-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  font: inherit;
  font-weight: 950;
  gap: 4px;
  justify-self: start;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.brand-sort-button.active {
  color: var(--ink);
}

.brand-pill-small {
  font-size: 0.68rem;
  justify-content: center;
  max-width: 116px;
  min-width: 72px;
  padding: 6px 9px;
}

.delta-up {
  color: var(--bad);
  font-weight: 900;
}

.delta-down {
  color: var(--good);
  font-weight: 900;
}

.international-table-header,
.international-table-row {
  grid-template-columns: minmax(90px, 0.8fr) minmax(160px, 1.4fr) minmax(90px, auto) minmax(90px, auto) minmax(120px, 1fr);
}

.price-table-header {
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.price-table-row {
  background: rgba(255, 253, 247, 0.66);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
}

.price-table-row.low span:last-child {
  color: var(--good);
}

.price-table-row.high span:last-child {
  color: var(--bad);
}

.price-table-row.metro-table-row span:last-child {
  color: inherit;
}

.stats-signal-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.movers-comparison-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.movers-panel {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.stats-signal-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 18px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
}

.stats-signal-card span,
.stats-signal-card small {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.stats-signal-card strong {
  color: var(--ink);
  font-size: 1.5rem;
  letter-spacing: -0.06em;
  line-height: 1;
}

.stats-signal-card.low {
  border-left-color: var(--good);
}

.stats-signal-card.high {
  border-left-color: var(--bad);
}

.methodology-list {
  display: grid;
  gap: 10px;
}

.methodology-list p {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 0;
  padding: 12px;
}

.stats-fuel {
  margin-top: 8px;
}

.stats-controls {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.analytics-nav-fuel {
  display: none;
}

.vertical-segmented {
  display: grid;
  gap: 5px;
}

.international-controls {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, auto) minmax(160px, 0.7fr);
}

.international-controls label {
  display: grid;
  gap: 6px;
}

.international-comparison-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2.4fr);
  align-items: start;
}

.state-comparison-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 2.8fr);
  align-items: start;
}

.international-comparison-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.state-series-panel,
.international-series-panel {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.state-selector {
  display: grid;
  gap: 10px;
}

.state-selector p {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
  margin: 0;
}

.state-series-panel .state-selector-list {
  max-height: 278px;
}

.international-series-list {
  display: grid;
  gap: 7px;
}

.international-series-list p {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
  margin: 0 0 2px;
}

.international-controls span,
.international-controls small,
.state-series-panel > span,
.international-series-panel > span {
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.international-controls small {
  align-self: center;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: none;
}

.stats-subsection-title {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 14px;
}

.tank-cost-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.tank-cost-table {
  max-height: 520px;
}

.tank-car-illustration {
  align-self: stretch;
  background:
    radial-gradient(circle at 70% 24%, rgba(53, 191, 211, 0.18), transparent 34%),
    linear-gradient(145deg, var(--surface-soft), var(--surface-strong));
  border: 1px solid var(--line);
  border-radius: 22px;
  display: grid;
  min-height: 280px;
  overflow: hidden;
  place-items: stretch;
  padding: 14px;
}

.tank-car-copy {
  background: rgba(255, 253, 247, 0.82);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  gap: 4px;
  padding: 12px;
  position: relative;
  z-index: 1;
}

.tank-car-copy strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.tank-car-copy span,
.tank-car-copy small {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.tank-car-illustration img {
  display: block;
  height: auto;
  max-width: 100%;
  mix-blend-mode: multiply;
  place-self: center;
}

.stats-controls label {
  display: grid;
  gap: 6px;
}

.stats-controls span {
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stats-controls output {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.stats-period {
  font-size: 0.84rem;
  font-weight: 800;
  margin: 10px 0 0;
}

.stats-card-title {
  align-items: end;
  display: grid;
  grid-template-columns: 1fr auto;
}

.stats-price-table h3 {
  font-size: 0.92rem;
  margin: 14px 12px 8px;
}

.ranking-chart {
  display: grid;
  gap: 8px;
  max-height: 360px;
  max-width: 100%;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-color: rgba(102, 128, 138, 0.42) transparent;
  scrollbar-width: thin;
}

.ranking-chart::-webkit-scrollbar {
  width: 5px;
}

.ranking-chart::-webkit-scrollbar-track {
  background: transparent;
}

.ranking-chart::-webkit-scrollbar-thumb {
  background: rgba(102, 128, 138, 0.32);
  border-radius: 999px;
}

.ranking-row {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(72px, 30%) minmax(0, 1fr) auto;
  min-width: 0;
}

.ranking-row > span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-row strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.ranking-track {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 18px;
  min-width: 0;
  overflow: hidden;
}

.ranking-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  border-radius: 999px;
  height: 100%;
}

.state-hex-map {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  margin: 10px auto 0;
  max-width: min(100%, 430px);
  overflow: hidden;
}

.state-tile {
  align-items: center;
  aspect-ratio: 1.12;
  background: var(--surface-soft);
  border: 1px solid rgba(32, 57, 68, 0.1);
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  font-size: clamp(0.58rem, 2.6vw, 0.78rem);
  gap: 1px;
  justify-content: center;
  min-width: 0;
}

.state-tile small {
  font-size: clamp(0.42rem, 1.8vw, 0.55rem);
  font-weight: 800;
}

.state-tile.low {
  background: rgba(53, 191, 211, 0.22);
}

.state-tile.mid {
  background: rgba(51, 141, 105, 0.26);
}

.state-tile.mid-high {
  background: rgba(199, 137, 47, 0.46);
}

.state-tile.high {
  background: rgba(185, 88, 88, 0.78);
  color: var(--surface-strong);
}

.state-tile.empty {
  background: rgba(30, 47, 55, 0.12);
  color: var(--ink-soft);
}

.state-tile.empty[aria-hidden="true"] {
  background: transparent;
  border-color: transparent;
}

.state-selector {
  display: grid;
  gap: 10px;
  position: relative;
}

.state-selector-dropdown {
  position: relative;
}

.state-selector-dropdown summary {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 900;
  list-style-position: inside;
  padding: 11px 13px;
}

.state-selector-menu {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
  margin-top: 8px;
  max-height: 280px;
  overflow: hidden;
  padding: 10px;
}

.state-selector-list {
  display: grid;
  gap: 7px;
  max-height: 210px;
  overflow-y: auto;
}

.state-choice {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-muted);
  display: inline-flex;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 9px 10px;
}

.state-choice input {
  accent-color: var(--accent);
}

.state-choice:has(input:checked) {
  background: var(--accent);
  color: var(--surface-strong);
}

.state-choice:has(input:disabled) {
  opacity: 0.45;
}

.state-selector-apply {
  justify-content: center;
}

.line-chart {
  display: grid;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.line-chart svg {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  height: 220px;
  max-width: 100%;
  width: 100%;
}

.line-chart .chart-axis {
  stroke: var(--line-strong);
  stroke-width: 2;
}

.line-chart .chart-y-tick line {
  stroke: rgba(32, 57, 68, 0.1);
  stroke-width: 1;
}

.line-chart text {
  fill: var(--ink-muted);
  font-size: 0.58rem;
  font-weight: 800;
}

.line-chart .chart-y-tick text {
  dominant-baseline: middle;
  text-anchor: end;
}

.line-chart .chart-x-label {
  text-anchor: middle;
}

.line-chart .chart-x-label.vertical {
  text-anchor: start;
}

.line-chart path {
  fill: none;
  stroke: var(--series-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.line-chart .chart-point circle {
  fill: var(--surface-strong);
  stroke: var(--series-color);
  stroke-width: 3;
}

.chart-tooltip {
  background: rgba(248, 247, 242, 0.96);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
  max-width: 170px;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.chart-tooltip[hidden] {
  display: none;
}

.line-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.line-legend span {
  align-items: center;
  color: var(--ink-muted);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 5px;
}

.line-legend i {
  border-radius: 999px;
  display: inline-flex;
  height: 9px;
  width: 9px;
}

@media (min-width: 760px) {
  .brand-bar {
    left: calc(50% - 360px);
    right: calc(50% - 360px);
  }

  .settings-card {
    margin-right: calc(50% - 360px);
  }

  .control-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  html[data-platform="web"] .brand-bar {
    left: 50%;
    max-width: 1440px;
    right: auto;
    transform: translateX(-50%);
    width: calc(100vw - clamp(48px, 8vw, 112px));
  }

  html[data-platform="web"] .top-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  html[data-platform="web"] .settings-card {
    margin: calc(var(--safe-top) + 86px) max(clamp(24px, 4vw, 56px), calc((100vw - 1440px) / 2)) 0 auto;
    max-width: min(420px, calc(100vw - 48px));
  }

  html[data-platform="web"] .google-login-button {
    white-space: nowrap;
  }

  html[data-platform="web"] .sheet-top,
  html[data-platform="web"] .list-panel {
    left: 50%;
    max-width: 1440px;
    right: auto;
    transform: translateX(-50%);
    width: calc(100vw - clamp(48px, 8vw, 112px));
  }

  html[data-platform="web"] .station-row-main {
    align-items: start;
    gap: 8px;
    grid-template-columns: clamp(76px, 10vw, 116px) minmax(0, 1fr);
  }

  html[data-platform="web"] .station-row-content {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  html[data-platform="web"] .station-row-content strong,
  html[data-platform="web"] .station-row-content small,
  html[data-platform="web"] .station-row-content .source-badges {
    grid-column: auto;
  }

  html[data-platform="web"] .sheet-bottom {
    left: auto;
    max-width: 720px;
    right: max(clamp(24px, 4vw, 56px), calc((100vw - 1440px) / 2));
    transform: none;
    width: min(720px, calc(100vw - clamp(48px, 8vw, 112px)));
  }

  html[data-platform="web"] .sheet-bottom.collapsed {
    transform: none;
  }

  html[data-platform="web"] .sheet-top {
    max-height: min(420px, calc(100dvh - 160px));
  }

  html[data-platform="web"] .sheet-top.collapsed {
    max-height: 92px;
  }

  html[data-platform="web"] .sheet-top.collapsed .sheet-content {
    display: none;
  }

  html[data-platform="web"] .sheet-content {
    padding-inline: clamp(20px, 2vw, 28px);
  }

  html[data-platform="web"] .sheet-top .sheet-content {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  }

  html[data-platform="web"] .sheet-top .control-row {
    gap: 7px;
    margin-bottom: 0;
    max-width: 520px;
  }

  html[data-platform="web"] .sheet-top .control-row label {
    display: grid;
    gap: 7px;
  }

  html[data-platform="web"] .sheet-top .control-fieldset {
    gap: 0;
  }

  html[data-platform="web"] .sheet-top .control-grid {
    align-items: start;
    grid-template-columns: minmax(260px, 360px) minmax(260px, 360px) minmax(220px, 320px);
    justify-content: start;
    margin-bottom: 0;
  }

  html[data-platform="web"] .sheet-top .segmented,
  html[data-platform="web"] .sheet-top .overlay-segmented {
    align-items: stretch;
    max-width: 360px;
    min-height: 56px;
  }

  html[data-platform="web"] .sheet-top .segmented button,
  html[data-platform="web"] .sheet-top .radio-pill {
    align-items: center;
    display: flex;
    min-height: 44px;
  }

  html[data-platform="web"] .sheet-top .segmented button {
    justify-content: center;
  }

  html[data-platform="web"] .sheet-top .control-fieldset legend {
    margin-bottom: 7px;
  }

  html[data-platform="web"] .sheet-top input[type="range"] {
    max-width: 320px;
  }

  html[data-platform="web"] .station-detail {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 18px;
  }

  html[data-platform="web"] .station-detail > h2,
  html[data-platform="web"] .station-detail > .detail-address,
  html[data-platform="web"] .station-detail > .quality-note,
  html[data-platform="web"] .station-detail > .detail-actions,
  html[data-platform="web"] .station-detail > .inline-form {
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .price-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(120px, 160px));
    justify-content: start;
    margin-block: 0;
  }

  html[data-platform="web"] .price-card {
    min-width: 0;
  }

  html[data-platform="web"] .detail-actions .pill-button,
  html[data-platform="web"] .detail-actions .secondary-button {
    flex: 0 0 auto;
    width: auto;
  }

  html[data-platform="web"] .rating-section,
  html[data-platform="web"] .profeco-section,
  html[data-platform="web"] .comments-section {
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .rating-grid {
    grid-template-columns: 1fr;
  }

  html[data-platform="web"] .rating-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  html[data-platform="web"] .rating-card .rating-votes {
    justify-self: end;
    min-width: 0;
  }

  html[data-platform="web"] .rating-vote {
    height: 46px;
    width: 46px;
  }

  html[data-platform="web"] .profeco-section {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  html[data-platform="web"] .profeco-section > div:first-child,
  html[data-platform="web"] .profeco-section > h3,
  html[data-platform="web"] .profeco-section > .eyebrow {
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .comment-records {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  html[data-platform="web"] .statistics-screen {
    padding: calc(var(--safe-top) + 108px) clamp(24px, 4vw, 56px) 48px;
  }

  html[data-platform="web"] .statistics-screen .brand-bar {
    left: 50%;
    right: auto;
  }

  html[data-platform="web"] .statistics-layout {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    max-width: 1440px;
  }

  html[data-platform="web"] .analytics-nav {
    align-self: start;
    background: rgba(248, 247, 242, 0.9);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 6px;
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    padding: 10px;
    position: sticky;
    top: calc(var(--safe-top) + 102px);
  }

  html[data-platform="web"] .analytics-nav-fuel {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    margin-bottom: 4px;
    padding: 4px 4px 12px;
  }

  html[data-platform="web"] .analytics-nav-fuel > span {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    padding-inline: 8px;
    text-transform: uppercase;
  }

  html[data-platform="web"] .vertical-segmented button {
    background: var(--surface-soft);
    border: 0;
    border-radius: 14px;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 900;
    padding: 10px 12px;
    text-align: left;
  }

  html[data-platform="web"] .vertical-segmented button.active {
    background: var(--accent);
    color: var(--surface-strong);
  }

  html[data-platform="web"] .analytics-nav button {
    background: transparent;
    border: 0;
    border-radius: 16px;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 900;
    padding: 10px 12px;
    text-align: left;
  }

  html[data-platform="web"] .analytics-nav button.active,
  html[data-platform="web"] .analytics-nav button:hover {
    background: var(--accent);
    color: var(--surface-strong);
  }

  html[data-platform="web"] .statistics-stack {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    max-width: none;
    overflow: visible;
  }

  html[data-platform="web"] .statistics-card {
    grid-column: span 6;
    padding: 20px;
  }

  html[data-platform="web"] .analytics-overview-card {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .analytics-overview-header {
    display: block;
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .analytics-overview-card > .stats-overview-grid {
    display: grid;
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .analytics-overview-card > .stats-fuel-card {
    display: none;
  }

  html[data-platform="web"] .stats-fuel-card .stats-fuel,
  html[data-platform="web"] .stats-controls {
    display: none;
  }

  html[data-platform="web"] .stats-controls {
    align-items: end;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 0.8fr);
  }

  html[data-platform="web"] .analytics-overview-card > .statistics-card:nth-of-type(2),
  html[data-platform="web"] .analytics-overview-card > .statistics-card:nth-of-type(3) {
    grid-column: span 6;
  }

  html[data-platform="web"] .analytics-overview-card > .statistics-card:nth-of-type(4) {
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .analytics-overview-card > .stats-tank-card {
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .tank-cost-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.85fr);
  }

  html[data-platform="web"] .analytics-prices-card {
    display: grid;
    gap: 14px;
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .movers-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-platform="web"] .analytics-movers-card,
  html[data-platform="web"] .analytics-anomalies-card,
  html[data-platform="web"] .analytics-map-card,
  html[data-platform="web"] .analytics-profeco-card,
  html[data-platform="web"] .analytics-complaints-card,
  html[data-platform="web"] .analytics-inspections-card,
  html[data-platform="web"] .analytics-coverage-card,
  html[data-platform="web"] .analytics-reports-card,
  html[data-platform="web"] .analytics-international-latest-card,
  html[data-platform="web"] .analytics-international-card {
    display: grid;
    gap: 14px;
    grid-column: span 6;
  }

  html[data-platform="web"] .analytics-international-card {
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .analytics-movers-card {
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .analytics-international-latest-card {
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .analytics-international-card .line-chart svg {
    height: 360px;
    width: 100%;
  }

  html[data-platform="web"] .stats-state-history-card .line-chart svg {
    height: 300px;
    width: 100%;
  }

  html[data-platform="web"] .analytics-brands-card,
  html[data-platform="web"] .analytics-methodology-card {
    display: grid;
    gap: 14px;
    grid-column: 1 / -1;
  }

  html[data-platform="web"] .analytics-placeholder-grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  html[data-platform="web"] .analytics-placeholder-card {
    min-height: 170px;
  }

  html[data-platform="web"][data-stats-access="public"] .analytics-nav button:not([data-stats-section="overview"]),
  html[data-platform="web"][data-stats-access="public"] .stats-state-history-card,
  html[data-platform="web"][data-stats-access="public"] .stats-tank-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-prices-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-movers-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-map-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-profeco-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-complaints-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-inspections-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-coverage-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-reports-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-international-latest-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-international-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-brands-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-methodology-card,
  html[data-platform="web"][data-stats-access="public"] .analytics-placeholder-grid {
    display: none;
  }

  html[data-platform="web"][data-stats-access="public"] .premium-stats-teaser {
    display: block;
    grid-column: 1 / -1;
  }

  html[data-platform="web"][data-stats-access="locked"] .analytics-nav,
  html[data-platform="web"][data-stats-access="locked"] .analytics-overview-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-prices-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-movers-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-map-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-profeco-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-complaints-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-inspections-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-coverage-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-reports-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-international-latest-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-international-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-brands-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-methodology-card,
  html[data-platform="web"][data-stats-access="locked"] .analytics-placeholder-grid {
    display: none;
  }

  html[data-platform="web"][data-stats-access="locked"] .statistics-layout {
    display: block;
  }

  html[data-platform="web"][data-stats-access="locked"] .premium-access-gate {
    display: grid;
    margin: 0 auto;
    max-width: 920px;
  }

  html[data-platform="web"] .ranking-chart {
    max-height: 520px;
  }

  html[data-platform="web"] .state-hex-map {
    max-width: 560px;
  }

  html[data-platform="web"] .line-chart svg {
    height: min(360px, 34vw);
  }
}

@media (min-width: 1200px) {
  html[data-platform="web"] .statistics-layout {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  }

  html[data-platform="web"] .analytics-overview-card {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  html[data-platform="web"] .analytics-overview-header {
    grid-column: span 4;
  }

  html[data-platform="web"] .analytics-overview-card > .stats-overview-grid {
    grid-column: span 8;
  }

  html[data-platform="web"] .analytics-overview-card > .statistics-card:nth-of-type(2) {
    grid-column: span 7;
  }

  html[data-platform="web"] .analytics-overview-card > .statistics-card:nth-of-type(3) {
    grid-column: span 5;
  }

  html[data-platform="web"] .analytics-overview-card > .stats-state-history-card,
  html[data-platform="web"] .analytics-overview-card > .stats-tank-card {
    grid-column: 1 / -1;
  }
}