/* TEAM DEAL Leady: panel agenta. Marka REMAX 2026: granat, czerwień, niebieski, krem.
   Czcionki lokalne (CSP 'self'): Archivo (nagłówki, liczby, wąska szerokość) i Montserrat (tekst). */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonty/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonty/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonty/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonty/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --granat: #000E35;
  --granat-2: #1B2A55;
  --czerwien: #FF1200;
  --czerwien-ciemna: #C40E00;
  --niebieski: #0043FF;
  --niebieski-ciemny: #0033C4;
  --krem: #F7F5EE;
  --krem-2: #EDEAE0;
  --papier: #FFFFFF;
  --linia: #D9D5C8;
  --szary: #5C5F6E;
  --szary-jasny: #8A8D99;
  --pomarancz: #B85C00;
  --pomarancz-tlo: #FFF0DB;
  --zolty: #A87900;
  --zolty-tlo: #FFF6D1;
  --zielony: #1C7A3E;
  --zielony-tlo: #E3F3E8;
  --hot: #FF1200;
  --warm: #E07000;
  --cold: #0043FF;
  --font-tekst: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-naglowek: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --gutter: 16px;
  --nav-h: 64px;
  --promien: 10px;
  --promien-duzy: 16px;
  --obrys: rgba(0, 14, 53, .12);          /* cienka linia: karty, pola, przyciski drugiego planu */
  --obrys-mocny: rgba(0, 14, 53, .26);
  --cien: 0 1px 2px rgba(0, 14, 53, .05), 0 10px 28px -16px rgba(0, 14, 53, .22);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--krem); color: var(--granat);
  font-family: var(--font-tekst); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--niebieski); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--niebieski); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ik { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.ik.pelna { fill: currentColor; stroke: none; }

/* ---------- typografia ---------- */
.kicker {
  font-family: var(--font-tekst); font-weight: 700; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--szary);
}
.wielki {
  font-family: var(--font-naglowek); font-stretch: 68%; font-weight: 800; letter-spacing: -.01em; line-height: .95;
}

/* ---------- szkielet ---------- */
.aplikacja { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pasek-gora {
  position: sticky; top: 0; z-index: 20; background: var(--granat); color: var(--krem);
  display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter);
  padding-top: max(10px, env(safe-area-inset-top));
}
.znak { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; }
.znak b { font-family: var(--font-naglowek); font-stretch: 68%; font-weight: 800; font-size: 24px; letter-spacing: .02em; white-space: nowrap; }
.znak span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
/* telefon: data ukryta (nie zajmuje miejsca, długie "sobota, 10 października" wypychało inicjały poza ekran) */
.pasek-gora .data { margin-left: auto; font-size: 13px; font-weight: 600; opacity: .85; white-space: nowrap; display: none; }
.inicjaly {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--krem); display: grid; place-items: center; margin-left: auto;
  font-family: var(--font-naglowek); font-stretch: 75%; font-weight: 800; font-size: 15px; flex: none;
  color: var(--krem); text-decoration: none;
}
.nav-gora { display: none; }

.uklad { flex: 1; display: block; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); }
.kol-lista, .kol-karta { min-width: 0; }
.uklad.z-karta .kol-lista { display: none; }
.uklad:not(.z-karta) .kol-karta { display: none; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--granat); color: var(--krem);
  display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: rgba(247, 245, 238, .72); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.nav a[aria-current="page"] { color: var(--krem); }
.nav a[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 4px; background: var(--czerwien); }
.nav .plakietka {
  position: absolute; top: 7px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--czerwien); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0; display: grid; place-items: center;
}

/* ---------- pasek stanu (offline, kolejka) ---------- */
.pasek-stanu {
  background: var(--zolty-tlo); color: var(--granat); border-bottom: 2px solid var(--zolty);
  padding: 8px var(--gutter); font-size: 14px; font-weight: 600;
}

/* ---------- ekran Dziś ---------- */
.naglowek-ekranu { padding: 20px var(--gutter) 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.naglowek-ekranu h1 { margin: 0; font-size: 44px; }
.naglowek-ekranu .kicker { margin-bottom: 4px; }

.liczniki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 8px var(--gutter) 4px; border: 2px solid var(--granat); }
.licznik-kafel {
  padding: 10px 6px 8px; text-align: center; text-decoration: none; color: var(--granat); background: var(--krem);
  border-left: 2px solid var(--granat); min-height: 72px; display: flex; flex-direction: column; justify-content: center;
}
.licznik-kafel:first-child { border-left: 0; }
.licznik-kafel b { display: block; font-family: var(--font-naglowek); font-stretch: 68%; font-weight: 800; font-size: 38px; line-height: 1; }
.licznik-kafel span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; white-space: nowrap; }
.licznik-kafel.alarm { background: var(--czerwien); color: #fff; }
.licznik-kafel.uwaga b { color: var(--pomarancz); }
.licznik-kafel.zero b { color: var(--szary-jasny); }

.sekcja { margin-top: 18px; }
.sekcja > h2 {
  margin: 0; padding: 10px var(--gutter) 8px; display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-naglowek); font-stretch: 75%; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .02em;
  border-bottom: 3px solid var(--granat);
}
.sekcja > h2 .nr { font-size: 13px; color: var(--szary); font-family: var(--font-tekst); font-weight: 700; letter-spacing: .1em; }
.sekcja > h2 .ile { margin-left: auto; font-size: 20px; }
.sekcja.alarm > h2 { border-color: var(--czerwien); }
.sekcja.alarm > h2 .ile { color: var(--czerwien); }
.sekcja .opis { padding: 6px var(--gutter) 0; font-size: 13px; color: var(--szary); }

.lista { list-style: none; margin: 0; padding: 0; }
.wiersz {
  display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--linia); background: var(--papier);
  position: relative;
}
.wiersz.zaznaczony { background: #E9EEFF; box-shadow: inset 4px 0 0 var(--niebieski); }
.wiersz-tresc { flex: 1; min-width: 0; padding: 12px 8px 12px var(--gutter); text-decoration: none; color: var(--granat); display: block; }
.w-gora { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.w-imie { font-weight: 700; font-size: 18px; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere; }
.w-meta { font-size: 13px; color: var(--szary); margin-top: 3px; overflow-wrap: anywhere; }
.w-meta .po-terminie { color: var(--pomarancz); font-weight: 700; }
.w-krok { margin-top: 2px; color: var(--granat); }
.w-krok b { font-weight: 700; }
.w-akcje { display: flex; flex-direction: column; gap: 6px; padding: 10px var(--gutter) 10px 4px; justify-content: center; flex: none; }

.znacznik-oferty {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px; background: var(--k, var(--granat)); color: #fff;
  font-family: var(--font-naglowek); font-stretch: 75%; font-weight: 800; font-size: 13px; letter-spacing: .06em; border-radius: 2px;
}
.znacznik {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1.5px solid currentColor;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; color: var(--granat-2);
}
.znacznik.hot { color: var(--hot); } .znacznik.warm { color: var(--warm); } .znacznik.cold { color: var(--cold); }
.znacznik.pelny { background: var(--granat); border-color: var(--granat); color: #fff; }
.znacznik.ponowny { background: var(--czerwien); border-color: var(--czerwien); color: #fff; }

.licznik-min {
  font-family: var(--font-naglowek); font-stretch: 75%; font-weight: 800; font-size: 15px; line-height: 18px;
  padding: 2px 8px; border-radius: 2px; background: var(--krem-2); color: var(--szary);
}
.licznik-min.zolty { background: var(--zolty-tlo); color: var(--zolty); }
.licznik-min.czerwony { background: var(--czerwien); color: #fff; }
.licznik-min.poza { background: transparent; border: 1.5px solid var(--linia); font-size: 13px; }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 2px solid var(--granat); background: var(--papier); color: var(--granat); border-radius: var(--promien);
  font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  touch-action: manipulation; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.glowny { background: var(--niebieski); border-color: var(--niebieski); color: #fff; }
.btn.glowny:active { background: var(--niebieski-ciemny); }
.btn.alarm { background: var(--czerwien); border-color: var(--czerwien); color: #fff; }
.btn.ciemny { background: var(--granat); color: var(--krem); }
.btn.cichy { border-color: transparent; background: transparent; color: var(--niebieski); padding: 0 8px; }
.btn.pelny { width: 100%; }
.btn.duzy { min-height: 58px; font-size: 17px; }

.btn-zadzwon {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 124px; min-height: 52px;
  background: var(--niebieski); color: #fff; border-radius: var(--promien); text-decoration: none;
  font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; border: 0; cursor: pointer;
}
.btn-zadzwon svg { width: 19px; height: 19px; }
.btn-zadzwon:active { background: var(--niebieski-ciemny); }
/* przycisk bez poprawnego numeru: widać, że nieaktywny, i nie da się go dotknąć */
.w-akcje [aria-disabled="true"] { opacity: .35; pointer-events: none; }
.btn-sms {
  display: inline-flex; align-items: center; justify-content: center; width: 124px; min-height: 44px;
  border: 2px solid var(--granat); color: var(--granat); border-radius: var(--promien); text-decoration: none;
  font-weight: 800; font-size: 13px; letter-spacing: .08em; background: var(--papier);
}
.btn-biore { width: 124px; min-height: 52px; }

.pusto { padding: 18px var(--gutter); color: var(--szary); font-size: 15px; }
.pusto.duze { padding: 48px var(--gutter); text-align: center; }
.pusto.duze .wielki { font-size: 34px; color: var(--granat); display: block; margin-bottom: 8px; }

/* ---------- karta leada ---------- */
.karta { padding-bottom: 96px; background: var(--krem); }
.karta-gora { background: var(--granat); color: var(--krem); padding: 8px var(--gutter) 18px; }
.karta-gora .wstecz { color: var(--krem); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.karta-gora h1 { margin: 6px 0 0; font-size: 40px; overflow-wrap: anywhere; }
.karta-gora .tel { display: block; margin-top: 6px; font-family: var(--font-naglowek); font-stretch: 85%; font-weight: 700; font-size: 26px; color: var(--krem); text-decoration: none; letter-spacing: .02em; }
.karta-gora .linia-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: rgba(247,245,238,.85); }
.karta-gora .linia-meta .znacznik { color: var(--krem); }
.karta-gora .wplyw { margin-top: 8px; font-size: 14px; color: rgba(247,245,238,.85); }
.karta-gora .wplyw b { color: #fff; }

.ostrzezenia { margin: 0; padding: 0; list-style: none; }
.ostrzezenia li { padding: 10px var(--gutter); font-size: 14px; font-weight: 600; background: var(--pomarancz-tlo); border-bottom: 1px solid #F1D5AE; color: #5A2E00; }
.ostrzezenia li.mocne { background: var(--czerwien); color: #fff; border-color: var(--czerwien-ciemna); }

.blok { background: var(--papier); margin-top: 12px; border-top: 3px solid var(--granat); padding: 14px var(--gutter) 16px; }
.blok > h2 { margin: 0 0 12px; font-family: var(--font-naglowek); font-stretch: 75%; font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.blok > h2 small { font-family: var(--font-tekst); font-size: 12px; font-weight: 600; color: var(--szary); text-transform: none; letter-spacing: 0; margin-left: auto; }

.przelacznik {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 12px; margin-bottom: 8px;
  background: var(--krem); border: 2px solid var(--linia); border-radius: var(--promien); text-align: left; cursor: pointer;
}
.przelacznik .pole-zazn { width: 32px; height: 32px; border: 3px solid var(--granat); border-radius: 3px; display: grid; place-items: center; flex: none; background: #fff; }
.przelacznik .pole-zazn svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 3.5; opacity: 0; }
.przelacznik b { display: block; font-weight: 800; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.przelacznik small { display: block; font-size: 13px; color: var(--szary); margin-top: 1px; }
.przelacznik[aria-checked="true"] { border-color: var(--zielony); background: var(--zielony-tlo); }
.przelacznik[aria-checked="true"] .pole-zazn { background: var(--zielony); border-color: var(--zielony); }
.przelacznik[aria-checked="true"] .pole-zazn svg { opacity: 1; }

.segmenty { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 2px solid var(--granat); border-radius: var(--promien); overflow: hidden; }
.segmenty button {
  min-height: 52px; border: 0; border-left: 2px solid var(--granat); background: var(--papier); cursor: pointer;
  font-weight: 800; font-size: 12px; letter-spacing: 0; text-transform: uppercase; padding: 4px 4px; line-height: 1.15; overflow-wrap: break-word; hyphens: manual; min-width: 0;
}
.segmenty button:first-child { border-left: 0; }
.segmenty button[aria-pressed="true"] { background: var(--granat); color: #fff; }
.segmenty.temp button[data-w="HOT"][aria-pressed="true"] { background: var(--hot); }
.segmenty.temp button[data-w="WARM"][aria-pressed="true"] { background: var(--warm); }
.segmenty.temp button[data-w="COLD"][aria-pressed="true"] { background: var(--cold); }
.segmenty.temp button[data-w="HOT"] { color: var(--hot); } .segmenty.temp button[data-w="WARM"] { color: var(--warm); } .segmenty.temp button[data-w="COLD"] { color: var(--cold); }
.segmenty.temp button[aria-pressed="true"] { color: #fff; }
.siatka-progres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.siatka-progres button {
  min-height: 52px; border: 2px solid var(--linia); background: var(--krem); border-radius: var(--promien); cursor: pointer;
  font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; line-height: 1.15;
}
.siatka-progres button[aria-pressed="true"] { background: var(--granat); border-color: var(--granat); color: #fff; }
.siatka-progres button[data-w="UMOWA"][aria-pressed="true"], .siatka-progres button[data-w="TRANSAKCJA"][aria-pressed="true"] { background: var(--zielony); border-color: var(--zielony); }
.etykieta-pola { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--szary); margin: 16px 0 6px; }
.etykieta-pola:first-child { margin-top: 0; }

.pole, select.pole, textarea.pole {
  width: 100%; min-height: 52px; padding: 12px; border: 2px solid var(--granat); border-radius: var(--promien);
  background: #fff; font-size: 16px; font-weight: 500;
}
textarea.pole { min-height: 96px; resize: vertical; line-height: 1.4; }
.pole:focus { outline: 3px solid var(--niebieski); outline-offset: 1px; }
.wiersz-pol { display: flex; gap: 8px; align-items: stretch; }
.wiersz-pol > * { flex: 1; min-width: 0; }
.podpowiedz { font-size: 13px; color: var(--szary); margin-top: 6px; }
.blad-pola { font-size: 14px; color: var(--czerwien-ciemna); font-weight: 700; margin-top: 6px; }

.chipy { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chipy::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 44px; padding: 0 14px; border: 2px solid var(--granat); border-radius: 22px; background: var(--papier);
  font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--granat); color: #fff; }
.chipy.zawin { flex-wrap: wrap; overflow: visible; }

.odpowiedzi { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
.odpowiedzi div { border-left: 3px solid var(--niebieski); padding-left: 10px; }
.odpowiedzi dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--szary); }
.odpowiedzi dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.sciaga { border-top-color: var(--niebieski); }
.sciaga-wiersz { margin: 14px 0 0; }
.sciaga-wiersz .etykieta-pola { margin: 0 0 4px; }
.sciaga-wiersz .po-terminie { color: var(--pomarancz); font-weight: 700; }
.sciaga-notatka { margin: 0; white-space: pre-wrap; background: var(--krem); padding: 8px 10px; border-left: 3px solid var(--granat); font-size: 15px; overflow-wrap: anywhere; }
.sciaga-wiersz a.podpowiedz { display: inline-block; margin-top: 6px; color: var(--niebieski); font-weight: 700; }
.termin-czytelnie { margin: -2px 0 0; font-weight: 700; font-size: 15px; color: var(--granat); }
.termin-czytelnie::first-letter { text-transform: uppercase; }

.os-czasu { list-style: none; margin: 0; padding: 0; }
.os-czasu li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linia); }
.os-czasu li:last-child { border-bottom: 0; }
.os-czasu time { font-size: 12px; font-weight: 700; color: var(--szary); line-height: 1.3; }
.os-czasu .co { font-size: 14px; overflow-wrap: anywhere; }
.os-czasu .co b { font-weight: 800; }
.os-czasu .kto { font-size: 12px; color: var(--szary); }
.os-czasu li.notatka .co { white-space: pre-wrap; background: var(--krem); padding: 8px 10px; border-left: 3px solid var(--granat); }

.akcje-dol {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 25;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 6px; padding: 8px var(--gutter);
  background: rgba(247,245,238,.97); border-top: 2px solid var(--granat);
}
.akcje-dol a, .akcje-dol button {
  min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--promien); text-decoration: none; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid var(--granat); color: var(--granat); background: var(--papier); cursor: pointer;
}
.akcje-dol .zadzwon { flex-direction: row; gap: 8px; background: var(--niebieski); border-color: var(--niebieski); color: #fff; font-size: 17px; }
.akcje-dol [aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* ---------- arkusz od dołu (Jak poszło?) i okna ---------- */
.zaslona { position: fixed; inset: 0; background: rgba(0, 14, 53, .55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.arkusz {
  width: 100%; max-width: 560px; background: var(--krem); border-top: 6px solid var(--czerwien);
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto;
}
.arkusz h2 { margin: 0 0 4px; font-size: 32px; }
.arkusz .pod { margin: 0 0 14px; color: var(--szary); font-size: 14px; }
.arkusz .opcje { display: grid; gap: 8px; }
.arkusz .opcje .btn { min-height: 58px; justify-content: flex-start; padding: 0 16px; font-size: 16px; text-transform: none; letter-spacing: 0; }
.arkusz .opcje .btn.rozmowa { background: var(--zielony); border-color: var(--zielony); color: #fff; }
.arkusz .zamknij { margin-top: 10px; }

.toast {
  /* Telefon: u góry, żeby nie zasłaniał paska akcji, klawiatury ani pól w oknach od dołu */
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 64px); z-index: 60;
  background: var(--granat); color: var(--krem); padding: 12px 18px; border-radius: var(--promien); font-weight: 700; font-size: 15px;
  max-width: calc(100vw - 32px); box-shadow: 0 6px 20px rgba(0,14,53,.25); border-left: 6px solid var(--zielony);
}
.toast.blad { border-left-color: var(--czerwien); }

/* ---------- lista Leady ---------- */
.narzedzia { padding: 4px var(--gutter) 10px; display: grid; gap: 10px; }
.szukaj { position: relative; }
.szukaj svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--szary); }
.szukaj input { padding-left: 42px; }
.licznik-wynikow { padding: 0 var(--gutter) 8px; font-size: 14px; color: var(--szary); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.przyciski-listy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 var(--gutter) 12px; }
.wiecej-wynikow { padding: 16px var(--gutter); }

/* ---------- statystyki ---------- */
.stat-blok { background: var(--papier); margin: 12px 0 0; padding: 14px var(--gutter) 18px; border-top: 3px solid var(--granat); }
.stat-blok h2 { margin: 0 0 12px; font-family: var(--font-naglowek); font-stretch: 75%; font-weight: 800; font-size: 20px; text-transform: uppercase; }
.lejek { display: grid; gap: 8px; }
.lejek-krok { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: end; }
.lejek-krok .nazwa { font-size: 14px; font-weight: 600; }
.lejek-krok .liczba { font-family: var(--font-naglowek); font-stretch: 75%; font-weight: 800; font-size: 22px; line-height: 1; text-align: right; }
.lejek-krok .tor { grid-column: 1 / -1; height: 14px; background: var(--krem-2); position: relative; }
.lejek-krok .slupek { position: absolute; left: 0; top: 0; bottom: 0; background: var(--granat); }
.lejek-krok.kluczowy .slupek { background: var(--czerwien); }
.lejek-krok .przejscie { grid-column: 1 / -1; font-size: 12px; color: var(--szary); }
.kafle { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--granat); }
.kafel { padding: 12px; border-left: 2px solid var(--granat); border-top: 2px solid var(--granat); }
.kafel:nth-child(odd) { border-left: 0; }
.kafel:nth-child(-n+2) { border-top: 0; }
.kafel b { display: block; font-family: var(--font-naglowek); font-stretch: 70%; font-weight: 800; font-size: 34px; line-height: 1; }
.kafel span { display: block; font-size: 12px; font-weight: 600; color: var(--szary); margin-top: 4px; }
.kafel.dobry b { color: var(--zielony); } .kafel.zly b { color: var(--czerwien); }
.tabela-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
table.tabela { border-collapse: collapse; width: 100%; font-size: 14px; }
table.tabela th { text-align: right; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--szary); padding: 6px 6px; border-bottom: 2px solid var(--granat); white-space: nowrap; }
table.tabela th:first-child, table.tabela td:first-child { text-align: left; }
table.tabela td { text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--linia); font-variant-numeric: tabular-nums; white-space: nowrap; }
.temp-pasek { display: flex; height: 30px; border: 2px solid var(--granat); }
.temp-pasek span { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; min-width: 0; overflow: hidden; }
.legenda-temp { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.legenda-temp i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; }

/* ---------- logowanie ---------- */
.ekran-logowania {
  min-height: 100vh; min-height: 100dvh; background: var(--granat); color: var(--krem);
  display: flex; flex-direction: column; justify-content: space-between; padding: max(32px, env(safe-area-inset-top)) 24px 28px;
}
.ekran-logowania .marka .kicker { color: rgba(247,245,238,.7); }
.ekran-logowania .marka h1 { margin: 10px 0 0; font-size: 76px; color: var(--krem); }
.ekran-logowania .marka h1 em { font-style: normal; color: var(--czerwien); }
.ekran-logowania .marka p { margin: 12px 0 0; font-size: 16px; max-width: 30ch; color: rgba(247,245,238,.85); }
.ekran-logowania form { display: grid; gap: 12px; margin-top: 32px; max-width: 420px; width: 100%; }
.ekran-logowania label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,245,238,.8); }
.ekran-logowania .pole { border-color: var(--krem); }
.ekran-logowania .btn.glowny { min-height: 58px; font-size: 17px; margin-top: 8px; }
.ekran-logowania .stopka { font-size: 14px; color: rgba(247,245,238,.75); margin-top: 24px; max-width: 420px; }
.ekran-logowania .blad { background: var(--czerwien); color: #fff; padding: 10px 12px; font-weight: 700; border-radius: var(--promien); }
.pas-marki { height: 8px; display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px -24px 0; }
.pas-marki i { display: block; }
.pas-marki i:nth-child(1) { background: var(--czerwien); }
.pas-marki i:nth-child(2) { background: var(--krem); }
.pas-marki i:nth-child(3) { background: var(--niebieski); }
.qr { background: #fff; padding: 12px; width: 220px; height: 220px; }

/* ---------- Więcej ---------- */
.menu { list-style: none; margin: 0; padding: 0; background: var(--papier); border-top: 3px solid var(--granat); }
.menu a, .menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 var(--gutter);
  border: 0; border-bottom: 1px solid var(--linia); background: transparent; color: var(--granat); text-decoration: none;
  font-weight: 700; font-size: 16px; text-align: left; cursor: pointer;
}
.instrukcja { padding: 4px var(--gutter) 16px; font-size: 15px; }
.instrukcja ol { padding-left: 20px; }
.instrukcja li { margin: 6px 0; }

/* ---------- komputer: lista i karta obok siebie ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 20px; }
  .nav { display: none; }
  .nav-gora { display: flex; gap: 4px; margin-left: 28px; }
  .nav-gora a {
    color: rgba(247,245,238,.75); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
    padding: 10px 14px; position: relative; display: flex; align-items: center; gap: 8px;
  }
  .nav-gora a[aria-current="page"] { color: #fff; box-shadow: inset 0 -4px 0 var(--czerwien); }
  .nav-gora .plakietka { background: var(--czerwien); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; min-width: 20px; text-align: center; }
  .pasek-gora .data { display: block; }
  .inicjaly { margin-left: 0; }
  .uklad { display: grid; grid-template-columns: minmax(380px, 440px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding-bottom: 0; flex: 1 1 auto; min-height: 0; }
  .aplikacja { height: 100vh; height: 100dvh; min-height: 0; }
  .uklad.z-karta .kol-lista, .uklad:not(.z-karta) .kol-karta { display: block; }
  .uklad.szeroki { grid-template-columns: 1fr; }
  .uklad.szeroki .kol-karta { display: none; }
  .kol-lista { overflow-y: auto; border-right: 3px solid var(--granat); background: var(--krem); }
  .kol-karta { overflow-y: auto; }
  .akcje-dol { position: sticky; bottom: 0; grid-template-columns: 2fr 1fr 1fr 1fr; }
  .karta { padding-bottom: 0; max-width: 860px; }
  .karta-tresc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; padding: 0 12px; align-items: start; }
  .karta-tresc .blok { margin-top: 12px; }
  .karta-tresc .blok.szeroki { grid-column: 1 / -1; }
  .karta-gora .wstecz { display: none; }
  .karta-gora { padding-top: 18px; }
  .pusta-karta { display: grid; place-items: center; height: 100%; color: var(--szary); text-align: center; padding: 40px; }
  .pusta-karta .wielki { font-size: 44px; color: var(--granat-2); opacity: .25; display: block; }
  .toast { top: auto; bottom: 24px; }
  .ekran-statystyki { max-width: 1240px; }
  .uklad.szeroki .kol-lista { border-right: 0; }
  .statystyki-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 0 var(--gutter); max-width: 1200px; }
  .statystyki-siatka .stat-blok { padding-left: 16px; padding-right: 16px; }
  .statystyki-siatka .stat-blok.szeroki { grid-column: 1 / -1; }
  .ekran-logowania { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; padding: 64px; }
  .ekran-logowania .marka h1 { font-size: 120px; }
  .ekran-logowania .pas-marki { margin: 28px 0 0; max-width: 520px; }
}
@media (max-width: 370px) {
  .licznik-kafel b { font-size: 30px; }
  .btn-zadzwon, .btn-sms, .btn-biore { width: 108px; }
  .btn-zadzwon svg { display: none; }
  .karta-gora h1 { font-size: 34px; }
}
.karta-gora .znacznik-oferty { box-shadow: inset 0 0 0 1.5px rgba(247, 245, 238, .8); }

/* =====================================================================================================
   Ekran wejścia i logowanie kodem (wersja Cloudflare)
   ===================================================================================================== */
.ekran-logowania { position: relative; overflow: hidden; isolation: isolate; }
.ekran-logowania.nakladka { position: fixed; inset: 0; z-index: 100; min-height: 0; }
.ekran-logowania > * { position: relative; z-index: 1; }
/* dwie miękkie poświaty w kolorach marki, przesuwane tylko przez transform */
.ekran-logowania::before, .ekran-logowania::after {
  content: ''; position: absolute; z-index: 0; width: 120vmax; height: 120vmax; border-radius: 50%; pointer-events: none;
  opacity: .5; will-change: transform;
}
.ekran-logowania::before { left: -60vmax; top: -70vmax; background: radial-gradient(closest-side, rgba(0, 67, 255, .45), rgba(0, 67, 255, 0) 70%); }
.ekran-logowania::after { right: -70vmax; bottom: -75vmax; background: radial-gradient(closest-side, rgba(255, 18, 0, .32), rgba(255, 18, 0, 0) 70%); }
.ekran-logowania .marka h1 { display: flex; flex-direction: column; }
.ekran-logowania .marka h1 .linia { display: block; overflow: hidden; padding-bottom: .04em; }
.ekran-logowania .marka h1 .linia > span { display: inline-block; }
.ekran-logowania .marka h1 em { display: inline-block; }
.miejsce-formularza { min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.formularz-wejscia { display: grid; gap: 12px; margin-top: 32px; max-width: 420px; width: 100%; }
.formularz-wejscia .krok { color: rgba(247,245,238,.65); }
.tytul-kroku { margin: 0; font-size: 40px; color: var(--krem); }
.opis-kroku { margin: 0 0 6px; color: rgba(247,245,238,.82); font-size: 15px; }
.opis-kroku b { color: #fff; overflow-wrap: anywhere; }
.formularz-wejscia .pole { background: rgba(247,245,238,.06); color: var(--krem); border-color: rgba(247,245,238,.55); min-height: 58px; font-size: 18px; }
.formularz-wejscia .pole::placeholder { color: rgba(247,245,238,.4); }
.formularz-wejscia .pole:focus { border-color: var(--krem); background: rgba(247,245,238,.1); outline-color: var(--niebieski); }
.formularz-wejscia .btn.glowny { min-height: 58px; font-size: 17px; justify-content: space-between; padding: 0 20px; margin-top: 4px; }
.formularz-wejscia .btn .strzalka { font-style: normal; font-size: 22px; line-height: 1; }
.formularz-wejscia .btn.czeka { opacity: .8; pointer-events: none; }
.formularz-wejscia .btn.czeka .strzalka { opacity: .6; }
.formularz-wejscia .btn.cichy { color: var(--krem); text-transform: none; letter-spacing: 0; font-weight: 700; min-height: 44px; }
.formularz-wejscia .btn.jasny { background: transparent; color: var(--krem); border-color: var(--krem); }
.linki-kroku { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.dev-kod { margin: 0; font-size: 13px; color: rgba(247,245,238,.7); }
.dev-kod b { color: var(--krem); letter-spacing: .2em; }

/* pole kodu: jedno pole, sześć komórek pod spodem */
.kod-ramka { position: relative; display: block; cursor: text; }
.pole-kodu { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; color: transparent; caret-color: transparent; border: 0; background: transparent; }
.komorki { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.komorka {
  height: 68px; display: grid; place-items: center; border: 2px solid rgba(247,245,238,.45); border-radius: var(--promien);
  font-family: var(--font-naglowek); font-stretch: 75%; font-weight: 800; font-size: 36px; color: var(--krem); background: rgba(247,245,238,.05);
  transition: border-color .18s ease, background-color .18s ease;
}
.komorka.kursor { border-color: var(--krem); background: rgba(247,245,238,.12); }
.komorka.pelna { border-color: var(--krem); }
.kod-ramka.ok .komorka { border-color: var(--zielony); background: rgba(28,122,62,.35); }
.kod-ramka.sprawdza .komorka { border-color: rgba(247,245,238,.8); }
.powitanie { display: grid; gap: 6px; margin-top: 32px; }
.powitanie .kicker { color: rgba(247,245,238,.65); }
.powitanie b { font-size: 64px; color: var(--krem); }
.kropki { display: flex; gap: 8px; padding: 32px 0 8px; }
.kropki i { width: 10px; height: 10px; border-radius: 50%; background: var(--krem); opacity: .35; }
.ekran-logowania .blad { background: var(--czerwien); color: #fff; padding: 10px 12px; font-weight: 700; border-radius: var(--promien); }
.btn.jasny { background: transparent; color: var(--krem); border-color: var(--krem); }

/* toast z ikoną */
.toast { display: flex; align-items: center; gap: 10px; }
.toast-ikona { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--zielony); flex: none; }
.toast-ikona svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 3.5; }
.toast.blad .toast-ikona { background: var(--czerwien); }
.toast-ikona b { color: #fff; font-weight: 900; font-size: 14px; }

/* szkielety */
.kosc { display: block; position: relative; overflow: hidden; background: var(--krem-2); border-radius: 3px; }
.kosc.ciemna { background: rgba(247,245,238,.14); }
.kosc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: translateX(-100%); }
.kosc.ciemna::after { background: linear-gradient(90deg, transparent, rgba(247,245,238,.18), transparent); }
.szkielet-wiersz .wiersz-tresc { display: grid; gap: 8px; }
.k-znaczniki { width: 112px; height: 20px; } .k-imie { width: 62%; height: 20px; } .k-meta { width: 44%; height: 14px; }
.k-przycisk { width: 124px; height: 48px; } .k-przycisk.niski { height: 38px; }
.szkielet-karta .karta-gora { display: grid; gap: 10px; padding-top: 24px; }
.k-kicker { width: 55%; height: 12px; } .k-tytul { width: 70%; height: 38px; } .k-tel { width: 46%; height: 24px; }
.k-naglowek { width: 38%; height: 18px; margin-bottom: 14px; } .k-pole { width: 100%; height: 52px; margin-top: 8px; }
.k-slupek { width: var(--w, 80%); height: 14px; margin-top: 14px; }
.szkielet-liczniki .licznik-kafel { align-items: center; gap: 6px; }
.k-liczba { width: 34px; height: 30px; } .k-podpis { width: 58px; height: 10px; }
.k-sekcja { width: 140px; height: 18px; }
.lista.odswieza { opacity: .55; transition: opacity .2s ease; }

/* zapis: zielony pasek po górnej krawędzi bloku */
.blok { position: relative; }
.blok::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--zielony); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }

/* nawigacja: czerwony znacznik rośnie przy zmianie ekranu */
.nav a::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 4px; background: var(--czerwien); transform: scaleX(0); }
.nav a[aria-current="page"]::before { transform: scaleX(1); }

/* =====================================================================================================
   Ruch: tylko transform i opacity (kompozytor, 60 kl./s). Przy "ogranicz ruch" w systemie nic się nie animuje.
   ===================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :root { --wyjscie: cubic-bezier(.16, 1, .3, 1); --sprezyna: cubic-bezier(.34, 1.4, .64, 1); }

  /* ekran wejścia: litery wysuwają się spod linii, kropka wskakuje, pas marki rośnie od lewej */
  .ekran-logowania::before { animation: poswiata-a 16s ease-in-out infinite alternate; }
  .ekran-logowania::after { animation: poswiata-b 19s ease-in-out infinite alternate; }
  .ekran-logowania .marka .kicker { animation: w-gore .7s var(--wyjscie) .05s both; }
  .ekran-logowania .marka h1 .linia > span { animation: spod-linii .95s var(--wyjscie) both; }
  .ekran-logowania .marka h1 .linia:nth-child(1) > span { animation-delay: .12s; }
  .ekran-logowania .marka h1 .linia:nth-child(2) > span { animation-delay: .22s; }
  .ekran-logowania .marka h1 em { animation: kropka .6s var(--sprezyna) .78s both; }
  .ekran-logowania .marka p { animation: w-gore .8s var(--wyjscie) .42s both; }
  .pas-marki i { transform-origin: left; animation: pas .9s var(--wyjscie) both; }
  .pas-marki i:nth-child(1) { animation-delay: .5s; } .pas-marki i:nth-child(2) { animation-delay: .6s; } .pas-marki i:nth-child(3) { animation-delay: .7s; }
  .kropki i { animation: kropki 1.1s ease-in-out infinite; }
  .kropki i:nth-child(2) { animation-delay: .15s; } .kropki i:nth-child(3) { animation-delay: .3s; }
  .kropki { animation: w-gore .5s var(--wyjscie) .6s both; }
  .krok-wejscie > * { animation: z-prawej .55s var(--wyjscie) both; }
  .krok-wejscie > :nth-child(2) { animation-delay: .04s; } .krok-wejscie > :nth-child(3) { animation-delay: .08s; }
  .krok-wejscie > :nth-child(4) { animation-delay: .12s; } .krok-wejscie > :nth-child(5) { animation-delay: .16s; }
  .krok-wejscie > :nth-child(6) { animation-delay: .2s; } .krok-wejscie > :nth-child(n+7) { animation-delay: .24s; }
  .komorka.pelna { animation: cyfra .22s var(--sprezyna); }
  .kod-ramka.sprawdza .komorka { animation: oddech .9s ease-in-out infinite; }
  .kod-ramka.sprawdza .komorka:nth-child(2) { animation-delay: .06s; } .kod-ramka.sprawdza .komorka:nth-child(3) { animation-delay: .12s; }
  .kod-ramka.sprawdza .komorka:nth-child(4) { animation-delay: .18s; } .kod-ramka.sprawdza .komorka:nth-child(5) { animation-delay: .24s; }
  .kod-ramka.sprawdza .komorka:nth-child(6) { animation-delay: .3s; }
  .powitanie .kicker { animation: w-gore .45s var(--wyjscie) both; }
  .powitanie b { display: inline-block; animation: spod-linii .6s var(--wyjscie) .05s both; }
  .formularz-wejscia .btn.glowny .strzalka { transition: transform .25s var(--wyjscie); }
  .formularz-wejscia .btn.glowny:hover .strzalka { transform: translateX(4px); }
  .formularz-wejscia .btn.czeka .strzalka { animation: strzalka .7s ease-in-out infinite; }

  /* kurtyna: ekran przeniesiony nad panel nie odtwarza wejścia marki drugi raz */
  .ekran-logowania.nakladka .marka *, .ekran-logowania.nakladka .pas-marki i { animation: none !important; }

  /* panel wjeżdża pod odjeżdżającą kurtyną */
  .pasek-gora { animation: z-gory .6s var(--wyjscie) both; }
  .nav { animation: z-dolu .6s var(--wyjscie) both; }
  .nav a::before { transition: transform .32s var(--wyjscie); }

  /* zmiana ekranu: treść wsuwa się lekko, wiersze kolejno */
  /* po szkielecie (.tylko-tresc) nagłówek ekranu i narzędzia już stoją: wjeżdża tylko nowa treść */
  .uklad.wejscie:not(.tylko-tresc) .kol-lista > * > .naglowek-ekranu, .uklad.wejscie:not(.tylko-tresc) .kol-lista > div > .narzedzia,
  .uklad.wejscie:not(.tylko-tresc) .kol-lista > div > .liczniki, .uklad.wejscie:not(.tylko-tresc) .kol-lista > div > .przyciski-listy { animation: w-gore .5s var(--wyjscie) both; }
  .uklad.wejscie .kol-lista > div > .liczniki { animation-delay: .05s; }
  .uklad.wejscie .lista > .wiersz { animation: wiersz .55s var(--wyjscie) both; animation-delay: calc(var(--i, 0) * 32ms + 60ms); }
  /* po szkielecie: kafle tylko liczą w górę (policzDo), wiersze wchodzą krócej i bliżej, bez długiej pustej chwili */
  .uklad.wejscie.tylko-tresc .lista > .wiersz { animation: wiersz-krotko .38s var(--wyjscie) both; animation-delay: calc(var(--i, 0) * 28ms); }
  .uklad.wejscie .sekcja > h2 { animation: w-gore .5s var(--wyjscie) .04s both; }
  .uklad.wejscie .stat-blok, .uklad.wejscie .blok, .uklad.wejscie .menu { animation: w-gore .55s var(--wyjscie) both; }
  .uklad.wejscie .statystyki-siatka > :nth-child(2) { animation-delay: .06s; } .uklad.wejscie .statystyki-siatka > :nth-child(3) { animation-delay: .12s; }
  .uklad.wejscie .statystyki-siatka > :nth-child(n+4) { animation-delay: .18s; }
  .uklad.wejscie .lejek-krok .slupek { transform-origin: left; animation: pas .9s var(--wyjscie) .2s both; }
  .uklad.wejscie .temp-pasek span { transform-origin: left; animation: pas .9s var(--wyjscie) .25s both; }
  .kol-karta.wejscie .karta-gora > * { animation: w-gore .5s var(--wyjscie) both; }
  .kol-karta.wejscie .karta-gora > :nth-child(3) { animation-delay: .04s; } .kol-karta.wejscie .karta-gora > :nth-child(n+4) { animation-delay: .08s; }
  .kol-karta.wejscie .karta-tresc > *, .kol-karta.wejscie .ostrzezenia { animation: w-gore .55s var(--wyjscie) both; }
  .kol-karta.wejscie .karta-tresc > :nth-child(2) { animation-delay: .05s; } .kol-karta.wejscie .karta-tresc > :nth-child(3) { animation-delay: .1s; }
  .kol-karta.wejscie .karta-tresc > :nth-child(n+4) { animation-delay: .15s; }
  .kol-karta.wejscie .akcje-dol { animation: z-dolu .5s var(--wyjscie) .1s both; }

  /* nowy lead na liście: krótki błysk tła */
  .wiersz.nowy::after { content: ''; position: absolute; inset: 0; background: var(--niebieski); opacity: 0; pointer-events: none; animation: blysk 1.6s ease-out; }

  /* licznik minut po czasie: pulsujący obrys */
  .licznik-min.czerwony { position: relative; }
  .licznik-min.czerwony::after { content: ''; position: absolute; inset: -3px; border: 2px solid var(--czerwien); border-radius: 4px; animation: puls 1.8s ease-out infinite; pointer-events: none; }

  /* zapis: zaznaczone pole i wybrany przycisk podskakują raz; pasek bloku przesuwa się */
  .przelacznik.swiezy[aria-checked="true"] .pole-zazn { animation: wskok .45s var(--sprezyna) var(--opoznienie, 0ms) both; }
  .przelacznik.swiezy[aria-checked="true"] .pole-zazn svg { stroke-dasharray: 30; animation: rysuj .4s ease-out calc(var(--opoznienie, 0ms) + 120ms) both; }
  .segmenty.swiezy [aria-pressed="true"], .siatka-progres.swiezy [aria-pressed="true"] { animation: wskok .45s var(--sprezyna) var(--opoznienie, 0ms) both; }
  .blok.zapisano::before { animation: zapisano 1.1s var(--wyjscie) both; }
  .toast .toast-ikona { animation: wskok .4s var(--sprezyna) .05s both; }
  .toast svg.rysuj { stroke-dasharray: 30; animation: rysuj .35s ease-out .15s both; }
  .toast { animation: toast .35s var(--wyjscie) both; }

  /* okno od dołu */
  .zaslona { animation: zaslona .25s ease-out both; }
  .zaslona.zamyka { animation: zaslona-wyj .22s ease-in both; }
  .arkusz { animation: arkusz .42s var(--wyjscie) both; }
  .arkusz .opcje > * { animation: w-gore .4s var(--wyjscie) both; }
  .arkusz .opcje > :nth-child(2) { animation-delay: .03s; } .arkusz .opcje > :nth-child(3) { animation-delay: .06s; }
  .arkusz .opcje > :nth-child(4) { animation-delay: .09s; } .arkusz .opcje > :nth-child(n+5) { animation-delay: .12s; }

  /* dotyk: przycisk lekko się ugina */
  .btn, .btn-zadzwon, .btn-sms, .chip, .segmenty button, .siatka-progres button, .przelacznik, .akcje-dol a, .licznik-kafel, .menu a, .menu button {
    transition: transform .14s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  .btn:active, .btn-zadzwon:active, .btn-sms:active, .chip:active, .segmenty button:active, .siatka-progres button:active,
  .przelacznik:active, .akcje-dol a:active, .licznik-kafel:active { transform: scale(.97); }

  /* szkielet: połysk przesuwa się po kościach */
  .kosc::after { animation: polysk 1.25s ease-in-out infinite; }
  .szkielet-wiersz, .szkielet-karta .blok, .statystyki-siatka[aria-busy] .stat-blok { animation: w-gore .45s var(--wyjscie) calc(var(--i, 0) * 50ms) both; }
}

@keyframes w-gore { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes z-prawej { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes z-gory { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes z-dolu { from { transform: translateY(100%); } to { transform: none; } }
@keyframes spod-linii { from { transform: translateY(110%); } to { transform: none; } }
@keyframes kropka { from { opacity: 0; transform: scale(0) translateY(-30%); } to { opacity: 1; transform: none; } }
@keyframes pas { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes poswiata-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(18vmax, 14vmax) scale(1.12); } }
@keyframes poswiata-b { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-16vmax, -12vmax) scale(.95); } }
@keyframes kropki { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
@keyframes cyfra { from { transform: scale(.82); } to { transform: none; } }
@keyframes oddech { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes strzalka { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes wiersz { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wiersz-krotko { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes blysk { 0% { opacity: .16; } 100% { opacity: 0; } }
@keyframes puls { 0% { opacity: .7; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.22, 1.5); } }
@keyframes wskok { 0% { transform: scale(.86); } 100% { transform: none; } }
@keyframes rysuj { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes zapisano { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes toast { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes zaslona { from { opacity: 0; } to { opacity: 1; } }
@keyframes zaslona-wyj { from { opacity: 1; } to { opacity: 0; } }
@keyframes arkusz { from { transform: translateY(100%); } to { transform: none; } }
@keyframes polysk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (min-width: 1024px) {
  @keyframes toast { from { opacity: 0; transform: translate(-50%, 10px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
  .formularz-wejscia, .miejsce-formularza { max-width: 440px; }
  .tytul-kroku { font-size: 48px; }
  .powitanie b { font-size: 96px; }
}

/* =====================================================================================================
   Wygląd 10.10.2026: mniej ramek, więcej powietrza. Cienkie linie zamiast obrysów 2 do 3 px,
   karty z zaokrągleniem, przełączniki segmentowe, szkło pod paskiem akcji. Kolory i czcionki bez zmian (marka).
   ===================================================================================================== */
/* przyciski: główne pełne z miękkim cieniem w kolorze, drugiego planu cienka linia */
.btn { border-width: 1.5px; border-color: var(--obrys-mocny); letter-spacing: .05em; }
.btn.glowny { box-shadow: 0 8px 18px -10px rgba(0, 67, 255, .7); }
.btn.alarm { box-shadow: 0 8px 18px -10px rgba(255, 18, 0, .7); }
.btn-zadzwon { box-shadow: 0 8px 18px -10px rgba(0, 67, 255, .75); }
.btn-sms { border: 1.5px solid var(--obrys-mocny); letter-spacing: .1em; }
.inicjaly { border: 1.5px solid rgba(247, 245, 238, .45); }

/* Dziś: liczniki jako osobne kafle */
.liczniki { border: 0; gap: 8px; margin-top: 12px; }
.licznik-kafel, .licznik-kafel:first-child {
  border: 1px solid var(--obrys); border-radius: 14px; background: var(--papier); min-height: 78px; box-shadow: 0 1px 2px rgba(0, 14, 53, .04);
}
.licznik-kafel.alarm { background: var(--czerwien); border-color: var(--czerwien); box-shadow: 0 10px 22px -12px rgba(255, 18, 0, .8); }
.licznik-kafel span { letter-spacing: .03em; }
.sekcja { margin-top: 22px; }
.sekcja > h2 { border-bottom: 1px solid var(--obrys-mocny); }
.sekcja.alarm > h2 { border-bottom: 2px solid var(--czerwien); }

/* znaczniki i licznik minut: miękkie rogi, cieńsza linia */
.znacznik-oferty, .licznik-min { border-radius: 6px; }
.znacznik { border-width: 1px; border-radius: 6px; }
.licznik-min.czerwony::after { border-radius: 9px; }
.kosc { border-radius: 6px; }

/* karta leada: hero z poświatą jak na ekranie wejścia, bloki jako karty */
.karta-gora { background: radial-gradient(110% 120% at 100% 0%, rgba(0, 67, 255, .32), rgba(0, 67, 255, 0) 60%), var(--granat); }
.ostrzezenia { padding: 12px var(--gutter) 0; display: grid; gap: 8px; }
.ostrzezenia li { border: 0; border-radius: 12px; }
/* "Lead w puli": biały przycisk na czerwieni zamiast niebieskiego (dwa krzykliwe kolory obok siebie) */
.ostrzezenia li.mocne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ostrzezenia li.mocne .btn.glowny { background: #fff; border-color: #fff; color: var(--czerwien); box-shadow: none; min-height: 44px; }
.blok { margin: 12px var(--gutter) 0; border: 1px solid var(--obrys); border-radius: var(--promien-duzy); box-shadow: var(--cien); padding: 16px 16px 18px; }
.blok.sciaga { border-color: rgba(0, 67, 255, .35); }
.blok::before { top: 0; left: 18px; right: 18px; height: 3px; border-radius: 0 0 3px 3px; }
.odpowiedzi div { border-left-width: 2px; }

.przelacznik { border: 1px solid var(--obrys); border-radius: 14px; background: var(--papier); min-height: 62px; }
.przelacznik .pole-zazn { width: 30px; height: 30px; border: 2px solid var(--obrys-mocny); border-radius: 9px; }
.przelacznik[aria-checked="true"] { border-color: rgba(28, 122, 62, .45); }

/* przełącznik segmentowy: tor z cienką linią, wybrany segment wypełniony */
.segmenty { border: 1px solid var(--obrys); background: var(--papier); padding: 3px; gap: 3px; border-radius: 12px; }
.segmenty button { position: relative; border: 0; border-radius: 9px; background: transparent; min-height: 46px; letter-spacing: .02em; }
.segmenty button[aria-pressed="true"] { background: var(--granat); }
/* cienki rozdzielacz między niewybranymi segmentami */
.segmenty button + button::before { content: ''; position: absolute; left: -2px; top: 12px; bottom: 12px; width: 1px; background: var(--obrys); }
.segmenty button[aria-pressed="true"]::before, .segmenty button[aria-pressed="true"] + button::before { opacity: 0; }
.segmenty button[aria-pressed="true"] { box-shadow: 0 4px 12px -6px rgba(0, 14, 53, .55); }
.siatka-progres button { border: 1px solid var(--obrys); background: var(--papier); }
.siatka-progres button[aria-pressed="true"] { box-shadow: 0 4px 12px -6px rgba(0, 14, 53, .55); }

/* pola i chipy */
.pole, select.pole, textarea.pole { border: 1.5px solid var(--obrys-mocny); }
.pole:focus { outline: none; border-color: var(--niebieski); box-shadow: 0 0 0 4px rgba(0, 67, 255, .16); }
.formularz-wejscia .pole:focus { box-shadow: 0 0 0 4px rgba(0, 67, 255, .5); }
.chip { border: 1px solid var(--obrys-mocny); min-height: 42px; font-weight: 600; }
.chip[aria-pressed="true"] { border-color: var(--granat); font-weight: 700; }

/* pasek akcji pod kciukiem: szkło, zaokrąglone przyciski, napisy mieszczą się w 4 kolumnach */
.akcje-dol {
  border-top: 1px solid var(--obrys); background: rgba(247, 245, 238, .82); gap: 8px;
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
}
.akcje-dol { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
.akcje-dol a, .akcje-dol button { border: 1px solid var(--obrys-mocny); border-radius: 12px; text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 700; padding: 0 2px; }
.akcje-dol .zadzwon { box-shadow: 0 8px 18px -10px rgba(0, 67, 255, .8); text-transform: uppercase; letter-spacing: .05em; font-size: 15px; font-weight: 800; }

/* okno od dołu: zaokrąglona góra z uchwytem zamiast czerwonej krawędzi */
.zaslona { background: rgba(0, 14, 53, .45); }
.arkusz { position: relative; border-top: 0; border-radius: 22px 22px 0 0; padding-top: 30px; box-shadow: 0 -16px 40px -12px rgba(0, 14, 53, .35); }
.arkusz::before { content: ''; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--obrys-mocny); }
/* tylko zwykłe opcje; pełne przyciski (zielony, niebieski, ciemny, czerwony) i cichy link zostają po swojemu */
.arkusz .opcje .btn { border-radius: 14px; }
.arkusz .opcje .btn:where(:not(.cichy, .glowny, .alarm, .ciemny, .rozmowa)) { border: 1px solid var(--obrys); background: var(--papier); }

/* podgląd SMS jako dymek wiadomości */
.dymek-sms { margin: 0 0 6px; padding: 14px 16px; font-size: 15px; color: var(--granat); background: #fff; border: 1px solid var(--obrys); border-radius: 18px 18px 18px 6px; box-shadow: var(--cien); }
/* w listach wiele niebieskich przycisków jeden pod drugim: bez cienia, spokojniej */
.w-akcje .btn-zadzwon, .w-akcje .btn.glowny { box-shadow: none; }

/* komunikat: szerokość według treści (left: 50% ścinało go do połowy ekranu i łamało w 3 linie) */
.toast { width: max-content; border-left: 0; border-radius: 14px; padding: 12px 18px 12px 12px; box-shadow: 0 12px 32px -12px rgba(0, 14, 53, .5); }

/* nawigacja: krótszy znacznik z zaokrągleniem */
.nav a::before, .nav a[aria-current="page"]::before { left: 32%; right: 32%; height: 3px; border-radius: 0 0 3px 3px; }

/* statystyki, menu */
.stat-blok { margin: 12px var(--gutter) 0; border: 1px solid var(--obrys); border-top: 1px solid var(--obrys); border-radius: var(--promien-duzy); box-shadow: var(--cien); padding: 16px 16px 18px; }
.lejek-krok .tor { border-radius: 7px; overflow: hidden; }
.kafle { border: 0; gap: 8px; }
.kafel, .kafel:nth-child(odd), .kafel:nth-child(-n+2) { border: 1px solid var(--obrys); border-radius: 12px; background: var(--krem); }
.temp-pasek { border: 0; border-radius: 10px; overflow: hidden; }
table.tabela th { border-bottom: 1px solid var(--obrys-mocny); }
.menu { margin: 12px var(--gutter) 0; border: 1px solid var(--obrys); border-radius: var(--promien-duzy); overflow: hidden; box-shadow: var(--cien); }
.menu li:last-child a, .menu li:last-child button { border-bottom: 0; }

@media (min-width: 1024px) {
  .karta-tresc .blok { margin: 12px 0 0; }
  .statystyki-siatka .stat-blok { margin: 16px 0 0; }
  .kol-lista { border-right: 1px solid var(--obrys-mocny); }
  .nav-gora a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--czerwien); }
}