:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  color-scheme: light dark;
  --bg: #f5f7fb;
  --card: rgba(255,255,255,.9);
  --text: #111827;
  --muted: #667085;
  --line: rgba(17,24,39,.1);
  --accent: #0a7aff;
  --good: #118a54;
  --shadow: 0 8px 30px rgba(16,24,40,.08);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0c111b; --card:rgba(24,31,45,.92); --text:#f5f7fb; --muted:#9aa4b2; --line:rgba(255,255,255,.09); --accent:#4da3ff; --good:#52c985; --shadow:none; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); padding: max(18px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
body::before { content:""; position:fixed; inset:0 0 auto; height:260px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent); pointer-events:none; }
.topbar, main { position:relative; max-width:760px; margin:0 auto; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; padding:8px 2px 14px; }
.eyebrow { font-size:12px; letter-spacing:.14em; font-weight:700; color:var(--accent); }
h1 { margin:4px 0 2px; font-size:30px; letter-spacing:-.03em; }
h2 { margin-top:0; }
.muted { color:var(--muted); }
.topbar p { margin:0; font-size:13px; }
.icon-btn { width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:var(--card); font-size:24px; color:var(--text); }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border:1px solid var(--line); background:color-mix(in srgb, var(--card) 85%, transparent); border-radius:14px; margin-bottom:14px; backdrop-filter:blur(14px); }
.segmented button { border:0; background:transparent; color:var(--muted); padding:10px; border-radius:10px; font-weight:700; }
.segmented button.active { background:var(--card); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.panel { display:none; }
.panel.active { display:block; }
.cards { display:grid; gap:12px; }
.card { border:1px solid var(--line); background:var(--card); border-radius:18px; padding:16px; box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.country-card .country-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.country-card h2 { margin:0; font-size:21px; }
.source-age { margin-top:3px; font-size:10px; }
.country-card .currency { font-size:12px; color:var(--muted); }
.fuel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fuel-box { background:color-mix(in srgb, var(--bg) 65%, transparent); border:1px solid var(--line); border-radius:14px; padding:11px 9px; min-width:0; }
.fuel-box .label { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fuel-box .price { font-size:20px; font-weight:800; margin-top:4px; letter-spacing:-.02em; }
.fuel-box .local { font-size:11px; color:var(--muted); margin-top:2px; }
.source { font-size:11px; line-height:1.45; color:var(--muted); margin:11px 4px 20px; }
a { color:var(--accent); }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.controls label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:var(--muted); }
select { width:100%; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:11px 10px; }
.primary { grid-column:1 / -1; border:0; border-radius:13px; background:var(--accent); color:white; padding:13px 14px; font-size:15px; font-weight:800; }
.status { padding:14px 4px 10px; font-size:13px; }
.station-list { display:grid; gap:10px; }
.station-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.station h3 { margin:0 0 3px; font-size:17px; }
.station-network, .station-meta { font-size:12px; }
.station-address { margin:12px 0 7px; font-size:13px; }
.station-price { font-weight:850; font-size:22px; white-space:nowrap; color:var(--good); }
.maps-link { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; text-decoration:none; }
.prose { line-height:1.55; }
.prose p { color:var(--muted); }
.skeleton { min-height:142px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.55; } }
@media (max-width:430px) { .fuel-box .price { font-size:17px; } .controls { gap:9px; } }