:root{
  --ono-yellow:#ffd21a;
  --ono-yellow-2:#ffe36a;
  --ono-yellow-soft:#fff4b3;
  --ono-red:#9f241f;
  --ono-red-2:#bd2d25;
  --ono-red-dark:#6f1715;
  --ink:#21160e;
  --muted:#6d5f4a;
  --paper:#fffdf3;
  --card:#ffffff;
  --line:rgba(33,22,14,.14);
  --ok:#1f7a3d;
  --danger:#bd1717;
  --warning:#b85c00;
  --shadow:0 20px 50px rgba(50,22,0,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--ono-yellow) 0%,#ffe66e 34%,var(--paper) 78%);color:var(--ink);min-height:100vh}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at top right,rgba(159,36,31,.20),transparent 36%),radial-gradient(circle at bottom left,rgba(255,255,255,.52),transparent 38%);pointer-events:none}.app-shell{width:min(100%,520px);margin:0 auto;min-height:100vh;padding:calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 32px);position:relative}.hero{display:flex;align-items:center;justify-content:space-between;padding:10px 4px 8px}.brand{display:flex;align-items:center;gap:12px}.logo-mark{width:76px;height:50px;border:5px solid var(--ono-red);border-radius:50%;display:grid;place-items:center;background:var(--ono-yellow);font-weight:1000;font-size:23px;letter-spacing:-1px;box-shadow:0 8px 0 rgba(159,36,31,.22)}.brand-title{font-size:26px;font-weight:1000;line-height:1}.brand-subtitle{font-size:13px;color:#4c3520;font-weight:800}.status-ok{margin:7px 0 10px;padding:11px 14px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(31,122,61,.22);color:var(--ok);box-shadow:0 10px 26px rgba(50,22,0,.08);font-weight:1000}.status-alert{background:linear-gradient(135deg,var(--danger),#7f1111);color:white;border-color:rgba(255,255,255,.4)}.events{display:grid;gap:10px;margin:8px 0 12px}.event{background:linear-gradient(135deg,var(--danger),#7f1111);color:white;border-radius:24px;padding:14px 15px;box-shadow:var(--shadow);border:2px solid rgba(255,255,255,.38)}.event.warning{background:linear-gradient(135deg,var(--warning),#803b00)}.event.info{background:linear-gradient(135deg,#2459a6,#183a72)}.event small{display:block;opacity:.9;margin-top:7px;font-weight:800}.event-title{font-weight:1000;font-size:17px;margin-bottom:3px}.price-board{background:#21160e;color:#fff9d7;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);border:4px solid var(--ono-red);margin-top:8px}.board-topline{height:10px;background:linear-gradient(90deg,var(--ono-red),#d3422b,var(--ono-red))}.board-header{display:flex;justify-content:space-between;align-items:end;padding:14px 18px 7px;border-bottom:1px solid rgba(255,255,255,.15)}.board-header span{font-size:22px;font-weight:1000}.board-header small{font-size:12px;color:#ffe66e;text-align:right;font-weight:800}.fuel-rows{padding:6px 12px 12px}.fuel-section{padding:9px 8px 2px;color:#ffe66e;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}.fuel-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 8px;border-bottom:1px dashed rgba(255,255,255,.16)}.fuel-row:last-child{border-bottom:0}.fuel-name{font-size:18px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fuel-price-wrap{display:flex;align-items:baseline;justify-content:flex-end;min-width:165px}.fuel-price{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:36px;font-weight:1000;letter-spacing:-2px;color:var(--ono-yellow);line-height:1}.fuel-unit{font-size:13px;color:#fff1a6;margin-left:6px;font-weight:900;white-space:nowrap}.currency-card,.stations-card,.nearest-card{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 14px 36px rgba(50,22,0,.10);border-radius:24px;padding:15px;margin-top:12px}.currency-title{font-weight:1000;color:var(--muted);font-size:15px;margin-bottom:6px}.currency-rate{display:grid;grid-template-columns:1fr 1fr;gap:12px}.currency-rate span{display:flex;align-items:baseline;gap:7px}.currency-rate strong{font-size:33px;line-height:1}.currency-rate small{color:var(--muted);font-weight:1000}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.action{display:grid;place-items:center;text-align:center;min-height:56px;border:0;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;font-weight:1000;box-shadow:0 10px 24px rgba(50,22,0,.12);font-size:15px;cursor:pointer}.action.primary{background:linear-gradient(135deg,var(--ono-red-2),var(--ono-red-dark));color:#fff}.action:active{transform:translateY(1px)}.nearest-card.hidden{display:none}.nearest-card h3{margin:0 0 7px;font-size:19px}.nearest-card p{margin:0;color:var(--muted);font-weight:800}.nearest-card a{display:inline-grid;place-items:center;margin-top:12px;background:var(--ono-red);color:white;text-decoration:none;border-radius:14px;padding:10px 13px;font-weight:1000}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h2{margin:0;font-size:22px}.section-head span{color:var(--muted);font-weight:1000;white-space:nowrap}.search{width:100%;margin:13px 0 10px;padding:15px 16px;border-radius:18px;border:2px solid rgba(33,22,14,.18);font-size:16px;outline:none;background:#fff;color:var(--ink);font-weight:800}.search::placeholder{color:rgba(109,95,74,.58)}.search:focus{border-color:var(--ono-red);box-shadow:0 0 0 4px rgba(159,36,31,.12)}.region-chips{display:flex;gap:7px;overflow:auto;padding:2px 1px 12px;scrollbar-width:none}.region-chips::-webkit-scrollbar{display:none}.region-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-weight:1000;color:var(--muted);white-space:nowrap;cursor:pointer}.region-chip.active{background:var(--ono-yellow);color:var(--ink);border-color:rgba(159,36,31,.25)}.station-list{display:grid;gap:11px}.station{padding:15px;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 20px rgba(50,22,0,.06)}.station strong{display:block;font-size:17px}.station small{color:var(--muted);font-weight:800}.station-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.station-actions a{font-size:13px;background:var(--ono-red);color:#fff;text-decoration:none;border-radius:999px;padding:7px 10px;font-weight:1000}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.chip{font-size:12px;font-weight:1000;padding:5px 8px;border-radius:999px;background:var(--ono-yellow-soft);color:#54340e}.empty{padding:18px;text-align:center;color:var(--muted);font-weight:900}.footer{display:flex;justify-content:space-between;gap:12px;margin:18px 4px 0;color:rgba(33,22,14,.62);font-size:12px;font-weight:800}.footer a{color:rgba(33,22,14,.62);text-decoration:none}
@media (max-width:390px){.fuel-price{font-size:32px}.fuel-price-wrap{min-width:148px}.fuel-name{font-size:16px}.currency-rate strong{font-size:29px}.brand-title{font-size:24px}.logo-mark{width:68px;height:45px;font-size:20px}}
@media (min-width:760px){.app-shell{width:min(100%,960px)}main{display:grid;grid-template-columns:430px 1fr;gap:14px}.stations-card{grid-row:1 / span 6;grid-column:2}.price-board,.currency-card,.events,.quick-actions,.nearest-card,.status-ok{grid-column:1}.events{margin-top:0}.footer{grid-column:1 / -1}}

/* v3 desktop/tablet polish: keep the site looking like an app, not a stretched page */
html, body { overflow-x: hidden; }
main > * { min-width: 0; }
.stations-card { overflow: hidden; }
.region-chips { max-width: 100%; }
.station { min-width: 0; }
.station strong, .station small { overflow-wrap: anywhere; }

@media (min-width: 760px) {
  body {
    background:
      radial-gradient(circle at 18% 22%, rgba(255,255,255,.45), transparent 24%),
      radial-gradient(circle at 82% 8%, rgba(159,36,31,.16), transparent 24%),
      linear-gradient(135deg, #ffcf11 0%, #ffe76e 38%, #fff7c6 100%);
  }
  .app-shell {
    width: min(100% - 48px, 1180px);
    max-width: 1180px;
    min-height: 100vh;
    padding: 28px 0 32px;
  }
  .hero { padding: 0 0 18px; max-width: 420px; }
  .brand-title { font-size: 28px; }
  .brand-subtitle { font-size: 13px; }
  main { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; }
  .status-ok, .events, .price-board, .currency-card, .quick-actions, .nearest-card { grid-column: 1; }
  .status-ok { margin-top: 0; max-width: 400px; }
  .price-board { margin-top: 8px; border-radius: 26px; }
  .fuel-rows { padding: 6px 14px 14px; }
  .fuel-row { padding: 9px 8px; }
  .fuel-name { font-size: 16px; }
  .fuel-price-wrap { min-width: 142px; }
  .fuel-price { font-size: 30px; letter-spacing: -1.6px; }
  .fuel-unit { font-size: 11px; }
  .board-header span { font-size: 20px; }
  .board-header small { font-size: 11px; }
  .currency-card { max-width: 400px; border-radius: 22px; padding: 14px 16px; }
  .currency-rate strong { font-size: 31px; }
  .quick-actions { max-width: 400px; gap: 12px; }
  .action { min-height: 54px; border-radius: 18px; }
  .stations-card {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin-top: 0;
    border-radius: 24px;
    padding: 18px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    box-shadow: 0 18px 46px rgba(50,22,0,.13);
    background: rgba(255,253,243,.94);
    scrollbar-width: thin;
  }
  .stations-card::-webkit-scrollbar { width: 10px; }
  .stations-card::-webkit-scrollbar-thumb { background: rgba(159,36,31,.35); border-radius: 999px; border: 3px solid rgba(255,253,243,.94); }
  .section-head h2 { font-size: 24px; }
  .section-head span { font-size: 18px; }
  .search { margin: 14px 0 12px; padding: 13px 15px; font-size: 15px; border-radius: 16px; background: #fff; }
  .region-chips { padding-bottom: 10px; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; }
  .region-chip { padding: 7px 10px; font-size: 13px; }
  .station-list { gap: 10px; }
  .station { padding: 14px 16px; border-radius: 17px; box-shadow: 0 6px 18px rgba(50,22,0,.055); }
  .station strong { font-size: 16px; }
  .station small { font-size: 13px; }
  .chips { margin-top: 8px; gap: 5px; }
  .chip { font-size: 11px; padding: 4px 7px; }
  .station-actions { margin-top: 9px; }
  .station-actions a { padding: 7px 10px; font-size: 12px; }
  .footer { margin-top: 16px; padding: 0 2px; }
}

@media (min-width: 1400px) { .app-shell { width: min(100% - 80px, 1180px); } }
@media (max-width: 759px) { .stations-card { overflow: visible; } }

/* FIX desktop scroll rohu u seznamu stanic */
@media (min-width: 760px) {
  .stations-card {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 18px;
  }

  .stations-card::-webkit-scrollbar {
    width: 8px;
  }

  .stations-card::-webkit-scrollbar-track {
    background: transparent;
  }

  .stations-card::-webkit-scrollbar-thumb {
    background: rgba(159,36,31,.35);
    border-radius: 999px;
  }
}