/* Ceny paliw – web, 1:1 with the iPhone app: dark only, AppBackground glow, Liquid Glass, iOS system colours */
:root {
  --accent: #4ad5ff;          /* AccentColor */
  --ink: #081229;             /* Color.ink: text on the accent */
  --label: #fff;
  --secondary: rgba(235, 235, 245, .6);
  --tertiary: rgba(235, 235, 245, .3);
  --separator: rgba(84, 84, 88, .65);
  --red: #ff453a;             /* systemRed, dark */
  --green: #30d158;           /* systemGreen, dark */
  --orange: #ff9f0a;          /* systemOrange, dark */
  --surface: rgba(255, 255, 255, .075);
  --surface-line: rgba(255, 255, 255, .07);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.25, .45, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: #000; color: var(--label); }
body {
  font: 17px/1.29 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  letter-spacing: -.41px; min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: var(--accent); text-decoration: none; }
.rounded { font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sec { color: var(--secondary); }
.ter { color: var(--tertiary); }

/* SF Symbols, coloured by currentColor */
.sf { display: inline-block; width: 1.1em; height: 1.1em; flex: none; background: currentColor; vertical-align: -.17em;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* AppBackground: black page, ink-navy wash with a faint cyan core at the top */
.page-bg { position: absolute; inset: 0 0 auto 0; height: 680px; pointer-events: none; z-index: -1;
  background:
    radial-gradient(300px 300px at 50% -12%, rgba(74, 213, 255, .18), transparent 100%),
    radial-gradient(520px 520px at 50% -10%, rgba(28, 46, 107, .95), rgba(13, 20, 56, .55) 50%, transparent 100%); }

/* screens stack like a NavigationStack */
#app { position: relative; max-width: 600px; margin: 0 auto; min-height: 100vh; }
.screen { position: relative; min-height: 100vh; isolation: isolate; padding: calc(10px + env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom)); }
.screen.push { position: fixed; inset: 0; z-index: 20; background: #000; overflow-y: auto; max-width: 600px; margin: 0 auto; }

/* large navigation title + subtitle (iOS 26) */
.navbar { padding: 34px 4px 10px; }
.navbar h1 { margin: 0; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .37px; }
.navbar .subtitle { font-size: 15px; color: var(--secondary); margin-top: 1px; letter-spacing: -.24px; }
/* inline navigation bar (detail pages, sheets) */
.inlinebar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; height: 54px; margin: 0 -16px 8px; padding: 0 16px; }
.inlinebar .t { font-size: 17px; font-weight: 600; }
.inlinebar .left, .inlinebar .right { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; }
.inlinebar .left { left: 16px; } .inlinebar .right { right: 16px; }

/* Liquid Glass */
.glass {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .28), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .18);
}
.glass.tint { background: rgba(74, 213, 255, .92); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 6px 18px rgba(74, 213, 255, .25); }
.glass-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; padding: 0 20px; border-radius: 99px; font-weight: 600; font-size: 15px; width: 100%; }
.glass-btn.small { min-height: 36px; padding: 0 14px; width: auto; }
.glass-btn.prominent { font-size: 17px; }
.circle-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; }
.pill-btn { height: 44px; padding: 0 16px; border-radius: 99px; font-weight: 600; display: inline-flex; align-items: center; }

/* FuelPicker */
.fuels { display: flex; gap: 8px; justify-content: center; }
.fuels button { padding: 10px 16px; border-radius: 99px; font-size: 15px; font-weight: 600; letter-spacing: -.24px; }

/* Card / surface */
.card { background: var(--surface); border-radius: 26px; box-shadow: inset 0 0 0 .5px var(--surface-line); overflow: hidden; }
.card.pad { padding: 18px; }
.surface22 { background: var(--surface); border-radius: 22px; box-shadow: inset 0 0 0 .5px var(--surface-line); }
.section-h { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 4px 0; }
.section-h h2 { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: .38px; }
.section-h .tr { font-size: 13px; color: var(--secondary); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack.s10 { gap: 10px; } .stack.s14 { gap: 14px; } .stack.s18 { gap: 18px; }
.headline { font-size: 17px; font-weight: 600; }
.subhead { font-size: 15px; letter-spacing: -.24px; }
.footnote { font-size: 13px; letter-spacing: -.08px; }
.caption { font-size: 12px; letter-spacing: 0; }
.caption2 { font-size: 11px; letter-spacing: .06px; }
.title3 { font-size: 20px; letter-spacing: .38px; }

/* hero */
.hero { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0; }
.hero .cap { font-size: 15px; font-weight: 500; color: var(--secondary); text-align: center; }
.hero .price { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.hero .price .v { font-size: 100px; line-height: 1.05; font-weight: 700; letter-spacing: -1px; }
.hero .price .u { font-size: 22px; font-weight: 600; color: var(--secondary); }
.tomorrow { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; }
.tomorrow .info { position: absolute; right: -24px; color: var(--secondary); font-size: 13px; }

/* AdviceCard */
.advice { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 34px 16px 16px; border-radius: 22px; width: 100%; }
.advice .ic { width: 30px; display: flex; justify-content: center; font-size: 22px; padding-top: 1px; }
.advice .t { font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.advice .d { font-size: 15px; color: var(--secondary); letter-spacing: -.24px; }
.advice .chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--tertiary); font-size: 13px; }

/* rows inside cards; separators inset like SwiftUI Divider().padding(.leading, n) */
.row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; width: 100%; position: relative; }
.row.top { align-items: flex-start; padding-top: 13px; padding-bottom: 13px; }
.rows > * { position: relative; }
.rows > * + *::after { content: ""; position: absolute; top: 0; right: 0; height: .5px; background: var(--separator); left: var(--inset, 0); }
.tile { flex: none; object-fit: cover; display: block; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .08); }
.grow { flex: 1; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.right { text-align: right; }
.chev-r { color: var(--tertiary); font-size: 13px; flex: none; }
.badge-disc { display: inline-flex; padding: 3px 7px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--green); background: rgba(48, 209, 88, .14); }
.delta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 99px; font-size: 15px; font-weight: 600; }
.up { color: var(--red); } .down { color: var(--green); } .flat { color: var(--secondary); }
.delta.up { background: rgba(255, 69, 58, .13); } .delta.down { background: rgba(48, 209, 88, .13); } .delta.flat { background: rgba(235, 235, 245, .1); }
.meta { display: flex; gap: 12px; font-size: 12px; color: var(--secondary); margin-top: 4px; white-space: nowrap; overflow: hidden; }
.meta span { display: inline-flex; gap: 4px; align-items: center; }
.orange { color: var(--orange) !important; }

/* featured promotions (horizontal, snapping) */
.featured { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 16px; scrollbar-width: none; }
.featured::-webkit-scrollbar { display: none; }
.feat { flex: none; width: 272px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.feat .img { position: relative; width: 272px; height: 153px; border-radius: 24px; overflow: hidden; }
.feat .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat .ov { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; padding: 9px 12px; border-radius: 16px; }

/* promo detail */
.hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; box-shadow: 0 8px 16px rgba(0, 0, 0, .12); display: block; }
.large-title { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .37px; }
.detail-row { display: flex; align-items: baseline; gap: 14px; padding: 13px 16px; }
.detail-row .sf { color: var(--accent); width: 22px; height: 20px; vertical-align: -.25em; }

/* history */
.chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.chart text { fill: var(--secondary); font-size: 11px; font-family: -apple-system, system-ui, sans-serif; letter-spacing: 0; }
.menu-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 17px; position: relative; }
.menu-btn select, .menu-val select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; font-size: 16px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 .5px var(--surface-line); }

/* settings: inset grouped form */
.form-h { font-size: 13px; color: var(--secondary); padding: 0 16px 7px; margin-top: 22px; letter-spacing: -.08px; }
.form-f { font-size: 13px; color: var(--secondary); padding: 7px 16px 0; letter-spacing: -.08px; }
.group { background: #1c1c1e; border-radius: 26px; overflow: hidden; }
.item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 16px; position: relative; width: 100%; }
.group > .item + .item::after { content: ""; position: absolute; top: 0; left: 54px; right: 0; height: .5px; background: var(--separator); }
.group.noicons > .item + .item::after { left: 16px; }
.item .ico { width: 24px; display: flex; justify-content: center; color: var(--accent); font-size: 18px; flex: none; }
.item .val { margin-left: auto; color: var(--secondary); display: flex; align-items: center; gap: 6px; }
.group a.item { color: var(--accent); }
.toggle { width: 63px; height: 28px; border-radius: 99px; background: rgba(120, 120, 128, .32); position: relative; transition: background .25s; flex: none; margin-left: auto; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 37px; height: 24px; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: left .3s var(--spring); }
.toggle.on { background: var(--green); }
.toggle.on::after { left: 24px; }
.stepper { display: inline-flex; border-radius: 9px; background: rgba(120, 120, 128, .24); margin-left: 10px; }
.stepper button { width: 47px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--label); }
.stepper button + button { border-left: .5px solid var(--separator); }
.menu-val { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--secondary); }
.dev { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 12px; text-align: center; }
.dev img { height: 30px; margin-top: 6px; }
.dev .btns { display: flex; gap: 10px; width: 100%; }

/* floating Liquid Glass tab bar with a sliding lens */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; padding: 4px; border-radius: 99px; width: min(396px, calc(100% - 40px));
  background: rgba(40, 40, 46, .55); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .25), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .45); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 5px; border-radius: 99px; font-size: 10px; font-weight: 600; letter-spacing: .1px; position: relative; z-index: 1; }
.tabbar .sf { width: 26px; height: 24px; }
.tabbar button.on { color: var(--accent); }
.tabbar .lens { position: absolute; top: 4px; bottom: 4px; border-radius: 99px; background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .2); transition: left .45s var(--spring), width .45s var(--spring); z-index: 0; }

/* sheets: iOS card sheet with grabber */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; }
.sheet-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); animation: fade .3s ease both; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(10px + env(safe-area-inset-top)); max-width: 600px; margin: 0 auto;
  border-radius: 34px 34px 0 0; background: #000; overflow-y: auto; isolation: isolate; padding: 0 16px calc(30px + env(safe-area-inset-bottom));
  animation: sheetup .5s cubic-bezier(.16, 1, .3, 1) both; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: rgba(235, 235, 245, .3); margin: 6px auto 0; }
.closing .sheet-dim { animation: fade .25s ease reverse both; }
.closing .sheet { animation: sheetdown .3s ease-in both; }

/* splash: the welcome animation while prices load */
#splash { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; transition: opacity .5s ease, transform .6s var(--ease); }
#splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
#lottie { width: 100%; height: 100%; max-width: 600px; }

/* motion */
@keyframes fade { from { opacity: 0; } }
@keyframes sheetup { from { transform: translateY(100%); } }
@keyframes sheetdown { to { transform: translateY(100%); } }
@keyframes pushin { from { transform: translateX(100%); } }
@keyframes pushout { to { transform: translateX(100%); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes pop { 40% { transform: scale(1.1); } }
@media (prefers-reduced-motion: no-preference) {
  .screen.push { animation: pushin .45s cubic-bezier(.2, .9, .25, 1) both; box-shadow: -10px 0 40px rgba(0, 0, 0, .6); }
  .screen.push.leaving { animation: pushout .35s cubic-bezier(.4, 0, .9, .6) both; }
  .under { transition: transform .45s cubic-bezier(.2, .9, .25, 1), filter .45s; }
  .under.covered { transform: translateX(-28%); filter: brightness(.6); }
  .enter > * { animation: rise .5s var(--ease) both; }
  .enter > *:nth-child(2) { animation-delay: .04s; } .enter > *:nth-child(3) { animation-delay: .08s; }
  .enter > *:nth-child(4) { animation-delay: .12s; } .enter > *:nth-child(n+5) { animation-delay: .16s; }
  button, a { transition: transform .25s var(--spring), opacity .2s, background-color .25s, color .25s; }
  button:active, a:active { transform: scale(.96); }
  .row:active, .item:active { transform: none; background: rgba(255, 255, 255, .06); }
  .fuels button.on, .tabbar button.on .sf { animation: pop .4s var(--spring); }
  ::view-transition-old(root) { animation: .2s ease both vt-out; }
  ::view-transition-new(root) { animation: .35s var(--ease) both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
}

/* columns: one column on the phone (in the iOS order), two on a computer */
.cols { display: flex; flex-direction: column; gap: 16px; }
.cols.flow > .col { display: contents; }
.pgrid { display: flex; flex-direction: column; gap: 14px; }

/* ---------- computer: wide layout, tab bar on top like iPadOS / macOS ---------- */
@media (min-width: 960px) {
  #app { max-width: 1140px; }
  .screen { padding: 86px 32px 60px; }
  .page-bg { height: 760px; left: 50%; right: auto; width: 100vw; transform: translateX(-50%); background:
    radial-gradient(420px 360px at 50% -14%, rgba(74, 213, 255, .16), transparent 100%),
    radial-gradient(1100px 620px at 50% -16%, rgba(28, 46, 107, .95), rgba(13, 20, 56, .5) 50%, transparent 100%); }
  .navbar { padding: 26px 4px 18px; }
  .navbar h1 { font-size: 40px; line-height: 46px; }

  .tabbar { top: 14px; bottom: auto; width: auto; }
  .tabbar button { flex-direction: row; gap: 7px; padding: 9px 18px; font-size: 14px; letter-spacing: -.1px; }
  .tabbar .sf { width: 19px; height: 18px; }

  .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .cols.flow > .col { display: flex; flex-direction: column; gap: 16px; }
  .cols.flow > .col:first-child { position: sticky; top: 86px; }
  .hero { padding: 6px 0 10px; }
  .fuels { justify-content: flex-start; }
  .hero > .fuels, .screen > .stack > .fuels { justify-content: center; }

  .featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); margin: 0; padding: 0; overflow: visible; gap: 18px; }
  .feat, .feat .img { width: auto; }
  .feat .img { aspect-ratio: 16 / 9; height: auto; }
  .pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .chart svg { height: 300px; }
  .hero .price .v { font-size: 120px; }

  .narrow { max-width: 680px; margin: 0 auto; }
  .screen > .navbar:has(+ .narrow) { max-width: 680px; margin: 0 auto; }

  /* detail page: centred reading column under the top bar */
  .screen.push { max-width: none; padding: 80px max(32px, calc((100vw - 720px) / 2)) 60px; }
  .screen.push .inlinebar { position: static; margin: 0 0 12px; padding: 0; justify-content: flex-start; }
  .screen.push .inlinebar .left { position: static; }
  .under.covered { transform: none; }

  /* sheets become centred panels */
  .sheet { top: 50%; bottom: auto; left: 50%; right: auto; width: 560px; max-height: min(820px, calc(100vh - 80px)); transform: translate(-50%, -50%);
    border-radius: 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 .5px rgba(255, 255, 255, .12); animation: panelin .4s cubic-bezier(.16, 1, .3, 1) both; padding-bottom: 26px; }
  .grabber { visibility: hidden; height: 0; }
  .closing .sheet { animation: panelout .22s ease-in both; }

  /* pointer hover, as on the Mac */
  .row:hover, .item:hover, .feat:hover .img { background-color: rgba(255, 255, 255, .045); }
  a.row:hover, button.row:hover { cursor: pointer; }
  .feat:hover .img img { transform: scale(1.03); }
  .feat .img img { transition: transform .5s var(--ease); }
  .advice:hover { filter: brightness(1.15); }
  .tabbar button:not(.on):hover { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .05); }
}
@keyframes panelin { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes panelout { to { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }