/* AS: panel klienta. System wizualny na zmiennych CSS, jasny i ciemny motyw. Bez bibliotek. */

:root {
  --tlo: #f6f7fb;
  --powierzchnia: #ffffff;
  --powierzchnia-2: #f0f2f8;
  --powierzchnia-3: #e4e8f2;
  --tekst: #0f1626;
  --tekst-2: #5b6478;
  --tekst-3: #6b7489;
  --linia: #e3e7f0;
  --linia-mocna: #c9cfdd;
  --akcent: #4f46e5;
  --akcent-mocny: #4338ca;
  --akcent-tlo: #eef0ff;
  --akcent-tlo-2: #dfe3ff;
  --akcent-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%);
  --na-akcencie: #ffffff;
  --zielony: #16a34a;
  --zielony-tekst: #166534;
  --zielony-tlo: #dcfce7;
  --zielony-pelny: #15803d;
  --bursztyn: #f59e0b;
  --bursztyn-tekst: #92400e;
  --bursztyn-tlo: #fef3c7;
  --czerwony: #ef4444;
  --czerwony-tekst: #991b1b;
  --czerwony-tlo: #fee2e2;
  --szary-tekst: #475569;
  --szary-tlo: #e9edf5;
  --test: #0ea5e9;
  --test-tekst: #075985;
  --test-tlo: #e0f2fe;
  --cien-1: 0 1px 2px rgba(15, 22, 38, 0.04), 0 1px 3px rgba(15, 22, 38, 0.06);
  --cien-2: 0 2px 4px rgba(15, 22, 38, 0.04), 0 8px 24px rgba(15, 22, 38, 0.08);
  --cien-3: 0 12px 40px rgba(15, 22, 38, 0.18);
  --cien-akcent: 0 10px 30px rgba(79, 70, 229, 0.35);
  --szklo: rgba(246, 247, 251, 0.82);
  --szklo-pasek: rgba(255, 255, 255, 0.86);
  --promien: 20px;
  --promien-m: 16px;
  --promien-s: 12px;
  --czcionka: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --szybko: 160ms;
  --srednio: 280ms;
  --wysokosc-dol: 68px;
  color-scheme: light dark;
}

/* Wygląd panelu (app.js: data-motyw na <html>). Automatyczny (bez atrybutu albo "auto") idzie za systemem,
   Jasny, Beżowy i Ciemny są stałe. Tokeny ciemne są dwa razy: dla systemu i dla wyboru „Ciemny”. */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw]), :root[data-motyw="auto"] {
    --tlo: #0b0f17;
    --powierzchnia: #131a28;
    --powierzchnia-2: #1a2334;
    --powierzchnia-3: #233048;
    --tekst: #eaeef7;
    --tekst-2: #a2acc0;
    --tekst-3: #8b96ad;
    --linia: #233049;
    --linia-mocna: #35456a;
    --akcent: #8da2ff;
    --akcent-mocny: #a5b6ff;
    --akcent-tlo: #1b2342;
    --akcent-tlo-2: #253060;
    --akcent-gradient: linear-gradient(135deg, #6f7dff 0%, #5b5fe6 55%, #4b48c2 100%);
    --na-akcencie: #0b0f17;
    --zielony: #4ade80;
    --zielony-tekst: #86efac;
    --zielony-tlo: #11301f;
    --zielony-pelny: #22c55e;
    --bursztyn: #fbbf24;
    --bursztyn-tekst: #fcd34d;
    --bursztyn-tlo: #3a2a0a;
    --czerwony: #f87171;
    --czerwony-tekst: #fca5a5;
    --czerwony-tlo: #3d1515;
    --szary-tekst: #b7c0d4;
    --szary-tlo: #1f2a3f;
    --test: #38bdf8;
    --test-tekst: #bae6fd;
    --test-tlo: #0c2a3d;
    --cien-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --cien-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
    --cien-3: 0 16px 48px rgba(0, 0, 0, 0.6);
    --cien-akcent: 0 10px 30px rgba(99, 102, 241, 0.3);
    --szklo: rgba(11, 15, 23, 0.8);
    --szklo-pasek: rgba(19, 26, 40, 0.86);
  }
}

:root[data-motyw="jasny"] { color-scheme: light; }

:root[data-motyw="ciemny"] {
  --tlo: #0b0f17;
  --powierzchnia: #131a28;
  --powierzchnia-2: #1a2334;
  --powierzchnia-3: #233048;
  --tekst: #eaeef7;
  --tekst-2: #a2acc0;
  --tekst-3: #8b96ad;
  --linia: #233049;
  --linia-mocna: #35456a;
  --akcent: #8da2ff;
  --akcent-mocny: #a5b6ff;
  --akcent-tlo: #1b2342;
  --akcent-tlo-2: #253060;
  --akcent-gradient: linear-gradient(135deg, #6f7dff 0%, #5b5fe6 55%, #4b48c2 100%);
  --na-akcencie: #0b0f17;
  --zielony: #4ade80;
  --zielony-tekst: #86efac;
  --zielony-tlo: #11301f;
  --zielony-pelny: #22c55e;
  --bursztyn: #fbbf24;
  --bursztyn-tekst: #fcd34d;
  --bursztyn-tlo: #3a2a0a;
  --czerwony: #f87171;
  --czerwony-tekst: #fca5a5;
  --czerwony-tlo: #3d1515;
  --szary-tekst: #b7c0d4;
  --szary-tlo: #1f2a3f;
  --test: #38bdf8;
  --test-tekst: #bae6fd;
  --test-tlo: #0c2a3d;
  --cien-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --cien-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  --cien-3: 0 16px 48px rgba(0, 0, 0, 0.6);
  --cien-akcent: 0 10px 30px rgba(99, 102, 241, 0.3);
  --szklo: rgba(11, 15, 23, 0.8);
  --szklo-pasek: rgba(19, 26, 40, 0.86);
  color-scheme: dark;
}

/* Beżowy: ciepłe tło i powierzchnie, tekst ciemnobrązowo-grafitowy, akcent fioletowy jak w jasnym (kontrast WCAG AA). */
:root[data-motyw="bezowy"] {
  --tlo: #f5efe6;
  --powierzchnia: #fffaf3;
  --powierzchnia-2: #f1e8dc;
  --powierzchnia-3: #e7dccc;
  --tekst: #2b231d;
  --tekst-2: #655649;
  --tekst-3: #6f6053;
  --linia: #e6dacb;
  --linia-mocna: #d2c2ad;
  --akcent: #4f46e5;
  --akcent-mocny: #4338ca;
  --akcent-tlo: #ece8fb;
  --akcent-tlo-2: #e2dcf8;
  --akcent-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%);
  --na-akcencie: #ffffff;
  --zielony: #16a34a;
  --zielony-tekst: #166534;
  --zielony-tlo: #dcf5dc;
  --zielony-pelny: #15803d;
  --bursztyn: #f59e0b;
  --bursztyn-tekst: #92400e;
  --bursztyn-tlo: #fbedc8;
  --czerwony: #ef4444;
  --czerwony-tekst: #991b1b;
  --czerwony-tlo: #fbe1dc;
  --szary-tekst: #584a3f;
  --szary-tlo: #ebe2d5;
  --test: #0ea5e9;
  --test-tekst: #075985;
  --test-tlo: #dff0f7;
  --cien-1: 0 1px 2px rgba(60, 42, 22, 0.05), 0 1px 3px rgba(60, 42, 22, 0.07);
  --cien-2: 0 2px 4px rgba(60, 42, 22, 0.05), 0 8px 24px rgba(60, 42, 22, 0.09);
  --cien-3: 0 12px 40px rgba(60, 42, 22, 0.2);
  --cien-akcent: 0 10px 30px rgba(79, 70, 229, 0.3);
  --szklo: rgba(245, 239, 230, 0.84);
  --szklo-pasek: rgba(255, 250, 243, 0.88);
  color-scheme: light;
}

/* ---------- podstawy ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--czcionka);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
body.z-dolem { padding-bottom: calc(var(--wysokosc-dol) + env(safe-area-inset-bottom)); }
body.z-paskiem { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

img { max-width: 100%; display: block; }
a { color: var(--akcent); text-decoration: none; }
a:hover { color: var(--akcent-mocny); }
button { font: inherit; color: inherit; }
svg { flex: none; }

:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; border-radius: 6px; }
#app:focus, h1:focus, h2:focus { outline: none; }

.wizualnie-ukryte {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.022em; font-weight: 800; margin: 0 0 8px; }
h2 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.012em; font-weight: 700; margin: 0 0 8px; }
h3 { font-size: 1.02rem; line-height: 1.3; font-weight: 700; margin: 16px 0 6px; }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; padding-left: 1.2em; }
li { margin-bottom: 6px; }
strong { font-weight: 700; }

.cichy { color: var(--tekst-2); font-size: 0.94rem; }
.drobny { color: var(--tekst-2); font-size: 0.86rem; }
.nadtytul { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tekst-2); margin: 0 0 6px; }
.liczby-tab { font-variant-numeric: tabular-nums; }

/* ---------- pasek pokazu ---------- */

.pasek-demo {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  padding: 6px 14px; padding-top: max(6px, env(safe-area-inset-top));
  background: var(--bursztyn-tlo); color: var(--bursztyn-tekst);
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.pasek-demo span { overflow: hidden; text-overflow: ellipsis; }
.pasek-demo button {
  background: none; border: 0; padding: 6px 10px; min-height: 32px;
  color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  border-radius: 8px;
}

/* ---------- ekrany ---------- */

.ekran {
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 16px 32px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.ekran-srodek { text-align: center; padding-top: 48px; }
.ekran-srodek .btn { margin-left: auto; margin-right: auto; max-width: 380px; }

.logo-start {
  width: 72px; height: 72px; margin: 40px auto 20px;
  display: grid; place-items: center;
  border-radius: 22px; background: var(--akcent-gradient); color: #fff;
  font-weight: 800; font-size: 1.6rem; letter-spacing: -0.04em;
  box-shadow: var(--cien-akcent);
  animation: oddech 2.2s ease-in-out infinite;
}
@keyframes oddech { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* nagłówek ekranu (szkło) */
.gora {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  min-height: 60px;
  margin: 0 -16px 8px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--szklo);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
.pasek-demo:not([hidden]) ~ main .gora { top: var(--demo-h, 34px); padding-top: 8px; }
.gora-tytul { flex: 1; min-width: 0; font-weight: 700; font-size: 1.02rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gora-marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; color: var(--tekst); min-height: 44px; padding: 0 4px; }
.znak {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--akcent-gradient); color: #fff;
  font-size: 0.86rem; font-weight: 800; letter-spacing: -0.03em;
}
.gora-puste { width: 44px; flex: none; }

.btn-ikona {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; background: transparent; color: var(--tekst);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--szybko), transform var(--szybko) var(--spring);
}
.btn-ikona:hover { background: var(--powierzchnia-2); }
.btn-ikona:active { transform: scale(0.92); }
.btn-ikona-tlo { background: var(--powierzchnia); box-shadow: var(--cien-1); }

/* ---------- karty ---------- */

.karta {
  background: var(--powierzchnia);
  border-radius: var(--promien);
  box-shadow: var(--cien-1);
  padding: 18px;
  margin: 0 0 12px;
}
.karta > :last-child { margin-bottom: 0; }
.karta-miekka { background: var(--powierzchnia-2); box-shadow: none; }

.ramka { border-radius: var(--promien-m); padding: 12px 14px; margin: 0 0 12px; display: flex; gap: 10px; align-items: flex-start; }
.ramka > svg { margin-top: 2px; }
.ramka p { margin: 0; }
.ramka-uwaga { background: var(--bursztyn-tlo); color: var(--bursztyn-tekst); }
.ramka-blad { background: var(--czerwony-tlo); color: var(--czerwony-tekst); }
.ramka-ok { background: var(--zielony-tlo); color: var(--zielony-tekst); }
.ramka-info { background: var(--akcent-tlo); color: var(--tekst); }
.ramka-cicha { background: var(--powierzchnia-2); color: var(--tekst-2); }

/* ---------- przyciski ---------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: var(--promien-m);
  border: 0;
  font: inherit; font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  text-align: center; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--szybko), transform var(--szybko) var(--spring), box-shadow var(--szybko), color var(--szybko);
  position: relative;
}
.btn:active { transform: scale(0.97); }
.btn-glowny { background: var(--akcent); color: var(--na-akcencie); box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25); }
.btn-glowny:hover { background: var(--akcent-mocny); color: var(--na-akcencie); }
.btn-duzy { min-height: 60px; font-size: 1.1rem; border-radius: 18px; }
.btn-drugi { background: var(--powierzchnia); color: var(--tekst); box-shadow: inset 0 0 0 1.5px var(--linia-mocna); }
.btn-drugi:hover { box-shadow: inset 0 0 0 2px var(--akcent); color: var(--akcent); }
.btn-cichy { background: var(--akcent-tlo); color: var(--akcent); }
.btn-cichy:hover { background: var(--akcent-tlo-2); color: var(--akcent-mocny); }
.btn-tekst { background: transparent; color: var(--akcent); min-height: 44px; font-weight: 600; }
.btn-tekst:hover { background: var(--akcent-tlo); }
.btn-zielony { background: var(--zielony-pelny); color: #fff; }
.btn-zielony:hover { filter: brightness(1.05); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: progress; pointer-events: none; box-shadow: none; }
label.btn:focus-within, label.btn-ikona:focus-within { outline: 3px solid var(--akcent); outline-offset: 2px; }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 8px 0; min-height: 44px;
  font: inherit; font-weight: 600; color: var(--akcent);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  cursor: pointer; text-align: left;
}
.link-srodek { display: flex; justify-content: center; width: 100%; }
.link-zewn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }

.rzad { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { .rzad-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- pola ---------- */

.pole { margin: 12px 0 0; }
.pole > label, .etykieta { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.pole-tekst {
  display: block; width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  font: inherit; font-size: 1.05rem;
  color: var(--tekst);
  background: var(--powierzchnia-2);
  border: 2px solid transparent;
  border-radius: var(--promien-m);
  transition: border-color var(--szybko), background-color var(--szybko);
}
.pole-tekst::placeholder { color: var(--tekst-3); }
.pole-tekst:focus { border-color: var(--akcent); background: var(--powierzchnia); outline: none; }
textarea.pole-tekst { min-height: 170px; resize: vertical; line-height: 1.45; font-size: 0.98rem; }
.pole-kwota { position: relative; }
.pole-kwota .pole-tekst { font-size: 1.6rem; font-weight: 700; padding-right: 54px; min-height: 64px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pole-kwota::after { content: "zł"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--tekst-2); font-size: 1.1rem; pointer-events: none; }
.pole-blad { color: var(--czerwony-tekst); font-weight: 600; font-size: 0.92rem; margin: 6px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.pole-blad:empty { display: none; }

.szybkie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.szybkie button {
  font: inherit; font-weight: 600; font-size: 0.95rem;
  min-height: 42px; padding: 8px 14px;
  border-radius: 999px; border: 0;
  background: var(--powierzchnia-2); color: var(--tekst);
  cursor: pointer; transition: background-color var(--szybko), transform var(--szybko) var(--spring);
}
.szybkie button:hover { background: var(--akcent-tlo); color: var(--akcent); }
.szybkie button:active { transform: scale(0.95); }
.szybkie button[aria-pressed="true"] { background: var(--akcent); color: var(--na-akcencie); }

/* ---------- chipy ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; min-height: 28px;
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; line-height: 1.3;
  white-space: nowrap;
  background: var(--szary-tlo); color: var(--szary-tekst);
}
.chip-duzy { font-size: 0.95rem; padding: 7px 14px; min-height: 36px; }
.chip-tak { background: var(--zielony-tlo); color: var(--zielony-tekst); }
.chip-probka { background: var(--bursztyn-tlo); color: var(--bursztyn-tekst); }
.chip-nie { background: var(--czerwony-tlo); color: var(--czerwony-tekst); }
.chip-test { background: var(--test-tlo); color: var(--test-tekst); }
.chip-akcent { background: var(--akcent-tlo); color: var(--akcent); }
.chip-pelny { background: var(--akcent); color: var(--na-akcencie); }
.chip-pelny-tak { background: var(--zielony-pelny); color: #fff; }
.chip .kropka { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- wstęp (3 ekrany) ---------- */

.wstep { min-height: calc(100dvh - 40px); display: flex; flex-direction: column; padding-top: 24px; }
.wstep-tresc { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 12px 0; }
.wstep-ilustracja {
  width: 200px; height: 200px; margin: 0 auto 28px;
  display: grid; place-items: center;
  border-radius: 56px;
  background: var(--akcent-tlo); color: var(--akcent);
  position: relative;
}
.wstep-ilustracja::before {
  content: ""; position: absolute; inset: 18px; border-radius: 44px;
  background: var(--powierzchnia); box-shadow: var(--cien-2);
}
.wstep-ilustracja svg { position: relative; }
.wstep h1 { font-size: 1.9rem; }
.wstep p { font-size: 1.08rem; color: var(--tekst-2); max-width: 380px; margin: 0 auto 12px; }
.kropki { display: flex; justify-content: center; gap: 8px; margin: 12px 0 20px; }
.kropki span { width: 8px; height: 8px; border-radius: 999px; background: var(--linia-mocna); transition: width var(--srednio) var(--ease), background-color var(--srednio); }
.kropki span[aria-current="step"] { width: 26px; background: var(--akcent); }
.wstep-dol { display: grid; gap: 8px; padding-bottom: 16px; }

/* ---------- ankieta ---------- */

.postep { height: 6px; border-radius: 999px; background: var(--powierzchnia-3); overflow: hidden; margin: 6px 0 20px; }
.postep > div { height: 100%; border-radius: 999px; background: var(--akcent); transition: width var(--srednio) var(--ease); }
.ankieta-krok { color: var(--tekst-2); font-weight: 600; font-size: 0.9rem; margin: 0 0 4px; }
.ankieta h1 { font-size: 1.6rem; }
.opcje { display: grid; gap: 10px; margin: 18px 0 8px; }
.opcja {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px 16px 16px 18px;
  min-height: 68px;
  background: var(--powierzchnia);
  color: var(--tekst);
  border: 2px solid transparent;
  box-shadow: var(--cien-1);
  border-radius: var(--promien);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--szybko), transform var(--szybko) var(--spring), background-color var(--szybko);
}
.opcja:hover { border-color: var(--linia-mocna); }
.opcja:active { transform: scale(0.98); }
.opcja[aria-pressed="true"] { border-color: var(--akcent); background: var(--akcent-tlo); }
.opcja-tresc { flex: 1; min-width: 0; }
.opcja-tytul { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.opcja-opis { display: block; color: var(--tekst-2); font-size: 0.92rem; margin-top: 3px; line-height: 1.4; }
.opcja-znacznik {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 2px solid var(--linia-mocna); display: grid; place-items: center; color: transparent;
  transition: background-color var(--szybko), border-color var(--szybko), color var(--szybko);
}
.opcja[aria-pressed="true"] .opcja-znacznik { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); }
.ankieta-stopka { display: grid; gap: 6px; margin-top: 18px; }

/* ---------- start ---------- */

.powitanie { padding: 6px 0 14px; }
.powitanie h1 { font-size: 1.9rem; margin-bottom: 4px; }
.powitanie p { color: var(--tekst-2); font-size: 1.05rem; margin: 0; }

.aparat {
  position: relative;
  border-radius: 28px;
  padding: 26px 18px 18px;
  text-align: center;
  background: var(--powierzchnia);
  box-shadow: var(--cien-2);
  overflow: hidden;
  transition: box-shadow var(--srednio), transform var(--srednio) var(--spring);
  margin-bottom: 14px;
}
.aparat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, var(--akcent-tlo) 0%, transparent 60%);
}
.aparat > * { position: relative; }
.aparat.upuszczanie { box-shadow: 0 0 0 3px var(--akcent), var(--cien-2); transform: scale(1.01); }
.migawka {
  width: 112px; height: 112px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--akcent-gradient); color: #fff;
  box-shadow: var(--cien-akcent), inset 0 0 0 5px rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform var(--szybko) var(--spring), box-shadow var(--szybko);
  position: relative;
}
.migawka::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid var(--akcent); opacity: 0.25;
  animation: pierscien 2.4s ease-out infinite;
}
@keyframes pierscien { 0% { transform: scale(0.92); opacity: 0.35; } 100% { transform: scale(1.18); opacity: 0; } }
.migawka:hover { transform: scale(1.04); }
.migawka:active { transform: scale(0.95); }
.aparat h2 { font-size: 1.3rem; margin-bottom: 4px; }
.aparat .cichy { margin-bottom: 14px; }
.aparat-akcje { display: grid; gap: 8px; }
.aparat-upusc { display: none; }
.cena-schowana { margin-top: 6px; }
.cena-schowana summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 0; color: var(--akcent); font-weight: 600; cursor: pointer; justify-content: center; width: 100%; }
.cena-schowana summary::-webkit-details-marker { display: none; }
.cena-schowana[open] summary { margin-bottom: 4px; }
.cena-schowana .pole { margin-top: 4px; text-align: left; }

.krok { display: flex; gap: 14px; align-items: flex-start; }
.krok-ikona { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--akcent-tlo); color: var(--akcent); flex: none; }
.krok-tresc { flex: 1; min-width: 0; }
.krok-tresc p { margin: 0 0 8px; font-size: 1.02rem; }
.krok-tresc .nadtytul { margin-bottom: 2px; }

.naglowek-sekcji { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.naglowek-sekcji h2 { margin: 0; }
.naglowek-sekcji a { font-weight: 600; font-size: 0.95rem; }

/* ---------- lista produktów ---------- */

.lista-produktow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.produkt {
  display: flex; align-items: center; gap: 14px;
  background: var(--powierzchnia);
  border-radius: var(--promien);
  box-shadow: var(--cien-1);
  padding: 12px 14px 12px 12px;
  min-height: 84px;
  color: var(--tekst); text-decoration: none;
  transition: transform var(--szybko) var(--spring), box-shadow var(--szybko);
}
.produkt:hover { color: var(--tekst); box-shadow: var(--cien-2); }
.produkt:active { transform: scale(0.985); }
.mini {
  width: 60px; height: 60px; border-radius: 16px; flex: none;
  object-fit: cover; background: var(--powierzchnia-2);
  display: grid; place-items: center; color: var(--tekst-3);
  overflow: hidden;
}
.mini img { width: 100%; height: 100%; object-fit: cover; }
.produkt-tresc { flex: 1; min-width: 0; }
.produkt-nazwa { display: block; font-weight: 700; line-height: 1.3; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.produkt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.88rem; color: var(--tekst-2); }
.produkt > svg { color: var(--tekst-3); }

.stan-pusty { text-align: center; padding: 36px 18px; }
.stan-pusty-ikona { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 24px; display: grid; place-items: center; background: var(--powierzchnia-2); color: var(--tekst-3); }
.stan-pusty h2 { margin-bottom: 6px; }
.stan-pusty p { color: var(--tekst-2); max-width: 360px; margin: 0 auto 14px; }
.stan-pusty .btn { max-width: 320px; margin: 0 auto; }
.stan-pusty-ikona.blad { background: var(--czerwony-tlo); color: var(--czerwony-tekst); }
.stan-pusty-ikona.akcent { background: var(--akcent-tlo); color: var(--akcent); }

/* ---------- analiza: agent przy pracy ---------- */

.analiza { padding-top: 16px; }
.analiza-glowa { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; }
.analiza-foto {
  width: 148px; height: 148px; border-radius: 36px; object-fit: cover;
  background: var(--powierzchnia-2); box-shadow: var(--cien-2);
  position: relative;
}
.analiza-foto-ramka { position: relative; width: 148px; height: 148px; margin-bottom: 16px; }
.analiza-foto-ramka::before, .analiza-foto-ramka::after {
  content: ""; position: absolute; inset: -8px; border-radius: 44px;
  border: 2px solid var(--akcent); opacity: 0;
  animation: skan 2.4s ease-out infinite;
}
.analiza-foto-ramka::after { animation-delay: 1.2s; }
@keyframes skan { 0% { transform: scale(0.96); opacity: 0.5; } 100% { transform: scale(1.14); opacity: 0; } }
.analiza-foto-ramka.gotowe::before, .analiza-foto-ramka.gotowe::after { animation: none; opacity: 0; }
.analiza h1 { font-size: 1.5rem; margin-bottom: 4px; }
.analiza-czas { color: var(--tekst-2); font-size: 0.95rem; margin: 0; }

.os { list-style: none; margin: 0; padding: 0; display: grid; }
.os li { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; position: relative; min-height: 66px; }
.os li::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: -4px; width: 2px; background: var(--linia); }
.os li:last-child::before { display: none; }
.os li.gotowy::before { background: var(--zielony); }
.os-ikona {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--powierzchnia-2); color: var(--tekst-3);
  transition: background-color var(--srednio), color var(--srednio), transform var(--srednio) var(--spring);
}
.os li.aktywny .os-ikona { background: var(--akcent); color: var(--na-akcencie); box-shadow: 0 0 0 6px var(--akcent-tlo); animation: tetno 1.4s ease-in-out infinite; }
@keyframes tetno { 0%, 100% { box-shadow: 0 0 0 4px var(--akcent-tlo); } 50% { box-shadow: 0 0 0 10px var(--akcent-tlo); } }
.os li.gotowy .os-ikona { background: var(--zielony-tlo); color: var(--zielony-tekst); animation: pop var(--srednio) var(--spring); }
@keyframes pop { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }
.os-tresc { padding: 6px 0 16px; }
.os-tytul { display: block; font-weight: 700; color: var(--tekst-3); transition: color var(--srednio); line-height: 1.3; }
.os li.aktywny .os-tytul, .os li.gotowy .os-tytul { color: var(--tekst); }
.os-opis { display: block; color: var(--tekst-2); font-size: 0.9rem; margin-top: 2px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--srednio), max-height var(--srednio); }
.os li.aktywny .os-opis, .os li.gotowy .os-opis { opacity: 1; max-height: 80px; }
.os li.gotowy .os-opis { color: var(--tekst-3); }
.os-czas { display: inline-block; margin-left: 6px; color: var(--zielony-tekst); font-size: 0.8rem; font-weight: 600; }

.analiza-koniec { text-align: center; color: var(--tekst-2); font-weight: 600; margin: 6px 0 14px; min-height: 1.5em; }
.analiza-koniec.zywy { animation: migotanie 1.8s ease-in-out infinite; }
@keyframes migotanie { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.szkielet { display: grid; gap: 10px; margin-top: 8px; }
.kosc { border-radius: 12px; background: linear-gradient(90deg, var(--powierzchnia-2) 0%, var(--powierzchnia-3) 50%, var(--powierzchnia-2) 100%); background-size: 200% 100%; animation: migawka-kosci 1.6s linear infinite; }
@keyframes migawka-kosci { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.szkielet-karta { background: var(--powierzchnia); border-radius: var(--promien); padding: 16px; box-shadow: var(--cien-1); display: grid; gap: 10px; }

/* ---------- karta produktu ---------- */

.hero { display: grid; grid-template-columns: 108px 1fr; gap: 16px; align-items: start; margin: 4px 0 16px; }
.hero-foto { width: 108px; height: 108px; border-radius: 28px; object-fit: cover; background: var(--powierzchnia-2); box-shadow: var(--cien-2); display: grid; place-items: center; color: var(--tekst-3); overflow: hidden; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-tresc { min-width: 0; }
.hero h1 { font-size: 1.3rem; line-height: 1.25; margin: 4px 0 8px; }

.decyzja {
  border-radius: 24px;
  padding: 20px;
  margin: 0 0 12px;
  background: var(--powierzchnia);
  box-shadow: var(--cien-2);
  position: relative;
  overflow: hidden;
}
.decyzja::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--szary-tekst); }
.decyzja-tak::before { background: var(--zielony); }
.decyzja-probka::before { background: var(--bursztyn); }
.decyzja-nie::before { background: var(--czerwony); }
.decyzja-test::before { background: var(--test); }

/* scenariusze cen */
.scenariusze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.scenariusze.dwa { grid-template-columns: repeat(2, 1fr); }
.scenariusz { background: var(--powierzchnia-2); border-radius: 14px; padding: 10px 10px 8px; text-align: center; position: relative; }
.scenariusz-decyzja { box-shadow: inset 0 0 0 2px var(--akcent); background: var(--akcent-tlo); }
.scenariusz-etykieta { display: block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tekst-2); }
.scenariusz-cena { display: block; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; margin-top: 4px; }
.scenariusz-zysk { display: block; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; }
.scenariusz-zysk.zielona { color: var(--zielony-tekst); }
.scenariusz-zysk.czerwona { color: var(--czerwony-tekst); }
.scenariusz-dopisek { display: block; font-size: 0.74rem; color: var(--tekst-2); margin-top: 2px; }
.scenariusz-znacznik { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.pewnosc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pewnosc .chip { font-weight: 600; }
.pewnosc .chip b { font-weight: 800; }

/* plan i wyniki */
.kpi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kpi li { background: var(--powierzchnia-2); border-radius: 14px; padding: 10px 12px; }
.kpi-glowka { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 0.92rem; }
.kpi-glowka strong { font-variant-numeric: tabular-nums; }
.kpi-pasek { height: 6px; border-radius: 999px; background: var(--powierzchnia-3); margin: 8px 0 4px; overflow: hidden; }
.kpi-pasek > div { height: 100%; border-radius: 999px; background: var(--akcent); transition: width 600ms var(--ease); }
.kpi-ok .kpi-pasek > div { background: var(--zielony); }
.kpi-zle .kpi-pasek > div { background: var(--czerwony); }
.kpi-opis { font-size: 0.82rem; color: var(--tekst-2); }
.kpi-stopka { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.kpi-stopka .chip { flex: none; font-size: 0.74rem; min-height: 24px; padding: 2px 9px; }
.tabela-wynikow { width: 100%; border-collapse: collapse; font-size: 0.88rem; font-variant-numeric: tabular-nums; margin-top: 10px; }
.tabela-wynikow th, .tabela-wynikow td { text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--linia); }
.tabela-wynikow th:first-child, .tabela-wynikow td:first-child { text-align: left; }
.tabela-wynikow thead th { font-size: 0.72rem; color: var(--tekst-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.tabela-wynikow tfoot td { font-weight: 700; border-bottom: 0; }

/* sklep jednoproduktowy */
.adres-sklepu { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem; word-break: break-all; background: var(--powierzchnia-2); border-radius: var(--promien-s); padding: 10px 12px; margin: 0 0 12px; }
.lista-brakow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-brakow li { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--bursztyn-tlo); color: var(--tekst); border-radius: var(--promien-s); padding: 10px 12px; }
.lista-brakow li > div { min-width: 0; }
.lista-brakow .btn { flex: none; }
.tekst-brak { color: var(--bursztyn-tekst); font-weight: 600; }
.oferta-dane.oferta-dane-1 { grid-template-columns: 1fr; }
.zdjecia-sklepu { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.zdjecia-sklepu figure { margin: 0; }
.zdjecia-sklepu img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--promien-s); background: var(--powierzchnia-2); }
.zdjecia-sklepu figcaption { font-size: 0.76rem; color: var(--tekst-2); margin-top: 4px; line-height: 1.3; }
.lista-hasel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.haslo { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: var(--promien-s); background: var(--powierzchnia-2); color: var(--tekst); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.haslo:hover { background: var(--akcent-tlo); color: var(--akcent); }
.haslo svg { color: var(--tekst-2); }
.pary { display: grid; gap: 10px; }
.para { display: grid; gap: 6px; background: var(--powierzchnia-2); border-radius: var(--promien-m); padding: 10px; }
.para .pole-tekst { background: var(--powierzchnia); }
.para .link { justify-self: end; min-height: 36px; padding: 4px 0; font-size: 0.9rem; }
.para-brak { box-shadow: inset 0 0 0 2px var(--bursztyn); }
.zamowienie { border: 0; text-align: left; font: inherit; width: 100%; cursor: pointer; }
.mini-zam { background: var(--akcent-tlo); color: var(--akcent); }
@media (max-width: 420px) { .zakladka-dol { font-size: 0.7rem; } .zakladka-dol-ikona { width: 48px; } }

/* zakres zysku i szansa na progi */
.zakres { display: grid; gap: 6px; width: 100%; margin-top: 14px; padding: 12px 14px; border: 0; border-radius: var(--promien-m); background: var(--powierzchnia-2); color: var(--tekst); font: inherit; text-align: left; cursor: pointer; }
.zakres:hover { background: var(--powierzchnia-3); }
.zakres-linia { font-weight: 600; font-size: 0.95rem; }
.szansa { display: grid; gap: 5px; }
.szansa-pasek { display: block; height: 8px; border-radius: 999px; background: var(--powierzchnia-3); overflow: hidden; }
.szansa-pasek > span { display: block; height: 100%; border-radius: 999px; background: var(--zielony); transition: width 700ms var(--ease); }
.szansa-srednio .szansa-pasek > span { background: var(--bursztyn); }
.szansa-zle .szansa-pasek > span { background: var(--czerwony); }
.szansa-tekst { font-size: 0.86rem; color: var(--tekst-2); }
.szansa-ok .szansa-tekst b { color: var(--zielony-tekst); }
.szansa-srednio .szansa-tekst b { color: var(--bursztyn-tekst); }
.szansa-zle .szansa-tekst b { color: var(--czerwony-tekst); }
.zakres-dopisek { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--tekst-2); }

/* produkty tygodnia */
.tydzien-lista { display: grid; gap: 10px; }
.tydzien-karta { background: var(--powierzchnia); border-radius: var(--promien); box-shadow: var(--cien-1); padding: 16px; }
.tydzien-glowka { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tydzien-glowka .mini { width: 48px; height: 48px; border-radius: 14px; background: var(--akcent-tlo); color: var(--akcent); }
.tydzien-glowka h3 { font-size: 1.02rem; line-height: 1.3; }
.notatka { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--akcent); border-radius: 0 12px 12px 0; background: var(--akcent-tlo); color: var(--tekst); font-style: italic; font-size: 0.95rem; line-height: 1.45; }
.notatka svg { flex: none; margin-top: 3px; color: var(--akcent); }
.tydzien-liczby { display: flex; flex-wrap: wrap; gap: 6px; }

/* zdjęcia AI: siatka do wyboru */
.zdjecia-ai { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kafel { position: relative; display: flex; flex-direction: column; gap: 6px; border-radius: var(--promien-m); background: var(--powierzchnia); box-shadow: var(--cien-1); padding: 8px; cursor: pointer; border: 2px solid transparent; transition: border-color var(--szybko), transform var(--szybko) var(--spring); }
.kafel:active { transform: scale(0.98); }
.kafel img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--powierzchnia-2); }
.kafel.wybrany { border-color: var(--akcent); }
.kafel-znak { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--powierzchnia); color: transparent; box-shadow: var(--cien-1); }
.kafel.wybrany .kafel-znak { background: var(--akcent); color: var(--na-akcencie); }
.kafel-ai { position: absolute; top: 14px; left: 14px; padding: 2px 8px; border-radius: 999px; background: rgba(15, 22, 38, 0.72); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; }
.kafel-prawdziwe { background: var(--zielony-pelny); }
.kafel-podpis { font-size: 0.82rem; line-height: 1.3; color: var(--tekst-2); }
.kafel-blad { cursor: default; background: var(--bursztyn-tlo); justify-content: center; min-height: 180px; }
.kafel-blad .kafel-podpis { color: var(--tekst); }
@media (min-width: 600px) { .zdjecia-ai { grid-template-columns: repeat(3, 1fr); } }

/* opinie kupujących */
.opinie-glowka { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.opinie-ocena { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 1.2rem; color: var(--bursztyn-tekst); }
.tematy { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tematy li { background: var(--powierzchnia-2); border-radius: var(--promien-m); padding: 10px 12px; }
.temat-glowka { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cytat { margin: 6px 0 0; color: var(--tekst-2); font-style: italic; }
.poprawic { margin: 6px 0 0; font-size: 0.92rem; color: var(--bursztyn-tekst); }
.lista-plikow { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.lista-plikow li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--powierzchnia-2); border-radius: 10px; padding: 6px 10px; font-size: 0.92rem; }
.lista-plikow li > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-plikow .link { min-height: 36px; padding: 4px 0; flex: none; }

/* zespół AS */
.zespol-poz { cursor: default; align-items: flex-start; }
.zespol-poz .produkt-nazwa { color: var(--akcent); }
.zespol-akcje { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 6px; }
.zespol-akcje .btn-ikona { width: 40px; height: 40px; background: var(--powierzchnia-2); }
.zespol-akcje .btn-ikona:first-child svg { transform: rotate(180deg); }
.zespol-akcje .btn-ikona[disabled] { opacity: 0.35; cursor: default; }
.zespol-akcje .link { min-height: 40px; padding: 4px 0; }

/* rozmiar paczki InPost */
.gabaryty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.gabaryt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--promien-m); background: var(--powierzchnia-2); border: 2px solid transparent; cursor: pointer; text-align: center; min-height: 64px; }
.gabaryt b { font-size: 1.3rem; }
.gabaryt span { font-size: 0.74rem; color: var(--tekst-2); line-height: 1.25; }
.gabaryt.wybrany { border-color: var(--akcent); background: var(--akcent-tlo); }
.gabaryt:focus-within { outline: 3px solid var(--akcent); outline-offset: 2px; }

/* lista „zanim zamówisz” */
.lista-zadan { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lista-zadan label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px; border-radius: 12px; cursor: pointer; min-height: 44px; }
.lista-zadan label:hover { background: var(--powierzchnia-2); }
.lista-zadan input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--akcent); flex: none; }
.lista-zadan input:checked + span { color: var(--tekst-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.lista-zadan .link-zewn { display: inline-flex; min-height: 0; margin-left: 6px; font-size: 0.9rem; }
.lista-wyboru input:checked + span { text-decoration: none; color: var(--tekst); font-weight: 600; }
.decyzja-zdanie { font-size: 1.12rem; font-weight: 600; margin: 12px 0 0; line-height: 1.4; }
.decyzja-liczby { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 18px; }
.duza-liczba { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.duza-liczba small { font-size: 1.1rem; font-weight: 700; letter-spacing: 0; margin-left: 4px; color: var(--tekst-2); }
.duza-liczba.zielona { color: var(--zielony-tekst); }
.duza-liczba.czerwona { color: var(--czerwony-tekst); }
.duza-etykieta { color: var(--tekst-2); font-weight: 600; font-size: 0.92rem; margin: 0; }
.duza-dopisek { color: var(--tekst-2); font-size: 0.86rem; margin: 2px 0 0; }
.pierscien { width: 96px; height: 96px; position: relative; display: grid; place-items: center; }
.pierscien svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pierscien circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.pierscien .tor { stroke: var(--powierzchnia-3); }
.pierscien .wartosc { stroke: var(--zielony); transition: stroke-dashoffset 900ms var(--ease); }
.pierscien.ostrzega .wartosc { stroke: var(--bursztyn); }
.pierscien.zle .wartosc { stroke: var(--czerwony); }
.pierscien-tekst { text-align: center; line-height: 1.1; }
.pierscien-tekst strong { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pierscien-tekst span { font-size: 0.72rem; color: var(--tekst-2); font-weight: 600; }

.dlaczego { margin-top: 14px; border-top: 1px solid var(--linia); padding-top: 4px; }
.dlaczego summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; color: var(--tekst); }
.dlaczego summary::-webkit-details-marker { display: none; }
.dlaczego summary svg { transition: transform var(--srednio) var(--ease); color: var(--tekst-2); }
.dlaczego[open] summary svg { transform: rotate(180deg); }
.powody { margin: 4px 0 6px; padding-left: 0; list-style: none; }
.powody li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; color: var(--tekst); }
.powody li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--akcent); margin-top: 9px; }

.skroty { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 12px; }
.skrot { background: var(--powierzchnia); border-radius: var(--promien-m); box-shadow: var(--cien-1); padding: 12px 14px; }
.skrot-etykieta { display: block; color: var(--tekst-2); font-size: 0.82rem; font-weight: 600; }
.skrot-wartosc { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.25; margin-top: 2px; }
.skrot-dopisek { display: block; color: var(--tekst-2); font-size: 0.8rem; margin-top: 1px; }

/* sekcje zwijane */
.sekcja {
  background: var(--powierzchnia);
  border-radius: var(--promien);
  box-shadow: var(--cien-1);
  margin: 0 0 10px;
  scroll-margin-top: 80px;
}
.sekcja > summary {
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--promien);
}
.sekcja > summary::-webkit-details-marker { display: none; }
.sekcja-ikona { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--powierzchnia-2); color: var(--tekst-2); flex: none; }
.sekcja-glowka { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sekcja-tytul { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.sekcja-skrot { color: var(--tekst-2); font-size: 0.86rem; line-height: 1.35; margin-top: 1px; }
.sekcja-strzalka { color: var(--tekst-3); transition: transform var(--srednio) var(--ease); }
.sekcja[open] .sekcja-strzalka { transform: rotate(180deg); }
.sekcja-tresc { padding: 0 16px 16px; }
.sekcja-tresc > :first-child { margin-top: 0; }
.sekcja-tresc > :last-child { margin-bottom: 0; }

/* oferty */
.oferta { border-radius: var(--promien-m); padding: 14px; margin: 0 0 10px; background: var(--powierzchnia-2); position: relative; }
.oferta-wybrana { background: var(--akcent-tlo); box-shadow: inset 0 0 0 2px var(--akcent); }
.oferta h3 { margin: 6px 0 2px; font-size: 1rem; }
.oferta-dane { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 12px 0; }
.oferta-dane dt { color: var(--tekst-2); font-size: 0.82rem; line-height: 1.3; }
.oferta-dane dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-dopisek { display: block; font-weight: 400; font-size: 0.84rem; color: var(--tekst-2); }
.dd-uwaga { color: var(--bursztyn-tekst); font-weight: 600; }
.oferta .uzasadnienie { font-size: 0.92rem; color: var(--tekst-2); }

/* porównanie Allegro / sklep */
.porownanie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.kanal { background: var(--powierzchnia-2); border-radius: var(--promien-m); padding: 14px; }
.kanal-glowny { background: var(--akcent-tlo); }
.kanal .nadtytul { margin-bottom: 4px; }
.kanal-liczba { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kanal-marza { color: var(--tekst-2); font-size: 0.88rem; margin-top: 2px; }
.kanal-dopisek { color: var(--tekst-2); font-size: 0.8rem; margin-top: 6px; }

.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 6px 0 10px; }
.tabela td { padding: 8px 0; border-bottom: 1px solid var(--linia); vertical-align: top; }
.tabela td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; font-weight: 600; }
.tabela tr.suma td { border-top: 2px solid var(--tekst); border-bottom: 0; font-weight: 800; font-size: 1.05rem; padding-top: 10px; }
.tabela tr.suma td:last-child { font-size: 1.15rem; }
.tabela tr.marza td { border-bottom: 0; font-weight: 700; }
.tabela td.nieznane { color: var(--bursztyn-tekst); font-weight: 600; }
.tabela .dd-dopisek { font-size: 0.8rem; }
.prog { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.prog-ok { color: var(--zielony-tekst); }
.prog-nie { color: var(--czerwony-tekst); }
.rozwin > summary { list-style: none; cursor: pointer; color: var(--akcent); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.rozwin > summary::-webkit-details-marker { display: none; }

/* warianty transportu */
.warianty { display: grid; gap: 10px; margin: 0 0 12px; }
.wariant { background: var(--powierzchnia-2); border-radius: var(--promien-m); padding: 14px; position: relative; }
.wariant-naj { background: var(--zielony-tlo); box-shadow: inset 0 0 0 2px var(--zielony); }
.wariant-glowka { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.wariant-glowka > div:nth-child(2) { flex: 1; min-width: 130px; }
.wariant-ikona { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--powierzchnia); color: var(--tekst-2); flex: none; }
.wariant-naj .wariant-ikona { color: var(--zielony-tekst); }
.wariant-nazwa { font-weight: 700; font-size: 1.05rem; }
.wariant-czas { color: var(--tekst-2); font-size: 0.88rem; }
.wariant-chipy { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wariant-liczby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wariant-liczby div { background: var(--powierzchnia); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; justify-content: flex-end; }
.wariant-liczby span { display: block; color: var(--tekst-2); font-size: 0.74rem; font-weight: 600; }
.wariant-liczby strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wariant-uwagi { font-size: 0.88rem; color: var(--tekst-2); margin: 10px 0 0; }
.wariant-uwagi ul { margin: 4px 0 0; }

/* ostrzeżenia */
.ostrzezenie { border-radius: var(--promien-m); padding: 12px 14px; margin: 0 0 10px; background: var(--powierzchnia-2); display: grid; gap: 6px; }
.ostrzezenie p { margin: 0; }
.ostrzezenie-nie { background: var(--czerwony-tlo); }
.ostrzezenie-probka { background: var(--bursztyn-tlo); }
.ostrzezenie .chip { justify-self: start; }
.zrodlo { font-size: 0.8rem; color: var(--tekst-2); }

/* wiadomość do dostawcy */
.segment { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--powierzchnia-2); margin: 0 0 10px; }
.segment button {
  font: inherit; font-weight: 700; font-size: 0.95rem;
  min-height: 40px; min-width: 84px; padding: 6px 16px;
  border-radius: 999px; border: 0; background: transparent; color: var(--tekst-2);
  cursor: pointer; transition: background-color var(--szybko), color var(--szybko), box-shadow var(--szybko);
}
.segment button[aria-selected="true"] { background: var(--powierzchnia); color: var(--tekst); box-shadow: var(--cien-1); }
.wiadomosc {
  white-space: pre-wrap;
  font-family: inherit; font-size: 0.92rem; line-height: 1.5;
  background: var(--powierzchnia-2);
  border-radius: var(--promien-m);
  padding: 14px;
  margin: 0 0 12px;
  max-height: 320px; overflow: auto;
  -webkit-user-select: text; user-select: text;
}

.linki-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.linki-siatka .btn { font-size: 0.98rem; min-height: 50px; }

.lista-mala { font-size: 0.92rem; color: var(--tekst-2); }
.stopka-karty { margin-top: 20px; text-align: center; padding-bottom: 8px; }

/* ---------- dolna nawigacja ---------- */

.zakladki-dol {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--wysokosc-dol) + env(safe-area-inset-bottom));
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--szklo-pasek);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--linia);
}
.zakladka-dol {
  flex: 1; max-width: 140px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; border-radius: 16px;
  color: var(--tekst-2); font-size: 0.74rem; font-weight: 600; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--szybko), transform var(--szybko) var(--spring);
}
.zakladka-dol:active { transform: scale(0.94); }
.zakladka-dol-ikona { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color var(--srednio); }
.zakladka-dol[aria-current="page"] { color: var(--akcent); }
.zakladka-dol[aria-current="page"] .zakladka-dol-ikona { background: var(--akcent-tlo); }
/* 5 pozycji: na telefonie mniejszy napis i odstęp, napis zawsze w jednej linii (te reguły muszą być po regułach wyżej) */
.zakladka-dol > span:last-child { max-width: 100%; white-space: nowrap; }
@media (max-width: 420px) { .zakladki-dol { padding-left: 4px; padding-right: 4px; } .zakladka-dol { font-size: 0.7rem; } .zakladka-dol-ikona { width: 48px; } }
@media (max-width: 360px) { .zakladki-dol { padding-left: 2px; padding-right: 2px; } .zakladka-dol { font-size: 0.66rem; letter-spacing: -0.01em; } .zakladka-dol-ikona { width: 44px; } }

/* ---------- pasek akcji (karta) ---------- */

.pasek-akcji {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--szklo-pasek);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--linia);
}
.pasek-akcji .pasek-akcji-wnetrze { display: flex; gap: 10px; width: 100%; max-width: 648px; margin: 0 auto; align-items: center; }
.pasek-akcji .btn { width: auto; min-width: 0; flex: 1 1 0; min-height: 54px; font-size: 0.98rem; padding: 8px 12px; line-height: 1.2; }
.pasek-akcji .btn-drugi { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 420px) {
  .pasek-akcji .btn { font-size: 0.95rem; gap: 6px; }
  .pasek-akcji .btn svg { display: none; }
}

/* ---------- arkusz (bottom sheet) ---------- */

.arkusz {
  position: fixed; inset: auto 0 0 0;
  margin: 0; padding: 0;
  width: 100%; max-width: 100%;
  max-height: calc(100dvh - 48px);
  border: 0; border-radius: 28px 28px 0 0;
  background: var(--powierzchnia); color: var(--tekst);
  box-shadow: var(--cien-3);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform var(--srednio) var(--ease);
}
.arkusz[open] { display: flex; flex-direction: column; }
.arkusz.widoczny { transform: translateY(0); }
.arkusz::backdrop { background: rgba(10, 14, 24, 0.5); opacity: 0; transition: opacity var(--srednio); }
.arkusz.widoczny::backdrop { opacity: 1; }
.arkusz-uchwyt { width: 40px; height: 5px; border-radius: 999px; background: var(--linia-mocna); margin: 10px auto 4px; flex: none; }
.arkusz-glowka { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 20px; flex: none; }
.arkusz-glowka h2 { flex: 1; margin: 0; font-size: 1.2rem; }
.arkusz-tresc { padding: 4px 20px calc(20px + env(safe-area-inset-bottom)); overflow: auto; -webkit-overflow-scrolling: touch; }
.arkusz-tresc > :last-child { margin-bottom: 0; }
.kroki { padding-left: 0; list-style: none; counter-reset: krok; margin: 0 0 14px; }
.kroki li { counter-increment: krok; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.kroki li::before { content: counter(krok); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--akcent-tlo); color: var(--akcent); font-weight: 700; font-size: 0.9rem; }
.kroki li > div { flex: 1; padding-top: 2px; }
.lista-akcji { display: grid; gap: 6px; }
.lista-akcji .btn { justify-content: flex-start; min-height: 56px; }

.praca { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--tekst); font-weight: 600; }
.kolko { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--linia); border-top-color: var(--akcent); animation: obrot 0.9s linear infinite; flex: none; }
@keyframes obrot { to { transform: rotate(360deg); } }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%; bottom: calc(var(--wysokosc-dol) + 16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px) scale(0.98);
  width: calc(100% - 32px); max-width: 440px;
  background: var(--tekst); color: var(--tlo);
  padding: 13px 18px;
  border-radius: 16px;
  font-weight: 600; font-size: 0.95rem;
  text-align: center;
  box-shadow: var(--cien-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--srednio), transform var(--srednio) var(--spring);
  z-index: 40;
}
.toast.widoczny { opacity: 1; transform: translate(-50%, 0) scale(1); }
.arkusz .toast-arkusz { position: absolute; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; max-width: none; transform: translateY(12px); }
.arkusz .toast-arkusz.widoczny { transform: none; }

/* ---------- animacje wejścia ---------- */

.wejscie { animation: wejscie 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes wejscie { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }


/* ---------- komputer: wgrywanie zdjęcia (przeciągnij, kliknij, wklej) ---------- */

.wgraj { padding: 18px; text-align: center; }
.upusc {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 22px 26px; border-radius: 22px; cursor: pointer;
  border: 2px dashed var(--linia-mocna); background: var(--powierzchnia-2);
  transition: border-color var(--szybko), background-color var(--szybko);
}
.upusc:hover, .aparat.upuszczanie .upusc { border-color: var(--akcent); background: var(--akcent-tlo); }
.upusc:focus-within { outline: 3px solid var(--akcent); outline-offset: 2px; }
.upusc-ikona { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--akcent-gradient); color: #fff; box-shadow: var(--cien-akcent); margin-bottom: 6px; }
.upusc h2 { font-size: 1.45rem; margin: 0; }
.upusc .cichy { margin: 0 0 10px; max-width: 460px; }
.upusc-przycisk { width: auto; min-width: 300px; }
.aparat-akcje-komputer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 14px; }
.aparat-akcje-komputer .btn { width: auto; }
.aparat-akcje-komputer .drobny { margin: 0; text-align: left; max-width: 300px; }

/* kod QR do telefonu */
.qr-arkusz { text-align: center; }
.qr-wstep { font-size: 1.08rem; font-weight: 600; margin-bottom: 14px; }
.qr-miejsce { display: grid; place-items: center; margin: 0 auto 10px; }
.qr { width: min(280px, 70vw); height: auto; border-radius: 16px; box-shadow: var(--cien-1); background: #fff; }
.qr-kosc { width: min(280px, 70vw); aspect-ratio: 1; border-radius: 16px; }
.qr-wygasly .qr { opacity: 0.25; filter: blur(2px); }
.qr-licznik { font-weight: 700; color: var(--akcent); min-height: 1.4em; margin-bottom: 8px; }
.qr-wygasly + .qr-licznik { color: var(--bursztyn-tekst); }

/* pokaz: zdjęcie użytkownika i wyjaśnienie */
.pokaz-zdjecie-mini { max-height: 180px; width: auto; max-width: 100%; margin: 0 auto 14px; border-radius: 14px; object-fit: contain; background: var(--powierzchnia-2); }
.analiza-foto-pokaz { display: grid; place-items: center; color: var(--akcent); background: var(--akcent-tlo); }

/* ---------- karta: „Co dalej” w trzech krokach ---------- */

.co-dalej { padding: 16px 18px; }
.co-dalej-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.co-dalej-krok { display: grid; grid-template-columns: 32px 1fr; gap: 8px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linia); }
.co-dalej-krok:first-child { border-top: 0; padding-top: 2px; }
.co-dalej-krok:last-child { padding-bottom: 0; }
.co-dalej-nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.95rem; background: var(--akcent-tlo); color: var(--akcent); }
.co-dalej-krok.zrobiony .co-dalej-nr { background: var(--zielony-tlo); color: var(--zielony-tekst); }
.co-dalej-tresc { min-width: 0; }
.co-dalej-tytul { font-weight: 700; margin: 4px 0 2px; }
.co-dalej-krok.zrobiony .co-dalej-tytul { color: var(--tekst-2); }
.co-dalej-tresc .drobny { margin: 0; }
.co-dalej-btn { grid-column: 2; width: auto; justify-self: start; min-height: 40px; padding: 8px 14px; font-size: 0.92rem; border-radius: 12px; }
@media (min-width: 560px) { .co-dalej-krok { grid-template-columns: 32px 1fr auto; } .co-dalej-btn { grid-column: 3; align-self: center; } }

/* ---------- produkty tygodnia: kafle ze zdjęciem ---------- */

.tydzien-dom { margin-top: 6px; }
.naglowek-sekcji .tydzien-data { margin-left: auto; }
@media (max-width: 559px) { .naglowek-sekcji .tydzien-data { display: none; } }
.tydzien-wstep { margin: -2px 0 12px; }
.tydzien-siatka { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.tydzien-kafel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tydzien-foto { position: relative; aspect-ratio: 4 / 3; background: var(--powierzchnia-2); overflow: hidden; }
.tydzien-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tydzien-foto-brak { display: grid; place-items: center; background: linear-gradient(135deg, var(--powierzchnia-2), var(--powierzchnia-3)); color: var(--tekst-3); }
.tydzien-foto-znak { display: grid; justify-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; }
.tydzien-werdykt { position: absolute; left: 10px; top: 10px; }
.tydzien-werdykt .chip { box-shadow: var(--cien-1); }
.tydzien-tresc { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tydzien-tresc h3 { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.tydzien-kategoria { margin: -6px 0 0; }
.tydzien-ceny { margin: 0; display: grid; gap: 6px; }
.tydzien-cena { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-bottom: 1px dashed var(--linia); padding-bottom: 6px; }
.tydzien-cena:last-child { border-bottom: 0; padding-bottom: 0; }
.tydzien-cena dt { color: var(--tekst-2); font-size: 0.86rem; flex: none; }
.tydzien-cena dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tydzien-cena dd small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--tekst-2); }
.tydzien-cena.zielona dd { color: var(--zielony-tekst); }
.tydzien-tresc .notatka { margin: 0; }
.tydzien-tresc .cichy { margin: 0; }
.tydzien-akcje { display: grid; gap: 8px; margin-top: auto; }


/* ---------- sklep: tekst od AI, poprawianie schowane, materiały do sprzedaży ---------- */

.tekst-sklepu-naglowek { font-weight: 800; font-size: 1.15rem; line-height: 1.3; margin: 0 0 4px; }
.tekst-sklepu .sekcja-popraw { margin-top: 12px; }
.sekcja-popraw .sekcja-tresc h3 { font-size: 0.95rem; margin: 0 0 8px; color: var(--tekst-2); }
.sekcja-popraw .sekcja-tresc .sekcja { box-shadow: none; border: 1px solid var(--linia); }
.material-grupa { margin-top: 14px; }
.material-glowka { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.material-glowka h4 { margin: 0; font-size: 0.98rem; }
.material-kopiuj { width: auto; min-height: 36px; padding: 6px 12px; font-size: 0.88rem; border-radius: 10px; }
.material-tekst { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--powierzchnia-2); white-space: pre-wrap; line-height: 1.45; font-size: 0.95rem; }
.material-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.material-para { margin: 0; display: grid; gap: 8px; }
.material-para dt { font-size: 0.8rem; font-weight: 700; color: var(--tekst-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.material-para dd { margin: 0; }
.propozycja-ceny .btn-tekst { width: auto; margin: 0 auto; }

/* ---------- wybór wyglądu (panel i sklep): kafelki z próbką kolorów ---------- */

.wyglady { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { .wyglady { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wyglady.wyglady-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wyglad-opcja {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 8px 8px 10px; border: 2px solid transparent; border-radius: var(--promien-m);
  background: var(--powierzchnia-2); color: var(--tekst); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--szybko), background-color var(--szybko), transform var(--szybko) var(--spring);
}
.wyglad-opcja:hover { border-color: var(--linia-mocna); }
.wyglad-opcja:active { transform: scale(0.97); }
.wyglad-opcja[aria-pressed="true"] { border-color: var(--akcent); background: var(--akcent-tlo); }
.wyglad-opcja[disabled] { opacity: 0.6; cursor: progress; }
.wyglad-nazwa { font-weight: 700; font-size: 0.92rem; line-height: 1.25; margin-top: 4px; }
.wyglad-dopisek { font-size: 0.76rem; color: var(--tekst-2); line-height: 1.25; }
.wyglad-znak { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--powierzchnia); color: transparent; box-shadow: var(--cien-1); }
.wyglad-opcja[aria-pressed="true"] .wyglad-znak { background: var(--akcent); color: var(--na-akcencie); }
.probka { display: block; height: 64px; border-radius: 10px; padding: 8px; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.28); }
.probka-karta { display: flex; flex-direction: column; gap: 4px; height: 100%; border-radius: 6px; padding: 7px 8px; }
.probka-linia { display: block; height: 5px; width: 78%; border-radius: 3px; opacity: 0.85; }
.probka-linia.probka-krotka { width: 48%; opacity: 0.5; }
.probka-przycisk { display: block; margin-top: auto; height: 10px; width: 56%; border-radius: 4px; }

/* przełącznik (dodatek do koszyka) i potwierdzenie (opinie) */
.przelacznik { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 4px 0 0; font-weight: 600; cursor: pointer; }
.przelacznik-pole {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0;
  width: 52px; height: 32px; border-radius: 999px; cursor: pointer;
  background: var(--powierzchnia-3); box-shadow: inset 0 0 0 1px var(--linia-mocna);
  transition: background-color var(--szybko);
}
.przelacznik-pole::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform var(--szybko) var(--ease);
}
.przelacznik-pole:checked { background: var(--akcent); box-shadow: none; }
.przelacznik-pole:checked::before { transform: translateX(20px); }
.przelacznik-pole:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.potwierdzenie { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: var(--promien-m); background: var(--powierzchnia-2); font-weight: 600; font-size: 0.95rem; line-height: 1.4; cursor: pointer; }
.potwierdzenie input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--akcent); }
.opinia-glowka { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opinia-wiersz .pole > label { font-size: 0.88rem; margin-bottom: 4px; }
.opinia-wiersz input[type="date"].pole-tekst { min-width: 0; }

/* ---------- reklamy: podgląd jak w aktualnościach Facebooka i Instagrama ---------- */

.reklamy { display: grid; gap: 14px; margin-top: 12px; }
.reklama-zestaw { display: grid; gap: 10px; min-width: 0; padding: 12px; border-radius: var(--promien-m); background: var(--powierzchnia-2); }
.reklama-zestaw > .btn { margin-top: 2px; }
.reklama-meta .chip { white-space: normal; }
.reklama { width: 100%; max-width: 480px; justify-self: center; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 14px; overflow: hidden; box-shadow: var(--cien-1); min-width: 0; }
.reklama-glowka { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; }
.reklama-awatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--akcent-gradient); color: #fff; font-weight: 800; }
.reklama-kto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.reklama-kto strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reklama-kto span { font-size: 0.78rem; color: var(--tekst-2); }
.reklama-tekst { margin: 0; padding: 0 12px 10px; white-space: pre-wrap; font-size: 0.95rem; line-height: 1.45; }
.reklama-foto { aspect-ratio: 1 / 1; background: var(--powierzchnia-2); }
.reklama-foto img { width: 100%; height: 100%; object-fit: cover; }
.reklama-foto-brak { display: grid; place-items: center; align-content: center; gap: 8px; height: 100%; color: var(--tekst-3); font-size: 0.86rem; font-weight: 600; }
.reklama-dol { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--powierzchnia-2); border-top: 1px solid var(--linia); }
.reklama-dol-tresc { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.reklama-domena { font-size: 0.7rem; color: var(--tekst-2); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reklama-dol-tresc strong { font-size: 0.95rem; }
.reklama-opis { font-size: 0.84rem; color: var(--tekst-2); }
.reklama-cta { flex: none; max-width: 45%; padding: 8px 12px; border-radius: 8px; background: var(--powierzchnia-3); color: var(--tekst); font-weight: 700; font-size: 0.86rem; text-align: center; line-height: 1.2; }
.reklama-hook { margin: 0; font-size: 0.92rem; }
.reklama-pomysl h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 0.95rem; }
.reklama-pomysl h4 svg { color: var(--tekst-2); }
.reklama-pomysl p { margin: 0; font-size: 0.92rem; color: var(--tekst-2); }
.reklama-pomysl ol { margin: 0; padding-left: 1.3em; font-size: 0.92rem; color: var(--tekst-2); }
.reklama-pomysl li { margin-bottom: 3px; }

/* ---------- karuzela na Instagram: miniatury slajdów (canvas 1080×1350) i automat w GHL ---------- */

.karuzela-slowo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 600; color: var(--tekst-2); }
.karuzela-slowo strong { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: 999px; border: 2px solid #FF6A13; background: var(--powierzchnia-2); color: var(--tekst); font-weight: 800; letter-spacing: 0.06em; }
.karuzela-pasek {
  display: flex; gap: 10px; width: 100%; margin-top: 12px; padding: 2px 2px 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.karuzela-slajd {
  flex: 0 0 auto; width: clamp(148px, 44vw, 200px); padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--powierzchnia-2); box-shadow: var(--cien-1); cursor: zoom-in; scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent; transition: transform var(--szybko) var(--spring);
}
.karuzela-slajd:active { transform: scale(0.97); }
.karuzela-slajd:focus-visible { outline: 3px solid var(--akcent); outline-offset: -3px; }
.karuzela-plotno { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.karuzela-duze { display: block; width: auto; height: auto; max-width: 100%; max-height: min(62vh, 620px); margin: 0 auto; border-radius: 14px; background: var(--powierzchnia-2); }
.karuzela-nawigacja { grid-template-columns: 1fr 1fr; }
.karuzela-uwagi { margin: 4px 0 0; padding-left: 1.2em; }
.karuzela-uwagi li { margin-bottom: 2px; }
.karuzela-tekst { margin: 8px 0 0; padding: 12px 14px; border-radius: var(--promien-s); background: var(--powierzchnia-2); color: var(--tekst); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.45; }
.karuzela-ghl { margin-top: 16px; padding: 14px; border-radius: var(--promien-m); background: var(--powierzchnia-2); min-width: 0; }
.karuzela-ghl h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.karuzela-ghl h3 svg { flex: none; color: var(--akcent); }
.karuzela-ghl .kroki { margin: 14px 0 0; }
.karuzela-ghl .kroki li { margin-bottom: 14px; }
.karuzela-ghl .kroki li > div { min-width: 0; }
.karuzela-ghl .kroki p { margin: 2px 0 0; }
.karuzela-ghl .kroki .btn { margin-top: 8px; }
.karuzela-ghl .kroki li::before { background: var(--powierzchnia); }
.karuzela-ghl .lista-zadan { margin-top: 6px; }
.karuzela-ghl .kroki .lista-zadan li { display: block; margin: 0; counter-increment: none; }
.karuzela-ghl .kroki .lista-zadan li::before { content: none; }
.karuzela-ghl .lista-zadan label { font-size: 0.94rem; line-height: 1.4; }
.karuzela-ghl .lista-zadan label:hover { background: var(--powierzchnia); }
.karuzela-ghl .karuzela-tekst, .karuzela-ghl .haslo { background: var(--powierzchnia); }
.karuzela-ghl .haslo:hover { background: var(--akcent-tlo); }
.karuzela-podglad h4 { margin: 12px 0 6px; font-size: 0.95rem; }
.karuzela-podglad .haslo span { font-weight: 500; }

/* ---------- duże ekrany ---------- */

@media (min-width: 900px) {
  body { font-size: 16.5px; }
  .ekran { padding-top: 20px; }
  .ekran:not(.wstep) { padding-bottom: 60px; }
  h1 { font-size: 2rem; }
  .gora { margin: 0 -16px 12px; border-radius: 0 0 20px 20px; }
  .zakladki-dol {
    left: 50%; right: auto; bottom: 20px; transform: translateX(-50%);
    width: 520px; height: 72px; padding: 8px;
    border-radius: 999px; border: 1px solid var(--linia); box-shadow: var(--cien-2);
  }
  .zakladka-dol { border-radius: 999px; }
  .pasek-akcji { left: 50%; right: auto; bottom: 20px; transform: translateX(-50%); width: min(680px, calc(100% - 32px)); border-radius: 24px; border: 1px solid var(--linia); box-shadow: var(--cien-2); padding: 12px 14px; }
  .arkusz { left: 50%; right: auto; transform: translate(-50%, 100%); width: 560px; max-width: 560px; bottom: 24px; border-radius: 28px; max-height: calc(100dvh - 80px); }
  .arkusz.widoczny { transform: translate(-50%, 0); }
  .toast { bottom: 108px; }
  .aparat-upusc { display: block; color: var(--tekst-2); font-size: 0.9rem; margin-top: 10px; }
  .hero { grid-template-columns: 136px 1fr; }
  .hero-foto { width: 136px; height: 136px; }
  .hero h1 { font-size: 1.5rem; }
  .duza-liczba { font-size: 3rem; }
  .warianty { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .wariant-chipy { margin-left: 0; width: 100%; justify-content: flex-start; }
  .wariant-glowka { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .porownanie { grid-template-columns: 1fr; }
  .scenariusze { gap: 6px; }
  .scenariusz { padding: 10px 6px 8px; }
  .scenariusz-zysk { font-size: 1.02rem; }
  .duza-liczba { font-size: 2.2rem; }
  .pierscien { width: 84px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .kolko { animation: none; border-top-color: var(--akcent); }
  .migawka::after, .analiza-foto-ramka::before, .analiza-foto-ramka::after { display: none; }
  .os li.aktywny .os-ikona { animation: none; }
  .kosc { animation: none; background: var(--powierzchnia-2); }
  .wejscie { animation: none; }
  .logo-start { animation: none; }
}

@media (min-width: 900px) {
  .ekran-szeroki { max-width: 1120px; }
  .kolumna { max-width: 680px; margin-left: auto; margin-right: auto; }
  .wgraj { max-width: 760px; margin-left: auto; margin-right: auto; }
  .tydzien-siatka { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .tydzien-dom .naglowek-sekcji { margin-top: 28px; }
}

/* ---------- sprzedaj masowo: plan, firmy, lista i pierwszy e-mail ---------- */

.hurt .btn-tekst { width: auto; padding: 8px 12px; }
.hurt h3:focus, .hurt-licznik:focus, .hurt-wyniki .ramka:focus { outline: none; }
.hurt code, .hurt-ramka code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; padding: 1px 6px; border-radius: 6px; background: var(--powierzchnia); color: var(--tekst); overflow-wrap: anywhere; }
.hurt-zasada { align-items: flex-start; }
.hurt-zasada > svg { color: var(--akcent); }
.hurt-wybor-tytul { margin: 18px 0 10px; }
.hurt-glowa p { font-size: 1rem; }
.hurt-waski { max-width: 460px; margin-left: auto; margin-right: auto; }

.hurt-krok { scroll-margin-top: 116px; min-width: 0; }
.bez-lamania { white-space: nowrap; }
.hurt-krok.czeka { background: var(--powierzchnia-2); box-shadow: none; }
.hurt-krok-glowka { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hurt-krok-glowka h2 { margin: 0; }
.hurt-krok-glowka .nadtytul { margin: 0 0 2px; }
.hurt-krok-tytul { min-width: 0; }
.hurt-krok-nr { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--akcent); color: var(--na-akcencie); font-weight: 800; font-size: 1.05rem; }
.hurt-krok-nr.czeka { background: var(--powierzchnia-3); color: var(--tekst-2); }

/* krok 1: grupy firm i ceny hurtowe */
.hurt-plan { display: grid; gap: 14px; margin-top: 12px; }
.segmenty { display: grid; gap: 10px; min-width: 0; }
.segment {
  position: relative; display: grid; gap: 6px; align-content: start; width: 100%; min-width: 0;
  padding: 14px; border: 2px solid transparent; border-radius: var(--promien-m);
  background: var(--powierzchnia-2); color: var(--tekst); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--szybko), background-color var(--szybko), transform var(--szybko) var(--spring);
}
.segment:hover { border-color: var(--linia-mocna); }
.segment:active { transform: scale(0.985); }
.segment[aria-pressed="true"] { border-color: var(--akcent); background: var(--akcent-tlo); }
.segment-glowka { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.segment-nazwa { font-weight: 700; font-size: 1.02rem; line-height: 1.3; min-width: 0; }
.segment-znak { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--powierzchnia); color: transparent; box-shadow: inset 0 0 0 1.5px var(--linia-mocna); }
.segment[aria-pressed="true"] .segment-znak { background: var(--akcent); color: var(--na-akcencie); box-shadow: none; }
.segment-dlaczego { font-size: 0.92rem; color: var(--tekst-2); line-height: 1.4; }
.segment-cecha { font-size: 0.88rem; line-height: 1.4; }
.hurt-cennik { padding: 14px; border-radius: var(--promien-m); background: var(--powierzchnia-2); min-width: 0; }
.hurt-cennik h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.hurt-cennik h3 svg { color: var(--akcent); }
.hurt-cennik-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.hurt-cennik-lista li { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 8px 12px; border-radius: var(--promien-s); background: var(--powierzchnia); font-variant-numeric: tabular-nums; }
.hurt-cennik-uwaga { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; font-size: 0.88rem; font-weight: 600; color: var(--bursztyn-tekst); }
.hurt-cennik-uwaga svg { margin-top: 2px; }
.hurt-plan-stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 12px; }
.hurt-plan-stopka .drobny { margin: 0; flex: 1 1 260px; }

/* krok 2: frazy, miasto, wyniki */
.hurt-forma { max-width: 640px; }
.hurt-frazy { display: flex; flex-wrap: wrap; gap: 8px; }
.hurt-fraza {
  min-height: 44px; max-width: 100%; padding: 8px 16px; border: 0; border-radius: 999px;
  background: var(--powierzchnia-2); color: var(--tekst); font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.3; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--linia-mocna); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--szybko), box-shadow var(--szybko), transform var(--szybko) var(--spring);
}
.hurt-fraza:hover { box-shadow: inset 0 0 0 2px var(--akcent); }
.hurt-fraza:active { transform: scale(0.96); }
.hurt-fraza[aria-pressed="true"] { background: var(--akcent); color: var(--na-akcencie); box-shadow: none; }
.hurt-szukam { align-items: center; margin: 14px 0 0; }
.btn .kolko-btn { width: 20px; height: 20px; border: 2.5px solid currentColor; border-top-color: transparent; opacity: 0.85; }
.hurt-wyniki { margin-top: 16px; min-width: 0; }
.hurt-wyniki-glowka { display: grid; gap: 2px; margin-bottom: 10px; }
.hurt-licznik { font-weight: 800; font-size: 1.05rem; margin: 0; }
.hurt-link-przycisk { border: 0; padding: 0; background: none; color: var(--akcent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hurt-tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 4px; }
.hurt-tabela th { text-align: left; font-size: 0.72rem; color: var(--tekst-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px; border-bottom: 1px solid var(--linia-mocna); white-space: nowrap; }
.hurt-tabela td { padding: 10px 8px; border-bottom: 1px solid var(--linia); vertical-align: top; }
.hurt-wybor { width: 24px; height: 24px; margin: 0; accent-color: var(--akcent); cursor: pointer; }
.hurt-nazwa { display: block; font-weight: 700; line-height: 1.3; }
label.hurt-nazwa { cursor: pointer; }
.hurt-rodzaj { display: block; }
.hurt-chip { margin-top: 4px; }
.hurt-znak { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.hurt-znak-tak { background: var(--zielony-tlo); color: var(--zielony-tekst); }
.hurt-znak-nie { background: var(--czerwony-tlo); color: var(--czerwony-tekst); }
.hurt-wiersz-nieaktywny .hurt-nazwa { color: var(--tekst-2); }
.hurt-email { display: flex; flex-direction: column; min-width: 0; }
.hurt-email-adres { font-weight: 600; overflow-wrap: anywhere; }
.hurt-zrodlo { font-size: 0.8rem; color: var(--tekst-2); text-decoration: underline; text-underline-offset: 2px; }
.hurt-zrodlo:hover { color: var(--akcent); }
.hurt-brak { color: var(--bursztyn-tekst); font-weight: 600; }
.hurt-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-weight: 600; overflow-wrap: anywhere; }
.hurt-link svg { flex: none; }
.hurt-strona { display: inline; font-weight: 600; overflow-wrap: anywhere; line-height: 1.5; }
.hurt-mapa { display: block; margin-top: 2px; font-size: 0.92rem; }
.hurt-strona svg { display: inline; width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; }
.hurt-ocena { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.hurt-ocena svg { color: var(--bursztyn); }
@media (max-width: 899px) {
  .hurt-tabela, .hurt-tabela tbody { display: block; }
  .hurt-tabela thead { display: none; }
  .hurt-tabela tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 0 0 10px; padding: 12px 12px 12px 50px; border-radius: var(--promien-m); background: var(--powierzchnia-2); }
  .hurt-tabela td { display: block; padding: 0; border: 0; min-width: 0; max-width: 100%; }
  .hurt-tabela td.pusty { display: none; }
  .hurt-tabela .hurt-td-wybor { position: absolute; left: 14px; top: 14px; }
  .hurt-td-firma, .hurt-td-adres, .hurt-td-email { flex: 0 0 100%; }
  .hurt-td-firma { order: 1; font-size: 1rem; }
  .hurt-td-adres { order: 2; color: var(--tekst-2); font-size: 0.88rem; }
  .hurt-td-email { order: 3; margin: 4px 0 2px; }
  .hurt-td-tel { order: 4; }
  .hurt-td-strona { order: 5; }
  .hurt-td-ocena { order: 6; font-size: 0.88rem; }
}
@media (min-width: 900px) {
  .hurt-plan { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .segmenty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hurt-tabela tbody tr:hover { background: var(--powierzchnia-2); }
  .hurt-td-wybor { width: 36px; }
  .hurt-td-firma { min-width: 170px; }
  .hurt-tabela .hurt-link { white-space: nowrap; min-height: 0; }
  .hurt-tabela .hurt-email-adres, .hurt-tabela .hurt-strona { overflow-wrap: break-word; }
  .hurt-td-ocena { white-space: nowrap; }
  .hurt-td-ocena .drobny { display: block; }
}

/* krok 3: lista firm i wiadomość */
.hurt-k3 { display: grid; gap: 18px; min-width: 0; }
.hurt-k3 > div { min-width: 0; }
.hurt-k3 h3 { margin-top: 4px; }
.hurt-podsumowanie { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.hurt-podsumowanie .chip { white-space: normal; }
.hurt-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hurt-firma { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: start; margin: 0; padding: 10px 4px 8px 12px; border-radius: var(--promien-m); background: var(--powierzchnia-2); }
.hurt-firma-tresc { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.hurt-firma-nazwa { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.hurt-firma-meta { font-size: 0.86rem; color: var(--tekst-2); overflow-wrap: anywhere; }
.hurt-usun { width: 40px; height: 40px; color: var(--tekst-2); }
.hurt-firma-blokada { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.hurt-przelacznik { margin: 0; min-height: 44px; font-size: 0.9rem; gap: 10px; }
.hurt-przelacznik .przelacznik-pole { width: 44px; height: 28px; }
.hurt-przelacznik .przelacznik-pole::before { width: 22px; height: 22px; }
.hurt-przelacznik .przelacznik-pole:checked { background: var(--czerwony); }
.hurt-przelacznik .przelacznik-pole:checked::before { transform: translateX(16px); }
.hurt-powod { width: auto; min-width: 0; max-width: 100%; flex: 1 1 180px; min-height: 40px; padding: 6px 10px; font-size: 0.9rem; border-radius: var(--promien-s); }
.hurt-firma.zablokowana { background: var(--czerwony-tlo); }
.hurt-firma.zablokowana .hurt-firma-nazwa { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.hurt-firma-prosta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-right: 6px; }
.hurt-nie-kontaktuj { margin-top: 12px; }
.hurt-nie-kontaktuj .hurt-lista { margin-top: 6px; }
.hurt-pole-glowka { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.hurt-pole-glowka label { font-weight: 600; font-size: 0.95rem; }
.hurt .hurt-kopiuj-temat { min-height: 36px; padding: 4px 10px; font-size: 0.88rem; }
textarea.pole-tekst.hurt-tresc { min-height: 330px; }
textarea.pole-tekst.hurt-podpis { min-height: 92px; }
.hurt-grupy { margin-top: 10px; }
.hurt-podglad { margin-top: 14px; padding: 14px; border-radius: var(--promien-m); background: var(--powierzchnia); border: 1.5px dashed var(--linia-mocna); min-width: 0; }
.hurt-podglad .nadtytul { margin-bottom: 8px; }
.hurt-podglad-temat { font-weight: 700; margin: 0 0 10px; overflow-wrap: anywhere; }
.hurt-podglad-tresc { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.5; }
.hurt-akcje { margin-top: 4px; }
.hurt-ramki { display: grid; gap: 12px; margin-top: 18px; }
.hurt-ramka { padding: 16px; border-radius: var(--promien-m); background: var(--powierzchnia-2); min-width: 0; }
.hurt-ramka h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.hurt-ramka h3 svg { color: var(--akcent); flex: none; }
.hurt-ramka .kroki { margin: 0; }
.hurt-ramka .kroki li { margin-bottom: 12px; }
.hurt-ramka .kroki li:last-child { margin-bottom: 0; }
.hurt-ramka .kroki li::before { background: var(--powierzchnia); }
.hurt-ramka .kroki li > div { min-width: 0; }
.hurt-ramka .kroki p { margin: 2px 0 0; }
.hurt-zasada-glowna { font-weight: 700; }
.hurt-zasady li { margin-bottom: 6px; }
.hurt-stopka { display: flex; justify-content: center; margin-top: 8px; }
.skrot-masowo { margin: 0 0 10px; }
@media (min-width: 900px) {
  .hurt-k3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .hurt-ramki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}