:root{--bg:#f4f6fa;--card:#fff;--ink:#14213d;--muted:#5b6478;--line:#e3e7ef;--brand:#0f3460;--brand-ink:#fff;--accent:#ffc528;--link:#0b4fa8;--fresh:#16a34a;--ok:#ca8a04;--old:#ea580c;--stale:#9aa3b5;--best:#dcfce7;--f95:#15803d;--f98:#1d4ed8;--fd:#111827;--err:#b91c1c;--okbg:#e8f8ee}
@media (prefers-color-scheme:dark){:root{--bg:#0f1420;--card:#171d2b;--ink:#e7ebf3;--muted:#9aa3b5;--line:#2a3344;--brand:#0c2a52;--link:#7fb3ff;--best:#15381f;--f95:#4ade80;--f98:#93c5fd;--fd:#e5e7eb;--okbg:#153324}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.65rem;line-height:1.2;margin:.6em 0 .4em}h2{font-size:1.1rem;margin:0 0 .6em;display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap}h2 .more{font-size:.85rem;font-weight:500;margin-left:auto}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}.small{font-size:.85rem}
.top{background:var(--brand);color:var(--brand-ink);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.top-row{display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{display:flex;align-items:center;gap:7px;color:#fff;font-size:1.3rem;font-weight:600;letter-spacing:-.02em}.logo b{color:var(--accent);font-weight:700}.logo:hover{text-decoration:none}
.search{display:flex;flex:1 1 220px;max-width:460px;background:#fff;border-radius:10px;overflow:hidden}
.search input{flex:1;border:0;padding:9px 12px;font:inherit;min-width:0;color:#111}.search input:focus{outline:none}
.search button{border:0;background:var(--accent);color:#0f3460;padding:0 14px;cursor:pointer;display:flex;align-items:center}
.nav{display:flex;gap:4px;margin-left:auto}.nav a{color:#dfe7f5;padding:6px 10px;border-radius:8px;font-weight:500}.nav a.on,.nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
@media (max-width:640px){.top{position:static}.top-row{padding-top:8px;gap:8px}.search{order:3;flex-basis:100%;max-width:none}.nav{margin-left:auto}.nav a{padding:6px 8px;font-size:.95rem}}
.demo-banner{background:#fff3c4;color:#5c4400;border:1px solid #f1d27a;border-radius:10px;padding:8px 14px;margin-top:12px;font-size:.9rem}
@media (prefers-color-scheme:dark){.demo-banner{background:#3b3010;color:#ffe9a8;border-color:#6b5a1e}}
main{padding-bottom:32px}
.hero{padding:12px 0 4px}.lead{color:var(--muted);margin:.2em 0 1em;max-width:70ch}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.tile{background:var(--card);border-radius:14px;padding:14px 16px;border-top:4px solid var(--f95);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tile-98{border-color:var(--f98)}.tile-diesel{border-color:var(--fd)}
.tile-label{font-size:.85rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tile-price{font-size:2.1rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}.tile-price small{font-size:.9rem;font-weight:500;color:var(--muted)}
.tile-sub{font-size:.85rem;color:var(--muted)}
.small-tiles .tile{padding:10px 14px}.small-tiles .tile-price{font-size:1.6rem}
@media (max-width:640px){.tiles{gap:8px}.tile{padding:10px 10px}.tile-price{font-size:1.5rem}.tile-sub{font-size:.75rem}.small-tiles .tile-price{font-size:1.3rem}}
.card{background:var(--card);border-radius:14px;padding:16px;margin:14px 0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cols .card{margin:0;min-width:0}.cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.cols,.cols.two{grid-template-columns:minmax(0,1fr)}}
.toplist{list-style:none;margin:0;padding:0;counter-reset:n}
.toplist li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);counter-increment:n}
.toplist li::before{content:counter(n);color:var(--muted);font-size:.8rem;width:1.2em;text-align:right;font-variant-numeric:tabular-nums}
.toplist li:last-child{border-bottom:0}.toplist a{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.tl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-city{font-size:.8rem;color:var(--muted)}
.tl-price{flex:none;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.citygrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.citygrid a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;background:var(--bg)}.citygrid a:hover{text-decoration:none;outline:2px solid var(--link)}
.cg-price{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.reports{list-style:none;margin:0;padding:0}.reports li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.reports li:last-child{border:0}
.rp-time{color:var(--muted);font-size:.85rem;min-width:4.5em;font-variant-numeric:tabular-nums}.rp-fuel{margin-left:auto;font-size:.85rem;color:var(--muted)}.reports strong{font-variant-numeric:tabular-nums;min-width:3.5em;text-align:right}
.howto{margin-top:20px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;color:var(--muted)}.steps b{color:var(--ink);font-size:1.3em;margin-right:.3em}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.crumbs{font-size:.85rem;color:var(--muted);margin-top:12px}
.toolbar{display:flex;gap:10px;align-items:center;margin:8px 0}.toolbar input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--card);color:var(--ink);min-width:0}
.btn{display:inline-block;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}.btn:hover{text-decoration:none;border-color:var(--link)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.btn.ghost{background:transparent}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
table.prices{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--card);border-radius:14px;overflow:hidden}
.prices th,.prices td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.prices thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--card);white-space:nowrap}
.prices th[data-sort]{cursor:pointer;user-select:none}.prices th[data-sort]:hover{color:var(--ink)}.prices th.sorted::after{content:" ▾";opacity:.6}.prices th.sorted.desc::after{content:" ▴"}
.prices tbody tr:last-child td{border-bottom:0}.prices tbody tr:hover td{background:rgba(127,127,127,.06)}
.prices td.num,.prices th.num{text-align:right;white-space:nowrap}
.prices td.best{background:var(--best);font-weight:700}
.prices td.stale{color:var(--stale)}.prices td.none{color:var(--stale)}
.prices .sub{display:block;font-size:.78rem;color:var(--muted);line-height:1.3}
.prices.big td,.prices.big th{font-size:1.25rem;padding:12px 10px}.prices.big th{font-weight:600}
.age{display:block;font-size:.7rem;color:var(--muted);font-weight:400;line-height:1.1}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--stale);margin-right:6px;vertical-align:middle}.dot.fresh{background:var(--fresh)}.dot.ok{background:var(--ok)}.dot.old{background:var(--old)}
.legend{font-size:.8rem;color:var(--muted);margin:10px 0}.stale-x{color:var(--stale)}
.hide-m{display:table-cell}.show-m{display:none}
@media (max-width:640px){.hide-m{display:none}.show-m{display:block}.prices th,.prices td{padding:8px 6px}}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.chips a{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}.chips small{color:var(--muted)}
.alpha{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 16px}.alpha a{display:inline-block;min-width:32px;text-align:center;padding:4px;border-radius:8px;background:var(--card);border:1px solid var(--line)}
.letter{margin-bottom:12px}.letter h2{font-size:1.4rem;color:var(--muted)}
.citylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 16px}.citylist a{display:flex;gap:6px;align-items:baseline;padding:4px 0;color:var(--muted)}.citylist a.has{color:var(--link)}.cl-price{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.station-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.station-head h1{margin-bottom:.1em}.station-actions{display:flex;gap:8px;flex-wrap:wrap}
.flash{padding:10px 14px;border-radius:10px;margin:10px 0;font-weight:500}.flash.ok{background:var(--okbg);color:var(--fresh)}.flash.err{background:#fde8e8;color:var(--err)}
.report-form{display:flex;flex-direction:column;gap:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}.seg label{flex:1;position:relative}.seg input{position:absolute;opacity:0;inset:0}.seg span{display:block;padding:8px 14px;text-align:center;font-weight:600;cursor:pointer;white-space:nowrap}.seg input:checked+span{background:var(--brand);color:#fff}.seg input:focus-visible+span{outline:2px solid var(--link);outline-offset:-2px}
.price-in{display:flex;align-items:center;gap:10px}.price-in span{font-weight:600}.price-in input{font:inherit;font-size:1.5rem;font-weight:700;padding:8px 12px;width:9em;max-width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.chart{width:100%;height:auto;display:block;color:var(--ink)}
.prose p{max-width:75ch}.prose h2{margin-top:1.2em}.prose code{background:var(--bg);padding:2px 6px;border-radius:6px;font-size:.9em}
.geo-form{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.geo-form input{width:8em;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--bg);color:var(--ink)}
.mappage main{max-width:none;padding:0 0 8px}
.map-toolbar{display:flex;gap:10px;align-items:center;padding:8px 16px;flex-wrap:wrap}
#map{height:calc(100vh - 170px);min-height:380px;background:#dde3ea}
.mappage .legend{padding:0 16px}
.sw{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:4px}.sw.g{background:#16a34a}.sw.y{background:#eab308}.sw.r{background:#dc2626}.sw.n{background:#9aa3b5}
.leaflet-popup-content{font:14px/1.4 system-ui,sans-serif;margin:10px 14px}.leaflet-popup-content b{font-size:1.05em}.leaflet-popup-content table{margin:6px 0;border-collapse:collapse}.leaflet-popup-content td{padding:1px 8px 1px 0}.leaflet-popup-content td+td{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.foot{padding:16px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line)}
/* --- quick report & home screen ------------------------------------------------ */
.nav-cta{background:var(--accent);color:#0f3460!important;font-weight:700!important}.nav-cta:hover,.nav-cta.on{background:#ffd75e!important;color:#0f3460!important}
@media (max-width:640px){.nav{gap:2px;margin-left:0;width:100%;justify-content:space-between}.nav a{padding:6px 7px}}
.hs-banner{display:none;position:relative;margin-top:12px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px}
.hs-banner a{display:flex;gap:12px;align-items:center;padding:10px 40px 10px 12px;color:var(--ink)}.hs-banner a:hover{text-decoration:none}.hs-banner small{color:var(--muted)}.hs-ico{font-size:1.6rem}
.hs-close{position:absolute;right:4px;top:4px;border:0;background:none;font-size:1.4rem;line-height:1;padding:6px 10px;color:var(--muted);cursor:pointer}
@media (max-width:860px){.hs-banner{display:block}}
.hs-banner.dismissed{display:none}
.standalone .not-standalone{display:none!important}.standalone-only{display:none}.standalone .standalone-only{display:block}
.hs-guides{display:flex;flex-direction:column;gap:14px}
@media (min-width:861px){.hs-guides{display:grid;grid-template-columns:1fr 1fr}}
.os-ios .hs-guide[data-os=ios],.os-android .hs-guide[data-os=android]{order:-1;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.os-ios .hs-guide[data-os=android],.os-android .hs-guide[data-os=ios]{opacity:.85}
.hs-guide{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.hs-guide h3{margin:0 0 8px;font-size:1.05rem;display:flex;gap:8px;align-items:center}
.hs-steps{margin:0;padding-left:1.4em}.hs-steps li{margin:6px 0;padding-left:2px}.hs-steps .muted{display:block;font-size:.85rem}
.ico{display:inline-flex;vertical-align:middle;padding:2px 4px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--link)}
.install-btn{width:100%;margin-bottom:8px}
.qr-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.qr-item{background:var(--card);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);border:1px solid var(--line)}
.qr-item[open]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.qr-item summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;min-height:56px}
.qr-item summary::-webkit-details-marker{display:none}
.qr-name{display:flex;flex-direction:column;font-weight:600;min-width:0}.qr-name small{font-weight:400;color:var(--muted)}
.qr-now{display:flex;gap:8px;font-variant-numeric:tabular-nums;font-size:.85rem;flex:none}.qr-p em{font-style:normal;color:var(--muted);margin-right:3px;font-size:.75rem}.qr-p.none,.qr-p.stale{color:var(--stale)}
@media (max-width:480px){.qr-now{flex-direction:column;gap:0;text-align:right}}
.qr-item .report-form{padding:0 14px 14px}
.quick .report-form .seg{display:flex}.quick .price-in input{flex:1;width:auto}.quick .report-form .btn{padding:12px;font-size:1.05rem}
.big-ok{font-size:1.05rem;padding:14px 16px}
.install-card h2{font-size:1.05rem}
.photo-form{display:flex;flex-direction:column;gap:10px}
.photo-pick{display:flex;flex-direction:column;gap:8px;align-items:flex-start;cursor:pointer}
.photo-pick input{position:absolute;opacity:0;width:1px;height:1px}
.photo-pick input:focus-visible+.btn{outline:2px solid var(--link);outline-offset:2px}
.photo-pick .btn{padding:12px 16px;font-size:1.05rem}
.photo-preview{max-width:100%;max-height:260px;border-radius:10px;border:1px solid var(--line)}
.photo-station{display:flex;flex-direction:column;gap:4px}.photo-station select{font:inherit;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);max-width:100%}
.photo-send:disabled{opacity:.5;cursor:default}
[hidden]{display:none!important}
.quick .price-in{width:100%}.quick .price-in input{min-width:0}
@media (max-width:640px){.nav a{padding:6px 5px;font-size:.9rem}.nav a.nav-tilastot{display:none}}
.src{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:.65em;font-weight:500;color:var(--muted);vertical-align:middle}
.best-card h2{margin-bottom:10px}.best-when{display:flex;flex-direction:column;margin-bottom:8px}.best-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.best-when strong{font-size:1.15rem;color:var(--fresh)}.best-when.avoid strong{color:#dc2626}
.saving{margin:6px 0 10px}.wk-chart{margin:8px 0}.regions{margin:0;padding-left:1.2em}.regions li{margin:4px 0}
@media (max-width:640px){.nav a.nav-paras{display:none}}