:root{
  --bg:#f4f6f8; --surface:#ffffff; --ink:#14202b; --muted:#5b6b78; --line:#dde3e8;
  --accent:#1f9d55; --cheap:#1f9d6b; --mid:#c99a1c; --dear:#d2493c;
  --font:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f161d; --surface:#17212b; --ink:#e8eef3; --muted:#9aabb8; --line:#2a3743;
    --accent:#3cc28c; --cheap:#3cc28c; --mid:#e0b43c; --dear:#ef6a5c; color-scheme: dark; }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:16px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;text-decoration:none}
.brand svg{width:30px;height:30px}
.topnav{display:flex;gap:6px}
.topnav a{text-decoration:none;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.topnav a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
h1{font-size:1.7rem;line-height:1.2;margin:0;text-wrap:balance}
h2{font-size:1.15rem;margin:0 0 12px;text-wrap:balance}
.sub{color:var(--muted);margin:4px 0 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.note{font-size:.82rem;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.kpi span{font-size:.85rem;color:var(--muted)}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{font:inherit;font-weight:500;border:0;background:transparent;color:var(--ink);padding:8px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
select,.btn{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.btn{cursor:pointer;font-weight:500}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
ol.stations{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.st{display:grid;grid-template-columns:1fr auto;gap:4px 12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.st .name{font-weight:600}
.st .addr{font-size:.85rem;color:var(--muted)}
.st .price{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.st .go{font-size:.85rem;grid-column:2;text-align:right}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.92rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500}
td.n,th.n{text-align:right}
.status{border-left:3px solid var(--accent);padding:10px 12px;background:var(--surface);border-radius:8px}
footer{font-size:.82rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}
footer nav{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:560px){ h1{font-size:1.45rem} .kpis{grid-template-columns:1fr 1fr 1fr} .kpi b{font-size:1.2rem} }