:root {
  --font: 'DM Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --bg: #f5f6f8;
  --white: #ffffff;
  --surface: #ffffff;
  --surface2: #f0f1f4;
  --border: #e2e4ea;
  --border-h: #cdd0d9;
  --text: #1a1d26;
  --text2: #5a5f6e;
  --text3: #8b90a0;
  --green: #16a34a;
  --green-light: #dcfce7;
  --green-border: #bbf7d0;
  --red: #dc2626;
  --red-light: #fee2e2;
  --red-border: #fecaca;
  --blue: #2563eb;
  --blue-light: #dbeafe;
  --blue-border: #bfdbfe;
  --amber: #d97706;
  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-m: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body {
  font-family:var(--font); background:var(--bg); color:var(--text);
  line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100dvh; overflow-x:hidden;
}
a { color:var(--blue); text-decoration:none }
a:hover { text-decoration:underline }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px }
button { font-family:inherit; -webkit-appearance:none; appearance:none; cursor:pointer; color:inherit }

.wrap { max-width:720px; margin:0 auto; padding:0 16px 40px }

.hero {
  position:relative; text-align:center;
  padding:clamp(36px,8vw,64px) 20px clamp(24px,5vw,40px);
  background:var(--white); border-bottom:1px solid var(--border);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,rgba(37,99,235,.05) 0%,transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 100%,rgba(22,163,74,.04) 0%,transparent 60%);
  pointer-events:none;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green); background:var(--green-light); border:1px solid var(--green-border);
  padding:5px 14px; border-radius:100px; margin-bottom:14px;
  animation:fadeDown .6s var(--ease) both;
}
.hero-badge .dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:blink 2.5s ease infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero h1 {
  font-family:var(--mono); font-weight:800;
  font-size:clamp(1.7rem,5vw,2.6rem); letter-spacing:-.04em; line-height:1.1;
  color:var(--text); animation:fadeDown .6s .1s var(--ease) both;
}
.hero h1 span { color:var(--blue) }
.hero-sub { margin-top:10px; font-size:.88rem; color:var(--text2); animation:fadeDown .6s .2s var(--ease) both }
@keyframes fadeDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }

.controls {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--border); padding:10px 16px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  animation:fadeDown .5s .3s var(--ease) both;
}
.controls-inner { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:8px }
.controls-row { display:flex; gap:8px; align-items:center; width:100%; min-width:0 }
.tabs { display:flex; gap:2px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-s); padding:2px; flex:1; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch }
.tab {
  flex:1; padding:7px 4px; border:0; background:0; color:var(--text3);
  font-size:.82rem; font-weight:600; border-radius:6px; cursor:pointer;
  transition:all .2s var(--ease); white-space:nowrap; text-align:center;
}
.tab:hover { color:var(--text2) }
.tab:active { transform:scale(.96) }
.tab[aria-selected="true"] { background:var(--text); color:#fff; box-shadow:var(--shadow) }
.search-box { flex:1; position:relative; min-width:0 }
.search-box svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text3); pointer-events:none }
.search-box input {
  width:100%; padding:8px 10px 8px 32px; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-s); color:var(--text); font-size:.85rem; transition:border-color .2s;
}
.search-box input::placeholder { color:var(--text3) }
.search-box input:focus { border-color:var(--blue) }
.sort-btn {
  display:flex; align-items:center; gap:5px; padding:8px 12px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-s);
  color:var(--text2); font-size:.78rem; font-weight:600; cursor:pointer;
  transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.sort-btn:hover { border-color:var(--blue); color:var(--text) }
.sort-btn.active { border-color:var(--green); color:var(--green); background:var(--green-light) }
.sort-btn svg { width:15px; height:15px; flex-shrink:0 }

.zone-pills {
  display:flex; gap:6px; width:100%;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:2px;
}
.zone-pills::-webkit-scrollbar { display:none }
.zone-pill {
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:100px;
  background-color:var(--white);
  color:var(--text2);
  font-size:.78rem;
  font-weight:600;
  font-family:var(--font);
  cursor:pointer;
  transition:all .15s var(--ease);
  white-space:nowrap;
  flex-shrink:0;
  line-height:1.4;
  display:inline-block;
  text-decoration:none;
}
.zone-pill:hover { border-color:var(--blue); color:var(--text); text-decoration:none }
.zone-pill.active {
  background-color:var(--text);
  border-color:var(--text);
  color:#fff;
}
.zone-pill.active:hover { color:#fff; text-decoration:none }

.brands-row { display:flex; gap:6px; flex-wrap:wrap; width:100% }
.brand-badge {
  padding:5px 12px; border:1px solid var(--border); border-radius:100px;
  background:var(--white); color:var(--text2); font-size:.72rem; font-weight:600;
  cursor:pointer; transition:all .15s var(--ease); white-space:nowrap; flex-shrink:0;
}
.brand-badge:hover { border-color:var(--blue); color:var(--text) }
.brand-badge:active { transform:scale(.95) }
.brand-badge.active { background:var(--blue); border-color:var(--blue); color:#fff }
.brand-badge.all { background:var(--surface2); border-color:var(--border) }
.brand-badge.all.active { background:var(--text); border-color:var(--text); color:#fff }

.summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0 12px; animation:fadeUp .5s .4s var(--ease) both }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.s-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:14px 8px; text-align:center; box-shadow:var(--shadow); transition:border-color .2s,box-shadow .2s,transform .2s var(--ease); min-width:0; overflow:hidden }
.s-card:hover { border-color:var(--border-h); box-shadow:var(--shadow-m); transform:translateY(-2px) }
.s-label { font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3) }
.s-val { font-family:var(--mono); font-size:clamp(1.2rem,3.5vw,1.7rem); font-weight:800; margin:4px 0 2px; animation:countPop .4s .5s var(--ease) both }
.s-sub { font-size:.65rem; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.s-card.best { border-color:var(--green-border); background:var(--green-light) } .s-card.best .s-val { color:var(--green) }
.s-card.worst { border-color:var(--red-border); background:var(--red-light) } .s-card.worst .s-val { color:var(--red) }
.s-card.mid .s-val { color:var(--amber) }

.savings-banner {
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:var(--green-light); border:1px solid var(--green-border);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:16px;
  box-shadow:var(--shadow); animation:fadeUp .5s .5s var(--ease) both;
}
.savings-banner .amount { font-family:var(--mono); font-weight:800; font-size:1.1rem; color:var(--green); animation:countPop .4s .6s var(--ease) both }
@keyframes countPop { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
.savings-banner .desc { font-size:.78rem; color:var(--text2) }

.geo-bar {
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:10px 16px; margin:12px 0;
  background:var(--blue-light); border:1px solid var(--blue-border);
  border-radius:var(--radius); font-size:.82rem; color:var(--text2);
  animation:fadeUp .4s var(--ease) both;
}
.geo-bar button { padding:5px 14px; background:var(--blue); color:#fff; border:0; border-radius:6px; font-size:.78rem; font-weight:600; cursor:pointer; transition:opacity .2s }
.geo-bar button:hover { opacity:.85 }
.geo-bar.ok { background:var(--green-light); border-color:var(--green-border) }
.geo-bar.ok .geo-text { color:var(--green) }

.list-head {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:20px 0 8px; border-bottom:1px solid var(--border);
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text3);
}
.station {
  display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:center;
  padding:12px 4px; border-bottom:1px solid var(--border);
  text-decoration:none !important; color:inherit !important;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, background .15s ease, box-shadow .2s ease;
}
.station.visible { opacity:1; transform:translateY(0) }
.station:last-child { border-bottom:0 }
.station.visible:hover { background:var(--surface2); border-radius:var(--radius-s); transform:translateX(3px); box-shadow:var(--shadow) }
.station.visible:active { transform:scale(.99) }
.station .rank { font-family:var(--mono); font-size:.78rem; font-weight:700; text-align:center; color:var(--text3) }
.station.top .rank { background:var(--green-light); color:var(--green); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:.72rem; border:1px solid var(--green-border); animation:rankPop .3s var(--ease) both }
.station.bot .rank { background:var(--red-light); color:var(--red); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:.72rem; border:1px solid var(--red-border); animation:rankPop .3s var(--ease) both }
@keyframes rankPop { from{transform:scale(0)} to{transform:scale(1)} }
.st-info { min-width:0; overflow:hidden }
.st-name { font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.st-brand { font-size:.6rem; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:4px; background:var(--blue-light); color:var(--blue); white-space:nowrap; flex-shrink:0; border:1px solid var(--blue-border) }
.st-addr { font-size:.76rem; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st-dist { font-size:.68rem; color:var(--text3); margin-top:1px }
.st-dist svg { width:11px; height:11px; vertical-align:-1px; margin-right:2px }
.st-price { text-align:right; white-space:nowrap }
.st-price .val { font-family:var(--mono); font-size:1.15rem; font-weight:800 }
.station.top .st-price .val { color:var(--green) }
.station.bot .st-price .val { color:var(--red) }
.st-price .diff { font-family:var(--mono); font-size:.65rem; color:var(--text3) }
.st-price .diff.neg { color:var(--green) }
.st-price .diff.pos { color:var(--red) }

.loading-state { text-align:center; padding:80px 20px }
.loader { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .65s linear infinite; margin:0 auto 16px }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-state p { color:var(--text3); font-size:.9rem }
.empty { text-align:center; padding:40px 20px; color:var(--text3); font-size:.9rem }

.a2hs-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 12px 24px;
  animation:a2hsFadeIn .3s var(--ease) both;
}
@keyframes a2hsFadeIn { from{opacity:0} to{opacity:1} }
.a2hs-popup {
  background:var(--white); border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
  max-width:380px; width:100%; padding:24px 20px 20px;
  position:relative;
  animation:a2hsSlideUp .35s .05s var(--ease) both;
}
@keyframes a2hsSlideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
.a2hs-popup::after {
  content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:10px solid var(--white);
}
.a2hs-close {
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:50%; border:0;
  background:var(--surface2); color:var(--text3);
  font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.a2hs-close:hover { background:var(--border) }
.a2hs-title { font-weight:700; font-size:.95rem; margin-bottom:16px; padding-right:30px }
.a2hs-steps { list-style:none; display:flex; flex-direction:column; gap:14px }
.a2hs-step { display:flex; align-items:flex-start; gap:12px; font-size:.82rem; color:var(--text2); line-height:1.45 }
.a2hs-step-num {
  flex-shrink:0; width:24px; height:24px;
  background:var(--blue-light); color:var(--blue); border:1px solid var(--blue-border);
  border-radius:50%; font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.a2hs-step svg { flex-shrink:0; width:20px; height:20px; color:var(--blue) }
.a2hs-step strong { color:var(--text); font-weight:600 }
.a2hs-icon-share { display:inline-block; vertical-align:-3px; width:16px; height:16px }
.a2hs-dismiss {
  display:block; width:100%; margin-top:16px; padding:10px;
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-s);
  color:var(--text2); font-size:.8rem; font-weight:600; text-align:center;
  cursor:pointer; transition:all .15s;
}
.a2hs-dismiss:hover { background:var(--border); color:var(--text) }

.pager {
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding:20px 0 8px; flex-wrap:wrap;
}
.pg-btn {
  min-width:36px; height:36px; padding:0 8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-s);
  color:var(--text2); font-size:.82rem; font-weight:600; font-family:var(--font);
  cursor:pointer; transition:all .15s var(--ease);
}
.pg-btn:hover:not(:disabled) { border-color:var(--blue); color:var(--blue); background:var(--blue-light); transform:translateY(-1px) }
.pg-btn:active:not(:disabled) { transform:scale(.95) }
.pg-btn:disabled { opacity:.35; cursor:not-allowed }
.pg-btn.pg-active { background:var(--text); color:#fff; border-color:var(--text) }
.pg-dots { color:var(--text3); font-size:.8rem; padding:0 4px }

footer {
  text-align:center; padding:32px 20px; margin-top:20px;
  border-top:1px solid var(--border); font-size:.75rem; color:var(--text3);
  line-height:1.8;
}
footer a { color:var(--text2) }
footer .contact { margin-top:12px; padding-top:12px; border-top:1px solid var(--border) }
footer .contact-name { font-weight:600; color:var(--text2) }

@media(max-width:600px) {
  .hero { padding:28px 16px 20px }
  .hero h1 { font-size:1.5rem }
  .hero-sub { font-size:.8rem }
  .controls { padding:8px 10px }
  .controls-inner { gap:6px }
  .controls-row { gap:6px }
  .brands-row { gap:4px }
  .brand-badge { font-size:.65rem; padding:4px 9px }
  .tabs { flex:1; min-width:0 }
  .tab { padding:7px 6px; font-size:.75rem }
  .zone-pill { font-size:.7rem; padding:5px 10px }
  .search-box input { padding:8px 8px 8px 30px; font-size:.82rem }
  .sort-btn { padding:8px 10px; font-size:.72rem }
  .sort-btn svg { width:14px; height:14px }
  .wrap { padding:0 12px 32px }
  .summary { gap:6px; margin:14px 0 10px }
  .s-card { padding:10px 6px; border-radius:8px }
  .s-val { font-size:1.1rem }
  .s-label { font-size:.55rem; letter-spacing:.05em }
  .s-sub { font-size:.58rem }
  .savings-banner { padding:10px 12px; font-size:.75rem }
  .savings-banner .amount { font-size:.95rem }
  .savings-banner .desc { font-size:.72rem }
  .station { grid-template-columns:26px 1fr auto; gap:8px; padding:10px 2px }
  .st-name { font-size:.82rem; gap:4px }
  .st-brand { font-size:.55rem; padding:1px 5px }
  .st-addr { font-size:.7rem }
  .st-price .val { font-size:.95rem }
  .st-price .diff { font-size:.6rem }
  .list-head { font-size:.62rem; padding:14px 0 6px }
  .pager { gap:3px; padding:16px 0 4px }
  .pg-btn { min-width:32px; height:32px; font-size:.75rem }
  footer { padding:24px 12px; font-size:.7rem }
}

@media(max-width:380px) {
  .summary { grid-template-columns:1fr }
  .s-sub { white-space:normal }
  .hero h1 { font-size:1.3rem }
  .tab { font-size:.7rem; padding:6px 4px }
  .station { grid-template-columns:22px 1fr auto; gap:6px }
  .st-name { font-size:.78rem }
  .st-price .val { font-size:.88rem }
}