/* „Studio Mai” (DESIGN.md, od 13.11.2026 wieczorem): wygląd z filmów Mai na YouTube. Części z src/system/ skleja
   build.js w dist/assets/system.css, ładowany po styl.css: tokeny nadpisują stare, więc starsze strony też dostają
   krój i kolory z filmów bez przepisywania. */

:root {
  /* Kolor z filmów (yt/prezenter/sceny.py) */
  --biel: #FFFFFF;
  --tusz: #28141E;
  --tusz-2: #5A4650;
  --tusz-3: #7E6A74;
  --linia: #F0DCE5;
  --linia-2: #E2C3D1;
  --mgla: #FBF1F5;
  --malina: #C8205E;
  --malina-ciemna: #A0104A;
  --malina-tlo: #FCE6EF;
  --mieta: #BEECD6;
  --mieta-tusz: #145A3C;
  --zielen: #1E7A4E;
  --zielen-jasna: #E2F6EC;
  --bursztyn: #8A5300;
  --bursztyn-jasny: #FFF1D6;
  --tablica: #8EAF95;
  --tablica-rama: #E2BF8E;

  /* Tło aplikacji i sceny funkcji: puder (domyślna), mięta, lawenda, malina, masło, niebo */
  --app-tlo: #F7EEF2;
  --scena-a: #FFF8FB;
  --scena-b: #FADCE8;
  --scena-kropka: rgb(200 32 94 / .07);

  /* Filary */
  --dna: #7A55D6;
  --dna-tlo: #EEE8FF;
  --swap: #0B8577;
  --swap-tlo: #DDF4EF;
  --klub: #F2B822;
  --klub-tlo: #FFF2C9;
  --klub-tusz: #6B4A00;

  /* Kolory działania składników (prążki, bąble) */
  --f-p: #F0913A;
  --f-n: #A6C437;
  --f-z: #7B5CD6;
  --f-w: #4A9FE6;
  --f-u: #55C59B;
  --f-f: #F2C230;
  --f-h: #B98A5E;
  --f-i: #9A8698;
  --f-b: #EAD9E1;

  /* Stare nazwy (styl.css) na nowe wartości */
  --tlo: var(--biel);
  --bialy: var(--biel);
  --papier: var(--mgla);
  --puder: var(--malina-tlo);
  --akcent: var(--malina);
  --akcent-ciemny: var(--malina-ciemna);
  --akcent-jasny: var(--malina-tlo);
  --roz-tlo: var(--malina-tlo);
  --roz-linia: #F3CFDD;
  --zakres: rgb(200 32 94 / .14);
  --druk: var(--tusz-2);

  /* Typografia: Wix Madefor Display 800 jak w filmach, Wix Madefor Text w treści */
  --font: "Wix Madefor Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-naglowki: "Wix Madefor Display", "Wix Madefor Text", system-ui, sans-serif;
  --font-okladka: "Wix Madefor Display", "Wix Madefor Text", system-ui, sans-serif;
  --font-druk: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --okl-1: clamp(44px, 6vw, 88px);
  --okl-2: clamp(34px, 4vw, 60px);
  --okl-3: clamp(26px, 2.6vw, 40px);
  --okl-4: clamp(20px, 1.8vw, 26px);

  /* Kształt */
  --r-ekran: 28px;
  --r-plansza: 24px;
  --r-karta: 18px;
  --r-pole: 14px;
  --r-pigulka: 999px;
  --cien: 0 1px 2px rgb(40 20 30 / .05), 0 10px 26px rgb(120 30 70 / .09);
  --cien-mocny: 0 2px 6px rgb(40 20 30 / .06), 0 24px 60px rgb(120 30 70 / .16);
  --cien-naklejka: 0 6px 16px rgb(160 16 74 / .28);

  /* Układ */
  --szer: 1240px;
  --krawedz: clamp(16px, 4vw, 40px);
  --gora-h: 0px;
  --dol-h: 0px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --sprezyna: linear(0, .22 9%, .62 20%, 1.02 33%, 1.1 40%, 1.06 49%, .99 60%, 1 100%);
}

/* ===== Podstawy ===== */
body {
  background: var(--app-tlo); color: var(--tusz);
  font: 400 16px/1.5 var(--font);
}
h1, h2 { font-family: var(--font-naglowki); font-weight: 800; letter-spacing: -.01em; text-transform: none; }
h1 { font-size: var(--okl-2); line-height: 1.02; }
h2 { font-size: var(--okl-3); line-height: 1.06; }
h1 em, h2 em { font-style: normal; color: var(--malina); }
h3 { font-family: var(--font-naglowki); font-weight: 750; font-size: 18px; line-height: 1.25; letter-spacing: -.005em; }
h4 { font-weight: 700; }
b, strong { font-weight: 700; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2.5px solid var(--malina); outline-offset: 3px; border-radius: 8px; }
::selection { background: #F9D5E2; }

.tytul-tresc, .strona-kosmetyku h1, .bn-artykul h1, .dokument h2, .dokument h1 {
  font-family: var(--font-naglowki); font-weight: 800; text-transform: none; letter-spacing: -.01em; line-height: 1.06;
}
/* Etykieta sceny jak w filmie („W OBU”, „CENA ZA 100 ML”): wersaliki, malina. */
.okl, .etykieta-sceny { font-family: var(--font-okladka); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.okl em { font-style: normal; color: var(--malina); }
.druk, .sklad, .ingr { font-family: var(--font-druk); }
.liczba { font-family: var(--font-okladka); font-weight: 800; font-variant-numeric: tabular-nums; line-height: .95; letter-spacing: -.01em; }

.plan-cena, .panel-liczba, .cennik-cena, .kalk-kwota, .kalk-ile, .pp-kwota, .pp-liczby b, .podsumowanie-liczba b,
.panel-liczby-glowa b, .poziom-cena, .plan-suma-kwota, .pj-wynik-kolo b, .pj-zgodnosc b, .tw-fakty b, .admin-wyplata-kwota {
  font-family: var(--font-okladka); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

/* ===== Stare sekcje w ekranie z przewijaniem: bez kolorowych pasów ===== */
main { background: none; }
.arkusz, .arkusz--papier, .arkusz--puder, .arkusz--mgla, .arkusz--bialy { background: none; }
.arkusz { padding-block: clamp(24px, 3.4vw, 48px); }
.arkusz + .arkusz > .arkusz-srodek { border-top: 1px solid var(--linia); padding-top: clamp(24px, 3.4vw, 48px); }
.arkusz + .arkusz { padding-top: 0; }
.sekcja-glowa { max-width: 860px; }
.sekcja-glowa .dopisek { font-size: 16px; color: var(--tusz-2); margin-top: 10px; }
.okruszki ol { font-size: 13px; }
.hero-karta { background: rgb(255 255 255 / .7) !important; background-image: none !important; border-radius: var(--r-plansza); }
.hero-karta::before, .hero-karta::after { display: none !important; }

/* ===== Rama na jeden ekran (DESIGN.md „Studio Mai”, od 13.11.2026 wieczorem) =====
   Okno się nie przewija. Komputer: szyna z funkcjami i ekran jako karta. Telefon: pasek, ekran, dolne zakładki. */

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; padding: 0 !important; }
:root { --szyna-w: 0px; }
@media (min-width: 1024px) { :root { --szyna-w: 232px; } }
@media (min-width: 1440px) { :root { --szyna-w: 248px; } }

.app {
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: var(--szyna-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}

/* ===== Szyna ===== */
.szyna { display: none; }
@media (min-width: 1024px) {
  .szyna {
    view-transition-name: szyna;
    display: flex; flex-direction: column; min-height: 0; padding: 0 10px 10px 12px;
  }
}
.szyna-logo { flex: none; display: flex; align-items: center; height: 66px; padding: 0 12px; line-height: 0; }
.szyna-logo .znak-logo { height: 34px; width: auto; }
.szyna-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2px 0 8px; }
.szyna-nav::-webkit-scrollbar { display: none; }
.szyna-grupa {
  margin: 14px 0 4px; padding: 0 12px;
  font: 800 11px/1 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; color: var(--tusz-3);
}
.szyna-link {
  position: relative; display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 14px;
  font: 650 14.5px/1 var(--font); color: var(--tusz); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.szyna-link:hover { background: rgb(255 255 255 / .7); }
.szyna-ik { flex: none; display: grid; place-items: center; width: 22px; height: 22px; }
.szyna-ik .ikona { width: 21px; height: 21px; }
.szyna-napis { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.szyna-link[aria-current] { background: var(--biel); color: var(--malina); box-shadow: var(--cien); font-weight: 750; }
.szyna-link[aria-current] .szyna-ik { color: var(--malina); }
.szyna-link[aria-current]::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--malina);
}
.szyna-link[aria-current][data-szyna="dna"], .szyna-link[aria-current][data-szyna="dna"] .szyna-ik { color: var(--dna); }
.szyna-link[aria-current][data-szyna="dna"]::before { background: var(--dna); }
.szyna-link[data-szyna="dna"]:not([aria-current]) .szyna-ik { color: var(--dna); }
.kod.szyna-dna { --kod-h: 12px; flex: none; width: 48px; gap: 1px; padding: 0; border-radius: 3px; }
.kod.szyna-dna i { border-radius: 1px; }

.szyna-dol { flex: none; display: grid; gap: 8px; padding-top: 6px; }
.szyna-karta {
  display: grid; gap: 1px; padding: 12px 14px 11px; border-radius: 18px;
  background: linear-gradient(150deg, #D83672, var(--malina-ciemna)); color: #fff; text-decoration: none;
  box-shadow: var(--cien-naklejka); transition: transform .2s var(--ease-out);
}
.szyna-karta:hover { transform: translateY(-2px); }
.szyna-karta-male { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: rgb(255 255 255 / .9); }
.szyna-karta-duze { font: 800 22px/1.05 var(--font-naglowki); font-variant-numeric: tabular-nums; }
.szyna-karta-dalej { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; }
.szyna-karta-dalej .ikona { width: 14px; height: 14px; transition: transform .2s var(--ease-out); }
.szyna-karta:hover .szyna-karta-dalej .ikona { transform: translateX(3px); }
.szyna-konto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.szyna-premium, .szyna-ja {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 8px;
  border-radius: var(--r-pigulka); font: 750 13.5px/1 var(--font); text-decoration: none; white-space: nowrap; min-width: 0;
}
.szyna-premium { background: var(--biel); color: var(--malina); box-shadow: inset 0 0 0 1.5px var(--malina); }
.szyna-premium:hover, .szyna-premium[aria-current] { background: var(--malina); color: #fff; }
.szyna-premium .ikona, .szyna-ja .ikona { width: 17px; height: 17px; flex: none; }
.szyna-ja { background: var(--tusz); color: #fff; }
.szyna-ja:hover { background: #000; }
.szyna-ja span { overflow: hidden; text-overflow: ellipsis; }
.ma-premium .szyna-konto { grid-template-columns: minmax(0, 1fr); }
.ma-premium .szyna-premium { display: none; }
.szyna-drobne { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 2px 6px 0; font-size: 11.5px; line-height: 1.6; }
.szyna-drobne a { color: var(--tusz-3); text-decoration: none; }
.szyna-drobne a:hover { color: var(--tusz); text-decoration: underline; }
@media (max-height: 780px) {
  .szyna-logo { height: 56px; }
  .szyna-link { height: 35px; }
  .szyna-grupa { margin-top: 10px; }
  .szyna-karta-male { display: none; }
  .szyna-karta { padding: 9px 14px; }
  .szyna-karta-duze { font-size: 18px; }
}

/* ===== Ekran: karta ze sceną funkcji ===== */
.ekran {
  view-transition-name: ekran;
  position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate;
  margin: 10px 10px 10px 0; border-radius: var(--r-ekran);
  background:
    radial-gradient(var(--scena-kropka) 1.4px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(120% 80% at 88% 0%, rgb(255 255 255 / .95), transparent 55%),
    linear-gradient(165deg, var(--scena-a) 10%, var(--scena-b) 100%);
  box-shadow: 0 0 0 1px rgb(200 32 94 / .06), var(--cien);
  container-type: size; container-name: ekran;
}
.ekran[data-scena="mieta"] { --scena-a: #F4FDF9; --scena-b: #CDEFDF; --scena-kropka: rgb(20 120 80 / .08); }
.ekran[data-scena="lawenda"] { --scena-a: #FAF7FF; --scena-b: #E3D9FF; --scena-kropka: rgb(122 85 214 / .08); }
.ekran[data-scena="maslo"] { --scena-a: #FFFCF2; --scena-b: #FFE7B0; --scena-kropka: rgb(160 110 0 / .08); }
.ekran[data-scena="niebo"] { --scena-a: #F6FAFF; --scena-b: #D3E6FB; --scena-kropka: rgb(40 110 200 / .08); }
.ekran[data-scena="malina"] { --scena-a: #DC3A76; --scena-b: #9E0F45; --scena-kropka: rgb(255 255 255 / .1); color: #fff; }

/* Strony, które nie są jeszcze narzędziem: przewijają się w środku ekranu, okno stoi. */
.ekran-przewijany {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 16px;
  scrollbar-width: thin; scrollbar-color: rgb(200 32 94 / .28) transparent;
}
.ekran-przewijany::-webkit-scrollbar { width: 10px; }
.ekran-przewijany::-webkit-scrollbar-thumb { background: rgb(200 32 94 / .24); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.ekran-przewijany::-webkit-scrollbar-track { background: transparent; }
.ekran-przewijany > *:last-child { margin-bottom: clamp(24px, 4vw, 48px); }

/* ===== Telefon i tablet: pasek, ekran przewijany w środku, dolne zakładki ===== */
.gora { display: none; }
@media (max-width: 1023.98px) {
  :root { --gora-h: 58px; --dol-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--gora-h) minmax(0, 1fr) var(--dol-h); }
  .gora {
    display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; background: var(--app-tlo);
    view-transition-name: gora;
  }
  .gora-logo { flex: none; display: flex; align-items: center; min-height: 44px; line-height: 0; }
  .gora-logo .znak-logo { height: 30px; width: auto; }
  .gora-szukaj-otworz {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; margin-left: 6px;
    border: 0; border-radius: var(--r-pigulka); background: var(--biel); color: var(--tusz-2); box-shadow: var(--cien);
    font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
  }
  .gora-szukaj-otworz .ikona { flex: none; width: 18px; height: 18px; color: var(--malina); }
  .gora-szukaj-otworz span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .gora-ikona {
    flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: none; color: var(--tusz); cursor: pointer; text-decoration: none;
  }
  .gora-ikona .ikona { width: 22px; height: 22px; }
  .gora-premium { color: var(--malina); }
  .ma-premium .gora-premium { display: none; }
  .ekran { margin: 0 8px; border-radius: 24px; }
  .ekran--narzedzie { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .ekran--narzedzie::-webkit-scrollbar { display: none; }
  .ekran-przewijany { scrollbar-width: none; }
  .ekran-przewijany::-webkit-scrollbar { display: none; }
}

.dol { display: none; }
@media (max-width: 1023.98px) {
  .dol {
    view-transition-name: dol;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end;
    padding: 0 max(4px, 50% - 280px) env(safe-area-inset-bottom, 0px); background: var(--app-tlo);
  }
  .dol-link {
    display: grid; justify-items: center; gap: 3px; padding: 8px 2px 9px; min-width: 0;
    font: 650 11.5px/1.1 var(--font); letter-spacing: -.01em; color: var(--tusz-2); text-decoration: none;
  }
  .dol-ikona { display: grid; place-items: center; width: 28px; height: 26px; }
  .dol-ikona .ikona { width: 23px; height: 23px; }
  .dol-napis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .dol-link[aria-current] { color: var(--malina); }
  .dol-link--srodek { color: var(--tusz); }
  .dol-link--srodek .dol-ikona { width: 50px; height: 50px; margin-top: -20px; border-radius: 50%; color: #fff; }
  .dol-link--dna .dol-ikona { background: var(--dna); box-shadow: 0 0 0 5px var(--app-tlo), 0 8px 18px rgb(122 85 214 / .3); }
  .dol-link--skan .dol-ikona { background: var(--malina); box-shadow: 0 0 0 5px var(--app-tlo), var(--cien-naklejka); }
  .dol-link--dna[aria-current] { color: var(--dna); }
  .dol-link--skan { display: none; }
  .ma-dna .dol-link--skan { display: grid; }
  .ma-dna .dol-link--dna { display: none; }
}
@media (max-width: 360px) { .dol-link { font-size: 10.5px; letter-spacing: -.02em; } }

/* ===== Paleta szukania (/, Ctrl+K, lupa w pasku) ===== */
.paleta { position: fixed; inset: 0; z-index: 70; }
.paleta-tlo { position: absolute; inset: 0; background: rgb(40 20 30 / .38); backdrop-filter: blur(3px); }
.paleta-okno {
  position: absolute; left: 50%; top: max(9vh, 24px); transform: translateX(-50%);
  width: min(640px, 100% - 24px); padding: 12px; border-radius: 24px; background: var(--biel); box-shadow: var(--cien-mocny);
}
.ruch .paleta:not([hidden]) .paleta-okno { animation: paleta-wjazd .26s var(--ease-out); }
.ruch .paleta:not([hidden]) .paleta-tlo { animation: mt-tlo .18s linear; }
@keyframes paleta-wjazd { from { opacity: 0; transform: translate(-50%, -10px) scale(.98); } }
.paleta .szukaj { margin: 0; }
.paleta .szukaj-etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.paleta .szukaj-pole { position: relative; }
.paleta .szukaj input {
  width: 100%; height: 58px; padding: 0 56px 0 20px; border: 0; border-radius: 16px; background: var(--mgla);
  font: 600 18px/1 var(--font); color: var(--tusz); box-shadow: none; outline: none;
}
.paleta .szukaj input:focus { background: var(--malina-tlo); }
.paleta .szukaj-przycisk { position: absolute; top: 9px; right: 9px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--malina); color: #fff; display: grid; place-items: center; }
.paleta .szukaj-przycisk .ikona { width: 20px; height: 20px; }
.paleta .podpowiedzi {
  position: static; margin-top: 8px; max-height: min(56vh, 460px); overflow-y: auto; border: 0; box-shadow: none; padding: 0;
}
.paleta-podpis { display: flex; gap: 16px; padding: 10px 8px 2px; font-size: 12.5px; color: var(--tusz-3); }
.paleta-podpis kbd { display: inline-block; min-width: 20px; margin-right: 3px; padding: 1px 5px; border-radius: 6px; background: var(--mgla); font: 700 11.5px/1.5 var(--font); text-align: center; color: var(--tusz-2); }
@media (max-width: 1023.98px) { .paleta-podpis { display: none; } .paleta-okno { top: 10px; } }
html.paleta-otwarta { overflow: hidden; }

/* ===== Arkusze od dołu (menu, „Skanuj”) ===== */
.menu-telefon { position: fixed; inset: 0; z-index: 60; }
.mt-tlo { position: absolute; inset: 0; background: rgb(40 20 30 / .42); }
.mt-arkusz {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; display: flex; flex-direction: column;
  width: min(640px, 100%); margin-inline: auto;
  background: var(--biel); border-radius: 26px 26px 0 0; box-shadow: var(--cien-mocny);
}
.ruch .menu-telefon:not([hidden]) .mt-arkusz { animation: mt-wjazd .32s var(--ease-out); }
.ruch .menu-telefon:not([hidden]) .mt-tlo { animation: mt-tlo .2s linear; }
@keyframes mt-wjazd { from { transform: translateY(40px); opacity: 0; } }
@keyframes mt-tlo { from { opacity: 0; } }
.mt-glowa { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.mt-glowa p { font: 800 26px/1 var(--font-naglowki); }
.mt-zamknij { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mgla); font-size: 26px; line-height: 1; color: var(--tusz); cursor: pointer; }
.mt-tresc { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.mt-tytul { font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--malina); margin-bottom: 6px; }
.mt-grupa a { display: block; padding: 9px 0; font-size: 16px; font-weight: 650; color: var(--tusz); text-decoration: none; }
html.menu-otwarte { overflow: hidden; }
.skan-opcje { display: grid; gap: 10px; padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.skan-opcje a {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px;
  border-radius: var(--r-karta); background: var(--mgla); color: var(--tusz); text-decoration: none;
}
.skan-opcje .ikona { flex: none; width: 28px; height: 28px; color: var(--malina); }
.skan-opcje span { flex: 1; min-width: 0; }
.skan-opcje b { display: block; font: 800 17px/1.2 var(--font-naglowki); }
.skan-opcje small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--tusz-2); }
.skan-opcje .skan-dalej { width: 20px; height: 20px; color: var(--tusz-3); }

/* Pasek z prezentem albo pierwszą setką kont (app.js dopina go do body): dymek w rogu ekranu. */
.prezent-pasek {
  position: fixed; z-index: 42; right: 22px; bottom: 22px; left: auto; transform: none;
  display: flex; align-items: center; gap: 12px; width: min(400px, 100% - 24px); margin: 0; padding: 12px 10px 12px 16px;
  background: var(--biel); border-radius: 20px; box-shadow: var(--cien-mocny);
  font-size: 13.5px; line-height: 1.35; color: var(--tusz);
}
.prezent-pasek p { flex: 1; min-width: 0; margin: 0; }
.prezent-pasek p strong { display: block; font: 800 15px/1.25 var(--font-naglowki); }
.prezent-pasek p span { color: var(--tusz-2); }
.prezent-pasek .przycisk { flex: none; height: 40px; padding: 0 16px; font-size: 14px; }
.prezent-pasek .prezent-zamknij { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; font-size: 21px; line-height: 1; color: var(--tusz-2); cursor: pointer; }
.prezent-pasek .prezent-zamknij:hover { background: var(--mgla); color: var(--tusz); }
@media (max-width: 1023.98px) {
  .prezent-pasek { left: 12px; right: 12px; bottom: calc(var(--dol-h) + 10px); width: auto; }
}
@media (max-width: 560px) {
  .prezent-pasek { flex-wrap: wrap; padding: 12px 44px 12px 14px; }
  .prezent-pasek .przycisk { width: 100%; }
  .prezent-pasek .prezent-zamknij { position: absolute; top: 6px; right: 6px; }
}

/* ===== Przejścia między stronami ===== */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .01s; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(ekran) { animation-duration: .34s; animation-timing-function: var(--ease-out); }
::view-transition-old(ekran) { animation: vt-ekran-wyjazd .2s ease-in both; }
::view-transition-new(ekran) { animation: vt-ekran-wjazd .38s var(--ease-out) both; }
@keyframes vt-ekran-wyjazd { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-ekran-wjazd { from { opacity: 0; transform: translateY(18px) scale(.99); } }
::view-transition-group(kosmetyk), ::view-transition-group(blizniaczka) { z-index: 5; }
::view-transition-old(kosmetyk), ::view-transition-new(kosmetyk), ::view-transition-old(blizniaczka), ::view-transition-new(blizniaczka) { height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ===== Klocki: przyciski, znaczki, pola, plansza, kod składu, drabinka ===== */

/* Przyciski (stare klasy .przycisk, nowy wygląd): kapsuła, bez cienia i bez strzałki w kółku. */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--tusz); border-radius: var(--r-pigulka); background: var(--biel); color: var(--tusz);
  font: 650 15.5px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: none;
  transition: background-color .15s, color .15s, border-color .15s, transform .12s var(--ease-out);
}
.przycisk:hover { background: var(--tusz); color: var(--biel); }
.przycisk:active { transform: translateY(1px) scale(.985); }
.przycisk--glowny, .przycisk--ciemny.przycisk--akcent { padding: 0 22px; gap: 10px; background: var(--malina); border-color: var(--malina); color: #fff; box-shadow: none; }
.przycisk--glowny:hover { background: var(--malina-ciemna); border-color: var(--malina-ciemna); color: #fff; }
.przycisk--ciemny { background: var(--tusz); border-color: var(--tusz); color: #fff; box-shadow: none; }
.przycisk--ciemny:hover { background: #000; border-color: #000; }
.przycisk--cichy { border-color: var(--linia-2); }
.przycisk--cichy:hover { background: var(--biel); color: var(--tusz); border-color: var(--tusz); }
.przycisk--duzy { min-height: 56px; padding: 0 28px; font-size: 16.5px; }
.przycisk--maly { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.przycisk .przycisk-strzalka { display: inline-grid; place-items: center; width: auto; height: auto; background: none; border-radius: 0; color: inherit; transition: transform .2s var(--ease-out); }
.przycisk .przycisk-strzalka .ikona, .przycisk .przycisk-strzalka svg { width: 18px; height: 18px; }
.przycisk:hover .przycisk-strzalka { transform: translateX(3px); }
.przycisk[disabled], .przycisk[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Link ze strzałką */
.dalej { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 650; font-size: 15.5px; color: var(--tusz); text-decoration: none; }
.dalej .ikona { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.dalej:hover { color: var(--malina); }
.dalej:hover .ikona { transform: translateX(4px); }

/* Znaczek filaru: mała kapsuła z ikoną i nazwą obszaru. */
.filar {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 10px; border-radius: var(--r-pigulka);
  background: var(--zn-tlo, var(--mgla)); color: var(--zn-tusz, var(--tusz)); font-size: 13.5px; font-weight: 650; white-space: nowrap;
}
.filar .ikona { width: 17px; height: 17px; }
.filar--dna { --zn-tlo: var(--dna); --zn-tusz: #fff; }
.filar--swap { --zn-tlo: var(--swap); --zn-tusz: #fff; }
.filar--klub { --zn-tlo: var(--tusz); --zn-tusz: var(--klub); }
.filar--malina { --zn-tlo: var(--malina); --zn-tusz: #fff; }
.filar--linia { background: none; box-shadow: inset 0 0 0 1px var(--linia-2); }

/* Sekcja nowego układu: kolumna strony z tytułem okładkowym. */
main > section.sekcja, .sekcja { width: min(var(--szer), 100% - 2 * var(--krawedz)); margin-inline: auto; padding-block: clamp(22px, 3.2vw, 44px); }
.sekcja-tytul { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; margin-bottom: clamp(20px, 2.6vw, 36px); }
.sekcja-tytul h2 { font-size: var(--okl-2); line-height: .88; max-width: 16ch; }
.sekcja-tytul p { max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--tusz-2); }

/* Plansza: płaskie pole koloru filaru w obrysie strony. */
.plansza {
  position: relative; overflow: hidden; border-radius: var(--r-plansza);
  background: var(--pl-tlo, var(--mgla)); color: var(--pl-tusz, var(--tusz)); padding: clamp(22px, 4vw, 56px);
}
.plansza--dna { --pl-tlo: var(--dna-tlo); --pl-akcent: var(--dna); }
.plansza--swap { --pl-tlo: var(--swap-tlo); --pl-akcent: var(--swap); }
.plansza--klub { --pl-tlo: var(--klub); --pl-akcent: var(--tusz); }
.plansza--malina { --pl-tlo: var(--malina-tlo); --pl-akcent: var(--malina); }
.plansza--premium { --pl-tlo: var(--malina); --pl-tusz: #fff; --pl-akcent: #fff; }
.plansza h2, .plansza .okl { color: inherit; }
.plansza em { font-style: normal; color: var(--pl-akcent, var(--malina)); }

/* Karta danych: biel, linia, bez cienia. */
.biala { background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-karta); }

/* ===== Kod składu: prążki w kolejności INCI, szerokość maleje z miejscem na liście, kolor = działanie ===== */
.kod { display: flex; gap: 2px; height: var(--kod-h, 10px); border-radius: 4px; overflow: hidden; }
.kod i { flex: var(--w, 1) 1 0; min-width: 2px; background: var(--f-b); border-radius: 1.5px; }
.kod .k-p { background: var(--f-p); } .kod .k-n { background: var(--f-n); } .kod .k-z { background: var(--f-z); }
.kod .k-w { background: var(--f-w); } .kod .k-u { background: var(--f-u); } .kod .k-f { background: var(--f-f); }
.kod .k-h { background: var(--f-h); } .kod .k-i { background: var(--f-i); }
.kod .k-s { opacity: .34; }
.kod--maly { --kod-h: 8px; }
.kod--sredni { --kod-h: 28px; gap: 2px; border-radius: 6px; }
.kod--duzy { --kod-h: clamp(44px, 6vw, 68px); gap: 3px; border-radius: 10px; }
.kod--duzy i { border-radius: 3px; }
/* Dokładny kod (do drabinki): szerokości w procentach liczone przy budowie, żeby połączenia trafiały w prążki. */
.kod--dokladny { display: block; position: relative; overflow: visible; border-radius: 0; height: var(--kod-h, 40px); }
.kod--dokladny i { position: absolute; top: 0; bottom: 0; min-width: 0; border-radius: 2.5px; left: var(--x); width: var(--s); }

/* Legenda kodu: kolorowa kropka i nazwa działania. */
.kod-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--tusz-2); }
.kod-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.kod-legenda li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k, var(--f-b)); }

/* Drabinka: dwa kody i połączenia wspólnych składników aktywnych. */
.drabinka { display: grid; gap: 0; }
.drabinka .kod--dokladny { --kod-h: var(--dr-h, 34px); }
.drabinka-laczenia { display: block; width: 100%; height: var(--dr-odstep, 44px); overflow: visible; }
.drabinka-laczenia path { fill: none; stroke: var(--malina); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.drabinka-laczenia { clip-path: inset(-4px 0 -4px 0); }
.drabinka-podpis { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--tusz-2); }
.drabinka-podpis--gora { margin-bottom: 6px; }
.drabinka-podpis--dol { margin-top: 6px; }
.drabinka-podpis b { color: var(--malina); font-weight: 650; }
.drabinka.dr-czeka:not(.widac) .kod--dokladny i { transform: scaleY(0); }
.drabinka .kod--dokladny i { transform-origin: bottom; }
.drabinka.dr-czeka:not(.widac) .drabinka-laczenia { clip-path: inset(-4px 0 100% 0); }
.drabinka.dr-czeka.widac .kod--dokladny i { transition: transform .5s var(--ease-out); transition-delay: calc(var(--n, 0) * 9ms); }
.drabinka.dr-czeka.widac .drabinka-laczenia { transition: clip-path .6s var(--ease-out) .45s; }

/* Koło z liczbą (cena, procent, zgodność). */
.kolo {
  display: inline-grid; place-content: center; text-align: center; width: var(--kolo, 72px); aspect-ratio: 1; border-radius: 50%;
  background: var(--kolo-tlo, var(--tusz)); color: var(--kolo-tusz, #fff);
  font-family: var(--font-okladka); font-weight: 800; font-size: calc(var(--kolo, 72px) * .36); line-height: .9; font-variant-numeric: tabular-nums;
}
.kolo small { display: block; font-family: var(--font); font-weight: 600; font-size: max(11px, calc(var(--kolo, 72px) * .14)); line-height: 1.1; margin-top: 2px; }
.kolo--b { --kolo-tlo: var(--malina); }
.kolo--o { --kolo-tlo: var(--biel); --kolo-tusz: var(--tusz-2); box-shadow: inset 0 0 0 1px var(--linia-2); }
.kolo--oszcz { --kolo-tlo: var(--zielen); }

/* Maja */
.maja { display: block; height: auto; max-width: none; user-select: none; pointer-events: none; }
.maja--lustro { transform: scaleX(-1); }
.dymek-maji {
  position: relative; display: inline-block; max-width: 30ch; padding: 12px 16px; border: 1.5px solid var(--tusz); border-radius: 16px;
  background: var(--biel); color: var(--tusz); font-size: 15px; font-weight: 600; line-height: 1.35;
}

/* ===== Klocki „Studio Mai” (od 13.11.2026 wieczorem): naklejki, procent, dymek, promienie, panel, zakładki ===== */

/* Przyciski jak w filmach: gruby krój, kapsuła. */
.przycisk { font-family: var(--font-naglowki); font-weight: 750; letter-spacing: -.005em; border-width: 1.5px; }
.przycisk--glowny { box-shadow: 0 6px 16px rgb(200 32 94 / .26); }
.przycisk--glowny:hover { box-shadow: 0 8px 20px rgb(200 32 94 / .32); }
.przycisk .ikona { width: 18px; height: 18px; flex: none; }
.przycisk:hover .ikona:last-child { transform: translateX(2px); }
.przycisk .ikona { transition: transform .2s var(--ease-out); }

/* Panel narzędzia: biała karta na scenie. */
.panel {
  min-width: 0; min-height: 0; border-radius: var(--r-plansza);
  background: rgb(255 255 255 / .9); box-shadow: 0 1px 2px rgb(40 20 30 / .04), 0 14px 40px rgb(140 30 80 / .1);
}
@supports (backdrop-filter: blur(1px)) { .panel { background: rgb(255 255 255 / .82); backdrop-filter: blur(14px) saturate(1.2); } }

/* Etykieta sceny jak w filmie: „W OBU”, „ZAMIEŃ NA TAŃSZE”. */
.etykieta-sceny { color: var(--malina); font-size: 15px; }

/* Naklejka ceny: malinowa kapsuła obrócona o −4°, oryginał na ciemnej. */
.nakl {
  display: inline-flex; align-items: baseline; gap: 1px; padding: .32em .7em .36em; border-radius: var(--r-pigulka);
  background: var(--malina); color: #fff; font: 800 22px/1 var(--font-naglowki); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px #fff, var(--cien-naklejka); transform: rotate(-4deg); white-space: nowrap;
}
.nakl small { font-size: .68em; font-weight: 800; }
.nakl--ciemna { background: var(--tusz); box-shadow: 0 0 0 3px #fff, 0 6px 16px rgb(40 20 30 / .26); transform: rotate(3deg); }

/* Procent oszczędności: duża cyfra z białą obwódką, jak „−86%” na miniaturze. */
.procent {
  margin: 0; color: var(--malina); font: 800 64px/.9 var(--font-naglowki); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
    5px 0 0 #fff, -5px 0 0 #fff, 0 5px 0 #fff, 0 -5px 0 #fff, 4px 4px 0 #fff, -4px -4px 0 #fff, 4px -4px 0 #fff, -4px 4px 0 #fff,
    0 10px 22px rgb(160 16 74 / .25);
}

/* Dymek Mai: jedno zdanie zamiast akapitu. */
.dymek-mai {
  position: relative; margin: 0; padding: 12px 16px 13px; border-radius: 20px; background: #fff; color: var(--tusz);
  font: 650 15px/1.35 var(--font); box-shadow: 0 10px 26px rgb(140 30 80 / .14); text-wrap: pretty;
}
.dymek-mai b { color: var(--malina); font-weight: 800; }
.dymek-mai::after {
  content: ""; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 0 0 6px 0;
  right: 34px; bottom: -8px; transform: rotate(45deg);
}

/* Promienie za kosmetykiem (jak w filmie przy prezentacji kosmetyku): powoli się obracają. */
.promienie {
  position: absolute; z-index: 0; left: 50%; top: 46%; width: 150cqmax; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .62) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 70%); mask: radial-gradient(closest-side, #000 18%, transparent 70%);
}
.ruch .promienie { animation: promienie 90s linear infinite; }
@keyframes promienie { to { rotate: 1turn; } }

/* Kosmetyk na scenie: biała karta z grubą ciemną ramką jak na miniaturze. */
.duo-karta, .solo-karta {
  position: relative; display: grid; place-items: center; text-decoration: none; color: inherit;
  background: #fff; border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(120 30 70 / .16);
  transition: transform .25s var(--ease-out);
}
.duo-karta:hover, .solo-karta:hover { transform: translateY(-4px) rotate(-.6deg); }
.duo-foto, .solo-foto { position: absolute; inset: 0; display: grid; place-items: center; padding: 10%; border-radius: inherit; }
.duo-foto img, .duo-foto .wyc, .solo-foto img, .solo-foto .wyc { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.foto-brak { font: 800 18px/1.1 var(--font-naglowki); color: var(--tusz-3); text-align: center; }

/* Wybór szybki: biała kapsuła. */
.chip-wybor {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pigulka);
  background: #fff; color: var(--tusz); font: 650 14px/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--linia-2);
  transition: box-shadow .15s, color .15s, transform .15s var(--ease-out);
}
.chip-wybor:hover { box-shadow: inset 0 0 0 1.5px var(--malina); color: var(--malina); }
.chip-wybor:active { transform: scale(.97); }
.pigulka-mieta {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pigulka);
  background: var(--mieta); color: var(--mieta-tusz); font: 750 13.5px/1 var(--font-naglowki); white-space: nowrap; text-decoration: none;
}
.pigulka-biala {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pigulka);
  background: #fff; color: var(--tusz); font: 700 13.5px/1 var(--font); white-space: nowrap; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--linia-2);
}
a.pigulka-biala:hover { box-shadow: inset 0 0 0 1.5px var(--malina); color: var(--malina); }

/* Zakładki w panelu narzędzia (ekran.js, data-karty). Bez JS panele stoją jeden pod drugim. */
.karty { display: flex; flex-direction: column; min-height: 0; }
.karty-lista {
  flex: none; display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 16px; background: var(--mgla);
  overflow-x: auto; scrollbar-width: none;
}
.karty-lista::-webkit-scrollbar { display: none; }
.karty-lista [role="tab"] {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 0; border-radius: 12px; background: none; color: var(--tusz-2); font: 750 14px/1 var(--font-naglowki); cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.karty-lista [role="tab"]:hover { color: var(--tusz); }
.karty-lista [role="tab"][aria-selected="true"] { background: #fff; color: var(--malina); box-shadow: 0 2px 8px rgb(140 30 80 / .1); }
.karty-lista [role="tab"] .ile { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--malina); color: #fff; font-size: 11.5px; }
.karty-panele { flex: 1; min-height: 0; position: relative; }
.karty--js .karty-panele > [role="tabpanel"] {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: rgb(200 32 94 / .25) transparent;
}
.karty-panele > [role="tabpanel"]::-webkit-scrollbar { width: 8px; }
.karty-panele > [role="tabpanel"]::-webkit-scrollbar-thumb { background: rgb(200 32 94 / .22); border-radius: 8px; }
.karty-panele > [role="tabpanel"][hidden] { display: none; }
.karty-tytul { margin: 0 0 10px; font: 800 13px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--malina); }

/* Wejście jak w filmie: krótko, z odbiciem. Klasa .wjazd dokłada ekran.js przy zmianie treści. */
.ruch .wjazd { animation: wjazd .34s var(--ease-out) both; }
.ruch .wjazd .nakl, .ruch .wjazd .procent { animation: naklejka .5s var(--sprezyna) .08s both; }
.ruch .wjazd .duo-karta--b, .ruch .wjazd .solo-karta { animation: wskok .46s var(--sprezyna) .04s both; }
.ruch .wjazd .duo-karta--o { animation: wskok .46s var(--sprezyna) both; }
.ruch .dymek-mai.wjazd { animation: dymek .38s var(--sprezyna) both; }
.ruch img.wjazd { animation: maja .4s var(--ease-out) both; }
@keyframes wjazd { from { opacity: 0; transform: translateY(8px); } }
@keyframes wskok { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@keyframes naklejka { from { opacity: 0; scale: .5; } }
@keyframes dymek { from { opacity: 0; scale: .85; transform-origin: 80% 100%; } }
@keyframes maja { from { opacity: .3; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .ruch .promienie { animation: none; } }

/* ===== Start ===== */

/* Narzędzie na pierwszym ekranie: po lewej szukanie i trzy sposoby na zdjęcie, po prawej wynik (żywa para z kodami składu). */
main > section.hg { width: auto; padding: clamp(20px, 2.6vw, 40px) 0 clamp(8px, 1.6vw, 20px); }
.hg-srodek {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(28px, 3.6vw, 56px); align-items: center;
  width: min(var(--szer), 100% - 2 * var(--krawedz)); margin-inline: auto;
}
.hg-tytul { font-size: clamp(46px, 5vw, 80px); line-height: .88; }
.hg-tytul em { display: block; font-style: normal; color: var(--malina); }
.hg-lead { margin-top: clamp(16px, 2vw, 24px); max-width: 44ch; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.5; color: var(--tusz-2); }
.hg-szukaj {
  position: relative; display: flex; align-items: center; gap: 10px; height: 64px; max-width: 560px; margin-top: clamp(20px, 2.4vw, 32px);
  padding: 0 8px 0 20px; border: 1.5px solid var(--tusz); border-radius: var(--r-pigulka); background: var(--biel);
  transition: box-shadow .2s, border-color .2s;
}
.hg-szukaj:focus-within { border-color: var(--malina); box-shadow: 0 0 0 4px rgb(200 32 94 / .14); }
.hg-szukaj-ikona { width: 22px; height: 22px; flex: none; color: var(--tusz-2); }
.hg-szukaj input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; box-shadow: none; padding: 0;
  font: 500 17px/1.2 var(--font); color: var(--tusz);
}
.hg-szukaj input::placeholder { color: var(--tusz-3); }
.hg-szukaj input::-webkit-search-cancel-button { display: none; }
.hg-szukaj-przycisk { flex: none; }
.hg-szukaj .podpowiedzi { top: calc(100% + 8px); left: 0; right: 0; z-index: 30; }
/* Wyniki szukania stają w miejscu żywej pary; pole szukania zostaje widoczne przy przewijaniu listy. */
.hg-wyniki { grid-column: 2; grid-row: 1; align-self: start; min-width: 0; }
.hg-srodek:has(.hg-wyniki:not([hidden])) { align-items: start; }
.hg-srodek:has(.hg-wyniki:not([hidden])) .hg-scena { display: none; }
.hg-srodek:has(.hg-wyniki:not([hidden])) .hg-tekst { position: sticky; top: calc(var(--gora-h) + 24px); }
@media (max-width: 900px) {
  .hg-wyniki { grid-column: 1; grid-row: auto; }
  .hg-srodek:has(.hg-wyniki:not([hidden])) .hg-tekst { position: static; }
}
.hg-inne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; margin-top: 12px; }
.hg-inne a {
  display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px;
  border: 1px solid var(--linia-2); border-radius: 14px; color: var(--tusz); text-decoration: none; transition: border-color .15s;
}
.hg-inne a:hover { border-color: var(--tusz); }
.hg-inne .ikona { width: 24px; height: 24px; flex: none; }
.hg-inne b { display: block; font-size: 14.5px; line-height: 1.2; }
.hg-inne small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.2; color: var(--tusz-2); }

.hg-pary { display: grid; }
.hg-para {
  grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--linia); border-radius: var(--r-plansza); background: var(--biel);
  opacity: 0; visibility: hidden; transition: opacity .3s linear, visibility 0s .3s;
}
.hg-para--jest { opacity: 1; visibility: visible; transition: opacity .4s linear .08s; }
.hg-kosmetyki { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.hg-k { display: grid; grid-template-rows: auto auto auto auto; gap: 6px; padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 24px) clamp(14px, 1.5vw, 20px); color: inherit; text-decoration: none; min-width: 0; }
.hg-k--o { background: #F1EDF0; }
.hg-k--b { background: var(--malina-tlo); }
.hg-k-rola { font-size: 13px; font-weight: 650; color: var(--tusz-2); }
.hg-k--b .hg-k-rola { color: var(--malina); }
.hg-k-foto { display: block; height: clamp(140px, min(15vw, 27vh), 250px); margin-block: 4px 8px; }
.hg-k-foto .wyc { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 16px 14px rgb(31 23 32 / .16)); transition: transform .35s var(--ease-out); }
.hg-k:hover .wyc { transform: translateY(-4px); }
.hg-k-nazwa { font-size: 14.5px; line-height: 1.3; min-height: 2.6em; }
.hg-k-cena { font-size: clamp(34px, 3.5vw, 52px); color: var(--tusz-2); }
.hg-k--b .hg-k-cena { color: var(--malina); }
.hg-k-cena small { font-size: .46em; font-weight: 700; }
.hg-oszcz { --kolo: clamp(76px, 7vw, 100px); position: absolute; left: 50%; top: clamp(86px, 9vw, 124px); transform: translate(-50%, -50%) rotate(-8deg); box-shadow: 0 0 0 5px var(--biel); }
.hg-sklad { padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.8vw, 24px) clamp(16px, 1.8vw, 22px); }
.hg-sklad .drabinka { --dr-h: clamp(26px, 2.6vw, 34px); --dr-odstep: clamp(30px, 3.2vw, 44px); }
.hg-wspolne { margin-top: 14px; font-size: 14.5px; line-height: 1.4; color: var(--tusz-2); }
.hg-wspolne b { color: var(--tusz); }
.hg-dalej { margin-top: 10px; font-size: 15px; }
.hg-ster { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding-inline: 4px; }
.hg-jak { max-width: 54ch; font-size: 12.5px; line-height: 1.4; color: var(--tusz-3); }
.hg-jak a { color: var(--tusz-2); }
.hg-kropki { display: flex; flex: none; }
.hg-kropka { width: 30px; height: 30px; padding: 12px 2px; border: 0; background: var(--linia-2); background-clip: content-box; cursor: pointer; }
.hg-kropka[aria-current] { background-color: var(--tusz); }

@media (min-width: 901px) and (max-height: 720px) {
  main > section.hg { padding-top: 16px; }
  .hg-tytul { font-size: clamp(40px, 4.2vw, 62px); }
  .hg-lead { margin-top: 12px; font-size: 16.5px; }
  .hg-szukaj { height: 56px; margin-top: 16px; }
  .hg-inne a { padding: 8px 12px; }
  .hg-k-foto { height: clamp(110px, 20vh, 150px); }
  .hg-k-cena { font-size: 34px; }
  .hg-wspolne { display: none; }
}
@media (max-width: 900px) {
  .hg-srodek { grid-template-columns: minmax(0, 1fr); }
  .hg-tytul { font-size: min(13.2vw, 84px); }
  .hg-szukaj { height: 58px; padding-left: 16px; }
  .hg-szukaj input { font-size: 16px; }
  .hg-szukaj-przycisk { min-height: 44px; padding-inline: 18px; }
  .hg-inne a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .hg-inne small { display: none; }
  .hg-k-foto { height: clamp(130px, 40vw, 220px); }
  .hg-jak { display: none; }
  .hg-ster { justify-content: center; }
}

/* Opcje do zaznaczenia (quiz Beauty DNA): duże kapsuły pod kciuk. */
.opcje { display: flex; flex-wrap: wrap; gap: 8px; }
.opcja { position: relative; display: inline-flex; }
.opcja input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcja span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1.5px solid transparent; border-radius: var(--r-pigulka);
  background: var(--biel); font-size: 15.5px; font-weight: 600; color: var(--tusz); transition: background-color .15s, color .15s, border-color .15s;
}
.opcja:hover span { border-color: var(--pl-akcent, var(--tusz)); }
.opcja input:checked + span { background: var(--pl-akcent, var(--tusz)); border-color: var(--pl-akcent, var(--tusz)); color: #fff; }
.opcja input:focus-visible + span { outline: 2px solid var(--tusz); outline-offset: 2px; }

/* Moduły Startu: cztery filary jako działające panele, w siatce 7/5 i 5/7. */
.sm-siatka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.sm-modul { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.2vw, 30px); }
.sm-dna, .sm-swap { grid-column: span 7; }
.sm-polka, .sm-klub { grid-column: span 5; }
.sm-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sm-wiecej { font-size: 14.5px; }
.sm-tytul { margin-top: 14px; font-family: var(--font-okladka); font-weight: 800; font-size: clamp(34px, 3.1vw, 46px); line-height: .92; letter-spacing: 0; text-transform: uppercase; }
.sm-lead { margin-top: 10px; max-width: 54ch; font-size: 16px; line-height: 1.45; }
.sm-dna .sm-lead { color: #40365A; }
.sm-swap .sm-lead { color: #24504A; }
.sm-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: auto; padding-top: 20px; }
.sm-drobne { margin-top: 12px; font-size: 13.5px; line-height: 1.4; color: #6B2340; }

/* Beauty DNA: dwa pytania, pod nimi kod, który układa się z odpowiedzi, i przycisk. */
.sm-dna .hd-quiz { flex: 1; display: flex; flex-direction: column; margin-top: 18px; }
.sm-dna-dol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; margin-top: auto; padding-top: 20px; }
.hd-pytanie { margin: 0; padding: 0; border: 0; min-width: 0; }
.hd-pytanie + .hd-pytanie { margin-top: 16px; }
.hd-pytanie legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 650; }
.hd-pytanie legend small { margin-left: 6px; font-size: 13.5px; font-weight: 400; color: #5A4E77; }
.sm-dna .opcja span { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
.hd-karta { position: relative; min-width: 0; padding: 12px 16px 14px; border-color: transparent; }
.hd-karta-glowa { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; font-weight: 650; color: var(--tusz-2); }
.kod--dna { --kod-h: 40px; gap: 3px; border-radius: 8px; }
.kod--dna i { border-radius: 3px; transition: background-color .35s var(--ease-out); }
.hd-karta-opis { margin-top: 8px; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.hd-karta-legenda { margin-top: 8px; }

/* Półka: roczna nadpłata (przykład z bazy albo liczba osoby). */
.sm-polka-wynik { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 18px; padding: 16px 18px; border-color: transparent; }
.sm-polka-opis { font-size: 14px; line-height: 1.35; color: var(--tusz-2); }
.sm-polka-kwota { margin-top: 6px; font-size: clamp(44px, 4.2vw, 60px); color: var(--malina); }
.sm-polka-rzad { display: flex; gap: 6px; height: 58px; margin-top: 14px; }
.sm-polka-rzad li { flex: 1 1 0; min-width: 0; }
.sm-polka-rzad .opakowanie { width: 100%; height: 100%; object-fit: contain; }
.sm-polka.ma-liczbe .sm-polka-rzad, .sm-polka.ma-liczbe [data-moja-liczba-link] .ikona { display: none; }
.sm-polka.ma-liczbe .sm-polka-kwota { font-size: clamp(52px, 5vw, 76px); }
/* Oszczędność kontra cena premium: dwa paski w tej samej skali. */
.sm-zwrot { display: grid; gap: 8px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--linia); }
.sm-zwrot > div { display: grid; grid-template-columns: 9.4em minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.2; }
.sm-zwrot dt { color: var(--tusz-2); }
.sm-zwrot dd { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em; align-items: center; gap: 8px; margin: 0; }
.sm-zwrot-tor { display: block; height: 12px; }
.sm-zwrot-tor i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: var(--zielen); transition: width .5s var(--ease-out); }
.sm-zwrot-premium .sm-zwrot-tor i { background: var(--malina); }
.sm-zwrot b { font-weight: 650; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Klub: zadania z punktami. */
.sm-zadania { margin-top: 18px; padding: 4px 18px; border-color: transparent; }
.sm-zadania li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.sm-zadania li + li { border-top: 1px solid var(--linia); }
.sm-zadania b { flex: none; font-size: 26px; }
.sm-klub .sm-tytul { max-width: calc(100% - 104px); }
.sm-maja { position: absolute; right: 16px; top: 12px; width: 100px; height: 116px; object-fit: cover; object-position: center top; }

/* Beauty Swap: tekst i przykład ogłoszenia obok siebie. */
.sm-swap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 20px; align-items: center; }
.sm-swap-tekst { display: flex; flex-direction: column; align-self: stretch; }
.sm-swap .hs-foto { height: clamp(96px, 9vw, 132px); }

@media (max-width: 900px) {
  .sm-siatka { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sm-dna, .sm-swap, .sm-polka, .sm-klub { grid-column: auto; }
  .sm-dna-dol { grid-template-columns: minmax(0, 1fr); }
  .sm-swap { grid-template-columns: minmax(0, 1fr); }
  .sm-akcje .przycisk, .sm-dna-dol .przycisk { width: 100%; }
  .sm-wiecej { display: none; }
}

/* Zakładki-kapsuły i przewijany rząd kart */
.zakl { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pigulka); background: var(--mgla); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.zakl::-webkit-scrollbar { display: none; }
.zakl-karta { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pigulka); background: none; font: 650 14.5px/1 var(--font); color: var(--tusz-2); white-space: nowrap; cursor: pointer; }
.zakl-karta[aria-selected="true"] { background: var(--biel); color: var(--tusz); box-shadow: 0 1px 3px rgb(31 23 32 / .14); }
.rzad {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(232px, 21vw, 276px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--krawedz)); padding: 2px var(--krawedz) 6px; scroll-padding-inline: var(--krawedz);
}
.rzad::-webkit-scrollbar { display: none; }
.rzad > li { scroll-snap-align: start; min-width: 0; }
.rzad-strzalki { display: flex; gap: 6px; flex: none; }
.rzad-strzalka { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--linia-2); border-radius: 50%; background: var(--biel); color: var(--tusz); cursor: pointer; }
.rzad-strzalka:hover { border-color: var(--tusz); }
.rzad-strzalka[disabled] { opacity: .35; cursor: default; border-color: var(--linia-2); }
.rzad-strzalka .ikona { width: 18px; height: 18px; }
@media (max-width: 700px) { .rzad-strzalki { display: none; } }

/* Karta pary z kodem składu */
.duet { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1px solid var(--linia); border-radius: var(--r-karta); background: var(--biel); color: inherit; text-decoration: none; transition: border-color .15s, transform .25s var(--ease-out); }
.duet:hover { border-color: var(--tusz); transform: translateY(-2px); }
.duet-scena { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; }
.duet-pol { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.duet-pol--o { background: #F1EDF0; }
.duet-pol--b { background: var(--malina-tlo); }
.duet-zdj { position: absolute; inset: 14px 12px; width: auto; height: auto; }
.duet-oszcz { --kolo: 52px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px var(--biel); }
.duet-nr { position: absolute; left: 10px; top: 8px; font-size: 26px; color: var(--tusz-3); }
.duet-tekst { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 12px 14px 14px; }
.duet-o { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.3; color: var(--tusz-3); }
.duet-o > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duet-o > b { flex: none; font-weight: 500; }
.duet-b { font-size: 14.5px; line-height: 1.3; min-height: 2.6em; }
.duet-dol { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 6px; }
.duet-cena { font-size: 30px; color: var(--malina); white-space: nowrap; }
.duet-cena small { font-size: .5em; font-weight: 700; }
.duet-dol .kod { flex: 0 1 104px; --kod-h: 14px; margin-bottom: 4px; }

/* Odkrywaj: pary, działy, marki */
.ho-pary-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dzialy-kafle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.dzial-kafel { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 8px; height: 100%; padding: 16px 16px 14px; border-radius: var(--r-karta); background: var(--mgla); color: var(--tusz); text-decoration: none; transition: background-color .2s; }
.dzial-kafel:hover { background: #EEE8ED; }
.dzial-kafel-zdj { grid-column: 1 / -1; display: flex; justify-content: center; height: clamp(84px, 9vw, 120px); }
.dzial-zdj { flex: 0 1 34%; height: 100%; min-width: 0; margin-inline: -3%; transition: transform .3s var(--ease-out); }
.dzial-kafel:hover .dzial-zdj:nth-child(1) { transform: translateX(-4px) rotate(-4deg); }
.dzial-kafel:hover .dzial-zdj:nth-child(3) { transform: translateX(4px) rotate(4deg); }
.dzial-kafel-nazwa { font-family: var(--font-okladka); font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1; text-transform: uppercase; }
.dzial-kafel > .ikona { width: 18px; height: 18px; margin-bottom: 3px; }
.marki-pas { display: flex; align-items: center; gap: 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linia); }
.marki-pas-podpis { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 650; color: var(--tusz); text-decoration: none; }
.marki-pas-podpis .ikona { width: 16px; height: 16px; }
.marki-pas ul { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.marki-pas ul::-webkit-scrollbar { display: none; }
.marki-pas li { flex: none; }
.marki-pas li a { display: flex; align-items: center; min-height: 44px; }
.marki-pas-logo { display: block; width: auto; height: 22px; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: opacity .2s, filter .2s; }
.marki-pas a:hover .marki-pas-logo { opacity: 1; filter: none; }
@media (max-width: 900px) {
  .dzialy-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dzialy-kafle li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .marki-pas { flex-direction: column; align-items: flex-start; gap: 14px; }
  .marki-pas ul { width: 100%; }
}

/* Przykład ogłoszenia Beauty Swap */
.hs-ogl { padding: 16px 18px 20px; border-color: transparent; }
.hs-ogl-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 650; color: var(--tusz-2); }
.hs-stan { flex: none; white-space: nowrap; padding: 5px 10px; border-radius: var(--r-pigulka); background: var(--swap-tlo); color: var(--swap); font-size: 12.5px; }
.hs-wymiana { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 12px; }
.hs-strona { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.hs-rola { justify-self: start; padding: 5px 12px; border-radius: var(--r-pigulka); background: var(--tusz); color: #fff; font-size: 13px; font-weight: 650; }
.hs-strona:last-child .hs-rola { background: none; color: var(--tusz); box-shadow: inset 0 0 0 1.5px var(--tusz); }
.hs-foto { display: block; width: 100%; height: clamp(120px, 14vw, 190px); }
.hs-foto .wyc { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 12px rgb(31 23 32 / .14)); }
.hs-nazwa { font-size: 14px; line-height: 1.3; }
.hs-znak { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--swap); color: #fff; }
.hs-znak .ikona { width: 22px; height: 22px; }

/* Klub */
.hk { --hk-odstep: clamp(20px, 2.6vw, 32px); display: grid; gap: var(--hk-odstep); }
.hk-glowa { position: relative; min-height: clamp(150px, 19vw, 250px); }
.hk-glowa > :not(.hk-maja) { max-width: min(720px, 100% - clamp(120px, 24vw, 300px)); }
.hk-tytul { margin-top: 16px; font-size: var(--okl-2); line-height: .88; }
.hk-lead { margin-top: 14px; max-width: 48ch; font-size: 17.5px; line-height: 1.5; color: #3F2E00; }
.hk-siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; align-items: stretch; }
.hk-zadania { padding: 18px 20px 12px; border-color: transparent; }
.hk-karta-tytul { font-size: 13px; font-weight: 650; color: var(--tusz-2); margin-bottom: 4px; }
.hk-zadania li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.hk-zadania li + li { border-top: 1px solid var(--linia); }
.hk-zadania small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--tusz-3); }
.hk-zadania b { flex: none; font-size: 28px; color: var(--tusz); }
.hk-nagrody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hk-nagroda { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; height: 100%; padding: 16px 18px; border-radius: var(--r-karta); background: var(--biel); color: var(--tusz); text-decoration: none; transition: transform .2s var(--ease-out); }
.hk-nagroda:hover { transform: translateY(-2px); }
.hk-nagroda-gora { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hk-nagroda-ile { font-size: clamp(30px, 2.8vw, 40px); text-transform: uppercase; }
.hk-nagroda-gora .ikona { flex: none; width: 26px; height: 26px; }
.hk-nagroda-tekst { display: grid; gap: 3px; }
.hk-nagroda-tekst b { font-size: 16px; line-height: 1.25; }
.hk-nagroda-tekst small { font-size: 13px; line-height: 1.35; color: var(--tusz-2); }
.hk-poziomy { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hk-poziomy li { padding-top: 12px; border-top: calc(2px + var(--i) * 1.5px) solid var(--tusz); font-size: 13px; line-height: 1.3; color: #3F2E00; }
.hk-poziomy b { display: block; font-size: 14.5px; color: var(--tusz); }
.hk-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hk-drobne { font-size: 13px; color: #3F2E00; }
.hk-drobne a { color: inherit; }
.hk-maja { position: absolute; right: clamp(0px, 4vw, 64px); top: -6px; width: clamp(120px, 19vw, 250px); height: calc(100% + var(--hk-odstep) + 6px); object-fit: cover; object-position: center top; }
@media (max-width: 1000px) {
  .hk-siatka { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hk-poziomy { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 0; }
  .hk-poziomy li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top-width: 1px; }
  .hk-glowa { min-height: 0; }
  .hk-glowa > :not(.hk-maja) { max-width: none; }
  .hk-glowa > .hk-lead { padding-right: 108px; }
  .hk-akcje .przycisk { width: 100%; }
  .hk-maja { width: 104px; right: -4px; top: auto; bottom: calc(-1 * var(--hk-odstep)); height: 150px; }
}

/* Premium */
.hp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hp-tytul { font-size: var(--okl-2); line-height: .88; color: #fff; }
.hp-setka { margin-top: 20px; padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / .14); font-size: 15px; line-height: 1.4; max-width: 44ch; }
.hp-plany { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 12px; align-items: stretch; }
.hp-plan { display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 22px; border: 1.5px solid rgb(255 255 255 / .5); border-radius: var(--r-karta); }
.hp-plan-nazwa { font-size: 14.5px; font-weight: 650; }
.hp-plan-cena { font-size: clamp(48px, 5vw, 72px); }
.hp-plan-cena small { font-family: var(--font); font-size: 15px; font-weight: 600; }
.hp-plan-opis { font-size: 14px; line-height: 1.4; color: var(--tusz-2); }
.hp-plan ul { display: grid; gap: 9px; margin: 14px 0 22px; }
.hp-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.hp-plan li .ikona { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.hp-przycisk { margin-top: auto; }
.hp-plan:not(.hp-plan--premium) .hp-przycisk { background: none; border-color: #fff; color: #fff; }
.hp-plan:not(.hp-plan--premium) .hp-przycisk:hover { background: #fff; color: var(--malina); }
.hp-plan--premium { background: var(--biel); border-color: var(--biel); color: var(--tusz); }
.hp-plan--premium .hp-plan-cena { color: var(--malina); }
.hp-plan--premium li .ikona { color: var(--malina); }
@media (max-width: 1000px) { .hp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hp-plany { grid-template-columns: minmax(0, 1fr); } }

/* Magazyn */
.hm-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.hm-wiecej { margin-top: 24px; }
@media (max-width: 900px) { .hm-lista { grid-template-columns: minmax(0, 1fr); } }

/* ===== Beauty DNA bez konta (/beauty-dna/) ===== */

.bd-plansza { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px); gap: clamp(20px, 2.6vw, 36px) clamp(24px, 4vw, 64px); align-items: start; }
.bd-glowa { grid-column: 1; }
.bd-bok { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.bd-tytul { margin-top: 16px; font-size: clamp(52px, 7vw, 104px); line-height: .86; }
.bd-lead { margin-top: 16px; max-width: 56ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: #40365A; }
.bd-quiz { min-width: 0; }
.bd-postep { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: 13.5px; font-weight: 650; color: #5A4E77; }
.bd-pasek { flex: 1; max-width: 220px; height: 6px; border-radius: 3px; background: rgb(108 79 216 / .18); overflow: hidden; }
.bd-pasek i { display: block; height: 100%; width: 33%; border-radius: 3px; background: var(--dna); transition: width .35s var(--ease-out); }
.bd-krok { margin: 0; padding: 0; border: 0; min-width: 0; }
.bd-krok + .bd-krok { margin-top: 28px; }
.bd-krok[hidden] + .bd-krok, .bd-postep:not([hidden]) ~ .bd-krok { margin-top: 0; }
.bd-krok legend { padding: 0; margin-bottom: 14px; font-family: var(--font-okladka); font-weight: 800; font-size: var(--okl-3); line-height: .95; text-transform: uppercase; }
.bd-krok legend small { display: block; margin-top: 8px; font-family: var(--font); font-size: 15px; font-weight: 400; line-height: 1.3; text-transform: none; color: #5A4E77; }
.bd-wiecej { margin-top: 10px; }
.bd-wiecej summary { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; font-weight: 650; cursor: pointer; }
.bd-wiecej .odpowiedzi { margin-top: 6px; }
.bd-limit, .bd-blad { margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.bd-blad { color: #9A1740; }
.bd-ster { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; }
.bd-drobne { font-size: 13px; color: #5A4E77; }
.bd-bok { position: relative; display: grid; justify-items: center; }
.bd-maja { width: clamp(130px, 16vw, 220px); margin-bottom: clamp(-96px, -7vw, -60px); }
.bd-bok .hd-karta { z-index: 1; }

/* Po quizie plansza zwija się do nagłówka, wynik stoi tuż pod nią. */
.bd-plansza--wynik { display: block; padding-block: clamp(20px, 3vw, 36px); }
.bd-plansza--wynik .bd-quiz, .bd-plansza--wynik .bd-bok, .bd-plansza--wynik .bd-lead { display: none; }
.bd-plansza--wynik .bd-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.bd-plansza--wynik .bd-tytul { margin: 0; font-size: var(--okl-3); }

/* Duże karty odpowiedzi */
.odpowiedzi { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .odpowiedzi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .odpowiedzi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.odp-karta { position: relative; display: block; min-width: 0; }
.odp-karta input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.odp-karta > span {
  display: grid; align-content: start; gap: 4px; height: 100%; min-height: 72px; padding: 14px 40px 14px 16px;
  border: 1.5px solid transparent; border-radius: var(--r-karta); background: var(--biel); transition: border-color .15s, background-color .15s;
}
.odp-karta b { font-size: 16.5px; line-height: 1.2; }
.odp-karta small { font-size: 13.5px; line-height: 1.3; color: var(--tusz-2); }
.odp-karta > span::after {
  content: ""; position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--linia-2); background: var(--biel) center / 12px no-repeat;
}
.odp-karta:hover > span { border-color: var(--pl-akcent, var(--tusz)); }
.odp-karta input:checked + span { border-color: var(--pl-akcent, var(--tusz)); }
.odp-karta input:checked + span::after {
  box-shadow: none; background-color: var(--pl-akcent, var(--tusz));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.odp-karta input:focus-visible + span { outline: 2px solid var(--tusz); outline-offset: 2px; }
.odp-karta input:disabled { cursor: not-allowed; }
.odp-karta input:disabled + span { opacity: .45; }

/* Wynik */
main > section.bd { padding-bottom: 0; }
main > section.bd-wynik { padding-top: clamp(16px, 2vw, 24px); }
.bd-wynik { display: grid; gap: clamp(28px, 4vw, 56px); }
.bdw-czekaj { display: grid; gap: 14px; max-width: 520px; padding: 24px 0; font-size: 15px; color: var(--tusz-2); }
.kod--czeka i { animation: kod-czeka 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--w) * -90ms); }
@keyframes kod-czeka { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .kod--czeka i { animation: none; } }
.bdw-gora { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.bdw-kod { padding: clamp(18px, 2.4vw, 32px); }
.bdw-etykieta { font-size: 13.5px; font-weight: 650; color: var(--dna); }
.bdw-tytul { margin-top: 8px; font-size: clamp(38px, 4.4vw, 64px); line-height: .9; overflow-wrap: anywhere; }
.bdw-tytul em { font-style: normal; color: var(--dna); }
.kod--wynik { --kod-h: clamp(64px, 7vw, 92px); margin-top: 20px; gap: 4px; border-radius: 12px; }
.bdw-kod .kod-legenda { margin-top: 12px; }
.bdw-akcje { margin-top: 20px; }
.bdw-listy { display: grid; gap: 22px; }
.bdw-lista h3 { margin-bottom: 10px; font-size: 16px; }
.zetony { display: flex; flex-wrap: wrap; gap: 6px; }
.zetony a, .zetony span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 12px; border-radius: var(--r-pigulka);
  background: var(--mgla); font-size: 14.5px; font-weight: 600; color: var(--tusz); text-decoration: none;
}
.zetony a::before, .zetony span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k, var(--f-i)); }
.zetony a:hover { background: var(--linia); }
.zetony--uwaga span { background: var(--bursztyn-jasny); color: var(--bursztyn); }
.zetony--uwaga span::before { width: 12px; height: 10px; border-radius: 0; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.zetony--bez span { background: none; box-shadow: inset 0 0 0 1px var(--linia-2); color: var(--tusz-2); text-decoration: line-through; }
.zetony--bez span::before { display: none; }
.bdw-dobor .zakl { margin-bottom: 16px; }
.bdw-pusto { max-width: 60ch; padding: 20px 0; font-size: 16px; color: var(--tusz-2); }
.jak-link { padding: 0; border: 0; background: none; font: inherit; color: var(--malina); text-decoration: underline; cursor: pointer; }

/* Karta dobranego kosmetyku */
.dob-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dob { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 8px; height: 100%; padding: 14px 14px 16px; border: 1px solid var(--linia); border-radius: var(--r-karta); background: var(--biel); color: inherit; text-decoration: none; transition: border-color .15s, transform .25s var(--ease-out); }
.dob:hover { border-color: var(--tusz); transform: translateY(-2px); }
.dob-foto { position: relative; display: block; aspect-ratio: 4 / 3; }
.dob-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dob-nazwa { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dob-pasuje { display: flex; flex-wrap: wrap; align-content: start; gap: 4px 10px; font-size: 13px; line-height: 1.3; color: var(--tusz-2); }
.dob-pasuje span { display: inline-flex; align-items: center; gap: 6px; }
.dob-pasuje span::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--k, var(--f-i)); }
.dob-pasuje--brak { color: var(--tusz-3); }
.dob-dol { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dob-cena { font-size: 30px; }
.dob-cena small { font-size: .5em; font-weight: 700; }
.dob-sto { font-size: 12.5px; color: var(--tusz-3); white-space: nowrap; }
.dob-bl { font-size: 13px; font-weight: 650; color: var(--malina); }
@media (max-width: 1000px) { .dob-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Skórne bliźniaczki i zapis */
.bdw-osoby { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bdw-osoba { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; }
.bdw-osoba:hover { border-color: var(--tusz); }
.bdw-osoba-litera { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--dna-tlo); color: var(--dna); font-family: var(--font-okladka); font-weight: 800; font-size: 26px; }
.bdw-osoba b { display: block; font-size: 15.5px; }
.bdw-osoba small { font-size: 13px; color: var(--tusz-2); }
.bdw-zapisz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: clamp(22px, 3vw, 40px); }
.bdw-zapisz h2 { font-size: var(--okl-3); }
.bdw-zapisz p { margin-top: 8px; max-width: 52ch; font-size: 16.5px; color: #5B2A3D; }

/* Trzy karty (co zmienia DNA) */
.trojka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trojka-karta { display: grid; align-content: start; gap: 8px; padding: 22px; }
.trojka-karta > .ikona { width: 26px; height: 26px; margin-bottom: 6px; color: var(--dna); }
.trojka-karta p { font-size: 15px; line-height: 1.5; color: var(--tusz-2); }
.trojka-karta .dalej { margin-top: 6px; }
.bd-zastrzezenie { margin-top: 18px; max-width: 80ch; font-size: 13.5px; color: var(--tusz-3); }

@media (max-width: 900px) {
  .bd-plansza { grid-template-columns: minmax(0, 1fr); }
  .bd-bok { grid-column: 1; grid-row: 2; align-self: auto; display: block; margin-top: 6px; }
  .bd-quiz { grid-row: 3; }
  .bd-lead { padding-right: 96px; }
  .bd-maja { position: absolute; right: 2px; bottom: calc(100% - 40px); width: 92px; margin: 0; }
  .bd-ster .przycisk--duzy { flex: 1 1 auto; }
  .bdw-gora { grid-template-columns: minmax(0, 1fr); }
  .trojka { grid-template-columns: minmax(0, 1fr); }
  .bdw-zapisz .przycisk { width: 100%; }
}

/* ===== Odkrywaj (/odkrywaj/) ===== */
.ho-wiecej, .od-wiecej { margin-top: 22px; }
.od-glowa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.od-tytul { font-size: var(--okl-1); line-height: .84; }
.od-lead { max-width: 50ch; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; color: var(--tusz-2); }
.od-szukaj { max-width: none; margin-top: clamp(18px, 2.4vw, 28px); }
.od-narzedzia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.od-narzedzie { display: grid; align-content: start; gap: 6px; height: 100%; padding: 18px 18px 20px; color: inherit; text-decoration: none; transition: border-color .15s; }
.od-narzedzie:hover { border-color: var(--tusz); }
.od-narzedzie .ikona { width: 26px; height: 26px; margin-bottom: 6px; }
.od-narzedzie b { font-size: 17px; }
.od-narzedzie span { font-size: 14px; line-height: 1.4; color: var(--tusz-2); }
.od-dzialy { display: grid; margin-top: clamp(20px, 2.6vw, 32px); border-top: 1px solid var(--linia); }
.od-dzial { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 10px 24px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--linia); }
.od-dzial-nazwa { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-okladka); font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; text-transform: uppercase; color: var(--tusz); text-decoration: none; }
.od-dzial-nazwa .ikona { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.od-dzial-nazwa:hover { color: var(--malina); }
.od-dzial-nazwa:hover .ikona { transform: translateX(4px); }
.od-kategorie { display: flex; flex-wrap: wrap; gap: 6px; }
.od-kategorie a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 38px; padding: 8px 14px; border-radius: var(--r-pigulka); background: var(--mgla); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--tusz); text-decoration: none; }
.od-kategorie a:hover { background: var(--linia); }
.od-kategorie small { font-size: 12.5px; font-weight: 500; color: var(--tusz-3); font-variant-numeric: tabular-nums; }
.dzialania { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.dzialanie { padding: 20px 20px 22px; }
.dzialanie-nazwa { display: flex; align-items: center; gap: 10px; font-family: var(--font-okladka); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.dzialanie-nazwa::before { content: ""; flex: none; width: 10px; height: 24px; border-radius: 3px; background: var(--k); }
.dzialanie-opis { margin: 6px 0 14px; font-size: 14px; line-height: 1.4; color: var(--tusz-2); }
.dzialanie .zetony a { min-height: 34px; padding: 0 12px; font-size: 14px; }
.dzialanie .zetony a::before { display: none; }
.od-marki { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.od-marki a { display: grid; place-items: center; height: 76px; padding: 14px 18px; border: 1px solid var(--linia); border-radius: var(--r-karta); transition: border-color .15s; }
.od-marki a:hover { border-color: var(--tusz); }
.od-marka-logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 30px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: opacity .2s, filter .2s; }
.od-marki a:hover .od-marka-logo { filter: none; opacity: 1; }
@media (max-width: 900px) {
  .od-narzedzia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-narzedzie span { font-size: 13.5px; }
  .od-dzial { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .od-marki { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .od-marki a { height: 58px; padding: 10px 12px; }
  .od-marka-logo { max-height: 22px; }
}

/* ===== Premium (/premium/) ===== */
.pr-gora { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.pr-filar { --zn-tlo: rgb(255 255 255 / .16); --zn-tusz: #fff; }
.pr-tytul { margin-top: 16px; font-size: clamp(46px, 6.2vw, 92px); line-height: .86; color: #fff; }
.pr-lead { margin-top: 16px; max-width: 50ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: rgb(255 255 255 / .92); }
.pr-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.pr-przycisk-jasny { background: #fff; border-color: #fff; color: var(--malina); }
.pr-przycisk-jasny:hover { background: var(--tusz); border-color: var(--tusz); color: #fff; }
.pr-dalej, .pr-dalej:hover { color: #fff; }
.pr-dalej { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pr-przyklad { padding: 18px 20px 20px; border-color: transparent; color: var(--tusz); }
.pr-przyklad-glowa { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--tusz-2); }
.pr-przyklad li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linia); }
.pr-przyklad-foto { display: block; width: 52px; height: 52px; }
.pr-przyklad-nazwy { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; line-height: 1.3; color: var(--tusz-2); }
.pr-przyklad-nazwy b { font-size: 15px; color: var(--tusz); }
.pr-przyklad-nazwy span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-przyklad-proc { padding: 4px 9px; border-radius: var(--r-pigulka); background: var(--zielen-jasna); color: var(--zielen); font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pr-przyklad-suma { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 14px; font-weight: 600; }
.pr-przyklad-kwoty { display: inline-flex; align-items: baseline; gap: 10px; }
.pr-przyklad-kwoty .ikona { width: 16px; height: 16px; align-self: center; color: var(--tusz-3); }
.pr-teraz { font-size: 26px; color: var(--tusz-3); }
.pr-potem { font-size: 38px; color: var(--malina); }
.pr-przyklad-kwoty small { font-size: .5em; font-weight: 700; }

.pr-plany { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.pr-plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px 22px 22px; border-radius: var(--r-karta); }
.pr-plan-nazwa { font-size: 15px; font-weight: 650; }
.pr-plan-cena { font-size: clamp(56px, 5.4vw, 76px); }
.pr-plan-cena small { font-family: var(--font); font-size: 15px; font-weight: 600; }
.pr-plan-opis { margin-bottom: 22px; font-size: 15px; line-height: 1.45; color: var(--tusz-2); }
.pr-plan .przycisk { margin-top: auto; }
.pr-plan--glowny { background: var(--malina-tlo); border: 1.5px solid var(--malina); }
.pr-plan--glowny .pr-plan-cena { color: var(--malina); }
.pr-plan--glowny .pr-plan-opis b { color: var(--tusz); }
.pr-plan-znak { position: absolute; top: -13px; left: 20px; padding: 5px 12px; border-radius: var(--r-pigulka); background: var(--malina); color: #fff; font-size: 12.5px; font-weight: 650; }

/* Funkcje: trzy kolumny na komputerze, na telefonie każda funkcja z dwiema odpowiedziami pod spodem. */
.pr-funkcje { border-top: 1px solid var(--tusz); }
.pr-funkcje-glowa, .pr-funkcja { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--linia); }
.pr-funkcje-glowa { font-size: 13.5px; font-weight: 650; color: var(--tusz-2); }
.pr-funkcje-glowa span:last-child { color: var(--malina); }
.pr-funkcja { font-size: 15px; line-height: 1.4; }
.pr-funkcja-nazwa { font-weight: 600; }
.pr-funkcja small { display: none; }
.pr-funkcja-d { color: var(--tusz-2); }
.pr-funkcja-p { font-weight: 600; color: var(--tusz); }
.pr-tak { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--zielen-jasna); color: var(--zielen); }
.pr-tak .ikona { width: 14px; height: 14px; }
.pr-funkcja-p .pr-tak { background: var(--malina); color: #fff; }
.pr-nie { color: var(--tusz-3); }
.pr-po-funkcjach { margin-top: 24px; }

.pr-pytania { max-width: 860px; border-top: 1px solid var(--tusz); }
.pr-pytanie { border-bottom: 1px solid var(--linia); }
.pr-pytanie summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 4px; font-size: 17px; font-weight: 650; line-height: 1.3; cursor: pointer; list-style: none; }
.pr-pytanie summary::-webkit-details-marker { display: none; }
.pr-pytanie summary::after { content: "+"; flex: none; font-family: var(--font-okladka); font-weight: 800; font-size: 30px; line-height: 1; color: var(--malina); transition: transform .2s var(--ease-out); }
.pr-pytanie[open] summary::after { transform: rotate(45deg); }
.pr-pytanie p { max-width: 68ch; padding: 0 4px 20px; font-size: 16px; line-height: 1.6; color: var(--tusz-2); }

@media (max-width: 900px) {
  .pr-gora { grid-template-columns: minmax(0, 1fr); }
  .pr-akcje .przycisk { width: 100%; }
  .pr-plany { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pr-plan--glowny { order: -1; }
}
@media (max-width: 700px) {
  .pr-funkcje-glowa { display: none; }
  .pr-funkcja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 16px 0; align-items: start; }
  .pr-funkcja-nazwa { grid-column: 1 / -1; font-size: 16px; }
  .pr-funkcja small { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--tusz-3); }
  .pr-funkcja-p small { color: var(--malina); }
  .pr-funkcja-d, .pr-funkcja-p { font-size: 14.5px; }
}
@media (max-width: 520px) {
  .pr-przyklad-suma { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pr-teraz { font-size: 22px; }
  .pr-potem { font-size: 34px; }
}

/* Liczba osoby (roczna nadpłata z jej kosmetyków) obok ceny premium: widoczna tylko, gdy jest policzona. */
.pr-liczba { display: none; max-width: 440px; margin-top: 20px; padding: 16px 18px; border-color: transparent; color: var(--tusz); }
.pr-liczba.ma-liczbe { display: block; }
.pr-liczba-opis { font-size: 14px; color: var(--tusz-2); }
.pr-liczba-kwota { margin-top: 4px; font-size: clamp(40px, 4vw, 54px); color: var(--malina); }

/* ===== Karta kosmetyku i porównanie w systemie „Etykieta” ===== */

/* Nagłówek karty: zdjęcie i kod składu po lewej, nazwa, cena i akcje po prawej. */
.strona-kosmetyku .kosmetyk-glowa { padding-block: 16px clamp(28px, 4vw, 48px); }
.kg-siatka { gap: 20px clamp(24px, 4vw, 64px); margin-top: 18px; align-items: start; }
@media (min-width: 900px) {
  .kg-siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto 1fr; }
  .kg-kod { align-self: start; }
  .kg-foto { grid-column: 1; grid-row: 1; }
  .kg-kod { grid-column: 1; grid-row: 2; }
  .kg-info { grid-column: 2; grid-row: 1 / span 2; }
}
.kg-foto { background: var(--mgla); border-radius: var(--r-plansza); box-shadow: none; }
.kg-kod { padding: 16px 18px 18px; border: 1px solid var(--linia); border-radius: var(--r-karta); }
.kg-kod-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14px; }
.kg-kod-glowa b { font-family: var(--font-okladka); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.kg-kod-glowa a { color: var(--tusz-2); }
.kg-kod .kod--dokladny { --kod-h: clamp(40px, 5vw, 56px); }
.kg-kod .kod-legenda { margin-top: 12px; }
.kg-kod-opis { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--tusz-3); }
.kg-kod-opis a { color: var(--tusz-2); }

.kg-info { padding-top: 0; }
.kg-info h1 { margin-top: 6px; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.06; }
.kg-info h1.dlugi { font-size: clamp(26px, 2.7vw, 38px); }
.kg-info h1 .kg-marka { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 650; letter-spacing: 0; color: var(--tusz-2); }
.kg-cena { margin-top: 20px; }
.kg-cena b { font-family: var(--font-okladka); font-weight: 800; font-size: clamp(52px, 5vw, 68px); line-height: .9; letter-spacing: 0; }
.kg-blizniaczka { border-radius: var(--r-karta); }
.kg-skora { background: var(--dna-tlo); border-color: transparent; border-radius: var(--r-karta); color: #40365A; }
.kg-skora-tytul .ikona { fill: var(--dna); color: var(--dna); }

/* Drabinka z najlepszą bliźniaczką nad listą zamienników. */
.kg-drabinka { display: block; max-width: 880px; margin: 18px 0 20px; padding: 18px 20px 20px; border: 1px solid var(--linia); border-radius: var(--r-karta); color: inherit; text-decoration: none; transition: border-color .15s; }
.kg-drabinka:hover { border-color: var(--tusz); }
.kg-drabinka .drabinka { display: grid; --dr-h: clamp(28px, 3vw, 38px); --dr-odstep: clamp(32px, 3.4vw, 44px); }
.kg-drabinka .drabinka-podpis { font-size: 13.5px; color: var(--tusz); }
.kg-drabinka .drabinka-podpis > span:last-child { color: var(--tusz-2); }
.kg-drabinka-opis { display: block; margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--tusz-2); }
.kg-drabinka-opis b { color: var(--tusz); }
.kg-drabinka-opis .dalej { display: inline-flex; margin-left: 6px; font-size: 14.5px; }
.kg-drabinka:hover .dalej { color: var(--malina); }

/* Skład z etykiety: wąski druk, a podkreślenie składnika aktywnego ma kolor jego działania (ten sam co w kodzie). */
.etykieta { border-radius: var(--r-karta); }
.etykieta-tytul { letter-spacing: .03em; font-stretch: 80%; }
.etykieta-sklad { font-stretch: 80%; font-size: 15.5px; line-height: 1.8; }
.sk.aktywny { text-decoration-color: var(--fk, var(--tusz-3)); text-decoration-thickness: 3px; text-underline-offset: 4px; font-weight: 650; }
.sk.f-p { --fk: var(--f-p); } .sk.f-n { --fk: var(--f-n); } .sk.f-z { --fk: var(--f-z); } .sk.f-w { --fk: var(--f-w); }
.sk.f-u { --fk: var(--f-u); } .sk.f-f { --fk: var(--f-f); } .sk.f-h { --fk: var(--f-h); } .sk.f-i { --fk: var(--f-i); }

/* Lista składników aktywnych: bez ikon w szarych kwadratach, nazwa okładkowym krojem. */
.ak-lista { border-radius: var(--r-karta); }

@media (max-width: 899px) {
  .kg-siatka { display: flex; flex-direction: column; align-items: stretch; }
  .kg-foto { order: 1; aspect-ratio: 4 / 3; padding: 8% 20%; }
  .kg-info { order: 2; min-width: 0; }
  .kg-kod { order: 3; }
}

/* Składniki aktywne: zamiast ikony w szarym kwadracie prążek w kolorze działania (ten sam co w kodzie składu). */
.ak-lista .ak { position: relative; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 20px 16px 34px; }
.ak-lista .ak::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 6px; border-radius: 3px; background: var(--k, var(--f-i)); }
.ak-lista .ak-ikona { display: none; }
.ak-lista .ak-nazwa, .ak-lista .ak-opis { grid-column: 1; }
.ak-lista .ak-nazwa h3 { font-size: 17px; }
.ak-lista .ak-nazwa h3 a { text-decoration: underline; text-decoration-color: var(--linia-2); text-underline-offset: 4px; }

/* Sklepy pod przyciskiem: krótkie etykiety i linki jako małe kapsuły zamiast czterech linijek tekstu. */
.kg-info .kg-inny-sklep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 13.5px; color: var(--tusz-2); }
.kg-info .kg-inny-sklep a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--linia-2); border-radius: var(--r-pigulka); font-weight: 600; color: var(--tusz); text-decoration: none; }
.kg-info .kg-inny-sklep a:hover { border-color: var(--tusz); }
.kg-info .kg-hebe-dopisek { flex-basis: 100%; font-size: 12.5px; color: var(--tusz-3); }
.kg-info .kg-partner { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--tusz-3); }

/* Składniki aktywne pod kodem: nazwa i miejsce w składzie, kolor jak prążek. */
.kg-kod-aktywne { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.kg-kod-aktywne a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px 0 10px; border-radius: var(--r-pigulka); background: var(--mgla); font-size: 13.5px; color: var(--tusz); text-decoration: none; }
.kg-kod-aktywne a::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k, var(--f-i)); }
.kg-kod-aktywne a:hover { background: var(--linia); }
.kg-kod-aktywne b { font-weight: 600; }
.kg-kod-aktywne span { font-size: 12.5px; color: var(--tusz-3); font-variant-numeric: tabular-nums; }
.kg-kod-aktywne + .kod-legenda { display: none; }

/* Panel po „Mam ten kosmetyk”: roczna nadpłata na tym kosmetyku (liczy plan.js), suma listy i następny krok. */
.kg-moje { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-karta); background: var(--malina-tlo); }
.kg-moje-opis { font-size: 14.5px; line-height: 1.35; color: var(--tusz); }
.kg-moje-kwota { margin-top: 4px; font-size: clamp(38px, 3.6vw, 50px); color: var(--malina); }
.kg-moje-kwota--bez { color: var(--tusz); }
.kg-moje-para, .kg-moje-razem { margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: var(--tusz-2); }
.kg-moje-para a { color: var(--tusz); font-weight: 600; }
.kg-moje-razem b { color: var(--tusz); }
.kg-moje-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.kg-moje-konto { font-size: 14.5px; font-weight: 600; color: var(--tusz); }
.kg-moje-drobne { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--tusz-2); }
.strona-kosmetyku .kg-info > .kg-blizniaczka { margin-top: 14px; }

/* Oceny kosmetyku jednym dotknięciem: pytanie, trzy przyciski, wynik zbiorczy (pas w trzech kolorach). */
.kg-glosy { margin-top: 14px; padding: 14px 16px 16px; border: 1px solid var(--linia); border-radius: var(--r-karta); }
.kg-glosy-pytanie { font-size: 15px; font-weight: 650; }
.kg-glosy-opcje { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kg-glos {
  min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linia-2); border-radius: var(--r-pigulka); background: var(--biel);
  font-size: 14.5px; font-weight: 600; color: var(--tusz); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.kg-glos:hover { border-color: var(--tusz); }
.kg-glos:disabled { opacity: .6; cursor: default; }
.kg-glos[aria-pressed="true"] { background: var(--tusz); border-color: var(--tusz); color: #fff; }
.kg-glos--3[aria-pressed="true"] { background: var(--zielen); border-color: var(--zielen); }
.kg-glos--1[aria-pressed="true"] { background: var(--bursztyn); border-color: var(--bursztyn); }
.kg-glosy-wynik { display: grid; gap: 8px; margin-top: 12px; font-size: 14.5px; line-height: 1.4; color: var(--tusz-2); }
.kg-glosy-wynik b { color: var(--tusz); }
.kg-glosy-pas { display: flex; gap: 2px; height: 10px; }
.kg-glosy-pas i { flex: var(--w) 1 0; min-width: 0; border-radius: 3px; }
.kg-glosy-pas .kg-g3 { background: var(--zielen); }
.kg-glosy-pas .kg-g2 { background: var(--linia-2); }
.kg-glosy-pas .kg-g1 { background: var(--bursztyn); }
.kg-glosy-info { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--tusz-2); }
.kg-glosy-info a { color: var(--tusz); font-weight: 600; }

/* Alert ceny: pole i przycisk jeden pod drugim do 560 px (przycisk w nowym kroju jest szerszy). */
@media (max-width: 560px) { .kg-alert-wiersz { flex-direction: column; } .kg-alert-wiersz .przycisk { width: 100%; justify-content: center; } }

/* ===== Starsze strony w systemie „Etykieta”: poprawki tego, czego nie załatwiają same tokeny ===== */

/* Karty danych: linia zamiast cienia (stary token --cien był miękkim cieniem). Pływające elementy mają --cien-mocny. */
:root { --cien: 0 0 0 1px var(--linia-2); }

/* Plakietka nad tytułem strony: spokojna kapsuła bez kropki. */
.plakietka { padding: 6px 14px; background: var(--mgla); color: var(--tusz); font-size: 13.5px; font-weight: 650; }
.plakietka::before { display: none; }

/* Nagłówki starszych stron: tytuł okładkowy, długie nazwy zwykłym krojem. */
.lista-glowa h1 { font-size: var(--okl-2); line-height: .9; }
.pj-h1-oryginal { font-family: var(--font); font-stretch: 100%; text-transform: none; }
.konto-panel-glowa h1, .panel-kto h1 { font-size: var(--okl-3); line-height: .94; }
.sekcja-glowa h2 { font-size: var(--okl-3); line-height: .94; }
.dokument h1, .dokument h2, .dokument h3 { font-family: var(--font); text-transform: none; }

/* Karta logowania: płaski kolor zamiast wygenerowanego zdjęcia. */
.wejscie-karta { border-color: var(--linia); border-radius: var(--r-plansza); box-shadow: none; }
.wejscie-wizual { background: var(--malina-tlo); }
.wejscie-wizual .plakietka { background: var(--biel); }
.wejscie-naglowek { font-size: var(--okl-3); line-height: .92; }
.wejscie-wizual { overflow: hidden; }
.wejscie-maja { align-self: flex-end; width: clamp(150px, 16vw, 230px); margin: auto 0 calc(-1 * clamp(28px, 4vw, 48px) - 60px); }
@media (max-width: 900px) { .wejscie-maja { display: none; } }

/* Magazyn (Beauty News): nagłówek bez tablicy i ściany. */
.mg-glowa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin: 8px 0 clamp(24px, 3vw, 40px); }
.mg-tytul { font-size: var(--okl-1); line-height: .84; }
.mg-lead { max-width: 52ch; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.5; color: var(--tusz-2); }
.bn-karta-tytul { font-family: var(--font); font-weight: 650; text-transform: none; letter-spacing: -.015em; }
.bn-wyrozniony .bn-karta-tytul { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.bn-tekst h2, .bn-tekst h3, .bn-skrot h2, .bn-zrodla h2 { font-family: var(--font); font-weight: 650; text-transform: none; letter-spacing: -.015em; line-height: 1.15; }
.bn-tekst h2 { font-size: clamp(24px, 2.4vw, 32px); }
.bn-naglowek h1, .bn-artykul h1 { font-family: var(--font); font-weight: 650; text-transform: none; letter-spacing: -.02em; line-height: 1.06; }

/* Porównanie: drabinka pod nagłówkiem pary. */
.pj-drabinka { margin-top: clamp(20px, 3vw, 32px); padding: 18px 20px 20px; border: 1px solid var(--linia); border-radius: var(--r-karta); background: var(--biel); }
.pj-drabinka .drabinka { --dr-h: clamp(30px, 3.4vw, 44px); --dr-odstep: clamp(34px, 4vw, 52px); }
.pj-drabinka .drabinka-podpis { font-size: 13.5px; color: var(--tusz); }
.pj-drabinka-dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 14px; }
.pj-drabinka-dol p { font-size: 14.5px; color: var(--tusz-2); }
.pj-drabinka-dol b { color: var(--tusz); }

/* Stara stopka i stary pasek menu nie istnieją w nowej powłoce; gdyby jakaś strona je jeszcze miała, chowamy je. */
.menu-dzialow, .naglowek:not(.gora) { display: none; }

/* Beauty Swap (/wymiany/): nagłówek jako plansza filaru. */
.wymiany-arkusz { padding-block: clamp(16px, 2.4vw, 32px) 0; }
.wymiany-arkusz > .arkusz-srodek { padding: clamp(22px, 4vw, 56px); border-radius: var(--r-plansza); background: var(--swap-tlo); }
.wymiany-arkusz .plakietka { background: var(--swap); color: #fff; }
.wymiany-arkusz h1 { margin-top: 16px; font-size: var(--okl-2); line-height: .88; max-width: 12ch; }
.wymiany-arkusz .lead { color: #24504A; }
.wymiany-arkusz .przycisk--glowny { background: var(--tusz); border-color: var(--tusz); }
.wymiany-arkusz .przycisk--glowny:hover { background: #000; border-color: #000; }
.wymiany-arkusz .krok { border-top-color: var(--swap); }
.wymiany-arkusz .krok-nr { font-family: var(--font-okladka); font-weight: 800; font-size: 40px; line-height: 1; color: var(--swap); }
.wymiany-arkusz .krok h3 { margin-top: 6px; }
.wymiany-arkusz + .arkusz > .arkusz-srodek { border-top: 0; }

/* Premium (/premium/): nagłówek z ceną okładkowym krojem. */
.premium-glowa h1 { font-size: var(--okl-2); line-height: .88; }
.cennik-karta { border-radius: var(--r-karta); box-shadow: none; }
.cennik-cena { font-size: clamp(44px, 4.4vw, 60px); line-height: .9; }
.cennik-cena small { font-family: var(--font); font-size: 14px; font-weight: 600; }

/* Kod składu na kartach list. */
.kk-kod { margin-top: 10px; }

/* Konto: nagłówki bez ozdobnych kół. */
.konto-panel-glowa::before, .konto-panel-glowa::after, .konto-panel .panel-witaj::before, .konto-panel .panel-witaj::after, .profil-karta::before, .profil-karta::after { display: none; }

/* Profil twórczyni: kod Beauty DNA w ramce skóry. */
.profil-skora { border-color: transparent; background: var(--dna-tlo); }
.profil-skora span { color: var(--dna); }
.profil-kod { --kod-h: 22px; width: min(280px, 100%); margin-top: 8px; border-radius: 6px; }

/* Jak liczymy (/jak-liczymy-blizniaczki/): kod składu na przykładzie, kroki, szczegóły. */
.jl-tytul { font-size: var(--okl-1); line-height: .84; max-width: 12ch; }
.jl-lead { margin-top: 18px; max-width: 56ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--tusz-2); }
.jl-kod { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.jl-przyklad { padding: 18px 20px 20px; }
.jl-przyklad .drabinka { --dr-h: clamp(30px, 3.4vw, 46px); --dr-odstep: clamp(34px, 4vw, 54px); }
.jl-przyklad .drabinka-podpis { font-size: 13.5px; color: var(--tusz); }
.jl-przyklad-opis { margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--tusz-2); }
.jl-przyklad-opis b { color: var(--tusz); }
.jl-przyklad-opis .dalej { display: inline-flex; margin-left: 4px; font-size: 14.5px; }
.jl-zasady { display: grid; gap: 14px; counter-reset: jl; }
.jl-zasady li { position: relative; padding-left: 44px; font-size: 15.5px; line-height: 1.5; color: var(--tusz-2); counter-increment: jl; }
.jl-zasady li::before { content: counter(jl); position: absolute; left: 0; top: -2px; width: 30px; font-family: var(--font-okladka); font-weight: 800; font-size: 34px; line-height: 1; color: var(--malina); }
.jl-zasady b { color: var(--tusz); }
.jl-legenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: clamp(20px, 3vw, 32px); }
.jl-legenda li { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 30px; border: 1px solid var(--linia); border-radius: var(--r-pole); font-size: 13.5px; line-height: 1.35; color: var(--tusz-2); }
.jl-legenda li::before { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 6px; border-radius: 3px; background: var(--k); }
.jl-legenda b { font-size: 15px; color: var(--tusz); }
.jl-dna { margin-top: 18px; font-size: 15.5px; color: var(--tusz-2); }
.jl-kroki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jl-krok { padding: 20px 22px 22px; border: 1px solid var(--linia); border-radius: var(--r-karta); }
.jl-krok-nr { font-size: 56px; color: var(--malina); }
.jl-krok h3 { margin: 8px 0 6px; }
.jl-krok p:last-child { font-size: 15px; line-height: 1.5; color: var(--tusz-2); }
.jl-szczegoly .jak-szczegoly { max-width: 820px; }
.jl-szczegoly .jak-szczegoly h3 { margin: 26px 0 8px; font-size: 19px; }
.jl-szczegoly .jak-szczegoly p { font-size: 16px; line-height: 1.65; color: var(--tusz-2); }
.jl-szczegoly .jak-szczegoly summary { font-family: var(--font-okladka); font-weight: 800; font-size: var(--okl-3); line-height: 1; text-transform: uppercase; list-style: none; cursor: pointer; }
.jl-szczegoly .jak-szczegoly summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .jl-kod, .jl-kroki { grid-template-columns: minmax(0, 1fr); }
}

/* Lista marzeń korzysta z układu nagłówka Beauty Swap, ale należy do Klubu: plansza w kolorze Klubu. */
.strona-lista-marzen .wymiany-arkusz > .arkusz-srodek { background: var(--klub-tlo); }
.strona-lista-marzen .wymiany-arkusz .plakietka { background: var(--tusz); color: var(--klub); }
.strona-lista-marzen .wymiany-arkusz .lead { color: #3F2E00; }
.strona-lista-marzen .wymiany-arkusz .krok { border-top-color: var(--tusz); }
.strona-lista-marzen .wymiany-arkusz .krok-nr { color: var(--klub-tusz); }

/* Karta logowania: co osoba ma już na tym urządzeniu (kosmetyczka, policzona nadpłata). */
.wejscie-czeka { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-pole); background: var(--biel); font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--tusz); }

/* Porównanie: kod składu obu kosmetyków zaraz pod nagłówkiem. */
main > section.pj-kod { padding-block: 0 clamp(8px, 1.4vw, 16px); }
.pj-kod .pj-drabinka { margin-top: 0; }
.pj-decyzja .kg-moje { max-width: 520px; }

/* Pola dotyku co najmniej 32 px: link do pełnego składu przy kodzie i „Nie pamiętasz hasła?”. */
.kg-kod-glowa a { display: inline-flex; align-items: center; min-height: 32px; }
.logowanie-link { min-height: 32px; }

/* ===== Ekrany narzędzi (DESIGN.md „Studio Mai”, od 13.11.2026 wieczorem) =====
   .ek wypełnia kartę ekranu; rozmiary liczone od jej wysokości (cqh), więc całość mieści się bez przewijania
   od 1280×720 do 1920×1080. Na telefonie ekran przewija się w środku, a sekcje stoją jedna pod drugą. */

.ek { position: absolute; inset: 0; display: grid; gap: clamp(12px, 1.8cqw, 22px); padding: clamp(12px, 2.2cqh, 24px); }
.sr, .ek .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----- Start ----- */
.ek--start { grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr); }
.sx-panel { display: flex; flex-direction: column; min-height: 0; padding: clamp(20px, 4cqh, 44px) clamp(20px, 2.8cqw, 40px) clamp(16px, 3cqh, 32px); }
.sx-tytul { margin: 0; font-size: clamp(30px, 6.6cqh, 60px); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.sx-lead { margin: clamp(8px, 1.6cqh, 16px) 0 clamp(14px, 3cqh, 28px); max-width: 42ch; font-size: clamp(14px, 1.9cqh, 17px); line-height: 1.45; color: var(--tusz-2); }
.sx-szukaj { position: relative; flex: none; }
.sx-szukaj input {
  width: 100%; height: clamp(54px, 8cqh, 68px); padding: 0 56px 0 56px; border: 0; border-radius: 20px; outline: none;
  background: #fff; color: var(--tusz); font: 650 clamp(16px, 2.2cqh, 19px)/1 var(--font);
  box-shadow: inset 0 0 0 2.5px var(--tusz), 0 10px 24px rgb(140 30 80 / .1); transition: box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.sx-szukaj input::placeholder { color: var(--tusz-3); font-weight: 500; }
.sx-szukaj input:focus { box-shadow: inset 0 0 0 3px var(--malina), 0 0 0 6px rgb(200 32 94 / .14), 0 10px 24px rgb(140 30 80 / .12); }
.sx-szukaj input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sx-lupa { position: absolute; left: 20px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; color: var(--malina); pointer-events: none; }
.sx-skrot {
  position: absolute; right: 16px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; background: var(--mgla); color: var(--tusz-3); font: 800 14px/1 var(--font-naglowki);
}
.sx-szukaj:focus-within .sx-skrot { opacity: 0; }
.sx-dol { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: clamp(12px, 2.6cqh, 26px); }
.sx-pusto { display: flex; flex-direction: column; gap: clamp(8px, 1.4cqh, 12px); }
.sx-podpis { margin: 0; font: 800 12px/1 var(--font-naglowki); letter-spacing: .07em; text-transform: uppercase; color: var(--tusz-3); }
.sx-chipy {
  flex: none; display: flex; gap: 6px; margin: clamp(10px, 1.8cqh, 16px) -4px 0; padding: 2px 4px; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent);
}
.sx-chipy::-webkit-scrollbar { display: none; }
.sx-chipy li { flex: none; }
.sx-chipy .chip-wybor { height: 32px; padding: 0 12px; font-size: 13.5px; }
.sx-sposoby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sx-sposob {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 10px; border-radius: 16px;
  background: var(--mgla); color: var(--tusz); text-decoration: none; transition: background-color .15s, transform .2s var(--ease-out);
}
.sx-sposob:hover { background: var(--malina-tlo); transform: translateY(-2px); }
.sx-sposob > span:last-child { min-width: 0; }
.sx-sposob-ik { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #fff; color: var(--malina); box-shadow: 0 4px 10px rgb(140 30 80 / .1); }
.sx-sposob-ik .ikona { width: 55%; height: 55%; }
.sx-sposob b { display: block; font: 800 13.5px/1.1 var(--font-naglowki); }
.sx-sposob small { display: none; }
.sx-pusto { flex: 1; min-height: 0; }
.sx-pusto > .sx-podpis { margin-top: clamp(4px, 1cqh, 10px); }
.sx-przyklady { flex: 1; }
.sx-ile { flex: none; margin: 0 0 8px; font-size: 13.5px; color: var(--tusz-2); }
.sx-ile b { color: var(--tusz); }
.sx-wyniki {
  flex: 1; min-height: 0; margin: 0 -8px; padding: 0 4px 0 0; list-style: none; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgb(200 32 94 / .25) transparent;
}
.sx-wyniki { -webkit-mask: linear-gradient(#000 calc(100% - 28px), transparent); mask: linear-gradient(#000 calc(100% - 28px), transparent); padding-bottom: 24px; }
.sx-wyniki::-webkit-scrollbar { width: 8px; }
.sx-wyniki::-webkit-scrollbar-thumb { background: rgb(200 32 94 / .22); border-radius: 8px; }
.sx-wynik {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 10px 7px 8px;
  border-radius: 16px; color: var(--tusz); text-decoration: none; transition: background-color .12s;
}
[aria-selected="true"] > .sx-wynik { background: var(--malina-tlo); }
.sx-wynik-foto { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--linia); overflow: hidden; }
.sx-wynik-foto img { width: 86%; height: 86%; object-fit: contain; }
.sx-wynik-foto--typ { background: var(--mieta); color: var(--mieta-tusz); font-size: 18px; box-shadow: none; }
.sx-wynik-tekst { display: grid; gap: 2px; min-width: 0; }
.sx-wynik-nazwa { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; line-height: 1.25; }
.sx-wynik-nazwa b { font-weight: 800; }
.sx-wynik-tekst small { font-size: 12.5px; color: var(--tusz-2); font-variant-numeric: tabular-nums; }
.sx-znak {
  display: inline-grid; place-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pigulka);
  background: var(--malina); color: #fff; font: 800 13.5px/1 var(--font-naglowki); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sx-znak--sama { background: var(--mieta); color: var(--mieta-tusz); }
.sx-znak--typ { background: var(--mgla); color: var(--tusz-2); }

/* Scena Startu: para jak miniatura, Maja w lewym dolnym rogu. */
.scena { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--r-plansza); }
.sx-scena { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); }
.sx-scena-tresc { position: relative; z-index: 1; grid-column: 2; grid-row: 1; display: grid; place-items: center; padding: clamp(14px, 3cqh, 32px) clamp(14px, 2.4cqw, 32px) clamp(40px, 7cqh, 64px) 0; }
.sx-maja { position: relative; z-index: 2; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; padding-left: clamp(10px, 1.6cqw, 22px); }
.sx-maja-img { display: block; width: 100%; max-width: 250px; height: auto; max-height: 60cqh; object-fit: contain; object-position: left bottom; margin-bottom: -2px; }
.sx-dymek { position: relative; z-index: 3; width: auto; max-width: 250px; margin-right: 6px; font-size: clamp(13px, 1.8cqh, 15px); }
.sx-dymek::after { left: 40px; right: auto; }

/* Para „Zamień na tańsze” (Start, podgląd wyniku). */
.duo { display: grid; justify-items: center; align-content: center; gap: clamp(8px, 1.8cqh, 18px); width: 100%; max-width: 640px; }
.duo-etykieta { margin: 0; font-size: clamp(13px, 1.8cqh, 16px); }
.duo-procent { font-size: clamp(46px, 10.5cqh, 104px); margin: -.06em 0 clamp(0px, .6cqh, 6px); }
.duo-para { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(8px, 1.6cqw, 22px); width: 100%; }
.duo-karta { aspect-ratio: 5 / 6; width: 100%; max-height: 38cqh; margin-inline: auto; }
.duo-karta--o { rotate: -2deg; }
.duo-karta--b { rotate: 2deg; border-color: var(--malina); }
.duo-cena { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; font-size: clamp(16px, 2.8cqh, 26px); }
.duo-strzalka { color: var(--malina); }
.strzalka-sceny { display: block; width: clamp(40px, 6cqw, 76px); height: auto; filter: drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff); }
.duo-nazwy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6cqw, 80px); width: 100%; margin: clamp(14px, 2.6cqh, 26px) 0 0; font-size: clamp(12.5px, 1.7cqh, 14.5px); line-height: 1.3; text-align: center; color: var(--tusz-2); }
.duo-nazwy b { color: var(--tusz); font-weight: 800; }
.duo-nazwy--jedna { grid-template-columns: 1fr; }
.duo-akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(2px, .8cqh, 8px) 0 0; }
.solo { display: grid; justify-items: center; align-content: center; gap: clamp(8px, 1.8cqh, 18px); width: 100%; max-width: 520px; text-align: center; }
.solo-karta { aspect-ratio: 5 / 6; width: min(62%, 300px); max-height: 46cqh; }
.solo-duze { margin: 0; font: 800 clamp(32px, 7cqh, 64px)/1 var(--font-naglowki); letter-spacing: -.02em; color: var(--tusz); text-wrap: balance; }
.solo-ile { margin: 0; font-size: clamp(14px, 2cqh, 18px); color: var(--tusz-2); max-width: 34ch; }
.solo-ile .liczba { font-size: 1.5em; color: var(--malina); }

/* ----- Karta kosmetyku: scena (zdjęcie, cena, bilet do bliźniaczki, Maja) i panel z zakładkami ----- */
.ek--karta { grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); }
.kx-scena {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(104px, 30%, 200px); grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: 6px; row-gap: clamp(8px, 1.6cqh, 14px); padding: clamp(14px, 2.4cqh, 24px);
}
.kx-foto { position: relative; z-index: 1; grid-column: 1; grid-row: 1; min-height: 0; container-type: size; }
.kx-karta {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: min(96cqh, 470px, 100cqw * 1.1); aspect-ratio: 5 / 6;
  background: #fff; border: 4px solid var(--tusz); border-radius: 28px; box-shadow: 0 18px 40px rgb(120 30 70 / .18); rotate: -1.5deg;
}
.kx-karta > .opakowanie { position: absolute; inset: 9% 9% 12%; width: auto; height: auto; }
.kx-cena { position: absolute; left: -14px; bottom: 16px; font-size: clamp(24px, 4.4cqh, 36px); }
.kx-maja { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / 3; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-bottom: -34px; }
.kx-maja-img { display: block; width: 100%; height: auto; max-height: 58cqh; object-fit: contain; object-position: right bottom; }
.kx-dymek { width: max-content; max-width: 210px; margin-right: 8px; font-size: clamp(13px, 1.8cqh, 15px); }
.kx-pigulki { position: relative; z-index: 1; grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.kx-pigulki b { font-weight: 800; }
.kx-bilet {
  position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 18px 10px 10px; border: 3px solid var(--malina); border-radius: 22px; background: #fff; color: var(--tusz); text-decoration: none;
  box-shadow: 0 14px 30px rgb(160 16 74 / .18); transition: transform .2s var(--ease-out), box-shadow .2s;
}
.kx-bilet:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgb(160 16 74 / .24); }
.kx-bilet-foto { position: relative; display: block; width: clamp(54px, 9cqh, 76px); aspect-ratio: 1; border-radius: 14px; background: var(--mgla); }
.kx-bilet-foto > .opakowanie { position: absolute; inset: 6px; width: auto; height: auto; }
.kx-bilet-tekst { display: grid; gap: 3px; min-width: 0; }
.kx-bilet-co { font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--malina); }
.kx-bilet-nazwa { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; line-height: 1.25; }
.kx-bilet-nazwa b { font-weight: 800; }
.kx-bilet-cena { font-size: 13px; color: var(--tusz-2); }
.kx-bilet-cena b { font-size: 15px; color: var(--tusz); }
.kx-bilet-proc { font: 800 clamp(30px, 5.6cqh, 48px)/1 var(--font-naglowki); letter-spacing: -.02em; color: var(--malina); }
.kx-bilet--oryginal { border-color: var(--mieta-tusz); }
.kx-bilet--oryginal .kx-bilet-co, .kx-bilet--oryginal .kx-bilet-proc { color: var(--mieta-tusz); }

.kx-panel { display: flex; flex-direction: column; min-height: 0; padding: clamp(16px, 3cqh, 30px) clamp(18px, 2.4cqw, 32px) clamp(10px, 1.8cqh, 18px); }
.kx-glowa { flex: none; }
.kx-panel .okruszki { margin: 0 0 clamp(8px, 1.6cqh, 16px); }
.kx-panel .okruszki ol { flex-wrap: nowrap; overflow: hidden; font-size: 12.5px; white-space: nowrap; }
.kx-panel .okruszki li { flex: none; }
.kx-panel .okruszki li:nth-last-child(2) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kx-panel .okruszki li:nth-last-child(2)::after, .kx-panel .okruszki [aria-current] { display: none; }
.kx-panel .okruszki a { display: inline-block; padding-block: 6px; margin-block: -4px; }
.kx-tytul { margin: 0; font-size: clamp(24px, 4.4cqh, 38px); line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; }
.kx-tytul--dlugi { font-size: clamp(20px, 3.4cqh, 29px); line-height: 1.1; }
.kx-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(10px, 2cqh, 18px) 0 0; }
.kx-akcje .przycisk { min-height: 46px; }
.kx-panel .kg-moje { margin-top: 10px; padding: 12px 14px; }
.kx-panel .kg-moje-kwota { font-size: clamp(28px, 4cqh, 40px); }
.kx-panel .karty { flex: 1; min-height: 0; margin-top: clamp(12px, 2.2cqh, 20px); }
.kx-pusto { margin: 0; font-size: 14px; color: var(--tusz-2); }

/* Treść w zakładkach: dawne sekcje strony, ściśnięte do panelu. */
.karty:not(.karty--js) .karty-panele { overflow-y: auto; }
.karty-panele > [role="tabpanel"]:focus-visible { outline: 2px solid var(--malina); outline-offset: -2px; border-radius: 12px; }
.ek .karty-panele .sekcja-glowa { margin: 0 0 12px; }
.ek .karty-panele .sekcja-glowa h2 { font-size: clamp(19px, 2.8cqh, 23px); line-height: 1.15; }
.ek .karty-panele .sekcja-glowa .dopisek { margin-top: 4px; font-size: 13.5px; }
.ek .karty-panele section + section { margin-top: 22px; }
.ek .karty-panele .kg-drabinka { margin: 0 0 14px; padding: 14px 16px; }
.ek .karty-panele .kg-kod { margin-bottom: 16px; }
.ek .karty-panele .kg-sklad .sekcja-glowa { margin-top: 0; }

/* ----- Porównanie: scena jak miniatura (scena Startu) i panel karty ----- */
.ek--para { grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); }
.duo-foto > .opakowanie { position: absolute; inset: 10%; width: auto; height: auto; }
.duo-rola { display: block; margin-bottom: 3px; font: 800 11.5px/1 var(--font-naglowki); letter-spacing: .07em; text-transform: uppercase; color: var(--tusz-3); }
.duo-nazwy > span:last-child .duo-rola { color: var(--malina); }
.duo-akcje .pigulka-biala b { font-weight: 800; color: var(--malina); }
.duo-akcje .pigulka-mieta .ikona { width: 15px; height: 15px; }
.px-tytul { margin: 0; font-size: clamp(22px, 4cqh, 34px); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.px-lead { margin: clamp(6px, 1.2cqh, 10px) 0 0; font-size: 14.5px; line-height: 1.45; color: var(--tusz-2); }
.px-lead b { color: var(--malina); }
.kx-pasek { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 clamp(8px, 1.6cqh, 16px); }
.kx-pasek .okruszki { flex: 1; min-width: 0; margin: 0; }
.kx-udostepnij { flex: none; min-height: 34px; padding: 0 12px; gap: 6px; font-size: 13px; }
.kx-udostepnij .ikona { width: 15px; height: 15px; }

/* Przelatujące zdjęcie z listy na kartę (app.js nadaje nazwy, PRZEJSCIA dokłada klasy vt-*). */

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .ek--start { grid-template-columns: minmax(330px, 1fr) minmax(0, 1fr); }
  .sx-sposob small { display: none; }
  .ek--karta { grid-template-columns: minmax(0, .85fr) minmax(410px, 1.15fr); }
  .karty-lista [role="tab"] { padding: 0 10px; font-size: 13.5px; }
  .ek--para { grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); }
  .px-lead { display: none; }
  .kx-akcje .przycisk { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
}

/* ----- Telefon i tablet: sekcje jedna pod drugą, ekran przewija się w środku ----- */
@media (max-width: 1023.98px) {
  .ek { position: static; display: block; padding: 10px; }
  .ek > * + * { margin-top: 10px; }
  .sx-panel { padding: 22px 18px 18px; }
  .sx-tytul { font-size: clamp(30px, 8.6vw, 44px); }
  .sx-lead { font-size: 15px; margin: 10px 0 16px; }
  .sx-szukaj input { height: 56px; font-size: 16px; }
  .sx-skrot { display: none; }
  .sx-szukaj input { padding-right: 16px; padding-left: 50px; }
  .sx-lupa { left: 18px; }
  .sx-sposoby { gap: 8px; }
  .sx-sposob { flex-direction: column; gap: 6px; height: auto; padding: 10px 6px; text-align: center; }
  .sx-sposob b { font-size: 13px; }
  .sx-dol { margin-top: 16px; }
    .sx-wyniki { overflow: visible; margin: 0 -6px; }
  .sx-scena { min-height: 420px; grid-template-columns: 100px minmax(0, 1fr); }
  .sx-scena-tresc { padding: 18px 12px 52px 0; }
  .sx-maja-img { height: 210px; }
  .sx-dymek { position: relative; left: auto; bottom: auto; max-width: none; margin: 0 0 10px; font-size: 13.5px; display: none; }
  .duo-karta { max-height: none; }
  .duo-procent { font-size: 52px; }
  .duo-nazwy { gap: 18px; font-size: 12.5px; }
  .ek--start.szuka .sx-scena { display: none; }
  .kx-scena { grid-template-columns: minmax(0, 1fr) 100px; grid-template-rows: 240px auto auto; padding: 14px; }
  .kx-maja { margin-bottom: -30px; }
  .kx-maja-img { max-height: 180px; }
  .kx-pigulki { justify-content: flex-start; }
  .kx-pigulki > :nth-child(2) { display: none; }
  .kx-dymek { max-width: 170px; font-size: 13px; }
  .kx-cena { font-size: 26px; }
  .kx-bilet { padding: 8px 12px 8px 8px; gap: 10px; }
  .kx-bilet-proc { font-size: 30px; }
  .kx-panel { padding: 18px 16px 16px; }
  .kx-tytul { font-size: clamp(24px, 7vw, 32px); }
  .kx-tytul--dlugi { font-size: clamp(21px, 6vw, 26px); }
  .kx-akcje .przycisk { flex: 1 1 auto; justify-content: center; }
  .karty--js .karty-panele > [role="tabpanel"] { position: static; overflow: visible; padding-right: 0; }
}

/* ===== Stare klocki w ekranach narzędzi (od 13.11.2026 wieczorem) =====
   Celowe nadpisania klas ze styl.css w panelach i zakładkach karty kosmetyku i porównania (kolizje-klas.mjs pomija ten plik). */
.kx-karta > .opakowanie--brak { inset: 18%; }
.kx-tytul .kg-marka { display: block; margin-bottom: 6px; font: 800 12.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--malina); }
.kx-panel .kg-fakty { margin-top: clamp(6px, 1.2cqh, 10px); font-size: 13.5px; }
.kx-panel .kg-odcienie { margin-top: 10px; }
.kx-panel .kg-odcienie-lista { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ek .karty-panele .odpowiedz { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--tusz-2); }
.ek .karty-panele .wp-lista { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ek .karty-panele .wp { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px 10px 10px; }
.ek .karty-panele .kg-skora, .ek .karty-panele .kg-glosy, .ek .karty-panele .kg-alert { margin: 0 0 12px; }
.ek .karty-panele .kg-plan { margin: 4px 0 0; font-weight: 700; }
.ek .karty-panele .kg-plan a { display: inline-flex; align-items: center; gap: 6px; color: var(--malina); }
.ek .karty-panele .kg-plan .ikona { width: 16px; height: 16px; }
.ek .karty-panele .kg-inny-sklep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font-size: 13.5px; color: var(--tusz-2); }
.ek .karty-panele .kg-inny-sklep > span:first-child { flex-basis: 100%; font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.ek .karty-panele .kg-inny-sklep a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pigulka); background: #fff; box-shadow: inset 0 0 0 1.5px var(--linia-2); font-weight: 700; color: var(--tusz); text-decoration: none; }
.ek .karty-panele .kg-inny-sklep a:hover { box-shadow: inset 0 0 0 1.5px var(--malina); color: var(--malina); }
.ek .karty-panele .kg-hebe-dopisek { flex-basis: 100%; font-size: 12.5px; color: var(--tusz-3); }
.ek .karty-panele .kg-hebe .kg-hebe-dopisek:first-child { font: inherit; letter-spacing: 0; text-transform: none; }
.ek .karty-panele .kg-partner, .ek .karty-panele .zrodlo { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tusz-3); }
.px-tytul .pj-h1-oryginal { display: block; margin-bottom: 8px; font: 800 12.5px/1.35 var(--font-naglowki); letter-spacing: .04em; text-transform: uppercase; color: var(--malina); text-wrap: pretty; }
.px-panel .pj-producent { margin: 8px 0 0; font-size: 13px; color: var(--tusz-3); }
.px-panel .pj-producent a { font-weight: 700; color: var(--tusz); }
.ek .karty-panele .pj-ocena { margin: 0 0 14px; }
.ek .karty-panele .pj-werdykt-tekst p { font-size: 14.5px; line-height: 1.55; }
.ek .karty-panele .pj-werdykt-tekst p + p { margin-top: 10px; }
.ek .karty-panele .pj-dalej { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; padding: 0; }
.ek .karty-panele .pj-sklady-glowa { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.ek .karty-panele .pj-sklady-glowa .sekcja-glowa { margin: 0; }
.ek .karty-panele .pj-mapa-glowa { position: static; }
.ek .karty-panele .para-etykiet { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ek .karty-panele .pj-inci-tytul { margin: 0 0 10px; }
.ek .karty-panele .pj-inci-tytul h3 { margin: 0; font-size: 19px; }
.ek .karty-panele .karuzela { margin-inline: 0; }
.vt-kosmetyk .px-scena .duo-karta--o .opakowanie { view-transition-name: kosmetyk; }
.vt-blizniaczka .px-scena .duo-karta--b .opakowanie { view-transition-name: blizniaczka; }
.vt-kosmetyk .kx-karta > .opakowanie { view-transition-name: kosmetyk; }
.vt-blizniaczka .kx-bilet-foto > .opakowanie { view-transition-name: blizniaczka; }
/* Skan półki (94-skan-polki.css): lista par w panelu ciaśniej niż na starej stronie, przycisk „Z galerii” tylko na dotyku. */
.sp-lista .para-k { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; padding: 6px; border-radius: 18px; }
.sp-lista .para-k-strona { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 6px; border-radius: 13px; }
.sp-lista .para-k-foto { width: 48px; height: 54px; border-radius: 11px; }
.sp-lista .para-k-nazwa { font-size: 13.5px; }
.sp-lista .para-k-rola { font-size: 11px; }
.sp-lista .para-k-opis { font-size: 12.5px; }
.sp-lista .para-k-strzalka { display: grid; font-size: 17px; }
.sp-lista .para-k-zamek { gap: 10px; padding: 8px 12px; border-radius: 13px; font-size: 13px; line-height: 1.3; color: var(--tusz-2); text-decoration: none; }
.sp-lista .para-k-zamek b { font-size: 13.5px; }
.sp-lista .para-k-zamek .ikona { width: 18px; height: 18px; color: var(--klub-tusz, var(--tusz)); }
.sp-lista .para-k-brak { padding: 8px; border-radius: 13px; font-size: 13px; }
.sp-blad .akcje { margin-top: 6px; }
@container (max-width: 400px) {
  .sp-lista .para-k { grid-template-columns: minmax(0, 1fr); }
  .sp-lista .para-k-strzalka { display: none; }
}
@media (pointer: fine) { .r-akcje .regal-dotyk { display: none; } }
/* Skaner (95-skaner.css): wynik kodu w zakładce panelu bez własnej karty, bo panel już jest kartą. */
.sk-wynik .sw { padding: 0; background: none; border-radius: 0; box-shadow: none; }
.sk-wynik .sw .akcje { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sk-wynik .sw--brak .akcje { margin-top: 14px; }
.sk-wynik .sw--brak h2 { font-size: clamp(19px, 2.8cqh, 23px); }
.sk-wynik .sw-tytul { margin: 16px 0 8px; font: 800 13px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.sk-wynik .sw-filtr { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; }
.sk-wynik .sw-filtr b { font-size: 14.5px; }
.sk-wynik .sw-nic { margin-top: 14px; font-size: 14px; }
/* Zakładka „Zdjęcie składu”: narzędzie ze starej strony ciaśniej, kroki w jednym rzędzie bez ramek. */
.sk-panel .zdjecie { gap: 10px; }
.sk-panel .zdjecie-pole { padding: clamp(16px, 3cqh, 24px) 18px; border-radius: 20px; }
.sk-panel .zdjecie-pole-ikona { width: 48px; height: 48px; border-radius: 15px; background: var(--malina); }
.sk-panel .zdjecie-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sk-panel .zdjecie-kroki li { align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 0; border: 0; background: none; font-size: 12.5px; line-height: 1.35; color: var(--tusz-2); }
.sk-panel .zdjecie-kroki b { width: 22px; height: 22px; font-size: 12px; }
.sk-panel .zdjecie .przypis { font-size: 12.5px; color: var(--tusz-3); }
/* Tańsza pielęgnacja: lista kosmetyków (plan.js) w zakładce panelu, ciaśniej niż na dawnej stronie. */
.tp-panel .plan-lista { gap: 6px; margin-top: 0; }
.tp-panel .plan-pozycja { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; padding: 8px 6px 8px 8px; border-radius: 14px; }
.tp-panel .plan-foto { width: 44px; height: 44px; }
.tp-panel .plan-opis { font-size: 12.5px; }
.tp-panel .plan-opis .marka { font-size: 12px; }
.tp-panel .plan-nazwa { font-size: 13.5px; -webkit-line-clamp: 1; }
.tp-panel .plan-meta { font-size: 12px; }
.tp-panel .plan-czestosc select { min-height: 36px; padding: 0 28px 0 10px; font-size: 13px; }
.tp-panel .plan-usun { width: 32px; height: 32px; }
.tp-panel .plan-chipy { margin-top: 0; gap: 6px; }
.tp-panel .plan-chip { min-height: 36px; justify-content: flex-start; font-size: 13.5px; text-align: left; }
.tp-panel .tacka { margin: 0 0 10px; }
.tp-panel .plan-zamiany { gap: 10px; }
.tp-panel .plan-zamiana { gap: 10px 12px; padding: 12px; border-radius: 16px; }
.tp-panel .pz-strona { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
.tp-panel .pz-foto { width: 48px; height: 48px; }
.tp-panel .pz-nazwa { font-size: 13.5px; }
.tp-panel .pz-cena { font-size: 12.5px; }
.tp-panel .pz-dol { padding-top: 10px; font-size: 13px; }
.tp-panel .plan-zamek { margin-top: -90px; padding: 20px; border-radius: 20px; }
.tp-panel .plan-zamek-tytul { font-size: clamp(19px, 2.8cqh, 24px); }
.tp-panel .plan-zamek > p:not(.plan-zamek-tytul):not(.akcje) { font-size: 13.5px; }
.tp-panel [data-plan-wynik] > .przypis { margin-top: 12px; font-size: 12.5px; color: var(--tusz-3); }
/* Wejście do konta (98-konto.css): ekran bez dolnego marginesu strony tekstowej, formularz bez powtórzonego tytułu. */
.ekran-przewijany > .konto-uklad:has(.kw:not([hidden])) { margin-bottom: 0; }
.kw-panel .wejscie-formularz { margin-top: clamp(14px, 2.6cqh, 24px); padding: 0; }
.kw-panel .logowanie-tryb:not([hidden]) + .wejscie-tytul { display: none; }
/* Przegląd konta (98-konto.css) bez bocznego menu konta: jedna kolumna; plakietka planu i pasek próby w panelu. */
.konto-uklad:not(:has(> .konto-menu)) { grid-template-columns: minmax(0, 1fr); }
.ko-plan .panel-odznaka { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pigulka); background: var(--mgla); color: var(--tusz); font: 800 12.5px/1 var(--font-naglowki); }
.ko-plan .panel-odznaka--premium { background: var(--malina); color: #fff; }
/* Strony funkcji konta po zalogowaniu (od 14.11.2026): bez bocznej kolumny menu, bo prowadzą już szyna i przegląd konta.
   Nagłówek jak w panelu narzędzia (ikona-naklejka, okruszek, tytuł), menu konta jako rozwijana lista w prawym górnym rogu
   (app.js zamyka ją kliknięciem obok i Escape), treść w białym panelu na scenie. */
html:not(.konto-gosc) .ekran-przewijany > .konto-uklad:has(> .konto-menu) { display: block; position: relative; padding: clamp(16px, 2.6cqh, 28px) clamp(16px, 2.4cqw, 32px) 0; }
.konto-uklad > .konto-menu { position: absolute; z-index: 6; top: clamp(16px, 2.6cqh, 28px); right: clamp(16px, 2.4cqw, 32px); padding: 0; border: 0; background: none; }
.konto-uklad > .konto-menu .konto-menu-kto { display: none; }
.konto-uklad .konto-menu-zwin { border: 0; border-radius: 0; background: none; }
.konto-uklad .konto-menu-teraz { display: flex; min-height: 0; padding: 0; list-style: none; cursor: pointer; }
.konto-uklad .konto-menu-teraz::-webkit-details-marker { display: none; }
.konto-uklad .konto-menu-teraz > .ikona, .konto-uklad .konto-menu-teraz > span:not(.konto-menu-wiecej) { display: none; }
.konto-uklad .konto-menu-wiecej {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; margin: 0; padding: 0 16px; border-radius: var(--r-pigulka);
  background: #fff; color: var(--tusz); font: 750 14px/1 var(--font-naglowki); box-shadow: 0 1px 2px rgb(40 20 30 / .05), 0 8px 20px rgb(140 30 80 / .1);
  transition: color .15s;
}
.konto-uklad .konto-menu-teraz:hover .konto-menu-wiecej { color: var(--malina); }
.konto-uklad .konto-menu-wiecej .ikona { width: 14px; height: 14px; transition: rotate .2s var(--ease-out); }
.konto-uklad .konto-menu-zwin[open] .konto-menu-wiecej .ikona { rotate: 180deg; }
.konto-uklad .konto-menu-lista {
  position: absolute; right: 0; top: calc(100% + 8px); width: 300px; max-height: calc(100cqh - 110px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgb(140 30 80 / .2);
}
.ruch .konto-uklad .konto-menu-zwin[open] .konto-menu-lista { animation: wskok .22s var(--ease-out); }
.konto-uklad .konto-panel-glowa {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; margin: 0 0 clamp(14px, 2.4cqh, 22px); padding: 0 140px 0 0;
  background: none; border-radius: 0; text-align: left; overflow: visible;
}
.konto-uklad .konto-panel-glowa .konto-panel-ikona {
  width: 56px; height: 56px; border-radius: 18px; background: var(--malina); color: #fff; rotate: -4deg; box-shadow: 0 0 0 3px #fff, var(--cien-naklejka);
}
.konto-uklad .konto-panel-glowa .konto-panel-ikona .ikona { width: 26px; height: 26px; }
.konto-uklad .konto-panel-glowa > div { justify-items: start; }
.konto-uklad .konto-okruszek { margin: 0 0 4px; font-size: 13px; color: var(--tusz-3); }
.konto-uklad .konto-okruszek a { font-weight: 650; color: var(--tusz-2); }
.konto-uklad .konto-panel-glowa h1 { margin: 0; font: 800 clamp(28px, 4.6cqh, 42px)/1 var(--font-naglowki); letter-spacing: -.02em; text-transform: none; }
.konto-uklad .konto-panel-glowa .lead { margin: 6px 0 0; margin-inline: 0; max-width: 72ch; font-size: 15px; line-height: 1.45; color: var(--tusz-2); }
html:not(.konto-gosc) .konto-uklad .konto-czesc {
  padding: clamp(18px, 2.6cqw, 30px); border: 0; border-radius: var(--r-plansza);
  background: rgb(255 255 255 / .9); box-shadow: 0 1px 2px rgb(40 20 30 / .04), 0 14px 40px rgb(140 30 80 / .1);
}
@media (max-width: 1023.98px) {
  html:not(.konto-gosc) .ekran-przewijany > .konto-uklad:has(> .konto-menu) { padding: 16px 10px 0; }
  .konto-uklad > .konto-menu { top: 14px; right: 10px; }
  .konto-uklad .konto-menu-lista { width: min(300px, calc(100vw - 40px)); max-height: calc(100cqh - 90px); }
  .konto-uklad .konto-panel-glowa { align-items: flex-start; gap: 12px; padding: 50px 6px 0; }
  .konto-uklad .konto-panel-glowa .konto-panel-ikona { width: 46px; height: 46px; border-radius: 15px; }
  .konto-uklad .konto-panel-glowa h1 { font-size: clamp(26px, 7.4vw, 32px); }
  html:not(.konto-gosc) .konto-uklad .konto-czesc { padding: 16px 14px; }
}
.ekran-przewijany > .proba-pasek { margin: clamp(12px, 2cqh, 20px) clamp(16px, 2.4cqw, 32px) 0; padding: 12px 12px 12px 18px; border-radius: 18px; }
@media (max-width: 1023.98px) { .ekran-przewijany > .proba-pasek { margin: 10px 10px 0; } }
/* Strona funkcji konta, która jest już narzędziem (np. kosmetyczka, 99-kosmetyczka.css): na komputerze nagłówek i pod nim
   narzędzie na resztę wysokości ekranu, bez białej karty wokół (panel i scena mają własne). */
@media (min-width: 1024px) {
  html:not(.konto-gosc) .ekran-przewijany > .konto-uklad:has(.kz, .pg, .kh) { display: flex; flex-direction: column; box-sizing: border-box; height: 100cqh; margin-bottom: 0; padding-bottom: clamp(12px, 2.2cqh, 24px); }
  .konto-uklad:has(.kz, .pg, .kh) > .konto-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .konto-uklad:has(.kz, .pg, .kh) .konto-panel-glowa { flex: none; }
  .konto-uklad:has(.kz, .pg, .kh) .konto-panel-glowa .lead { display: none; }
  html:not(.konto-gosc) .konto-uklad .konto-czesc:has(> .kz, > .pg, > .kh) { flex: 1; min-height: 0; }
  /* Pasek próby premium nad narzędziem: narzędzie bierze resztę wysokości zamiast wypychać dół poza ekran. */
  html:not(.konto-gosc) .ekran-przewijany:has(> .proba-pasek):has(> .konto-uklad :is(.kz, .pg, .kh)) { display: flex; flex-direction: column; }
  html:not(.konto-gosc) .ekran-przewijany > .proba-pasek ~ .konto-uklad:has(.kz, .pg, .kh) { flex: 1 1 0; height: auto; min-height: 0; }
}
html:not(.konto-gosc) .konto-uklad .konto-czesc:has(> .kz, > .pg, > .kh) { padding: 0; background: none; box-shadow: none; }

/* Moja pielęgnacja w koncie (99-pielegnacja.css): dawne klocki pielęgnacji ściśnięte do panelu narzędzia. */
.pg .notka.pielegnacja-od { margin: 0 0 10px; }
.pg .tacka { gap: 8px; margin: 0 0 12px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--mgla); }
.pg .tacka-tytul { gap: 4px 8px; font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.pg .tacka-tytul .ikona { width: 16px; height: 16px; }
.pg .tacka-tytul small { width: auto; margin-left: auto; font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; }
.pg .tacka-lista { gap: 8px; padding: 0 0 4px; scrollbar-width: thin; scrollbar-color: rgb(200 32 94 / .25) transparent; }
.pg .tacka-el { flex-basis: 180px; grid-template-columns: 36px minmax(0, 1fr); gap: 6px 8px; padding: 8px; border: 0; border-radius: 14px; box-shadow: 0 1px 3px rgb(40 20 30 / .07); }
.pg .tacka-el img, .pg .tacka-bez { width: 36px; height: 40px; border-radius: 10px; }
.pg .tacka-nazwa { font-size: 12.5px; }
.pg .tacka-nazwa .marka { font-size: 11px; }
.pg .tacka-pora { padding: 5px 6px; font-size: 12.5px; }
.pg .tacka-pusto { font-size: 13px; line-height: 1.45; }
.pg .pora { padding: 0; border: 0; border-radius: 0; background: none; }
.pg .pora-lista { gap: 6px; margin: 0; }
.pg .pora-lista li:not(.pora-pusto) { gap: 10px; padding: 6px 6px 6px 10px; border-radius: 16px; background: var(--mgla); }
.pg .pora-lista li:not(.pora-pusto)::before { width: 24px; height: 24px; font: 800 12px/1 var(--font-naglowki); }
.pg .pora--rano .pora-lista li:not(.pora-pusto)::before { background: var(--klub); color: var(--tusz); }
.pg .pora--wieczor .pora-lista li:not(.pora-pusto)::before { background: var(--dna); color: #fff; }
.pg .pora-foto { width: 44px; height: 44px; padding: 3px; border-radius: 12px; background: #fff; }
.pg .pora-produkt { gap: 0; }
.pg .pora-produkt .marka { font: 800 11.5px/1.2 var(--font-naglowki); letter-spacing: .03em; text-transform: uppercase; color: var(--tusz-3); }
.pg .pora-produkt a { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font: 700 13.5px/1.3 var(--font); color: var(--tusz); text-decoration: none; }
.pg .pora-produkt a:hover { color: var(--malina); }
.pg .pora-krok { font-size: 12.5px; }
.pg .pora-usun { display: grid; place-items: center; flex: none; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; color: var(--tusz-3); }
.pg .pora-usun:hover { background: #fff; color: var(--malina); }
.pg .pora-usun svg { width: 14px; height: 14px; }
.pg .pora .pora-pusto { padding: 16px; border: 0; border-radius: 16px; background: var(--mgla); font-size: 14px; line-height: 1.45; text-align: left; }
.pg .zasada { display: block; padding: 12px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.pg .zasada + .zasada { margin-top: 8px; }
.pg .zasada .przypis { margin-top: 4px; font-size: 12px; color: var(--tusz-3); }
.pg .kolejnosc { font-size: 13.5px; }
.pg-zasady > .przypis { margin-top: 10px; font-size: 12.5px; color: var(--tusz-3); }
.pg .pg-rzad.strefa--nad { border-radius: 18px; background: var(--malina-tlo); box-shadow: inset 0 0 0 2px var(--malina); }
.przeciaganie .pg-rzad { outline: 2px dashed rgb(40 20 30 / .2); outline-offset: -2px; }
/* Klub w koncie (99-klub-konto.css): dawne klocki Klubu ściśnięte do panelu narzędzia (ikony nagród są na scenie). */
.kh .dopisek { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--tusz-2); }
.kh .klub-grupa h3 { font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; }
.kh .klub-zadania { border-radius: 16px; }
.kh .klub-zadanie { gap: 6px 12px; padding: 10px 14px; }
.kh .klub-zadanie-opis { font-size: 12.5px; }
.kh .klub-sklep { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kh .klub-nagroda { gap: 6px; padding: 14px; border-radius: 16px; }
.kh .klub-nagroda-ikona { display: none; }
.kh .klub-nagroda h3 { font: 800 15.5px/1.2 var(--font-naglowki); }
.kh .klub-nagroda-opis { font-size: 12.5px; line-height: 1.4; }
.kh .klub-nagroda-meta b { font-size: 15px; }
.kh .klub-nagroda-powod { font-size: 12.5px; }
.kh .klub-ranking { max-width: none; border-radius: 16px; }
.kh .klub-ranking li { padding: 8px 12px; font-size: 14px; }
.kh .quiz-pytanie { padding: 14px; border-radius: 16px; }
.kh .quiz-opcja { padding: 8px 12px; font-size: 14px; }
@media (max-width: 1023.98px) { .kh .klub-sklep { grid-template-columns: minmax(0, 1fr); } }
.ko-panel .proba-pasek { margin: clamp(10px, 1.8cqh, 16px) 0 0; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; }
.kw-panel .wejscie-formularz .zakladki-seg { margin-bottom: clamp(12px, 2.2cqh, 20px); }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .px-tytul .pj-h1-oryginal { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@media (max-width: 1023.98px) {
  .ek .karty-panele .wp { grid-template-columns: 56px minmax(0, 1fr); }
  .tp-panel .plan-pozycja { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .tp-panel .plan-czestosc { grid-column: 2; grid-row: 2; justify-self: start; }
  .tp-panel .plan-usun { grid-column: 3; grid-row: 1 / 3; }
  .tp-panel .plan-zamiana { grid-template-columns: minmax(0, 1fr); }
  .tp-panel .pz-strzalka { display: none; }
}

/* ===== Ekrany funkcji: Premium, Beauty DNA, Odkrywaj (od 13.11.2026 wieczorem) =====
   Ten sam układ co karta kosmetyku: scena na promieniach z Mają i panel narzędzia z zakładkami. */

/* Wspólna scena: treść w pierwszej kolumnie, Maja z dymkiem przy prawej krawędzi, stopy na dolnej. */
.ek-scena { display: grid; grid-template-columns: minmax(0, 1fr) clamp(110px, 23%, 190px); grid-template-rows: minmax(0, 1fr); column-gap: 4px; padding: clamp(14px, 2.6cqh, 28px) clamp(12px, 1.6cqw, 22px) 0; }
.ek-scena-tresc { position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: grid; place-items: center; min-width: 0; min-height: 0; padding-bottom: clamp(14px, 2.6cqh, 28px); }
.ek-scena-maja { position: relative; z-index: 2; grid-column: 2; grid-row: 1; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ek-maja-img { display: block; width: 100%; height: auto; max-height: 56cqh; object-fit: contain; object-position: right bottom; }
.ek-dymek { width: max-content; max-width: calc(100% + 16px); margin-right: 10px; font-size: clamp(13px, 1.8cqh, 15px); }

/* Naklejka funkcji nad tytułem panelu (jak tabliczka w filmie). */
.nakl-filar {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; height: 30px; padding: 0 13px; margin: 0 0 clamp(8px, 1.6cqh, 14px);
  border-radius: var(--r-pigulka); background: var(--malina); color: #fff; font: 800 13.5px/1 var(--font-naglowki);
  box-shadow: 0 0 0 3px #fff, var(--cien-naklejka); transform: rotate(-3deg);
}
.nakl-filar .ikona { width: 15px; height: 15px; }
.nakl-filar--dna { background: var(--dna); }

/* ----- Premium ----- */
.ek--premium { grid-template-columns: minmax(0, 1.02fr) minmax(450px, .98fr); }
.pm-wzor { display: grid; justify-items: center; gap: clamp(4px, 1cqh, 10px); width: 100%; max-width: 540px; }
.pm-etykieta { margin: 0; }
.pm-procent { font-size: clamp(44px, 9.5cqh, 92px); }
.pm-karta {
  width: 100%; padding: clamp(6px, 1.2cqh, 12px) clamp(12px, 1.4cqw, 18px) clamp(12px, 2cqh, 18px); background: #fff;
  border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(120 30 70 / .16); rotate: -1deg;
}
.pm-lista { margin: 0; padding: 0; list-style: none; }
.pm-lista li + li { border-top: 1.5px dashed var(--linia-2); }
.pm-wiersz { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: clamp(6px, 1.2cqh, 10px) 0; color: var(--tusz); text-decoration: none; }
.pm-wiersz:hover .pm-nazwy b { color: var(--malina); }
.pm-foto { position: relative; display: block; width: clamp(40px, 7cqh, 60px); aspect-ratio: 1; border-radius: 12px; background: var(--mgla); }
.pm-foto--b { background: var(--malina-tlo); }
.pm-foto > .opakowanie { position: absolute; inset: 4px; width: auto; height: auto; }
.pm-strzalka { width: 16px; height: 16px; color: var(--malina); }
.pm-nazwy { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; line-height: 1.25; }
.pm-nazwy > span, .pm-nazwy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-nazwy b { font-weight: 800; transition: color .15s; }
.pm-nazwy small { font-size: 12px; color: var(--tusz-3); }
.pm-proc { font: 800 clamp(17px, 2.8cqh, 24px)/1 var(--font-naglowki); color: var(--malina); }
.pm-suma { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: clamp(6px, 1.2cqh, 12px) 0 0; padding-top: clamp(10px, 1.8cqh, 16px); border-top: 3px solid var(--tusz); }
.pm-suma-co { flex-basis: 100%; text-align: center; font: 800 12.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.pm-suma .nakl { font-size: clamp(16px, 2.6cqh, 22px); }
.pm-suma .strzalka-sceny { width: clamp(30px, 3.4cqw, 44px); color: var(--malina); }
.pm-teraz s { text-decoration-thickness: 3px; text-decoration-color: rgb(255 255 255 / .7); }
.pm-przypis { margin: 0; font-size: 12px; color: var(--tusz-3); text-align: center; }

.pm-tytul { margin: 0; font-size: clamp(26px, 5cqh, 46px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.pm-tytul em { font-style: normal; color: var(--malina); }
.pm-lead { margin: clamp(6px, 1.2cqh, 12px) 0 0; max-width: 54ch; font-size: clamp(14px, 1.9cqh, 16px); line-height: 1.45; color: var(--tusz-2); }
.pm-liczba { margin-top: 12px; padding: 12px 16px; border-radius: 18px; background: var(--mieta); }
.pm-liczba:not(.ma-liczbe) { display: none; }
.pm-liczba-opis { margin: 0; font-size: 13px; font-weight: 650; color: var(--mieta-tusz); }
.pm-liczba-kwota { margin: 2px 0 0; font: 800 clamp(24px, 3.6cqh, 32px)/1 var(--font-naglowki); color: var(--tusz); }
.pm-plany { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 8px; margin: clamp(14px, 2.6cqh, 24px) 0 0; padding: 0; list-style: none; }
.pm-plany a {
  position: relative; display: grid; align-content: start; gap: 4px; height: 100%; padding: 14px 12px 12px; border-radius: 18px;
  background: #fff; color: var(--tusz); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--linia-2);
  transition: box-shadow .15s, transform .2s var(--ease-out);
}
.pm-plany a:hover { box-shadow: inset 0 0 0 2px var(--malina); transform: translateY(-2px); }
.pm-plany .pm-plan--glowny { background: var(--malina-tlo); box-shadow: inset 0 0 0 3px var(--malina); }
.pm-plan-znak {
  position: absolute; top: -11px; left: 10px; padding: 4px 9px; border-radius: var(--r-pigulka); background: var(--malina); color: #fff;
  font: 800 11.5px/1 var(--font-naglowki); box-shadow: 0 0 0 2px #fff; transform: rotate(-3deg); white-space: nowrap;
}
.pm-plan-nazwa { font: 800 13px/1.2 var(--font-naglowki); }
.pm-plan-cena { font: 800 clamp(22px, 3.4cqh, 28px)/1 var(--font-naglowki); letter-spacing: -.01em; }
.pm-plan-cena small { font-size: max(.5em, 11.5px); font-weight: 750; }
.pm-plan-opis { font-size: 12px; line-height: 1.3; color: var(--tusz-2); }
.pm-plan-opis b { color: var(--malina); }
.pm-akcje { align-items: center; gap: 8px 18px; }
.pm-drobne { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tusz-3); }
.pm-setka { margin-top: 10px; background: var(--malina-tlo); color: var(--tusz); font-size: 13.5px; }
.pm-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pm-tabela th, .pm-tabela td { padding: 9px 8px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: middle; }
.pm-tabela thead th { position: sticky; top: 0; z-index: 1; background: #fff; font: 800 11.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.pm-tabela tbody th { padding-left: 2px; font-weight: 650; line-height: 1.35; }
.pm-tabela td { width: 24%; font-size: 12.5px; line-height: 1.3; color: var(--tusz-2); }
.pm-tabela td:last-child { font-weight: 700; color: var(--tusz); }
.pm-tak { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mieta); color: var(--mieta-tusz); }
.pm-tak .ikona { width: 14px; height: 14px; }
.pm-nie { color: var(--tusz-3); }
.pm-pytanie { border-bottom: 1px solid var(--linia); }
.pm-pytanie summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; font: 750 15px/1.3 var(--font-naglowki); cursor: pointer; list-style: none; }
.pm-pytanie summary::-webkit-details-marker { display: none; }
.pm-pytanie summary .ikona { flex: none; width: 16px; height: 16px; transition: rotate .2s var(--ease-out); }
.pm-pytanie[open] summary .ikona { rotate: 180deg; }
.pm-pytanie p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--tusz-2); }

/* ----- Beauty DNA ----- */
.ek--dna { grid-template-columns: minmax(460px, 1.08fr) minmax(0, .92fr); }
.ek--dna.bd-plansza--wynik { display: grid; padding: clamp(12px, 2.2cqh, 24px); }
.dn-panel { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(122 85 214 / .25) transparent; }
.dn-tytul { margin: 0; font-size: clamp(30px, 6.4cqh, 58px); line-height: .98; letter-spacing: -.02em; }
.dn-tytul em { font-style: normal; color: var(--dna); }
.dn-lead { margin: clamp(6px, 1.2cqh, 12px) 0 clamp(14px, 2.6cqh, 24px); max-width: 50ch; font-size: clamp(14px, 1.9cqh, 16px); line-height: 1.45; color: var(--tusz-2); }
.dn-co { margin-top: auto; padding-top: clamp(14px, 2.4cqh, 22px); }
.dn-co .karty-tytul { color: var(--dna); }
.dn-co ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.dn-co li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--tusz-2); }
.dn-co li .ikona { width: 18px; height: 18px; margin-top: 1px; color: var(--dna); }
.dn-co b { color: var(--tusz); }
.dn-co a { font-weight: 700; color: var(--dna); }
.dn-zastrzezenie { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--tusz-3); }
.bd-plansza--wynik .dn-lead, .bd-plansza--wynik .dn-co, .bd-plansza--wynik .dn-quiz { display: none; }
.bd-plansza--wynik .dn-tytul { font-size: clamp(24px, 4cqh, 34px); }
.bd-plansza--wynik .dn-panel { overflow: hidden; }

/* Karta kodu na scenie: przed wynikiem kod układa się na żywo, po wyniku stoi tu opis skóry i listy składników. */
.dn-karta {
  width: 100%; max-width: 440px; padding: clamp(14px, 2.4cqh, 22px) clamp(14px, 1.8cqw, 22px); background: #fff;
  border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(70 40 140 / .16); rotate: -1deg;
}
.dn-karta[hidden] { display: none; }
.dn-etykieta { margin: 0 0 10px; color: var(--dna); }
.dn-kod { --kod-h: clamp(54px, 9cqh, 84px); }
.dn-opis { margin: 12px 0 0; font: 800 clamp(15px, 2.2cqh, 19px)/1.25 var(--font-naglowki); color: var(--tusz); }
.dn-legenda { margin-top: 10px; }

/* ----- Odkrywaj ----- */
.ek--odkrywaj { grid-template-columns: minmax(0, 1fr) clamp(300px, 29%, 400px); }
.od-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.od-panel .od-tytul { margin: 0; font-size: clamp(30px, 6cqh, 54px); line-height: 1; letter-spacing: -.02em; }
.od-panel .od-lead { margin: 0; font-size: clamp(14px, 1.9cqh, 16px); color: var(--tusz-2); }
.od-szukaj { margin: clamp(10px, 2cqh, 18px) 0 0; }
.od-szukaj .podpowiedzi { z-index: 20; }
.od-panel .karty { flex: 1; min-height: 0; margin-top: clamp(12px, 2.2cqh, 20px); }
.od-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.od-przypis { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--tusz-3); }
.od-przypis--gora { margin-bottom: 12px; }
.od-scena { display: flex; flex-direction: column; gap: 10px; padding-bottom: 0; }
.od-scena-gora { position: relative; z-index: 1; }
.od-scena .etykieta-sceny { margin: 0 0 10px; }
.od-sposoby { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.od-sposob {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px;
  background: #fff; color: var(--tusz); text-decoration: none; box-shadow: 0 8px 22px rgb(140 30 80 / .1); transition: transform .2s var(--ease-out), box-shadow .2s;
}
.od-sposob:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 12px 28px rgb(140 30 80 / .16); }
.od-sposob .sx-sposob-ik { width: 40px; height: 40px; border-radius: 12px; background: var(--malina-tlo); }
.od-sposob b { display: block; font: 800 14.5px/1.15 var(--font-naglowki); }
.od-sposob small { display: block; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--tusz-2); }
.od-sposob-dalej { width: 16px; height: 16px; color: var(--malina); }
.od-maja { position: relative; z-index: 2; margin-top: auto; display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; min-height: 0; }
.od-dymek { align-self: center; max-width: 180px; margin: 0 -6px 0 0; }
.od-dymek::after { right: -6px; bottom: 24px; }
.od-maja-img { width: auto; height: clamp(150px, 34cqh, 300px); max-height: none; }

/* 1024–1279 px: węższe kolumny, mniej opisów. */
@media (max-width: 1279.98px) and (min-width: 1024px) {
  .ek--premium { grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); }
  .pm-lead { display: none; }
  .ek--dna { grid-template-columns: minmax(440px, 1.15fr) minmax(0, .85fr); }
  .dn-co ul { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ek--odkrywaj { grid-template-columns: minmax(0, 1fr) 280px; }
  .od-sposob small { display: none; }
}

/* Niska karta ekranu (laptopy 720 px): chowamy to, co najmniej potrzebne. */
@container (max-height: 700px) {
  .pm-lead, .pm-drobne, .pm-przypis { display: none; }
  .dn-co ul li:nth-child(n + 2) { display: none; }
  .dn-co ul { grid-template-columns: minmax(0, 1fr); }
}

/* Telefon: najpierw panel z tytułem, potem scena. */
@media (max-width: 1023.98px) {
  .ek--premium, .ek--dna, .ek--odkrywaj { display: flex; flex-direction: column; gap: 10px; }
  .ek--premium > *, .ek--dna > *, .ek--odkrywaj > * { margin-top: 0; }
  .ek--dna.bd-plansza--wynik { display: flex; padding: 10px; }
  .pm-panel, .dn-panel, .od-panel { order: -1; }
  .dn-panel { overflow: visible; }
  .ek-scena { grid-template-columns: minmax(0, 1fr) 96px; padding: 14px 10px 0; }
  .ek-maja-img { max-height: 190px; }
  .ek-dymek { display: none; }
  .pm-plany { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pm-plany a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .pm-plany a .pm-plan-cena { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .pm-tytul { font-size: clamp(28px, 8vw, 38px); }
  .pm-tabela td { width: 28%; }
  .dn-tytul { font-size: clamp(32px, 9vw, 44px); }
  .dn-co ul { grid-template-columns: minmax(0, 1fr); }
  .od-scena { display: none; }
  .od-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Wynik Beauty DNA: opis skóry i listy na scenie, dobór w zakładkach panelu, pasek zapisu na dole. */
.dn-karta--wynik .bdw-gora { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dn-karta--wynik .bdw-kod { padding: 0; border: 0; background: none; box-shadow: none; }
.dn-karta--wynik .bdw-etykieta { margin: 0 0 6px; font: 800 12.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--dna); }
.dn-karta--wynik .bdw-tytul { margin: 0 0 10px; font-size: clamp(20px, 3.4cqh, 28px); line-height: 1.1; }
.dn-karta--wynik .kod--wynik { --kod-h: clamp(44px, 7cqh, 64px); }
.dn-karta--wynik .bdw-akcje { margin: 10px 0 0; }
.dn-karta--wynik .bdw-listy { gap: 10px; padding-top: 12px; border-top: 1.5px dashed var(--linia-2); }
.dn-karta--wynik .bdw-lista h3 { margin: 0 0 6px; font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.dn-wynik { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; margin-top: clamp(10px, 2cqh, 18px); }
.dn-wynik .bdw-dobor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dn-wynik .bdw-dobor .karty-tytul { margin-bottom: 4px; }
.bdw-dobor-opis { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--tusz-3); }
.dn-wynik .dob-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dn-wynik .bdw-zapisz { flex: none; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 12px 12px 12px 18px; border-radius: 18px; background: var(--malina-tlo); }
.dn-wynik .bdw-zapisz p { margin: 0; max-width: none; font-size: 13.5px; line-height: 1.4; color: var(--tusz-2); }
.dn-wynik .bdw-zapisz b { color: var(--tusz); }
.dn-wynik .bdw-zapisz .przycisk { flex: none; }
.dn-wynik .bdw-skorne { flex: none; }
@media (max-width: 1023.98px) {
  .bd-plansza--wynik .dn-panel { overflow: visible; }
  .dn-wynik .bdw-zapisz { flex-wrap: wrap; }
}

/* Scena Beauty DNA w lawendzie (kolor funkcji), reszta jak na pozostałych ekranach. */
.dn-scena { background: radial-gradient(circle at 46% 44%, var(--dna-tlo) 0, rgb(238 232 255 / .55) 38%, transparent 72%); }
.dn-karta--wynik { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(122 85 214 / .25) transparent; }
.dn-karta--wynik .zetony { gap: 5px; }
.dn-karta--wynik .zetony a, .dn-karta--wynik .zetony span { min-height: 0; padding: 5px 10px; font-size: 13px; }
@media (max-width: 1279.98px) and (min-width: 1024px) {
  .dn-quiz .odpowiedzi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Odpowiedzi quizu: cztery w rzędzie tylko w szerokim panelu (zapytanie o szerokość panelu, nie okna). */
.dn-panel { container-type: inline-size; }
@container (max-width: 620px) { .dn-quiz .odpowiedzi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pm-scena .ek-scena-tresc { padding-right: 14px; }
@media (max-width: 1023.98px) {
  .bd-plansza--wynik .dn-scena { order: -2; }
  .dn-wynik .dob-sto { display: none; }
}
/* Telefon: scena w jednej kolumnie (karta na całą szerokość), bez Mai, która zabierałaby miejsce karcie. */
@media (max-width: 1023.98px) {
  .ek-scena { grid-template-columns: minmax(0, 1fr); padding: 14px 10px; }
  .ek-scena-maja { display: none; }
  .ek-scena-tresc { padding: 0; }
  .dn-karta--wynik { max-height: none; overflow: visible; }
  .dn-karta, .pm-karta { rotate: 0deg; }
}

/* ===== Start jako pokaz funkcji (reel.js, od 13.11.2026) =====
   Rozdziały stoją jeden na drugim w kadrze, widać jeden. Oś na dole odmierza czas rozdziału (pasek = animacja reel-tor),
   przejście na komputerze to podwójna kurtyna w kolorze rozdziału z jego nazwą, na telefonie wjazd z boku. */

.reel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.reel-kadr { position: relative; flex: 1; min-height: 0; container-type: size; }
.reel-rozdzial { position: absolute; inset: 0; }
.reel-rozdzial[hidden] { display: none; }
.reel .ek { padding-bottom: clamp(6px, 1cqh, 10px); }
.ek--reel { grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr); }

/* Kolor rozdziału: pasek w osi, kurtyna, akcenty w panelu. */
.reel [data-scena="puder"] { --reel-k: var(--malina); --reel-k2: var(--malina-tlo); --reel-tusz: #fff; }
.reel [data-scena="lawenda"] { --reel-k: var(--dna); --reel-k2: var(--dna-tlo); --reel-tusz: #fff; }
.reel [data-scena="mieta"] { --reel-k: var(--swap); --reel-k2: var(--mieta); --reel-tusz: #fff; }
.reel [data-scena="niebo"] { --reel-k: #2A6FC9; --reel-k2: #D3E6FB; --reel-tusz: #fff; }
.reel [data-scena="maslo"] { --reel-k: var(--klub); --reel-k2: var(--klub-tlo); --reel-tusz: var(--tusz); }

/* ----- Oś rozdziałów ----- */
.reel-os { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 clamp(12px, 2.2cqh, 24px) clamp(10px, 1.6cqh, 14px); }
.reel-lista { flex: 1; min-width: 0; display: flex; gap: 6px; }
.reel-lista [role="tab"] {
  flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px 8px;
  padding: 9px 12px 10px; border: 0; border-radius: 14px; background: none; color: var(--tusz-3); text-align: left; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.reel-lista [role="tab"]:hover { background: rgb(255 255 255 / .55); color: var(--tusz); }
.reel-lista [role="tab"][aria-selected="true"] { background: rgb(255 255 255 / .8); color: var(--tusz); box-shadow: 0 4px 14px rgb(140 30 80 / .08); }
.reel-lista [role="tab"]:focus-visible { outline: 2px solid var(--tusz); outline-offset: 2px; }
.reel-nr { font: 800 12px/1 var(--font-naglowki); letter-spacing: .04em; font-variant-numeric: tabular-nums; transition: color .2s; }
[aria-selected="true"] > .reel-nr { color: var(--reel-k); }
.reel-nazwa { overflow: hidden; font: 800 14px/1.1 var(--font-naglowki); white-space: nowrap; text-overflow: ellipsis; }
.reel-tor { grid-column: 1 / -1; position: relative; height: 4px; border-radius: 4px; background: rgb(40 20 30 / .1); overflow: hidden; }
.reel-tor i { position: absolute; inset: 0; border-radius: inherit; background: var(--reel-k); transform: scaleX(0); transform-origin: left; }
.reel-lista .byl .reel-tor i, .reel-lista [aria-selected="true"] .reel-tor i { transform: scaleX(1); }
.reel.gra [aria-selected="true"] .reel-tor i { animation: reel-tor var(--czas, 8s) linear both; }
.reel.gra.zmiana [aria-selected="true"] .reel-tor i, .reel.gra.reel-czeka [aria-selected="true"] .reel-tor i, .reel.gra.w-tle [aria-selected="true"] .reel-tor i { animation-play-state: paused; }
@keyframes reel-tor { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reel-pauza {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #fff; color: var(--tusz); box-shadow: 0 4px 14px rgb(140 30 80 / .12); cursor: pointer; transition: transform .2s var(--ease-out);
}
.reel-pauza:hover { transform: scale(1.06); }
.reel-pauza[hidden] { display: none; }
.reel-ik { width: 14px; height: 14px; fill: currentColor; }
.reel-ik--gra, .reel:not(.gra) .reel-ik--pauza { display: none; }
.reel:not(.gra) .reel-ik--gra { display: block; }

/* ----- Kurtyna: jasna warstwa, za nią kolor rozdziału z jego nazwą ----- */
.reel-kurtyna { position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.reel-kurtyna[hidden] { display: none; }
.reel-kurtyna-a, .reel-kurtyna-b { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); }
.reel-kurtyna-a { background: var(--reel-k2); }
.reel-kurtyna-b {
  display: grid; align-content: center; justify-items: start; gap: clamp(6px, 1.4cqh, 14px); padding: 0 9cqw;
  background: radial-gradient(rgb(255 255 255 / .16) 1.4px, transparent 1.6px) 0 0 / 22px 22px, var(--reel-k); color: var(--reel-tusz);
}
.reel-kurtyna-nr { font: 800 clamp(15px, 2.6cqh, 24px)/1 var(--font-naglowki); letter-spacing: .1em; opacity: .75; font-variant-numeric: tabular-nums; }
.reel-kurtyna-tytul { font: 800 clamp(48px, 14cqh, 160px)/.92 var(--font-naglowki); letter-spacing: -.035em; white-space: nowrap; }

/* ----- Wejście rozdziału: panel i scena wjeżdżają po kolei, jak cięcie w filmie ----- */
.reel-rozdzial .panel > :nth-child(2) { --i: 1; }
.reel-rozdzial .panel > :nth-child(3) { --i: 2; }
.reel-rozdzial .panel > :nth-child(4) { --i: 3; }
.reel-rozdzial .panel > :nth-child(5) { --i: 4; }
.reel-rozdzial .panel > :nth-child(6) { --i: 5; }
.reel-rozdzial .panel > :nth-child(n+7) { --i: 6; }
.ruch .reel-rozdzial.wchodzi .panel > * { animation: reel-w .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(60ms + var(--i, 0) * 50ms); }
.ruch .reel-rozdzial.wchodzi :is(.ek-scena-tresc, .sx-scena-tresc) > * { animation: wskok .6s var(--sprezyna) .14s both; }
.ruch .reel-rozdzial.wchodzi :is(.ek-maja-img, .sx-maja-img) { animation: reel-maja .7s cubic-bezier(.16, 1, .3, 1) .22s both; }
.ruch .reel-rozdzial.wchodzi .dymek-mai { animation: dymek .45s var(--sprezyna) .62s both; }
@keyframes reel-w { from { opacity: 0; transform: translateY(18px); } }
@keyframes reel-maja { from { opacity: 0; transform: translateY(56px); } }

/* ----- Panel rozdziału ----- */
.r-panel {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: none;
  padding: clamp(20px, 4cqh, 42px) clamp(20px, 2.8cqw, 40px) clamp(16px, 3cqh, 28px);
}
.r-panel::-webkit-scrollbar { display: none; }
.r-tytul { margin: 0; font-size: clamp(28px, 6.2cqh, 56px); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.r-tytul em { font-style: normal; color: var(--malina); }
.rd-panel .r-tytul em { color: var(--dna); }
.rp-panel .r-tytul em { color: var(--swap); }
.rs-panel .r-tytul em { color: #2A6FC9; }
.r-lead { margin: clamp(8px, 1.6cqh, 14px) 0 0; max-width: 46ch; font-size: clamp(14px, 1.9cqh, 17px); line-height: 1.45; color: var(--tusz-2); }
.r-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: clamp(16px, 3.4cqh, 30px) 0 0; }
.r-akcje .przycisk { gap: 10px; }
.r-rady { display: grid; gap: 7px; margin: clamp(14px, 3cqh, 26px) 0 0; padding: 0; list-style: none; }
.r-rady li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.4; color: var(--tusz-2); }
.r-rady .ikona { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--swap); }
.r-drobne { margin: 12px 0 0; max-width: 58ch; font-size: 12.5px; line-height: 1.4; color: var(--tusz-3); }
.r-kroki {
  display: grid; gap: clamp(8px, 1.4cqh, 12px); margin: auto 0 0; padding: clamp(14px, 2.4cqh, 20px) 0 0;
  border-top: 1.5px dashed var(--linia-2); list-style: none;
}
.r-panel > :has(+ .r-kroki) { margin-bottom: clamp(16px, 3cqh, 26px); }
.r-kroki li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.r-kroki li > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.r-kroki-ik { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--reel-k2, var(--malina-tlo)); color: var(--reel-k, var(--malina)); }
.r-kroki-ik .ikona { width: 17px; height: 17px; }
.r-kroki b { font: 800 14px/1.25 var(--font-naglowki); color: var(--tusz); }
.r-kroki small { font-size: 13px; line-height: 1.35; color: var(--tusz-2); }
.reel [data-scena="maslo"] .r-kroki-ik { color: var(--klub-tusz); }
.nakl-filar--polka { background: var(--swap); }
.nakl-filar--skaner { background: #2A6FC9; }

/* Beauty DNA: pierwsze pytanie quizu. */
.rd-quiz { margin: clamp(16px, 3.4cqh, 30px) 0 0; }
.rd-quiz fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rd-quiz legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; padding: 0; font: 800 clamp(20px, 3.4cqh, 30px)/1.05 var(--font-naglowki); letter-spacing: -.01em; text-transform: uppercase; }
.rd-quiz legend small { font: 800 12.5px/1 var(--font-naglowki); letter-spacing: .06em; color: var(--dna); }
.rd-odpowiedzi { --pl-akcent: var(--dna); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-odpowiedzi .odp-karta > span { min-height: clamp(62px, 9cqh, 76px); box-shadow: 0 2px 10px rgb(70 40 140 / .07); }
.r-ster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: clamp(12px, 2.4cqh, 20px) 0 0; font-size: 13px; color: var(--tusz-3); }

/* Skan półki: zdjęcie półki z kosmetykami, linia skanu, kwota na naklejce. */
.rp-stan { align-self: flex-start; margin: 12px 0 0; padding: 8px 14px; border-radius: var(--r-pigulka); background: var(--mieta); color: var(--mieta-tusz); font: 750 13.5px/1.3 var(--font-naglowki); }
.rp-wzor { display: grid; justify-items: center; gap: clamp(8px, 1.6cqh, 14px); width: 100%; max-width: 560px; }
.rp-wzor .etykieta-sceny { margin: 0; color: var(--swap); }
.rp-zdjecie {
  position: relative; width: 100%; padding: clamp(22px, 4cqh, 36px) clamp(18px, 2.4cqw, 30px) 0; overflow: hidden;
  background: #fff; border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(20 90 60 / .16); rotate: -1.2deg;
}
.rp-zdjecie::after { content: ""; display: block; height: 14px; margin: 0 calc(-1 * clamp(18px, 2.4cqw, 30px)); background: linear-gradient(#F4E4D6, #E3CBB6); box-shadow: inset 0 3px 0 rgb(255 255 255 / .6); }
.rp-rzad { display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, .9cqw, 12px); margin: 0; padding: 0; list-style: none; }
.rp-rzad li { position: relative; flex: 1 1 0; min-width: 0; max-width: 92px; height: clamp(84px, 19cqh, 168px); }
.rp-rzad .opakowanie img { object-position: center bottom; }
.rp-ok {
  position: absolute; right: -4px; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--swap); color: #fff; box-shadow: 0 0 0 2px #fff;
}
.rp-ok .ikona { width: 13px; height: 13px; }
.rp-rog { position: absolute; z-index: 2; width: 26px; height: 26px; border: 4px solid var(--swap); }
.rp-rog:nth-child(1) { left: 10px; top: 10px; border-width: 4px 0 0 4px; border-top-left-radius: 10px; }
.rp-rog:nth-child(2) { right: 10px; top: 10px; border-width: 4px 4px 0 0; border-top-right-radius: 10px; }
.rp-rog:nth-child(3) { left: 10px; bottom: 22px; border-width: 0 0 4px 4px; border-bottom-left-radius: 10px; }
.rp-rog:nth-child(4) { right: 10px; bottom: 22px; border-width: 0 4px 4px 0; border-bottom-right-radius: 10px; }
.rp-linia { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }
.rp-linia::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--swap); box-shadow: 0 0 22px 6px rgb(11 133 119 / .45); }
.rp-wynik { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; font: 800 clamp(15px, 2.2cqh, 19px)/1.1 var(--font-naglowki); color: var(--tusz); }
.rp-kwota { font-size: clamp(24px, 4.8cqh, 42px); background: var(--swap); }
.rp-kwota small { margin-left: .2em; font-size: .5em; }
.rp-meta { margin: 0; font-size: 12.5px; color: var(--tusz-3); text-align: center; }
.ruch .reel-rozdzial.wchodzi .rp-linia { animation: rp-skan 1.3s cubic-bezier(.45, 0, .55, 1) .35s both; }
.ruch .reel-rozdzial.wchodzi .rp-ok { animation: naklejka .4s var(--sprezyna) both; animation-delay: calc(.55s + var(--i, 0) * .17s); }
.rp-rzad li { --i: 0; }
.ruch .reel-rozdzial.wchodzi .rp-wynik { animation: naklejka .55s var(--sprezyna) 1.55s both; }
.ruch .reel-rozdzial.wchodzi .rp-meta { animation: reel-w .5s ease-out 1.8s both; }
@keyframes rp-skan { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }

/* Skaner: kosmetyk z naklejką kodu, laser, bilet do bliźniaczki. */
.rs-kod { margin: clamp(16px, 3.2cqh, 28px) 0 0; padding-top: clamp(14px, 2.6cqh, 22px); border-top: 1.5px dashed var(--linia-2); }
.rs-kod label { display: block; margin: 0 0 10px; font: 800 12.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.rs-pole { display: flex; gap: 8px; }
.rs-pole input {
  flex: 1; min-width: 0; height: 54px; padding: 0 18px; border: 0; border-radius: 16px; outline: none; background: #fff; color: var(--tusz);
  box-shadow: inset 0 0 0 2.5px var(--tusz); font: 700 18px/1 var(--font); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; transition: box-shadow .2s;
}
.rs-pole input::placeholder { color: var(--tusz-3); font-weight: 500; letter-spacing: .02em; }
.rs-pole input:focus { box-shadow: inset 0 0 0 3px #2A6FC9, 0 0 0 6px rgb(42 111 201 / .16); }
.rs-pole .przycisk { height: 54px; }
.rs-podpowiedz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font-size: 13.5px; color: var(--tusz-2); }
.rs-wpisz {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pigulka); background: #D3E6FB; color: #1F4F94; cursor: pointer;
  font: 800 13.5px/1 var(--font-naglowki); letter-spacing: .08em; transition: background-color .15s, transform .15s var(--ease-out);
}
.rs-wpisz:hover { background: #BFD9F8; transform: translateY(-1px); }
.rs-wzor { display: grid; justify-items: center; gap: clamp(10px, 2cqh, 18px); width: 100%; max-width: 520px; }
.rs-produkt { position: relative; width: min(58%, 33cqh); }
.rs-foto {
  display: grid; place-items: center; aspect-ratio: 5 / 6; padding: 12%; background: #fff;
  border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(30 70 140 / .16); rotate: -2deg;
}
.rs-naklejka {
  position: absolute; right: -26%; bottom: 6%; width: 74%; padding: 10px 12px 8px; overflow: hidden;
  background: #fff; border-radius: 14px; box-shadow: 0 0 0 3px #fff, 0 12px 26px rgb(30 70 140 / .22); rotate: 4deg;
}
.ean-kod { display: block; }
.ean-kreski { display: block; width: 100%; height: clamp(36px, 6.4cqh, 58px); fill: var(--tusz); }
.ean-cyfry { display: flex; justify-content: space-between; margin-top: 4px; font: 700 clamp(10px, 1.5cqh, 12.5px)/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; color: var(--tusz); }
.rs-laser { position: absolute; left: 4px; right: 4px; top: 12%; height: 2px; border-radius: 2px; background: #E5243B; box-shadow: 0 0 10px 3px rgb(229 36 59 / .5); opacity: 0; }
.ruch .reel-rozdzial.wchodzi .rs-laser { animation: rs-laser 1.5s ease-in-out .45s both; }
@keyframes rs-laser { 0% { top: 12%; opacity: 0; } 10% { opacity: 1; } 50% { top: 62%; } 90% { top: 12%; opacity: 1; } 100% { top: 12%; opacity: 0; } }
.rs-nazwa { max-width: 34ch; margin: clamp(4px, 1cqh, 10px) 0 0; font-size: clamp(12.5px, 1.7cqh, 14.5px); line-height: 1.3; text-align: center; color: var(--tusz-2); }
.rs-nazwa b { color: var(--tusz); font-weight: 800; }
.rs-nazwa .liczba { margin-left: 4px; font-weight: 800; color: var(--tusz); white-space: nowrap; }
.rs-bilet {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: min(100%, 440px);
  padding: 10px 14px 10px 10px; background: #fff; border: 3px solid #2A6FC9; border-radius: 20px; color: var(--tusz); text-decoration: none;
  box-shadow: 0 14px 30px rgb(30 70 140 / .18); rotate: -1deg; transition: transform .2s var(--ease-out);
}
.rs-bilet:hover { transform: translateY(-3px); }
.rs-bilet-foto { position: relative; display: block; width: clamp(44px, 7.5cqh, 64px); aspect-ratio: 1; border-radius: 12px; background: #EAF2FD; }
.rs-bilet-foto > .opakowanie { position: absolute; inset: 5px; width: auto; height: auto; }
.rs-bilet-tekst { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; line-height: 1.25; }
.rs-bilet-tekst small { font: 800 11.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: #2A6FC9; }
.rs-bilet-tekst > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rs-bilet-tekst b { font-weight: 800; }
.rs-bilet-cena { display: grid; justify-items: end; gap: 6px; }
.rs-bilet-cena .nakl { font-size: clamp(16px, 2.6cqh, 21px); }
.rs-bilet-proc { font: 800 clamp(15px, 2.4cqh, 19px)/1 var(--font-naglowki); color: var(--malina); }
.ruch .reel-rozdzial.wchodzi .rs-bilet { animation: wskok .55s var(--sprezyna) 1.75s both; }

/* Premium: dwa plany i próba, obok przykładowy plan zamian (klocki z /premium/). */
.rm-plany { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; margin-top: clamp(18px, 3.4cqh, 30px); }
.ruch .reel-rozdzial.wchodzi .pm-lista li { animation: reel-w .5s cubic-bezier(.16, 1, .3, 1) both; }
.ruch .reel-rozdzial.wchodzi .pm-lista li:nth-child(1) { animation-delay: .3s; }
.ruch .reel-rozdzial.wchodzi .pm-lista li:nth-child(2) { animation-delay: .42s; }
.ruch .reel-rozdzial.wchodzi .pm-lista li:nth-child(3) { animation-delay: .54s; }
.ruch .reel-rozdzial.wchodzi .pm-suma .nakl { animation: naklejka .5s var(--sprezyna) .8s both; }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .ek--reel { grid-template-columns: minmax(340px, 1fr) minmax(0, 1fr); }
  .reel-lista [role="tab"] { padding: 8px 9px 9px; }
  .reel-nazwa { font-size: 13px; }
}
/* Niski ekran: zostaje to, czego potrzeba do użycia narzędzia. */
@container (max-height: 790px) {
  .r-kroki small { display: none; }
}
@container (max-height: 720px) {
  .r-kroki { display: none; }
}
@container (max-height: 640px) {
  .r-rady, .rp-meta, .reel .pm-przypis, .rs-nazwa { display: none; }
  .r-lead { font-size: 14px; }
}

/* ----- Telefon i tablet: oś u góry jak w relacjach, rozdział wjeżdża z boku ----- */
@media (max-width: 1023.98px) {
  .reel { position: static; min-height: 100%; }
  .reel-kadr { container-type: normal; }
  .reel-rozdzial { position: static; }
  .reel-os {
    position: sticky; top: 0; z-index: 20; order: -1; gap: 6px; padding: 10px 12px 8px;
    background: rgb(255 255 255 / .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .reel-lista { gap: 4px; }
  .reel-lista [role="tab"] {
    flex: 1 1 0; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 4px 2px; border-radius: 8px;
    transition: flex-grow .35s var(--ease-out), color .2s;
  }
  .reel-lista [role="tab"][aria-selected="true"] { flex-grow: 3.2; background: none; box-shadow: none; }
  .reel-lista [role="tab"]:hover { background: none; }
  .reel-nr { display: none; }
  .reel-tor { order: -1; height: 3px; }
  .reel-nazwa { font-size: 12.5px; opacity: 0; }
  [aria-selected="true"] > .reel-nazwa { opacity: 1; }
  .reel-pauza { width: 34px; height: 34px; }
  .r-panel { overflow: visible; padding: 22px 18px 18px; }
  .r-tytul { font-size: clamp(28px, 8vw, 40px); }
  .r-lead { font-size: 15px; }
  .r-akcje .przycisk { flex: 1 1 auto; justify-content: center; }
  .r-kroki { margin-top: 18px; }
  .rm-plany { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .rd-odpowiedzi .odp-karta > span { padding: 12px 34px 12px 14px; }
  .rd-odpowiedzi .odp-karta small { font-size: 12.5px; }
  .reel .ek-scena { min-height: 0; padding: 18px 14px 20px; grid-template-columns: minmax(0, 1fr); }
  .reel .ek-scena-maja { display: none; }
  .reel .ek-scena-tresc { padding-bottom: 0; }
  .rp-rzad li { height: 96px; }
  .rs-produkt { width: min(52%, 200px); }
  .ean-kreski { height: 44px; }
  .reel .pm-wzor { max-width: 420px; }
  .ruch .reel-rozdzial.wchodzi { animation: reel-bok .45s cubic-bezier(.16, 1, .3, 1) both; }
  .ruch .reel-rozdzial.wchodzi[data-z="lewej"] { animation-name: reel-bok-lewa; }
  .ruch .reel-rozdzial.wchodzi .panel > * { animation: none; }
}
@keyframes reel-bok { from { opacity: 0; transform: translateX(36px); } }
@keyframes reel-bok-lewa { from { opacity: 0; transform: translateX(-36px); } }

/* ===== Skan półki jako ekran narzędzia (od 14.11.2026) =====
   Panel: zdjęcie i rady, po wyniku lista kosmetyków z bliźniaczkami. Scena w mięcie przechodzi przez trzy stany
   (skan-polki.js): przykładowa półka, Twoje zdjęcie z linią skanu (.sp--laduje), kwota na naklejce i relacja (.sp--wynik). */

.ek--polka { grid-template-columns: minmax(440px, 1fr) minmax(0, 1fr); }
.sp-panel {
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(11 133 119 / .25) transparent;
  padding: clamp(20px, 4cqh, 42px) clamp(20px, 2.8cqw, 40px) clamp(16px, 3cqh, 28px); container-type: inline-size;
}
.sp-panel > * { flex-shrink: 0; }
.sp-panel .r-tytul em { color: var(--swap); }
.sp-panel .r-kroki-ik { background: var(--mieta); color: var(--mieta-tusz); }
.sp-wynik:empty { display: none; }
.sp-wynik { margin: clamp(14px, 2.6cqh, 22px) 0 clamp(14px, 2.6cqh, 22px); }

/* Po wyniku w panelu zostaje tytuł i raport. */
.sp--wynik .sp-lead, .sp--wynik .sp-rady, .sp--wynik .sp-akcje, .sp--wynik .sp-kroki, .sp--wynik .sp-drobne { display: none; }
.sp--wynik .sp-tytul { font-size: clamp(24px, 4.2cqh, 36px); }
/* Lista przewija się w środku, a tytuł i akcje zostają na miejscu. */
.sp--wynik .sp-wynik { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.sp--wynik .sp-raport { flex: 1 1 auto; min-height: 0; }
.sp--laduje .sp-akcje { opacity: .45; pointer-events: none; transition: opacity .2s; }

/* ----- Raport w panelu ----- */
.sp-raport { display: flex; flex-direction: column; gap: 12px; }
.sp-raport-tytul { margin: 0; font: 800 clamp(18px, 2.6cqh, 22px)/1.15 var(--font-naglowki); letter-spacing: -.01em; }
.sp-raport-meta { margin: -6px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.45; color: var(--tusz-2); }
.sp-raport-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-raport-akcje .przycisk { min-height: 44px; gap: 8px; }
.sp-raport-akcje .ikona { width: 18px; height: 18px; }
.sp-komunikat { margin: 0; font-size: 14px; font-weight: 650; color: var(--mieta-tusz); }
.sp-komunikat a { color: inherit; }
.sp-premium {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 16px;
  border-radius: 18px; background: var(--klub-tlo);
}
.sp-premium p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tusz-2); }
.sp-premium strong { color: var(--tusz); }
.sp-przewijane {
  flex: 1 1 auto; min-height: 180px; display: grid; align-content: start; gap: 10px; margin: 0 -6px; padding: 2px 6px 18px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgb(11 133 119 / .25) transparent;
  -webkit-mask: linear-gradient(#000 calc(100% - 22px), transparent); mask: linear-gradient(#000 calc(100% - 22px), transparent);
}
.sp-lista { gap: 8px; margin: 0; padding: 0; list-style: none; }
@container (max-width: 400px) {
  .sp-premium { grid-template-columns: minmax(0, 1fr); }
  .sp-premium .przycisk { justify-self: start; }
}
.sp-brak, .sp-przypis { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tusz-3); }
.sp-brak { padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .7); color: var(--tusz-2); }
.sp-blad {
  display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px var(--malina);
  font-size: 14.5px; line-height: 1.45; color: var(--tusz-2);
}
.sp-blad p { margin: 0; }
.sp-blad strong { color: var(--tusz); }

/* ----- Scena: Twoje zdjęcie w trakcie rozpoznawania ----- */
.sp-skan, .sp-raport-scena { display: grid; justify-items: center; gap: clamp(8px, 1.6cqh, 14px); width: 100%; max-width: 560px; }
.sp-skan .etykieta-sceny, .sp-raport-scena .etykieta-sceny { margin: 0; color: var(--swap); }
.sp-podglad {
  position: relative; margin: 0; padding: 12px; overflow: hidden; background: #fff;
  border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(20 90 60 / .16); rotate: -1.2deg;
}
.sp-podglad img { display: block; width: auto; max-width: 100%; max-height: min(52cqh, 460px); margin: 0 auto; border-radius: 14px; object-fit: contain; }
.sp-podglad .rp-rog:nth-child(3), .sp-podglad .rp-rog:nth-child(4) { bottom: 10px; }
.sp-linia { position: absolute; inset: 12px; z-index: 3; overflow: hidden; border-radius: 14px; pointer-events: none; }
.sp-linia::before {
  content: ""; position: absolute; inset: 0; border-bottom: 3px solid var(--swap);
  background: linear-gradient(to bottom, transparent 62%, rgb(11 133 119 / .22)); transform: translateY(-100%);
}
.ruch .sp-linia::before { animation: sp-skan 1.7s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes sp-skan { to { transform: translateY(0); } }
.sp-etap {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px; border-radius: var(--r-pigulka);
  background: #fff; color: var(--tusz); font: 750 14px/1.3 var(--font-naglowki); box-shadow: 0 8px 20px rgb(20 90 60 / .12);
}
.sp-etap::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--swap); }
.ruch .sp-etap::before { animation: regal-puls .9s ease-in-out infinite alternate; }

/* ----- Scena: wynik ----- */
.sp-polka { padding-top: clamp(18px, 3cqh, 28px); }
.sp-scena-akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.sp-scena-akcje .przycisk { gap: 9px; min-height: 48px; }

/* Wejście: przykład skanuje się sam po otwarciu, wynik wskakuje na naklejce. */
.ruch .sp-scena .rp-wzor .rp-linia { animation: rp-skan 1.3s cubic-bezier(.45, 0, .55, 1) .45s both; }
.ruch .sp-scena .rp-wzor .rp-ok { animation: naklejka .4s var(--sprezyna) both; animation-delay: calc(.65s + var(--i, 0) * .17s); }
.ruch .sp-scena .rp-wzor .rp-wynik { animation: naklejka .55s var(--sprezyna) 1.65s both; }
.ruch .sp-scena .rp-wzor .rp-meta { animation: reel-w .5s ease-out 1.9s both; }
.ruch .sp-raport-scena .rp-rzad li { animation: wskok .5s var(--sprezyna) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ruch .sp-raport-scena .rp-ok { animation: naklejka .4s var(--sprezyna) both; animation-delay: calc(.35s + var(--i, 0) * .1s); }
.ruch .sp-raport-scena .sp-kwota { animation: naklejka .55s var(--sprezyna) .2s both; }
.ruch .sp-raport-scena .sp-scena-akcje { animation: reel-w .5s ease-out .6s both; }
.ruch .sp-skan .sp-podglad { animation: wskok .5s var(--sprezyna) both; }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .ek--polka { grid-template-columns: minmax(410px, 1.1fr) minmax(0, .9fr); }
}

/* Telefon: panel nad sceną, a w trakcie skanu i po wyniku scena idzie na górę (skan-polki.js przewija do niej). */
@media (max-width: 1023.98px) {
  .ek--polka { display: flex; flex-direction: column; gap: 10px; }
  .ek--polka > * { margin-top: 0; }
  .sp-panel { order: -1; overflow: visible; padding: 22px 18px 18px; }
  .sp--laduje .sp-scena, .sp--wynik .sp-scena { order: -2; scroll-margin-top: 10px; }
  .sp-podglad img { max-height: 340px; }
  .sp-raport-akcje .przycisk { flex: 1 1 auto; justify-content: center; }
  .sp-scena-akcje .przycisk { flex: 1 1 auto; justify-content: center; }
  .sp-przewijane { min-height: 0; overflow: visible; -webkit-mask: none; mask: none; }
}

/* ===== Skaner jako ekran narzędzia (od 14.11.2026) =====
   Panel z zakładkami „Kod kreskowy” i „Zdjęcie składu”. Scena w kolorze nieba ma trzy stany (skaner.js): przykład
   z kodem do wypróbowania, obraz z aparatu (.sk--aparat) i zeskanowany kosmetyk z biletem do bliźniaczki (.sk--wynik). */

.ek--skaner { grid-template-columns: minmax(420px, .94fr) minmax(0, 1.06fr); }
.sk-panel { padding: clamp(20px, 4cqh, 40px) clamp(20px, 2.8cqw, 40px) clamp(12px, 2cqh, 20px); }
.sk-panel > * { flex-shrink: 0; }
.sk-panel > .karty { flex: 1 1 auto; }
.sk-panel .r-tytul { font-size: clamp(26px, 5.4cqh, 50px); }
.sk-panel .r-tytul em { color: #2A6FC9; }
.sk-panel .r-kroki-ik { background: #D3E6FB; color: #2A6FC9; }
.sk-panel .karty-lista .ikona { width: 16px; height: 16px; margin-right: 6px; }
.sk-panel .r-lead { margin-top: 0; }
.sk-panel .r-akcje { margin-top: clamp(12px, 2.4cqh, 22px); }
.sk-wynik:empty { display: none; }
.sk-wynik { margin-top: clamp(12px, 2.2cqh, 18px); }
.sk-zdjecie-lead { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: var(--tusz-2); }

/* Po wyniku w zakładce kodu zostaje pole na kolejny kod i wynik. */
.sk--wynik .sk-lead, .sk--wynik .sk-akcje, .sk--wynik .sk-kroki, .sk--wynik .sk-drobne, .sk--wynik .rs-podpowiedz { display: none; }
.sk--wynik .sk-reczny { margin-top: 0; padding-top: 0; border-top: 0; }

/* ----- Scena: przykład ----- */
.sk-wzor { display: contents; }
.sk-scena .rs-wzor, .sk-wynik-wzor { max-width: 470px; }
.sk-scena .ek-scena-tresc { padding-right: 18px; }
.sk--aparat .sk-wzor, .sk--wynik .sk-wzor { display: none; }
.ruch .sk-wzor .rs-laser { animation: rs-laser 1.6s ease-in-out .5s 3 both; }
.ruch .sk-wzor .rs-bilet { animation: wskok .55s var(--sprezyna) .35s both; }

/* ----- Scena: aparat ----- */
.sk-okno {
  position: relative; width: 100%; max-width: 600px; aspect-ratio: 4 / 3; max-height: 100%; overflow: hidden;
  background: #101418; border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(30 70 130 / .2);
}
.sk-okno[hidden] { display: none; }
.sk-okno video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-ramka { position: absolute; left: 12%; right: 12%; top: 30%; bottom: 30%; border: 3px solid #fff; border-radius: 18px; box-shadow: 0 0 0 999px rgb(10 20 30 / .35); }
.sk-ramka::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; border-radius: 2px;
  background: #E5243B; box-shadow: 0 0 10px 3px rgb(229 36 59 / .5);
}
.ruch .sk-ramka::after { animation: sk-laser 1.4s ease-in-out infinite alternate; }
@keyframes sk-laser { from { top: 18%; } to { top: 82%; } }
.sk-status {
  position: absolute; left: 50%; top: 14px; translate: -50% 0; margin: 0; padding: 8px 14px; border-radius: var(--r-pigulka);
  background: rgb(255 255 255 / .94); color: var(--tusz); font: 750 13.5px/1.2 var(--font-naglowki); white-space: nowrap;
}
.sk-ster { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.sk-przycisk {
  min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-pigulka); background: rgb(255 255 255 / .94);
  color: var(--tusz); font: 750 14px/1 var(--font-naglowki); cursor: pointer;
}
.sk-przycisk[hidden] { display: none; }
.sk-przycisk--wl { background: #FFE36E; }
.sk-przycisk:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ----- Scena: wynik ----- */
.sk-wynik-scena { display: contents; }
.sk-wynik-scena[hidden] { display: none; }
.sk-wynik-wzor { display: grid; justify-items: center; gap: clamp(8px, 1.6cqh, 14px); width: 100%; max-width: 520px; }
.sk-wynik-wzor .etykieta-sceny { margin: 0; color: #2A6FC9; }
.sk-karta {
  position: relative; display: block; width: min(56%, 34cqh); aspect-ratio: 5 / 6; background: #fff;
  border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(30 70 130 / .16); rotate: -1.5deg;
}
.sk-karta > .opakowanie { position: absolute; inset: 9% 9% 12%; width: auto; height: auto; }
.sk-karta-cena { position: absolute; left: -14px; bottom: 14px; font-size: clamp(20px, 3.6cqh, 30px); }
.sk-wynik-wzor .rs-nazwa .liczba { display: block; margin: 2px 0 0; font-weight: 650; color: var(--tusz-2); }
.sk-bilet--oryginal { border-color: var(--mieta-tusz); }
.sk-bilet--oryginal .rs-bilet-tekst small, .sk-bilet--oryginal .rs-bilet-proc { color: var(--mieta-tusz); }
.sk-bez { margin: 0; padding: 10px 16px; border-radius: 16px; background: rgb(255 255 255 / .85); font-size: 14px; color: var(--tusz-2); text-align: center; }
.sk-nieznany {
  display: grid; justify-items: center; gap: 10px; padding: clamp(18px, 3cqh, 26px) clamp(22px, 3cqw, 34px); background: #fff;
  border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 16px 34px rgb(30 70 130 / .16); rotate: -1deg;
}
.sk-nieznany-znak { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #D3E6FB; color: #2A6FC9; font: 800 34px/1 var(--font-naglowki); }
.sk-nieznany-kod { font: 700 clamp(17px, 2.8cqh, 22px)/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; color: var(--tusz); }
.ruch .sk-wynik-wzor .sk-karta, .ruch .sk-wynik-wzor .sk-nieznany { animation: wskok .5s var(--sprezyna) both; }
.ruch .sk-wynik-wzor .sk-karta-cena { animation: naklejka .5s var(--sprezyna) .25s both; }
.ruch .sk-wynik-wzor .rs-bilet { animation: wskok .55s var(--sprezyna) .4s both; }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .ek--skaner { grid-template-columns: minmax(410px, 1.1fr) minmax(0, .9fr); }
}

/* Telefon: panel nad sceną; przy włączonym aparacie i po wyniku scena idzie na górę (skaner.js przewija do niej). */
@media (max-width: 1023.98px) {
  .ek--skaner { display: flex; flex-direction: column; gap: 10px; }
  .ek--skaner > * { margin-top: 0; }
  .sk-panel { order: -1; padding: 22px 18px 18px; }
  .sk--aparat .sk-scena, .sk--wynik .sk-scena { order: -2; scroll-margin-top: 10px; }
  .sk-okno { aspect-ratio: 3 / 4; max-height: 70svh; }
  .sk-karta { width: min(56%, 220px); }
  .sk-scena .ek-scena-tresc { padding-right: 0; }
}

/* ===== Klub Bliźniaczki jako ekran narzędzia (od 14.11.2026) =====
   Panel z zakładkami: licznik zadań na pierwszy miesiąc, nagrody, poziomy, reszta Klubu. Scena w kolorze masła:
   karta klubowa z punktami i poziomem oraz nagrody, na które wystarczy (klub-licz.js przelicza po każdej zmianie). */

.ek--klub { grid-template-columns: minmax(440px, .95fr) minmax(0, 1.05fr); }
.kl-panel { padding: clamp(20px, 4cqh, 40px) clamp(20px, 2.8cqw, 40px) clamp(12px, 2cqh, 20px); }
.kl-panel > * { flex-shrink: 0; }
.kl-panel > .karty { flex: 1 1 auto; }
.nakl-filar--klub { background: var(--klub); color: var(--tusz); }
.kl-panel .r-tytul { font-size: clamp(24px, 4.8cqh, 44px); }
.kl-panel .r-tytul em {
  color: var(--tusz); background: linear-gradient(transparent 58%, var(--klub) 58%, var(--klub) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.kl-panel .r-akcje { margin-top: clamp(12px, 2.4cqh, 22px); }
.kl-start {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pigulka);
  background: var(--klub-tlo); color: var(--klub-tusz); font: 800 13px/1 var(--font-naglowki);
}
.kl-panel .karty-lista .ikona { width: 16px; height: 16px; margin-right: 6px; }

/* ----- Licznik zadań ----- */
.kl-licz { display: grid; gap: 14px; padding-bottom: 6px; }
.kl-licz-opis { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tusz-2); }
.kl-grupa { min-width: 0; margin: 0; padding: 0; border: 0; }
.kl-grupa legend { margin: 0 0 6px; padding: 0; font: 800 12px/1 var(--font-naglowki); letter-spacing: .07em; text-transform: uppercase; color: var(--tusz-3); }
.kl-grupa ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kl-zad, .kl-premium {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 14px 9px 12px;
  border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linia); cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}
.kl-zad:hover { box-shadow: inset 0 0 0 2px var(--klub); }
.kl-zad:has(input:checked) { background: var(--klub-tlo); box-shadow: inset 0 0 0 2px var(--klub); }
.kl-premium { grid-template-columns: auto minmax(0, 1fr); background: var(--malina-tlo); box-shadow: none; font-size: 14px; }
.kl-premium b { font-weight: 800; color: var(--malina); }
.kl-zad input, .kl-premium input {
  -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0;
  border: 2px solid var(--tusz-3); border-radius: 7px; background: #fff; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.kl-zad input::after, .kl-premium input::after {
  content: ""; width: 10px; height: 5px; border: solid var(--tusz); border-width: 0 0 2.5px 2.5px;
  rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale .25s var(--sprezyna);
}
.kl-zad input:checked { border-color: var(--tusz); background: var(--klub); }
.kl-premium input:checked { border-color: var(--malina); background: var(--malina); }
.kl-premium input:checked::after { border-color: #fff; }
.kl-zad input:checked::after, .kl-premium input:checked::after { scale: 1; }
.kl-zad input:focus-visible, .kl-premium input:focus-visible { outline: 2px solid var(--malina); outline-offset: 2px; }
.kl-zad-tekst { min-width: 0; }
.kl-zad-tekst b { display: block; font: 750 14px/1.25 var(--font); }
.kl-zad-tekst small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--tusz-2); }
.kl-zad-pkt { font: 800 15px/1 var(--font-naglowki); color: var(--klub-tusz); white-space: nowrap; }
.kl-zad:has(input:checked) .kl-zad-pkt { color: var(--tusz); }
/* Suma przyklejona do dołu ekranu tylko na telefonie, gdzie scena jest pod panelem. */
.kl-suma { display: none; }

/* ----- Nagrody, poziomy, więcej ----- */
.kl-lista, .kl-kafle { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kl-lista-nagroda, .kl-kafel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
  border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linia); color: var(--tusz);
}
.kl-ik { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--klub-tlo); color: var(--klub-tusz); }
.kl-ik .ikona { width: 55%; height: 55%; }
.kl-lista-tekst b, .kl-kafel b { display: block; font: 800 14.5px/1.2 var(--font-naglowki); }
.kl-lista-tekst small, .kl-kafel small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--tusz-2); }
.kl-lista-tekst .kl-warunek { font-weight: 700; color: var(--malina); }
.kl-lista-nagroda--premium .kl-ik { background: var(--malina-tlo); color: var(--malina); }
.kl-koszt { font: 800 16px/1 var(--font-naglowki); white-space: nowrap; }
.kl-koszt small { font-size: 12px; color: var(--tusz-3); }
.kl-drobne { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tusz-3); }
.kl-kafel { grid-template-columns: auto minmax(0, 1fr); text-decoration: none; transition: box-shadow .15s, transform .2s var(--ease-out); }
.kl-kafel:hover { box-shadow: inset 0 0 0 2px var(--klub); transform: translateY(-1px); }
.kl-poziomy {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 8px;
  height: clamp(170px, 28cqh, 230px); margin: 8px 0 0; padding: 0; list-style: none;
}
.kl-poziomy li { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; text-align: center; }
.kl-slupek { display: block; flex: 0 1 var(--h); min-height: 18px; border-radius: 12px 12px 4px 4px; background: var(--klub-tlo); box-shadow: inset 0 0 0 2.5px var(--tusz); transition: background-color .2s; }
.kl-poziom--jest .kl-slupek { background: var(--klub); }
.kl-poziomy b { margin-top: 4px; font: 800 12px/1.15 var(--font-naglowki); overflow-wrap: anywhere; hyphens: auto; }
.kl-poziomy span:last-child { font-size: 11.5px; color: var(--tusz-2); }

/* ----- Scena: karta klubowa i nagrody ----- */
.kl-scena .ek-scena-tresc { padding-right: 24px; }
.kl-wzor { display: grid; justify-items: center; gap: clamp(10px, 2cqh, 18px); width: 100%; max-width: 440px; }
.kl-wzor .etykieta-sceny { margin: 0; color: var(--klub-tusz); }
.kl-karta {
  position: relative; width: 100%; padding: clamp(14px, 2.6cqh, 24px) clamp(18px, 2.4cqw, 26px) clamp(14px, 2.4cqh, 20px);
  background: var(--klub); color: var(--tusz); border: 4px solid var(--tusz); border-radius: 26px;
  box-shadow: 0 16px 34px rgb(130 90 0 / .2); rotate: -1.5deg;
}
.kl-karta::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: radial-gradient(rgb(255 255 255 / .4) 1.5px, transparent 1.7px) 0 0 / 14px 14px;
  -webkit-mask: linear-gradient(125deg, #000, transparent 55%); mask: linear-gradient(125deg, #000, transparent 55%);
}
.kl-karta > * { position: relative; }
.kl-karta-gora { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 14px/1 var(--font-naglowki); }
.kl-karta-znak { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tusz); color: var(--klub); }
.kl-karta-znak .ikona { width: 58%; height: 58%; }
.kl-karta-poziom small { font: 800 11px/1 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; color: var(--klub-tusz); }
.kl-karta-pkt { display: flex; align-items: baseline; gap: 8px; margin: clamp(8px, 1.8cqh, 16px) 0 0; }
.kl-karta-pkt b { font: 800 clamp(48px, 10cqh, 92px)/.9 var(--font-naglowki); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kl-karta-pkt span { font: 800 clamp(18px, 3cqh, 26px)/1 var(--font-naglowki); }
.kl-karta-poziom { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: clamp(8px, 1.6cqh, 14px) 0 8px; }
.kl-karta-poziom b { font: 800 clamp(15px, 2.2cqh, 19px)/1.1 var(--font-naglowki); }
.kl-tor { display: block; height: 10px; overflow: hidden; border-radius: 6px; background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 2px var(--tusz); }
.kl-tor i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--tusz); transition: width .45s var(--ease-out); }
.kl-karta-dalej { margin: 6px 0 0; font-size: 12.5px; font-weight: 650; color: var(--klub-tusz); }
.kl-karta > .kl-karta-plus { position: absolute; right: 14px; top: 12px; font-size: clamp(13px, 2cqh, 16px); transform: rotate(5deg); }
.kl-karta-plus[hidden] { display: none; }

.kl-nagrody { display: grid; gap: clamp(6px, 1cqh, 8px); width: 100%; margin: 0; padding: 0; list-style: none; }
.kl-nagroda {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: clamp(6px, 1.1cqh, 9px) 14px clamp(6px, 1.1cqh, 9px) 9px; overflow: hidden;
  background: #fff; border: 2.5px solid var(--tusz); border-radius: 18px; box-shadow: 0 8px 18px rgb(130 90 0 / .1);
}
.kl-nagroda::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--p); background: var(--klub-tlo);
  transition: width .45s var(--ease-out), background-color .2s;
}
.kl-nagroda > .kl-ik, .kl-nagroda-ok { grid-column: 1; grid-row: 1; width: clamp(32px, 5cqh, 40px); height: clamp(32px, 5cqh, 40px); }
.kl-nagroda-ok {
  display: grid; place-items: center; border-radius: 12px; background: var(--tusz); color: var(--klub);
  opacity: 0; scale: .4; transition: scale .3s var(--sprezyna), opacity .15s;
}
.kl-nagroda-ok .ikona { width: 55%; height: 55%; }
.kl-nagroda-tekst { min-width: 0; }
.kl-nagroda-tekst b { display: block; font: 800 clamp(13.5px, 1.9cqh, 15px)/1.15 var(--font-naglowki); }
.kl-nagroda-tekst small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 650; color: var(--tusz-2); }
.kl-nagroda-koszt { font: 800 15px/1 var(--font-naglowki); white-space: nowrap; }
.kl-nagroda-koszt small { font-size: 11.5px; color: var(--tusz-3); }
.kl-nagroda--jest::before { background: var(--klub); }
.kl-nagroda--jest .kl-nagroda-ok { opacity: 1; scale: 1; }
.kl-nagroda--jest .kl-nagroda-tekst small, .kl-nagroda--jest .kl-nagroda-koszt small { color: var(--tusz); }

.ruch .kl-karta { animation: wskok .5s var(--sprezyna) both; }
.ruch .kl-karta-plus { animation: naklejka .5s var(--sprezyna) .35s both; }
.ruch .kl-nagroda { animation: wskok .45s var(--sprezyna) both; }
.ruch .kl-nagroda:nth-child(1) { animation-delay: .18s; }
.ruch .kl-nagroda:nth-child(2) { animation-delay: .24s; }
.ruch .kl-nagroda:nth-child(3) { animation-delay: .3s; }
.ruch .kl-nagroda:nth-child(4) { animation-delay: .36s; }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .ek--klub { grid-template-columns: minmax(420px, 1.1fr) minmax(0, .9fr); }
}

/* Telefon: panel nad sceną, suma punktów przyklejona do dołu, a „Nagrody” przewija do sceny. */
@media (max-width: 1023.98px) {
  .ek--klub { display: flex; flex-direction: column; gap: 10px; }
  .ek--klub > * { margin-top: 0; }
  .kl-panel { order: -1; padding: 22px 18px 18px; }
  .kl-scena { scroll-margin-top: 10px; }
  .kl-scena .ek-scena-tresc { padding: 6px 4px 14px; }
  .kl-karta { rotate: 0deg; }
  .kl-suma {
    position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 4px 0 0; padding: 8px 8px 8px 18px; border-radius: var(--r-pigulka); background: var(--tusz); color: #fff;
    box-shadow: 0 10px 24px rgb(40 10 25 / .28);
  }
  .kl-suma b { font: 800 18px/1 var(--font-naglowki); }
  .kl-suma small { display: block; margin-top: 3px; font-size: 12.5px; color: rgb(255 255 255 / .75); }
  .kl-panel .r-tytul { font-size: clamp(26px, 7.6vw, 34px); }
  .kl-suma a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pigulka);
    background: var(--klub); color: var(--tusz); font: 800 14px/1 var(--font-naglowki); text-decoration: none;
  }
  .kl-suma .ikona { width: 16px; height: 16px; }
}

/* ===== Tańsza pielęgnacja jako ekran narzędzia (od 14.11.2026) =====
   Panel z wyszukiwarką i zakładkami (Twoje kosmetyki, Plan zamian, Jak liczymy). Scena w kolorze mięty: roczny paragon
   z kosztem każdego kosmetyku, sumą, sumą z bliźniaczkami i oszczędnością na naklejce (plan.js). Przed dodaniem
   kosmetyków paragon przykładowej pielęgnacji z builda. Dawne klasy listy (plan-*) ściska 91-ekrany-stare-klocki.css. */

.ek--plan { grid-template-columns: minmax(440px, 1fr) minmax(0, 1fr); }
.tp-panel { padding: clamp(20px, 4cqh, 40px) clamp(20px, 2.8cqw, 40px) clamp(12px, 2cqh, 20px); }
.tp-panel > * { flex-shrink: 0; }
.tp-panel > .karty { flex: 1 1 auto; }
.nakl-filar--plan { background: var(--swap); }
.tp-panel .r-tytul { font-size: clamp(24px, 4.8cqh, 44px); }
.tp-panel .r-tytul em { color: var(--swap); }
.tp-panel .karty-lista .ikona { width: 16px; height: 16px; margin-right: 6px; }
.tp-szukaj { margin: clamp(12px, 2.4cqh, 22px) 0 0; }
.tp-szukaj .podpowiedzi { z-index: 20; }
/* Z kosmetykami na liście lead ustępuje miejsca liście. */
.tp--ma .tp-lead { display: none; }

.tp-przyklady { margin: 0 0 4px; }
.tp-przyklady[hidden] { display: none; }
.tp-podpis { margin: 0 0 8px; font: 800 12px/1 var(--font-naglowki); letter-spacing: .07em; text-transform: uppercase; color: var(--tusz-3); }
.tp-kroki { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: tp; }
.tp-kroki li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 12px 14px; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--linia); counter-increment: tp;
}
.tp-kroki li::before {
  content: counter(tp); grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--swap-tlo); color: var(--swap); font: 800 14px/1 var(--font-naglowki);
}
.tp-kroki b { font: 800 14.5px/1.2 var(--font-naglowki); }
.tp-kroki span { font-size: 13px; line-height: 1.4; color: var(--tusz-2); }
.tp-drobne { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tusz-3); }
.tp-suma { display: none; }

/* ----- Scena: roczny paragon ----- */
.tp-scena .ek-scena-tresc { padding-right: 24px; }
.tp-wzor { display: grid; justify-items: center; gap: clamp(10px, 1.8cqh, 16px); width: 100%; max-width: 400px; }
.tp-wzor .etykieta-sceny { margin: 0; color: var(--mieta-tusz); }
.tp-paragon {
  position: relative; isolation: isolate; width: 100%;
  padding: clamp(14px, 2.4cqh, 22px) clamp(18px, 2.2cqw, 24px) clamp(30px, 5cqh, 42px);
  color: var(--tusz); rotate: -1.2deg; filter: drop-shadow(0 16px 22px rgb(10 80 60 / .18));
}
/* Papier z ząbkowaną dolną krawędzią (maska na tle, żeby nie ucinać naklejki z oszczędnością). */
.tp-paragon::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px 6px 0 0; background: #fff;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
.tp-p-glowa { display: grid; justify-items: center; gap: 4px; margin: 0; padding-bottom: clamp(8px, 1.4cqh, 12px); border-bottom: 2px dashed rgb(40 20 30 / .16); text-align: center; }
.tp-p-glowa b { font: 800 clamp(17px, 2.6cqh, 21px)/1 var(--font-naglowki); }
.tp-p-glowa span { font: 800 11px/1 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; color: var(--tusz-3); }
.tp-p-lista {
  display: grid; gap: clamp(5px, .9cqh, 8px); margin: 0; padding: clamp(8px, 1.4cqh, 12px) 0;
  list-style: none; font: 500 clamp(12px, 1.7cqh, 13.5px)/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.tp-p-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.tp-p-nazwa { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tp-p-nazwa b { font-weight: 700; }
.tp-p-kwota { font-weight: 700; white-space: nowrap; }
.tp-p-b { grid-column: 1 / -1; font-size: max(11.5px, .9em); color: var(--swap); }
.tp-p-wiecej { margin: 0 0 8px; font-size: 12.5px; color: var(--tusz-3); text-align: center; }
.tp-p-suma { display: grid; gap: 4px; margin: 0; padding-top: clamp(8px, 1.4cqh, 12px); border-top: 2px dashed rgb(40 20 30 / .16); }
.tp-p-suma div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tp-p-suma dt { font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; }
.tp-p-suma dd { margin: 0; font: 800 clamp(20px, 3.4cqh, 28px)/1 var(--font-naglowki); white-space: nowrap; }
.tp-p-z dt, .tp-p-z dd { color: var(--swap); }
.tp-p-z dd { font-size: clamp(16px, 2.4cqh, 20px); }
.tp-paragon > .tp-p-oszcz { position: absolute; right: -8px; bottom: -20px; font-size: clamp(18px, 3cqh, 24px); transform: rotate(-5deg); }
.tp-p-akcje { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin: clamp(16px, 2.6cqh, 24px) 0 0; text-align: center; }
.tp-p-zwrot { font-size: 13px; font-weight: 650; color: var(--mieta-tusz); }

.ruch .tp-paragon:not(.tp-paragon--twoj) { animation: tp-druk .7s var(--ease-out) .1s backwards; }
.ruch .tp-p-oszcz { animation: naklejka .5s var(--sprezyna) .3s both; }
@keyframes tp-druk { from { clip-path: inset(0 0 100% 0); translate: 0 -14px; } to { clip-path: inset(0 -40px -40px -40px); } }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .ek--plan { grid-template-columns: minmax(420px, 1.1fr) minmax(0, .9fr); }
  .tp-scena .ek-scena-tresc { padding-right: 34px; }
}

/* Telefon: panel nad sceną, kwota przyklejona do dołu listy, a „Paragon” przewija do sceny. */
@media (max-width: 1023.98px) {
  .ek--plan { display: flex; flex-direction: column; gap: 10px; }
  .ek--plan > * { margin-top: 0; }
  .tp-panel { order: -1; padding: 22px 18px 18px; }
  .tp-panel .r-tytul { font-size: clamp(26px, 7.6vw, 34px); }
  .tp-scena { scroll-margin-top: 10px; }
  .tp-scena .ek-scena-tresc { padding: 6px 10px 18px; }
  .tp-paragon { rotate: 0deg; }
  .tp-suma {
    position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 12px 0 0; padding: 8px 8px 8px 18px; border-radius: var(--r-pigulka); background: var(--tusz); color: #fff;
    box-shadow: 0 10px 24px rgb(40 10 25 / .28);
  }
  .tp-suma[hidden] { display: none; }
  .tp-suma b { font: 800 18px/1 var(--font-naglowki); }
  .tp-suma small { display: block; margin-top: 3px; font-size: 12.5px; color: rgb(255 255 255 / .75); }
  .tp-suma a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pigulka);
    background: var(--mieta); color: var(--tusz); font: 800 14px/1 var(--font-naglowki); text-decoration: none;
  }
  .tp-suma .ikona { width: 16px; height: 16px; }
}

/* ===== Wejście do konta jako ekran narzędzia (od 14.11.2026) =====
   /konto/ i strony funkcji konta bez logowania: scena z podglądem darmowego konta (wiersze ze znaczkiem, gdy coś już
   czeka na tym urządzeniu; system.js), premia za założenie konta i Maja, obok panel z Google i e-mailem. */

/* Strona konta przewija się w ekranie, więc wejście bierze dokładnie jego wysokość, a dłuższy formularz przewija się w panelu. */
.kw { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr); gap: clamp(12px, 1.8cqw, 22px); height: 100cqh; padding: clamp(12px, 2.2cqh, 24px); }
.kw[hidden] { display: none; }
.kw-panel {
  display: flex; flex-direction: column; justify-content: safe center; padding: clamp(16px, 3cqh, 32px) clamp(20px, 2.8cqw, 40px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(200 32 94 / .28) transparent;
}
.kw-panel > * { flex-shrink: 0; }
.kw-tytul { margin: 0; font-size: clamp(26px, 5cqh, 46px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.kw-tytul em { font-style: normal; color: var(--malina); }
.kw-lead { margin: clamp(8px, 1.6cqh, 14px) 0 0; max-width: 46ch; font-size: clamp(14px, 1.9cqh, 16.5px); line-height: 1.45; color: var(--tusz-2); }
.kw-czeka { margin-top: 12px; background: var(--mieta); color: var(--mieta-tusz); }

/* ----- Scena: podgląd konta ----- */
.kw-scena { min-height: 0; }
.kw-scena .ek-scena-tresc { padding-right: 24px; }
.kw-wzor { display: grid; justify-items: center; gap: clamp(10px, 1.8cqh, 16px); width: 100%; max-width: 420px; }
.kw-wzor .etykieta-sceny { margin: 0; }
.kw-karta {
  position: relative; width: 100%; padding: clamp(16px, 2.6cqh, 24px) clamp(16px, 2cqw, 22px);
  background: #fff; border: 4px solid var(--tusz); border-radius: 26px; box-shadow: 0 18px 36px rgb(140 30 80 / .16); rotate: -1.2deg;
}
.kw-karta-glowa { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(10px, 1.8cqh, 16px); }
.kw-karta-glowa b { display: block; font: 800 clamp(17px, 2.6cqh, 21px)/1.1 var(--font-naglowki); }
.kw-karta-glowa small { display: block; margin-top: 2px; font-size: 13px; color: var(--tusz-2); }
.kw-awatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--malina-tlo); color: var(--malina); box-shadow: inset 0 0 0 2.5px var(--malina); }
.kw-awatar .ikona { width: 52%; height: 52%; }
.kw-karta > .kw-plus { position: absolute; right: -16px; top: 16px; font-size: clamp(16px, 2.6cqh, 21px); transform: rotate(6deg); }
.kw-plus small { font-size: max(11.5px, .62em); }
.kw-lista { display: grid; gap: clamp(6px, 1cqh, 8px); margin: 0; padding: 0; list-style: none; }
.kw-lista li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: clamp(7px, 1.2cqh, 10px) 12px clamp(7px, 1.2cqh, 10px) 8px;
  border-radius: 16px; background: var(--mgla);
}
.kw-ik { display: grid; place-items: center; width: clamp(32px, 5cqh, 38px); height: clamp(32px, 5cqh, 38px); border-radius: 12px; background: #fff; color: var(--malina); }
.kw-ik .ikona { width: 55%; height: 55%; }
.kw-wiersz b { display: block; font: 800 clamp(13.5px, 1.9cqh, 15px)/1.15 var(--font-naglowki); }
.kw-wiersz small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--tusz-2); }
.kw-ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mieta-tusz); color: #fff; opacity: 0; scale: .4; transition: scale .3s var(--sprezyna), opacity .15s; }
.kw-ok .ikona { width: 60%; height: 60%; }
.kw-lista .kw-jest { background: var(--mieta); }
.kw-jest .kw-wiersz small { font-weight: 700; color: var(--mieta-tusz); }
.kw-jest .kw-ok { opacity: 1; scale: 1; }

.ruch .kw-karta { animation: wskok .5s var(--sprezyna) both; }
.ruch .kw-plus { animation: naklejka .5s var(--sprezyna) .3s both; }

/* ===== Przegląd konta po zalogowaniu (od 14.11.2026): ta sama karta z liczbami osoby, panel z następnym krokiem ===== */
.ko-lista li { display: block; padding: 0; background: none; }
.ko-lista a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: clamp(7px, 1.2cqh, 10px) 14px clamp(7px, 1.2cqh, 10px) 8px;
  border-radius: 16px; background: var(--mgla); color: inherit; text-decoration: none; transition: background-color .15s, transform .2s var(--ease-out);
}
.ko-lista a:hover { background: var(--malina-tlo); transform: translateX(3px); }
.ko-lista .kw-jest a { background: var(--mieta); }
.ko-lista .kw-jest a:hover { background: #C3EEDA; }
.ko-wartosc { display: inline-flex; align-items: baseline; gap: 1px; color: var(--tusz); white-space: nowrap; }
.ko-wartosc .liczba { font: 800 clamp(18px, 2.8cqh, 24px)/1 var(--font-naglowki); letter-spacing: -.01em; }
.ko-wartosc small { font: 800 12.5px/1 var(--font-naglowki); color: var(--tusz-2); }
.ko-lista [data-pu-klub] a { background: var(--klub-tlo); }
.ko-lista [data-pu-klub] .kw-ik { color: var(--klub-tusz); }
.ko-kod { --kod-h: 24px; width: clamp(64px, 9cqw, 92px); gap: 2px; border-radius: 6px; }
.ko-dalej { display: flex; align-items: center; gap: 10px; margin: 8px 6px 0; }
.ko-dalej small { flex: none; font: 700 12px/1 var(--font-naglowki); color: var(--klub-tusz); }
.ko-dalej small:empty { display: none; }
.ko-tor { flex: 1; display: block; height: 6px; border-radius: 3px; background: var(--klub-tlo); overflow: hidden; }
.ko-plan-nakl small { font-size: .62em; }
.ko-tor i { display: block; width: 4%; height: 100%; border-radius: inherit; background: var(--klub); transition: width .6s var(--ease-out); }
.ko-awatar { flex: none; width: 48px; height: 48px; font-size: 20px; }
.ko-karta .kw-karta-glowa > span:last-child { min-width: 0; }
.ko-karta .kw-karta-glowa b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ko-plan-nakl { text-decoration: none; background: #fff; color: var(--malina); box-shadow: 0 0 0 3px var(--malina), var(--cien-naklejka); }
a.ko-plan-nakl.ko-plan-nakl--ma { background: var(--malina); color: #fff; box-shadow: 0 0 0 3px #fff, var(--cien-naklejka); }
a.ko-plan-nakl:hover { transform: rotate(2deg) scale(1.04); }

.ko-panel { justify-content: flex-start; overflow: hidden; }
.ko-kto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: clamp(8px, 1.4cqh, 12px) 0 0; font-size: 14px; color: var(--tusz-2); }
.ko-kto > span:first-child:empty { display: none; }
.ko-plan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ko-plan a { font-weight: 700; color: var(--malina); }

/* Następny krok: jedna duża malinowa karta. */
.ko-krok { margin-top: clamp(12px, 2.2cqh, 20px); }
.ko-krok-link {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 14px;
  padding: clamp(14px, 2.4cqh, 20px) clamp(16px, 2cqw, 22px); border-radius: 22px; background: var(--malina); color: #fff; text-decoration: none;
  box-shadow: 0 14px 30px rgb(200 32 94 / .24); transition: background-color .15s, transform .2s var(--ease-out);
}
.ko-krok-link:hover { background: var(--malina-ciemna); transform: translateY(-2px); }
.ko-krok-etykieta { grid-column: 1 / -1; font: 800 12.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.ko-krok-tytul { grid-column: 1; font: 800 clamp(22px, 3.6cqh, 30px)/1.02 var(--font-naglowki); letter-spacing: -.01em; text-wrap: balance; }
.ko-krok-opis { grid-column: 1; font-size: 14px; line-height: 1.4; color: rgb(255 255 255 / .9); }
.ko-krok-pkt { grid-column: 2; grid-row: 2; align-self: start; background: var(--klub); color: var(--tusz); font-size: clamp(18px, 2.8cqh, 22px); }
.ko-krok-dalej { grid-column: 2; grid-row: 3; display: inline-flex; align-items: center; gap: 6px; font: 800 14.5px/1 var(--font-naglowki); white-space: nowrap; }
.ko-krok-dalej .ikona { width: 17px; height: 17px; transition: transform .2s var(--ease-out); }
.ko-krok-link:hover .ko-krok-dalej .ikona { transform: translateX(4px); }
.ko-panel .karty { flex: 1; min-height: 0; margin-top: clamp(12px, 2.2cqh, 20px); }

/* Zakładka „Za punkty”: zadania z Klubu. */
.ko-czeka { margin: 8px 2px; font-size: 14px; color: var(--tusz-3); }
.ko-z-lista { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ko-z { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; border-bottom: 1px solid var(--linia); font-size: 14.5px; font-weight: 650; color: var(--tusz); text-decoration: none; }
a.ko-z:hover .ko-z-nazwa { color: var(--malina); }
.ko-z--ok .ko-z-nazwa { color: var(--tusz-3); font-weight: 500; }
.ko-znak { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linia-2); }
.ko-znak--ok { background: var(--mieta-tusz); color: #fff; box-shadow: none; }
.ko-znak svg { width: 12px; height: 12px; }
.ko-z-pkt { font: 800 13.5px/1 var(--font-naglowki); color: var(--klub-tusz); white-space: nowrap; }
.ko-z--ok .ko-z-pkt { font: 500 13px/1 var(--font); color: var(--tusz-3); }
.ko-z-dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 14px 2px 4px; font-size: 14px; color: var(--tusz-2); }
.ko-z-dol b { font: 800 18px/1 var(--font-naglowki); color: var(--tusz); }
.ko-z-dol a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--malina); text-decoration: none; }
.ko-z-dol .ikona { width: 16px; height: 16px; }

/* Zakładka „Wszystkie funkcje”: grupy z menu konta jako zwarte wiersze. */
.ko-grupa + .ko-grupa { margin-top: 16px; }
.ko-grupa h2 { margin: 0 0 6px; font: 800 12.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.ko-grupa ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ko-grupa li[hidden] { display: none; }
.ko-f {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 100%; padding: 8px 10px 8px 8px;
  border-radius: 14px; background: var(--mgla); color: var(--tusz); text-decoration: none; transition: background-color .15s;
}
.ko-f:hover { background: var(--malina-tlo); }
.ko-f-ik { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #fff; color: var(--malina); }
.ko-f-ik .ikona { width: 55%; height: 55%; }
.ko-f-tekst b { display: block; font: 800 13.5px/1.2 var(--font-naglowki); }
.ko-f-tekst small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--tusz-2); }
.ko-f-premium { display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: var(--malina); color: #fff; font: 800 10.5px/1.2 var(--font-naglowki); vertical-align: 1px; }
.ko-f > .ikona { width: 16px; height: 16px; color: var(--tusz-3); }

/* Na szerokim ekranie to, co czeka na urządzeniu, pokazują wiersze karty, więc formularz zostaje wyżej. */
@media (min-width: 1024px) { .kw-czeka { display: none; } }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .kw { grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); }
}

/* Telefon: panel z formularzem pierwszy, podgląd konta pod nim. */
@media (max-width: 1023.98px) {
  .kw { display: flex; flex-direction: column; gap: 10px; height: auto; padding: 10px; }
  .kw[hidden] { display: none; }
  .kw-panel { order: -1; padding: 22px 18px 20px; overflow: visible; }
  .kw-tytul { font-size: clamp(26px, 7.6vw, 34px); }
  .kw-scena .ek-scena-tresc { padding: 8px 6px 18px; }
  .kw-karta { rotate: 0deg; }
  .ko-panel { overflow: visible; }
  .ko-karta > .ko-plan-nakl { display: none; }
  .ko-krok-link { grid-template-columns: minmax(0, 1fr); }
  .ko-krok-pkt { position: absolute; right: 14px; top: -12px; }
  .ko-krok-dalej { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .ko-grupa ul { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Klub w koncie jako ekran narzędzia (od 14.11.2026) =====
   /konto/klub/: w panelu zakładki Zadania, Quiz, Nagrody, Ranking (z historią punktów), rysowane przez klub.js w tych samych
   kontenerach co strony części. Scena w kolorze masła z kartą klubową z /klub/ (klasy kl-* z 96-klub.css): Twoje punkty,
   poziom, pasek do następnego i cztery najbliższe nagrody. Dawne klocki Klubu w panelu ściska 91-ekrany-stare-klocki.css. */

.kh { display: grid; grid-template-columns: minmax(440px, 1.05fr) minmax(0, .95fr); gap: clamp(12px, 1.8cqw, 22px); height: 100%; min-height: 0; }
.kh-panel { display: flex; flex-direction: column; min-height: 0; padding: clamp(14px, 2.4cqh, 22px) clamp(14px, 1.8cqw, 22px); }
.kh-panel > * { flex-shrink: 0; }
.kh-panel > .karty { flex: 1 1 auto; min-height: 0; }
.kh-drobne { margin: 14px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tusz-3); }
.kh-podtytul { margin: 22px 0 10px; font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }

.kh-wszystkie { display: inline-flex; align-items: center; gap: 6px; font: 800 14px/1 var(--font-naglowki); color: var(--klub-tusz); text-decoration: none; }
.kh-wszystkie .ikona { width: 16px; height: 16px; transition: transform .2s var(--ease-out); }
.kh-wszystkie:hover .ikona { transform: translateX(3px); }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .kh { grid-template-columns: minmax(420px, 1.1fr) minmax(0, .9fr); }
}

/* Telefon: najpierw karta klubowa (punkty i nagrody), pod nią zakładki. */
@media (max-width: 1023.98px) {
  .kh { display: flex; flex-direction: column; gap: 10px; height: auto; }
  .kh-scena { order: -1; }
  .kh-panel { padding: 14px 12px; }
  /* Cztery zakładki z licznikami nie mieszczą się w rzędzie: siatka 2×2, żadna nie chowa się za krawędzią. */
  .kh-panel .karty-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
}

/* ===== Kosmetyczka w koncie jako ekran narzędzia (od 14.11.2026) =====
   /konto/kosmetyczka/: w panelu pole do dodawania i zwarta lista (kosmetyk, bliźniaczka z kwotą różnicy, usuń),
   na scenie karta kosmetyczki: zdjęcia (najpierw największa różnica, z rabatem), suma teraz i z bliźniaczkami,
   naklejka z różnicą i Maja (app.js, rysujKosmetyczke). Na komputerze ekran stoi, przewija się tylko lista. */

.kz { display: grid; grid-template-columns: minmax(400px, .95fr) minmax(0, 1.05fr); gap: clamp(12px, 1.8cqw, 22px); height: 100%; min-height: 0; }
.kz-panel { display: flex; flex-direction: column; min-height: 0; padding: clamp(14px, 2.4cqh, 22px) clamp(14px, 1.8cqw, 22px); }
.kz-panel > * { flex-shrink: 0; }
.kz-szukaj .podpowiedzi { z-index: 20; }
.kz-ile { margin: clamp(12px, 2cqh, 18px) 2px 8px; font: 800 12.5px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }
.kz-ile[hidden] { display: none; }
.kz-lista {
  flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 6px; margin: 0; padding: 0 4px 0 0; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(200 32 94 / .25) transparent;
}
.kz-ile[hidden] + .kz-lista { margin-top: clamp(12px, 2cqh, 18px); }
.kz-pusto { padding: 18px 16px; border-radius: 16px; background: var(--mgla); font-size: 14px; line-height: 1.45; color: var(--tusz-2); }

.kz-poz { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px; border-radius: 16px; background: var(--mgla); }
.kz-poz-k { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.kz-poz-foto { display: grid; place-items: center; width: 48px; height: 48px; padding: 4px; border-radius: 12px; background: #fff; overflow: hidden; }
.kz-poz-foto img { width: 100%; height: 100%; object-fit: contain; }
.kz-poz-tekst { display: grid; gap: 1px; min-width: 0; }
.kz-poz-tekst small { font: 800 11.5px/1.2 var(--font-naglowki); letter-spacing: .03em; text-transform: uppercase; color: var(--tusz-3); }
.kz-poz-tekst b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font: 700 13.5px/1.3 var(--font); }
.kz-poz-tekst span { font-size: 12.5px; color: var(--tusz-2); }
.kz-poz-k:hover b { color: var(--malina); }
.kz-poz-b {
  display: grid; grid-template-columns: 36px auto; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 13px;
  background: var(--mieta); color: var(--mieta-tusz); text-decoration: none; transition: background-color .15s, transform .2s var(--ease-out);
}
.kz-poz-b:hover { background: #C3EEDA; transform: translateX(2px); }
.kz-poz-b .kz-poz-foto { width: 36px; height: 36px; border-radius: 10px; padding: 3px; }
.kz-poz-b-tekst small { display: block; font: 800 11px/1.2 var(--font-naglowki); letter-spacing: .03em; text-transform: uppercase; }
.kz-poz-b-tekst b { display: block; font: 800 14px/1.1 var(--font-naglowki); white-space: nowrap; }
.kz-poz-brak { font-size: 12px; color: var(--tusz-3); white-space: nowrap; }
.kz-usun {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--tusz-3); cursor: pointer; transition: background-color .15s, color .15s;
}
.kz-usun:hover { background: #fff; color: var(--malina); }
.kz-usun svg { width: 14px; height: 14px; }

.kz-skan {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px;
  border-radius: 16px; background: var(--tusz); color: #fff; text-decoration: none; transition: background-color .15s;
}
.kz-skan:hover { background: #000; }
.kz-skan > .ikona { width: 22px; height: 22px; color: var(--mieta); }
.kz-skan > .ikona:last-child { width: 16px; height: 16px; color: #fff; }
.kz-skan b { display: block; font: 800 14px/1.2 var(--font-naglowki); }
.kz-skan small { display: block; margin-top: 2px; font-size: 12.5px; color: rgb(255 255 255 / .75); }

/* ----- Scena: karta kosmetyczki ----- */
.kz-scena .ek-scena-tresc { padding-right: 24px; }
.kz-wzor { display: grid; justify-items: center; gap: clamp(10px, 1.8cqh, 16px); width: 100%; max-width: 400px; }
/* Odstęp pod etykietą, żeby naklejka z różnicą (wystaje nad kartę) nie zasłaniała napisu. */
.kz-wzor .etykieta-sceny { margin: 0 0 10px; }
.kz-karta {
  position: relative; width: 100%; padding: clamp(14px, 2.4cqh, 22px); background: #fff; border: 4px solid var(--tusz); border-radius: 26px;
  box-shadow: 0 18px 36px rgb(140 30 80 / .16); rotate: -1.2deg;
}
.kz-fotki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1cqh, 10px); margin: 0; padding: 0; list-style: none; }
.kz-fotki li { position: relative; aspect-ratio: 1; min-width: 0; min-height: 0; }
.kz-foto { position: absolute; inset: 0; display: block; border-radius: 16px; background: var(--mgla); transition: transform .2s var(--ease-out); }
.kz-foto:hover { transform: translateY(-2px) rotate(-1deg); }
/* Zdjęcie bez wpływu na wysokość kafelka (wysokie butelki rozpychały siatkę). */
.kz-foto img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.kz-rabat {
  position: absolute; right: -4px; bottom: -4px; padding: 3px 7px; border-radius: var(--r-pigulka); background: var(--mieta-tusz); color: #fff;
  font: 800 12px/1 var(--font-naglowki); box-shadow: 0 0 0 2px #fff;
}
.kz-puste { border-radius: 16px; box-shadow: inset 0 0 0 2px var(--linia-2); background: repeating-linear-gradient(-45deg, transparent 0 8px, rgb(200 32 94 / .04) 8px 16px); }
.kz-wiecej { display: grid; place-items: center; border-radius: 16px; background: var(--malina-tlo); color: var(--malina); font: 800 clamp(20px, 3.2cqh, 26px)/1 var(--font-naglowki); }
.kz-sumy { display: grid; gap: 6px; margin: clamp(12px, 2cqh, 18px) 0 0; padding-top: clamp(10px, 1.6cqh, 14px); border-top: 2px dashed rgb(40 20 30 / .14); }
.kz-sumy[hidden] { display: none; }
.kz-sumy div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kz-sumy dt { font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-2); }
.kz-sumy dd { margin: 0; font: 800 clamp(18px, 2.8cqh, 22px)/1 var(--font-naglowki); white-space: nowrap; }
.kz-sumy s { color: var(--tusz-3); text-decoration-thickness: 2px; }
.kz-sumy-b dt, .kz-sumy-b dd { color: var(--mieta-tusz); }
.kz-sumy-b dd { font-size: clamp(22px, 3.6cqh, 30px); }
.kz-karta > .kz-nakl { position: absolute; right: -14px; top: -14px; font-size: clamp(18px, 3cqh, 24px); transform: rotate(5deg); }
.kz-dopisek { max-width: 34ch; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--tusz-2); text-align: center; }

.ruch .kz-karta { animation: wskok .5s var(--sprezyna) both; }
.ruch .kz-nakl:not([hidden]) { animation: naklejka .5s var(--sprezyna) .25s both; }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .kz { grid-template-columns: minmax(400px, 1.1fr) minmax(0, .9fr); }
}

/* Telefon: karta kosmetyczki nad listą (najpierw wynik), bez Mai. */
@media (max-width: 1023.98px) {
  .kz { display: flex; flex-direction: column; gap: 10px; height: auto; }
  .kz-scena { order: -1; }
  /* Pusta kosmetyczka: najpierw pole do dodawania. */
  .kz:has(.kz-pusto) .kz-scena { order: 0; }
  .kz-scena .ek-scena-tresc { padding: 6px 8px 18px; }
  .kz-karta { rotate: 0deg; }
  .kz-panel { padding: 14px 12px; }
  .kz-lista { overflow: visible; padding: 0; }
  .kz-poz { grid-template-columns: minmax(0, 1fr) auto; }
  .kz-poz-b, .kz-poz-brak { grid-column: 1; justify-self: start; }
  .kz-usun { grid-column: 2; grid-row: 1 / 3; }
}

/* ===== Moja pielęgnacja w koncie jako ekran narzędzia (od 14.11.2026) =====
   /konto/pielegnacja/: w panelu kosmetyki z kosmetyczki do kliknięcia na porę i zakładki Rano, Wieczór, Uwagi, Czego nie łączyć.
   Na scenie karta rutyny: rzędy rano i wieczór z krokami po kolei (też strefy upuszczania), status uwag, link do rutyny
   i Maja z najważniejszą uwagą (app.js, rysujKp). Dawne klocki pielęgnacji (pora-*, tacka-*, zasada) ściska 91-ekrany-stare-klocki.css. */

.pg { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.8cqw, 22px); height: 100%; min-height: 0; }
.pg-panel { display: flex; flex-direction: column; min-height: 0; padding: clamp(14px, 2.4cqh, 22px) clamp(14px, 1.8cqw, 22px); }
.pg-panel > * { flex-shrink: 0; }
.pg-panel > .karty { flex: 1 1 auto; min-height: 0; }
.pg-panel .karty-lista .ikona { width: 16px; height: 16px; }
.pg-szukaj { margin: 0 0 10px; }
.pg-szukaj .podpowiedzi { z-index: 20; }
.pg-uwagi > p { margin: 0; padding: 16px; border-radius: 16px; background: var(--mgla); font-size: 14px; line-height: 1.45; color: var(--tusz-2); }
.pg-drobne { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tusz-3); }
/* Pod uwagami do własnej rutyny: wszystkie zasady łączenia (kotwica #laczenie z kart kosmetyków otwiera tę zakładkę). */
.pg-zasady { margin-top: 20px; padding-top: 16px; border-top: 2px dashed rgb(40 20 30 / .12); font-size: 13.5px; line-height: 1.5; color: var(--tusz-2); scroll-margin-top: 8px; }
.pg-zasady-tytul { margin: 0 0 6px; font: 800 18px/1.2 var(--font-naglowki); color: var(--tusz); }
.pg-zasady-tytul + p { margin: 0 0 4px; }
.pg-zasady h4 { margin: 16px 0 8px; font: 800 12px/1 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-3); }

/* ----- Scena: karta rutyny ----- */
.pg-scena .ek-scena-tresc { padding-right: 24px; }
.pg-wzor { display: grid; justify-items: center; gap: clamp(10px, 1.8cqh, 16px); width: 100%; max-width: 420px; }
.pg-wzor .etykieta-sceny { margin: 0; }
.pg-karta {
  display: grid; gap: clamp(8px, 1.4cqh, 12px); width: 100%; padding: clamp(12px, 2cqh, 18px); background: #fff; border: 4px solid var(--tusz);
  border-radius: 26px; box-shadow: 0 18px 36px rgb(140 30 80 / .16); rotate: -1.2deg;
}
.pg-rzad { display: grid; gap: 10px; padding: clamp(10px, 1.6cqh, 14px) 12px; border-radius: 18px; }
.pg-rzad--rano { background: var(--klub-tlo); }
.pg-rzad--wieczor { background: var(--dna-tlo); }
.pg-rzad-glowa { display: flex; align-items: center; gap: 8px; margin: 0; }
.pg-rzad-glowa .ikona { width: 28px; height: 28px; padding: 5px; border-radius: 50%; color: #fff; }
.pg-rzad--rano .pg-rzad-glowa .ikona { background: var(--klub); color: var(--tusz); }
.pg-rzad--wieczor .pg-rzad-glowa .ikona { background: var(--dna); }
.pg-rzad-glowa b { font: 800 17px/1 var(--font-naglowki); }
.pg-rzad--rano .pg-rzad-glowa b { color: var(--klub-tusz); }
.pg-rzad--wieczor .pg-rzad-glowa b { color: #3B2A7A; }
.pg-rzad-glowa small { margin-left: auto; font: 800 12px/1 var(--font-naglowki); letter-spacing: .05em; text-transform: uppercase; color: var(--tusz-3); }

.pg-kroki { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-krok { position: relative; flex: 0 0 auto; width: clamp(48px, 7.6cqh, 60px); aspect-ratio: 1; }
/* Kreska między krokami: kolejność czyta się jak ścieżka. */
.pg-krok + .pg-krok::before { content: ""; position: absolute; left: -10px; top: 50%; width: 8px; height: 2px; border-radius: 2px; background: rgb(40 20 30 / .22); }
.pg-krok a { position: absolute; inset: 0; display: block; border-radius: 14px; background: #fff; box-shadow: 0 2px 6px rgb(40 20 30 / .08); transition: transform .2s var(--ease-out); }
.pg-krok a:hover { transform: translateY(-2px); }
.pg-krok img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.pg-nr {
  position: absolute; left: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tusz); color: #fff; font: 800 12px/1 var(--font-naglowki); box-shadow: 0 0 0 2px #fff;
}
.pg-krok--wiecej span {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; background: rgb(255 255 255 / .7);
  font: 800 18px/1 var(--font-naglowki); color: var(--tusz-2);
}
.pg-krok--pusty { flex: 1; width: auto; aspect-ratio: auto; }
.pg-krok--pusty a {
  position: static; display: grid; place-items: center; min-height: clamp(48px, 7.6cqh, 60px); padding: 0 12px; border: 2px dashed rgb(40 20 30 / .18);
  background: rgb(255 255 255 / .55); box-shadow: none; font: 750 13.5px/1.2 var(--font-naglowki); color: var(--tusz-2); text-decoration: none;
}
.pg-krok--pusty a:hover { transform: none; border-color: var(--malina); color: var(--malina); }

.pg-status {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 14px 10px 10px;
  border-radius: 16px; color: inherit; text-decoration: none; transition: transform .2s var(--ease-out);
}
.pg-status[hidden] { display: none; }
.pg-status:hover { transform: translateX(2px); }
.pg-status::before {
  content: "✓"; grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--zielen); color: #fff; font: 800 15px/1 var(--font-naglowki);
}
.pg-status::after { content: "→"; grid-column: 3; grid-row: 1 / 3; font: 800 16px/1 var(--font-naglowki); }
.pg-status b { grid-column: 2; font: 800 14.5px/1.2 var(--font-naglowki); }
.pg-status span { grid-column: 2; font-size: 12.5px; line-height: 1.3; color: var(--tusz-2); }
.pg-status--ok, .pg-status--info { background: var(--zielen-jasna); color: var(--mieta-tusz); }
/* Kolory jak karty w zakładce Uwagi: uwaga malinowa, podpowiedź bursztynowa. */
.pg-status--uwaga { background: var(--malina-tlo); color: var(--malina-ciemna); }
.pg-status--uwaga::before { content: "!"; background: var(--malina); }

.pg-akcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 0; }
.pg-udostepnij .ikona { width: 18px; height: 18px; }
.pg-wyczysc {
  padding: 8px 4px; border: 0; background: none; color: var(--tusz-3); font: 700 13.5px/1 var(--font);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pg-wyczysc:hover { color: var(--malina); }
.pg-dopisek { max-width: 36ch; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--tusz-2); text-align: center; }
.pg:not(.pg--ma) .pg-akcje, .pg:not(.pg--ma) .pg-dopisek { display: none; }

.ruch .pg-karta { animation: wskok .5s var(--sprezyna) both; }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .pg { grid-template-columns: minmax(400px, 1.1fr) minmax(0, .9fr); }
}

/* Telefon: panel z listami, pod nim karta rutyny z linkiem (bez Mai). */
@media (max-width: 1023.98px) {
  .pg { display: flex; flex-direction: column; gap: 10px; height: auto; }
  .pg-scena .ek-scena-tresc { padding: 6px 8px 18px; }
  .pg-karta { rotate: 0deg; }
  .pg-panel { padding: 14px 12px; }
  .pg-panel .karty-lista .ikona { display: none; }
  .pg-krok { width: 52px; }
}