/* Wygląd Banklika: ciemny, grafitowy motyw, karty ofert, licznik, moneta, podstrony.
   Ładowany jako ostatni arkusz na każdej stronie, więc nadpisuje styles.css, revision.css, offers.css,
   static-pages.css, offer-page.css i legal.css, które dalej dają podstawowy układ.

/* Ciepły grafit zamiast czerni: neutralne tło bez barwnego zafarbu, kremowy tekst, kolor tylko w akcentach. */
:root[data-theme="dark"] {
  --bg: #181818;
  --line: rgba(255, 253, 243, .1);
  --ns-bg: #181818;
  --ns-page-bg: #181818;
  --ns-panel: #242424;
  --ns-panel-hover: #2a2a2a;
  --ns-raised: #343434;
  --ns-raised-hover: #414141;
  --ns-line-strong: rgba(255, 253, 243, .28);
  --ns-text: #f1f0d6;
  --ns-soft: #dedcbf;
  --ns-muted: #a3a184;
  --ns-accent: #84cffa;
  --ns-on-accent: #1c1c1c;
  --ns-cta-bg: #fffdf3;
  --ns-green: #9be48b;
  /* Głębsze odcienie tej samej pary - tylko na zygzak pod tytułem, jasne były tam za krzykliwe. */
  --ns-green-deep: #479c4d;
  --ns-blue-deep: #1b92c2;
  --ns-green-tint: rgba(155, 228, 139, .14);
  --ns-blue: #84cffa;
  --ns-sky: #c4e6fd;
  --ns-card-glow: radial-gradient(ellipse 60% 70% at 88% 0%, rgba(132, 207, 250, .11), transparent 70%), radial-gradient(ellipse 50% 60% at 100% 100%, rgba(155, 228, 139, .08), transparent 70%);
  --ns-tab-bg: #fffdf3;
  --ns-tab-text: #1c1c1c;
  --ns-tab-count-bg: #1c1c1c;
  --ns-tab-count-text: #f1f0d6;
  --ns-meter-off: rgba(255, 253, 243, .2);
  --ns-on-green: #10200c;
  --ns-orbit-base: #3a3a3a;
  --ns-shadow: rgba(0, 0, 0, .4);
  --ns-backdrop: rgba(0, 0, 0, .72);
  --ns-warn: #ff9a6b;
  --ns-warn-bg: #2b2018;
  --ns-urgent-text: #ffd2b8;
  /* Żółć monety: liczniki ofert („15 aktywnych”, „15 promocji”). */
  --ns-yellow: #ffd257;
  --ns-yellow-tint: rgba(255, 201, 40, .14);
  /* Ikona „klik”: kursor z kreskami, w barwach motywu (obrazek, bo stoi w tle kółka przycisku). */
  --ns-click-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 -9 26 30'%3E%3Cpath d='M-2.2 -2.2-6 -6M-3.2 1.4-8 2.2M1.4 -3.2 2.2 -8' fill='none' stroke='%239be48b' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M0 0V15.2L3.7 11.5 6.3 17.3 8.6 16.3 6 10.6H11.2Z' fill='%23f1f0d6' stroke='%23181818' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ns-grad-green: linear-gradient(90deg, var(--ns-blue), var(--ns-green));
  /* Drobne etykiety: bezszeryfowy DM Sans zamiast pisma maszynowego (nazwa zmiennej została z poprzedniej wersji). */
  --ns-mono: "DM Sans", sans-serif;
  --ns-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* Motyw jasny: neutralna, prawie biała strona, białe karty, czarne przyciski. */
:root[data-theme="light"] {
  --bg: #f5f5f3;
  --line: rgba(31, 31, 31, .1);
  --ns-bg: #f5f5f3;
  --ns-page-bg: #f5f5f3;
  --ns-panel: #ffffff;
  --ns-panel-hover: #ffffff;
  --ns-raised: #ececea;
  --ns-raised-hover: #e0e0dd;
  --ns-line-strong: rgba(31, 31, 31, .3);
  --ns-text: #1f1f1f;
  --ns-soft: #3d3d3d;
  --ns-muted: #717173;
  --ns-accent: #0a6d99;
  --ns-on-accent: #ffffff;
  --ns-cta-bg: #1f1f1f;
  --ns-green: #1e7546;
  --ns-green-deep: #479c4d;
  --ns-blue-deep: #1b92c2;
  --ns-green-tint: rgba(30, 117, 70, .13);
  --ns-blue: #0a6d99;
  --ns-sky: #064f70;
  --ns-card-glow: radial-gradient(ellipse 60% 70% at 88% 0%, rgba(27, 146, 194, .08), transparent 70%), radial-gradient(ellipse 50% 60% at 100% 100%, rgba(71, 156, 77, .08), transparent 70%);
  --ns-tab-bg: #1f1f1f;
  --ns-tab-text: #ffffff;
  --ns-tab-count-bg: #ffffff;
  --ns-tab-count-text: #1f1f1f;
  --ns-meter-off: rgba(31, 31, 31, .18);
  --ns-on-green: #ffffff;
  --ns-orbit-base: #dcdcd8;
  --ns-shadow: rgba(31, 31, 31, .14);
  --ns-backdrop: rgba(31, 31, 31, .45);
  --ns-warn: #d9480f;
  --ns-warn-bg: #fbe9db;
  --ns-urgent-text: #9a3c0c;
  --ns-yellow: #8a5a00;
  --ns-yellow-tint: rgba(255, 201, 40, .22);
  --ns-click-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 -9 26 30'%3E%3Cpath d='M-2.2 -2.2-6 -6M-3.2 1.4-8 2.2M1.4 -3.2 2.2 -8' fill='none' stroke='%231e7546' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M0 0V15.2L3.7 11.5 6.3 17.3 8.6 16.3 6 10.6H11.2Z' fill='%231f1f1f' stroke='%23f5f5f3' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ns-header-dark: 0;
  --ns-grad-green: linear-gradient(90deg, var(--ns-blue), var(--ns-green));
  /* Drobne etykiety: bezszeryfowy DM Sans zamiast pisma maszynowego (nazwa zmiennej została z poprzedniej wersji). */
  --ns-mono: "DM Sans", sans-serif;
  --ns-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* ---------- Tło i nagłówek ---------- */
:root[data-theme] body { background: var(--ns-page-bg); color: var(--ns-text); }
:root[data-theme] :is(a, button, summary, input, .offer-card):focus-visible { outline-color: var(--ns-accent); }

/* Napis „Banklik”: Special Gothic Expanded One. Krój jest bardzo szeroki, stąd mniejszy stopień
   i brak ściśnięcia liter, które miał Manrope. */
@font-face {
  font-family: 'Special Gothic Expanded One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Special_Gothic_Expanded_One/SpecialGothicExpandedOne-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Instrument_Serif/InstrumentSerif-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Instrument_Serif/InstrumentSerif-Italic.ttf) format('truetype');
}
.brand {
  font: 400 clamp(2.1rem, 4.4vw, 3.4rem)/1 'Special Gothic Expanded One', Manrope, sans-serif;
  letter-spacing: -.01em;
}
:root[data-theme] .brand { color: var(--ns-text); }
:root[data-theme] .brand-description { color: var(--ns-muted); }
:root[data-theme] .theme-toggle { border-color: transparent; background: var(--ns-raised); color: var(--ns-text); }
:root[data-theme] .theme-toggle:hover { border-color: transparent; background: var(--ns-raised-hover); }

/* Przycisk „Zobacz oferty” w nagłówku. */
.topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ns-cta-bg);
  color: var(--ns-on-accent);
  font: 600 .92rem 'DM Sans', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}
.topbar-cta:hover { filter: brightness(1.1); }

/* ---------- Rotator banków w nagłówku ----------
   Logo wjeżdża od dołu, poprzednie wyjeżdża górą; kwota przewija się litera po literze. */
.bank-roll {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  color: var(--ns-text);
  text-decoration: none;
}
.bank-roll[hidden] { display: none; }
.bank-roll-logo { position: relative; flex: none; width: 124px; height: 46px; overflow: hidden; }
.bank-roll-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
.bank-roll-logo img.is-entering { transform: translateY(110%); opacity: 0; }
.bank-roll-logo img.is-leaving { transform: translateY(-110%); opacity: 0; }
.bank-roll-text { display: flex; flex-direction: column; gap: 5px; min-width: 7.2em; padding-left: 16px; border-left: 1px solid var(--line); }
.bank-roll-text small { color: var(--ns-muted); font: 500 .62rem var(--ns-mono); letter-spacing: .14em; text-transform: uppercase; }
.bank-roll-amount { position: relative; display: block; height: 1.25em; overflow: hidden; font: 600 1.2rem/1.25 Manrope, sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.bank-roll-amount .roll-line { position: absolute; top: 0; left: 0; display: flex; }
.bank-roll-amount .roll-line span {
  display: inline-block;
  white-space: pre;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
  transition-delay: calc(var(--i) * 28ms);
}
.bank-roll-amount .roll-line.is-entering span { transform: translateY(105%); opacity: 0; }
.bank-roll-amount .roll-line.is-leaving span { transform: translateY(-105%); opacity: 0; }
.bank-roll:hover .bank-roll-amount { color: var(--ns-sky); }
/* Opis pod logo: słowa wyłaniają się po kolei przy wejściu na stronę. */
.brand-description .word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(.5em);
  animation: word-in .7s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--i) * 45ms + 150ms);
}
@keyframes word-in { to { opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .brand-description .word { opacity: 1; filter: none; transform: none; animation: none; }
  .bank-roll-logo img, .bank-roll-amount .roll-line span { transition: none; }
}

/* ---------- Moneta obok logo ---------- */
.topbar { position: relative; }
.top-coin {
  position: absolute;
  /* Przybliżona pozycja przed startem skryptu; dokładną ustawia banklik.js. */
  top: 70px;
  left: calc(50% + 150px);
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  perspective: 700px;
  pointer-events: none;
}
/* Po starcie skryptu moneta odkleja się od nagłówka i jeździ po ekranie. */
.top-coin.is-floating {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  transition: transform .62s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
/* Cień jest tutaj, a nie na obracanej monecie: filter spłaszcza 3D i rewers przestaje zasłaniać awers. */
/* Poza listą ofert moneta znika, żeby nie wisiała na środku ekranu nad spisem i stopką. */
.top-coin.is-floating { transition: transform .62s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.top-coin.is-away { opacity: 0; }
.top-coin-arrival { width: 100%; height: 100%; filter: drop-shadow(0 12px 18px var(--ns-shadow)); }
.top-coin.is-arriving .top-coin-arrival { animation: top-coin-arrival .72s cubic-bezier(.18, .88, .22, 1.35); }
.top-coin-ring { position: absolute; inset: -8px; border: 1px solid transparent; border-radius: 50%; }
.top-coin.is-over-offer .top-coin-ring { animation: top-coin-ring 1.4s ease-out infinite; }
.top-coin-front text { fill: #3b2600; font: 800 27px Manrope, sans-serif; letter-spacing: -1.5px; }
.top-coin-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: top-coin-turn 7s ease-in-out infinite;
}
.top-coin-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  backface-visibility: hidden;
}
.top-coin-face svg { display: block; width: 100%; height: 100%; }
/* Błysk przesuwający się po awersie. */
.top-coin-front::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -70%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: rotate(18deg);
  animation: top-coin-shine 3.8s ease-in-out infinite;
}
.top-coin-back {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff0a3, #ffc928 55%, #d98f00);
  box-shadow: inset 0 0 0 4px rgba(255, 246, 204, .55);
  color: #3b2600;
  font: 400 1.5rem/1 'Special Gothic Expanded One', Manrope, sans-serif;
  transform: rotateY(180deg);
}
@keyframes top-coin-turn {
  0%, 18% { transform: rotateX(8deg) rotateY(0deg) rotateZ(-3deg); }
  42%, 58% { transform: rotateX(-4deg) rotateY(180deg) rotateZ(2deg); }
  82%, 100% { transform: rotateX(8deg) rotateY(360deg) rotateZ(-3deg); }
}
@keyframes top-coin-arrival {
  0% { transform: translateY(-18px) scale(.72) rotate(-14deg); }
  70% { transform: translateY(3px) scale(1.07) rotate(3deg); }
  100% { transform: none; }
}
@keyframes top-coin-ring {
  0% { border-color: rgba(255, 201, 40, .55); opacity: 1; transform: scale(.82); }
  100% { border-color: rgba(255, 201, 40, 0); opacity: 0; transform: scale(1.45); }
}
@keyframes top-coin-shine {
  0%, 25% { left: -70%; }
  58%, 100% { left: 145%; }
}
@media (prefers-reduced-motion: reduce) {
  .top-coin-body, .top-coin-front::after, .top-coin.is-arriving .top-coin-arrival, .top-coin.is-over-offer .top-coin-ring { animation: none; }
  .top-coin.is-floating { transition: none; }
}

/* ---------- Wstęp: hasło i najlepsza promocja dnia ---------- */
.lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px clamp(40px, 7vw, 120px);
  padding: clamp(44px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--line);
}
.lead-title {
  margin: 0;
  max-width: 13em;
  font: 500 clamp(2.5rem, 6vw, 5.2rem)/1 Manrope, sans-serif;
  letter-spacing: -.075em;
  text-wrap: balance;
}
.lead-title em {
  display: block;
  margin-top: .08em;
  color: var(--ns-green);
  font: italic 400 1.02em/1.05 var(--ns-serif);
  letter-spacing: -.035em;
}
/* h1 poza nagłówkiem dziedziczy ściśnięty krój tytułów, stąd pełny zapis fontu. */
.lead h1.brand-description { max-width: 34em; margin: 26px 0 0; font: 400 clamp(1rem, 1.25vw, 1.1rem)/1.55 'DM Sans', sans-serif; letter-spacing: normal; }
.lead-best { min-width: min(100%, 360px); }
.lead-best p { margin: 0; }
.lead-label, .lead-deadline, .lead-countdown small {
  color: var(--ns-muted);
  font: 500 .68rem var(--ns-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lead-bank {
  display: inline-block;
  margin-top: 18px;
  color: var(--ns-blue);
  font: 500 clamp(3rem, 6vw, 4.6rem)/1 Manrope, sans-serif;
  letter-spacing: -.075em;
  text-decoration: none;
}
.lead-bank:hover { color: var(--ns-sky); }
.lead-offer { margin-top: 10px !important; color: var(--ns-soft); font-size: .98rem; }
.lead-deadline { display: flex; align-items: center; gap: 14px; margin-top: 30px !important; }
.lead-deadline i { flex: 1; height: 1px; background: var(--line); }
.lead-countdown { display: flex; gap: clamp(18px, 3vw, 34px); margin-top: 14px; }
.lead-countdown span { display: flex; flex-direction: column; gap: 8px; }
.lead-countdown span + span { padding-left: clamp(18px, 3vw, 34px); border-left: 1px solid var(--line); }
.lead-countdown b {
  font: 500 clamp(2rem, 3.6vw, 2.8rem)/1 Manrope, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
@media (max-width: 900px) {
  .lead { grid-template-columns: minmax(0, 1fr); }
}

/* Odręczne podkreślenie słowa „promocji”: zygzak rysowany jednym pociągnięciem.
   Skrypt dodaje is-waiting (linia schowana), a gdy tytuł wejdzie w ekran - is-drawn (linia się rysuje).
   Bez skryptu linia jest po prostu widoczna. */
/* Tytuł listy krojem z logo, zygzak pod „promocji”, obok zielona pigułka z liczbą ofert zamiast „/ 15”. */
:root[data-theme] .section-head h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px .3em;
  font: 400 clamp(1.5rem, 2.8vw, 2.2rem)/1.15 'Special Gothic Expanded One', Manrope, sans-serif;
  letter-spacing: -.01em;
}
.title-mark { position: relative; display: inline-block; }
:root[data-theme] .section-head .section-count { display: none; }
.title-count { margin-left: .4em; padding: 6px 12px 6px 9px; font-size: .82rem; letter-spacing: 0; }
.title-count[hidden] { display: none; }
.title-scribble {
  position: absolute;
  bottom: -.3em;
  left: 0;
  width: 100%;
  height: .36em;
  overflow: visible;
}
.title-scribble path { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Kolory zygzaka z palety, żeby zmieniały się razem z motywem. */
.title-scribble stop:first-child { stop-color: var(--ns-blue-deep); }
.title-scribble stop:last-child { stop-color: var(--ns-green-deep); }
.title-scribble.is-waiting path { opacity: 0; stroke-dashoffset: 1; }
.title-scribble.is-drawn path { animation: title-scribble 1s .3s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes title-scribble { to { opacity: 1; stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .title-scribble.is-waiting path { opacity: 1; stroke-dashoffset: 0; animation: none; }
}

/* ---------- Drobne etykiety: pismo maszynowe, wersaliki ---------- */
:root[data-theme] :is(.rank, .card-deadline, .featured-tag, .up-to, .sort-note, .section-count, .card-chip, .tab-count, .detail-label, .detail-eyebrow, .offer-index-group h3, .offer-index-bank, footer) {
  font-family: var(--ns-mono);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------- Zakładki kategorii ---------- */
:root[data-theme] .category-tabs { border-color: var(--line); background: var(--ns-panel); }
:root[data-theme] .category-tab { color: var(--ns-muted); font-weight: 600; }
:root[data-theme] .category-tab:hover { background: var(--ns-raised); color: var(--ns-text); }
:root[data-theme] .category-tab[aria-selected="true"] { background: var(--ns-tab-bg); color: var(--ns-tab-text); }
:root[data-theme] .tab-count { background: var(--ns-raised); color: var(--ns-blue); font-size: .72rem; }
:root[data-theme] .category-tab[aria-selected="true"] .tab-count { background: var(--ns-tab-count-bg); color: var(--ns-tab-count-text); }

:root[data-theme] .section-head h2 { color: var(--ns-text); font-weight: 500; letter-spacing: -.045em; }
:root[data-theme] .section-count { color: var(--ns-muted); font-size: .78rem; }
:root[data-theme] .sort-note { color: var(--ns-muted); }
:root[data-theme] .sort-toggle b { color: var(--ns-text); font-weight: 500; }
:root[data-theme] .category-intro { color: var(--ns-muted); }

/* ---------- Karty ofert ----------
   Efekty z pierwotnej wersji (wirująca ramka, poświata, smuga, uniesienie) wróciły w kolorach nowej palety. */
:root[data-theme] .offer-card,
:root[data-theme] .offer-card-featured {
  border: 2px solid var(--line);
  border-radius: 32px;
  /* Delikatna niebiesko-zielona łuna w rogach karty, żeby panel nie był martwą plamą. */
  background: var(--ns-card-glow), var(--ns-panel);
  color: var(--ns-text);
  box-shadow: none;
}
:root[data-theme] .offer-card::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ns-blue) 7%, transparent), color-mix(in srgb, var(--ns-green) 4%, transparent), transparent);
}
:root[data-theme] .offer-card:is(:hover, :focus-visible, .is-in-view) {
  border-color: transparent;
  background:
    var(--ns-card-glow) padding-box,
    linear-gradient(var(--ns-panel-hover), var(--ns-panel-hover)) padding-box,
    conic-gradient(from var(--orbit-angle), var(--ns-orbit-base) 0deg 225deg, var(--ns-blue) 262deg, var(--ns-sky) 288deg, var(--ns-green) 317deg, var(--ns-blue) 342deg, var(--ns-orbit-base) 360deg) border-box;
  box-shadow: 0 22px 48px var(--ns-shadow), 0 0 0 1px color-mix(in srgb, var(--ns-blue) 40%, transparent), 0 0 40px color-mix(in srgb, var(--ns-blue) 16%, transparent);
  animation: border-orbit 2.5s linear infinite;
}

:root[data-theme] .offer-card .rank,
:root[data-theme] .offer-card .card-deadline { color: var(--ns-muted); }
:root[data-theme] .offer-card .featured-tag { color: var(--ns-green); }
:root[data-theme] .offer-card .offer-name { color: var(--ns-muted); }

/* Duża kwota krojem z logo; nad nią „Premia do” (napis podmienia skrypt), obok małe „zł”. */
:root[data-theme] .offer-card .money-line { flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 4px; }
:root[data-theme] .offer-card .money-line .up-to { flex: 1 0 100%; margin: 0; color: var(--ns-muted); font: 600 .72rem 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
:root[data-theme] .offer-card .money-line strong { font: 400 clamp(3rem, 6.4vw, 4.8rem)/1 'Special Gothic Expanded One', Manrope, sans-serif; letter-spacing: -.01em; }
:root[data-theme] .offer-card .money-line .currency { color: var(--ns-muted); font: 600 clamp(1.1rem, 1.8vw, 1.5rem) 'DM Sans', sans-serif; }
:root[data-theme] .detail-amount strong { font: 400 clamp(3.2rem, 7vw, 5.4rem)/1 'Special Gothic Expanded One', Manrope, sans-serif; letter-spacing: -.01em; }
:root[data-theme] .detail-amount small { margin-left: .15em; color: var(--ns-muted); font: 600 .3em 'DM Sans', sans-serif; }
:root[data-theme] .offer-card .money-line strong::after {
  bottom: -8px;
  height: 3px;
  border-radius: 0;
  background: var(--ns-grad-green);
  box-shadow: none;
}
:root[data-theme] .offer-card :is(.up-to, .currency) { color: var(--ns-muted); }
:root[data-theme] .offer-card .currency { font-weight: 500; }

:root[data-theme] .card-chip { border-color: transparent; background: var(--ns-raised); color: var(--ns-soft); font-size: .72rem; }
:root[data-theme] .effort-meter i { background: var(--ns-meter-off); }

/* Składniki premii jako tabelka z cienkimi liniami. */
:root[data-theme] .card-breakdown { gap: 0; }
:root[data-theme] .card-breakdown-row { padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
:root[data-theme] .card-breakdown-row strong { font: 500 1rem var(--ns-mono); letter-spacing: 0; }
:root[data-theme] .card-breakdown-row > span { color: var(--ns-soft); }

/* Przycisk „Szczegóły promocji”: limonkowa pigułka z czarnym kółkiem i strzałką. */
:root[data-theme] .offer-card .card-details {
  align-self: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: auto;
  min-height: 52px;
  padding: 6px 6px 6px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ns-cta-bg);
  color: var(--ns-on-accent);
  font: 600 1rem 'DM Sans', sans-serif;
  transition: background .2s ease;
}
:root[data-theme] .offer-card .card-details::after {
  /* Zamiast strzałki „klik” myszką - bank + klik. */
  content: "";
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ns-click-icon) 58% 56% / 19px 22px no-repeat, var(--ns-bg);
  transition: transform .2s ease;
}
:root[data-theme] .offer-card .card-details:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 10px 28px var(--ns-shadow); }
:root[data-theme] .offer-card .card-details:hover::after { transform: none; animation: click-press .5s ease-in-out; }
@keyframes click-press { 40% { transform: scale(.86); } }

:root[data-theme] .ranking-note { color: var(--ns-muted); }
:root[data-theme] .affiliate-note-bottom strong { color: var(--ns-soft); }
:root[data-theme] .ranking-note a { color: var(--ns-text); }

/* ---------- Spis promocji i stopka ---------- */
:root[data-theme] .offer-index h2 { color: var(--ns-text); font-weight: 500; letter-spacing: -.045em; }
:root[data-theme] .offer-index-group { border-color: var(--line); border-radius: 16px; background: var(--ns-panel); }
:root[data-theme] .offer-index-group h3 { color: var(--ns-muted); }
:root[data-theme] .offer-index-group li { border-top-color: var(--line); }
:root[data-theme] .offer-index-bank { color: var(--ns-muted); font-size: .7rem; }
:root[data-theme] .offer-index-name { font-weight: 500; }
:root[data-theme] .offer-index-group strong { font: 500 .92rem var(--ns-mono); letter-spacing: 0; }
:root[data-theme] .offer-index-ended { color: var(--ns-muted); }
:root[data-theme] footer { color: var(--ns-muted); }
:root[data-theme] footer a { color: var(--ns-text); }

/* ---------- Góra strony: wszystko na osi, moneta na prawo od logo ---------- */
.topbar {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 48px 0 34px;
  text-align: center;
}
.brand-cluster { display: flex; flex-direction: column; align-items: center; }
.brand-cluster h1.brand-description { max-width: 34em; margin-top: 16px; }
.topbar-actions { position: absolute; top: 26px; right: 0; }
/* Rotator jako pigułka pod opisem. */
.bank-roll {
  margin: 26px 0 0;
  padding: 10px 26px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ns-panel);
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}
.bank-roll:hover { border-color: var(--ns-line-strong); background: var(--ns-panel-hover); }
.bank-roll-logo { width: 118px; height: 40px; }
/* Logo w rotatorze ma wymiary nadane przez skrypt i stoi na środku miejsca. */
.bank-roll-logo img { margin: auto; object-position: center; }
:root[data-theme] .category-tabs { margin-inline: auto; }
.ranking { padding-top: 34px; }

/* ---------- Dół strony ---------- */
:root[data-theme] .offer-index { padding-top: 26px; border-top: 1px solid var(--line); }
/* Spis „Wszystkie promocje w skrócie”: trzy zwijane grupy, domyślnie zamknięte. Linki są w HTML-u cały czas. */
:root[data-theme] .offer-index-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
:root[data-theme] details.offer-index-group { padding: 0; }
.offer-index-group summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  list-style: none;
  cursor: pointer;
}
.offer-index-group summary::-webkit-details-marker { display: none; }
:root[data-theme] .offer-index-group summary h3 { margin: 0; color: var(--ns-text); font: 600 1.06rem 'DM Sans', sans-serif; letter-spacing: -.01em; text-transform: none; }
.offer-index-count { color: var(--ns-muted); font: 500 .68rem var(--ns-mono); letter-spacing: .1em; text-transform: uppercase; }
.offer-index-group summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ns-raised);
  font-size: 1.2rem;
  transition: transform .2s ease;
}
.offer-index-group[open] summary::after { transform: rotate(45deg); }
.offer-index-group summary:focus-visible { outline: 3px solid var(--ns-blue); outline-offset: 2px; border-radius: 16px; }
.offer-index-group > :is(ul, p) { margin-inline: 22px !important; }
.offer-index-all { display: inline-block; margin: 14px 22px 20px; color: var(--ns-text); font: 600 .9rem 'DM Sans', sans-serif; text-underline-offset: 4px; }
/* Płynne rozwijanie tam, gdzie przeglądarka to umie; gdzie indziej otwiera się od razu. */
@supports (interpolate-size: allow-keywords) {
  .offer-index-group { interpolate-size: allow-keywords; }
  .offer-index-group::details-content { block-size: 0; overflow: hidden; transition: block-size .35s cubic-bezier(.22, 1, .36, 1), content-visibility .35s allow-discrete; }
  .offer-index-group[open]::details-content { block-size: auto; }
}

/* „Promocje według banku” i „Poradniki”: zamiast zdania z linkami - rząd pigułek. Poradniki mają osobną klasę,
   bo banklik.js zamienia linki w .offer-index-banks na kafelki banków. */
:root[data-theme] :is(.offer-index-banks, .offer-index-guides) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; color: var(--ns-muted); font: 500 .68rem var(--ns-mono); letter-spacing: .1em; text-transform: uppercase; }
:root[data-theme] :is(.offer-index-banks, .offer-index-guides) a {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ns-raised);
  color: var(--ns-text);
  font: 600 .86rem 'DM Sans', sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  transition: background .2s ease;
}
:root[data-theme] :is(.offer-index-banks, .offer-index-guides) a:hover { background: var(--ns-raised-hover); }
/* Stopka: duże logo, obok dokumenty i powrót na górę, pod spodem zastrzeżenie. */
:root[data-theme] footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px 26px;
  min-height: 0;
  padding: 40px 0 46px;
  font-size: .66rem;
  line-height: 1.6;
}
:root[data-theme] footer > span:first-child { color: var(--ns-text); font: 400 clamp(1.5rem, 3vw, 2.2rem)/1 'Special Gothic Expanded One', Manrope, sans-serif; letter-spacing: -.01em; text-transform: none; }
:root[data-theme] footer > span:nth-child(2) { order: 5; grid-column: 1 / -1; width: auto; max-width: 60em; text-transform: none; letter-spacing: 0; font: 400 .82rem/1.6 'DM Sans', sans-serif; }
:root[data-theme] footer .footer-links { display: flex; gap: 22px; }
:root[data-theme] footer > a { padding: 10px 16px; border-radius: 999px; background: var(--ns-raised); }
:root[data-theme] footer > a:hover { background: var(--ns-raised-hover); }
@media (max-width: 640px) {
  .topbar { padding: 40px 0 28px; }
  :root[data-theme] footer { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  :root[data-theme] footer .footer-links { flex-wrap: wrap; gap: 10px 22px; }
}

/* ---------- Okienko szczegółów ---------- */
:root[data-theme] .offer-dialog { border-color: var(--ns-line-strong); background: var(--ns-bg); color: var(--ns-text); box-shadow: none; }
:root[data-theme] .offer-dialog::backdrop { background: var(--ns-backdrop); backdrop-filter: none; }
:root[data-theme] .detail-top { border-bottom-color: var(--line); background: var(--ns-bg); }
:root[data-theme] .detail-label { color: var(--ns-muted); }
:root[data-theme] .close-detail { border-color: transparent; background: var(--ns-raised); color: var(--ns-text); font-weight: 600; }
:root[data-theme] .close-detail:hover { border-color: transparent; background: var(--ns-raised-hover); color: var(--ns-text); transform: none; }

:root[data-theme] .detail-hero { background: var(--ns-panel); border: 1px solid var(--line); color: var(--ns-text); }
:root[data-theme] .detail-hero h2 { font-weight: 500; letter-spacing: -.045em; }
:root[data-theme] .detail-eyebrow { color: var(--ns-green); font-size: .74rem; }
:root[data-theme] .detail-hero .hero-summary { color: var(--ns-soft); }
:root[data-theme] .detail-hero .hero-promo-name,
:root[data-theme] .detail-hero .partner-note { color: var(--ns-muted); }
:root[data-theme] .hero-badge { border-color: transparent; background: var(--ns-raised); color: var(--ns-text); font-weight: 600; }
:root[data-theme] .hero-badge.is-urgent { border-color: transparent; background: rgba(255, 154, 107, .18); color: var(--ns-urgent-text); }
:root[data-theme] .hero-rules { color: var(--ns-soft); font-weight: 600; }
:root[data-theme] .hero-rules:hover { color: var(--ns-text); }

/* Główny przycisk „Przejdź do promocji”. */
:root[data-theme] .glow-link,
:root[data-theme] .offer-dialog .glow-link {
  border: 3px solid transparent;
  border-radius: 999px;
  /* Wirujący błysk na obwódce, jak w pierwotnej wersji. */
  background:
    linear-gradient(var(--ns-cta-bg), var(--ns-cta-bg)) padding-box,
    conic-gradient(from var(--orbit-angle), var(--ns-orbit-base) 0deg 200deg, var(--ns-blue) 250deg, var(--ns-sky) 285deg, var(--ns-green) 320deg, var(--ns-orbit-base) 360deg) border-box;
  color: var(--ns-on-accent);
  animation: border-orbit 2.7s linear infinite;
}
:root[data-theme] .glow-link:hover { filter: brightness(1.1); box-shadow: 0 7px 22px var(--ns-shadow); }
:root[data-theme] .glow-link span { font-weight: 600; }
:root[data-theme] .detail-float-cta .glow-link { box-shadow: 0 10px 30px var(--ns-shadow); }

:root[data-theme] .detail-heading { font-weight: 500; letter-spacing: -.035em; }

:root[data-theme] :is(.todo-step, .savings-calc, .detail-more, .reward-list ul) { border-color: var(--line); border-radius: 16px; background: var(--ns-panel); }
:root[data-theme] .todo-step.is-repeat { border: 1px solid var(--ns-green); background: var(--ns-panel); }
:root[data-theme] .todo-number { background: var(--ns-raised); color: var(--ns-text); font: 500 1.1rem var(--ns-mono); }
:root[data-theme] .todo-step.is-repeat .todo-number { background: var(--ns-green); color: var(--ns-on-green); }
:root[data-theme] .todo-body :is(h3, h4) { font-weight: 600; }
:root[data-theme] .todo-body p { color: var(--ns-soft); }
:root[data-theme] .todo-check li { background: var(--ns-raised); color: var(--ns-text); font-weight: 500; }
:root[data-theme] .todo-check li::before { border-color: var(--ns-green); color: var(--ns-green); }

/* Wyjaśnienie pojęcia z regulaminu w kroku (np. co bank uznaje za wynagrodzenie). */
:root[data-theme] .todo-explain {
  margin: 16px 0 4px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--ns-blue) 32%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ns-blue) 7%, var(--ns-panel));
}
:root[data-theme] .todo-explain :is(h4, h5) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 8px;
  color: var(--ns-text);
  font: 700 1.02rem/1.35 "DM Sans", sans-serif;
  letter-spacing: 0;
}
:root[data-theme] .todo-explain-label {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ns-blue) 18%, transparent);
  color: var(--ns-blue);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:root[data-theme] .todo-explain > p { margin: 0; color: var(--ns-soft); line-height: 1.55; }
:root[data-theme] .todo-explain-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
:root[data-theme] .todo-explain-list { padding: 12px 14px; border-radius: 12px; background: var(--ns-raised); }
:root[data-theme] .todo-explain-list > strong { display: block; margin-bottom: 8px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
:root[data-theme] .todo-explain-list.is-yes > strong { color: var(--ns-green); }
:root[data-theme] .todo-explain-list.is-no > strong { color: var(--ns-warn); }
:root[data-theme] .todo-explain-list ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
:root[data-theme] .todo-explain-list li { position: relative; padding-left: 22px; color: var(--ns-text); font-size: .92rem; line-height: 1.4; }
:root[data-theme] .todo-explain-list li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
:root[data-theme] .todo-explain-list.is-yes li::before { content: "✓"; color: var(--ns-green); }
:root[data-theme] .todo-explain-list.is-no li::before { content: "✕"; color: var(--ns-warn); }
:root[data-theme] .todo-explain > p.todo-explain-tip { margin-top: 12px; color: var(--ns-muted); font-size: .86rem; }
@media (max-width: 640px) {
  /* Na telefonie ramka wychodzi pod numer kroku, żeby tekst nie był ściśnięty w wąskiej kolumnie. */
  :root[data-theme] .todo-explain { margin-left: -53px; padding: 16px; }
  :root[data-theme] .todo-explain-lists { grid-template-columns: minmax(0, 1fr); }
}
:root[data-theme] .todo-when { background: var(--ns-raised); color: var(--ns-soft); }
:root[data-theme] .todo-get { background: var(--ns-green-tint); color: var(--ns-green); }

:root[data-theme] .detail-warning { border: 1px solid rgba(255, 154, 107, .45); border-radius: 16px; background: var(--ns-warn-bg); }
:root[data-theme] .detail-warning :is(h2, h3) span { background: var(--ns-warn); color: var(--ns-warn-bg); }

:root[data-theme] .reward-list li { border-top-color: var(--line); color: var(--ns-text); }
:root[data-theme] .reward-list strong { font: 500 1.05rem var(--ns-mono); letter-spacing: 0; }
:root[data-theme] .reward-list li.is-optional,
:root[data-theme] .reward-list li.is-hard,
:root[data-theme] .reward-list .reward-list-total span { color: var(--ns-muted); }
:root[data-theme] .reward-list em { background: var(--ns-raised); color: var(--ns-soft); }
:root[data-theme] .reward-list .reward-list-total { background: var(--ns-raised); }

:root[data-theme] .calc-input { color: var(--ns-soft); }
:root[data-theme] .calc-input output { color: var(--ns-text); font-weight: 600; }
:root[data-theme] #calc-range::-webkit-slider-runnable-track { background: var(--ns-grad-green) 0 / var(--fill) 100% no-repeat, var(--ns-raised); }
:root[data-theme] #calc-range::-moz-range-track { background: var(--ns-raised); }
:root[data-theme] #calc-range::-moz-range-progress { background: var(--ns-grad-green); }
:root[data-theme] #calc-range::-webkit-slider-thumb { border-color: var(--ns-bg); background: var(--ns-text); box-shadow: none; }
:root[data-theme] #calc-range::-moz-range-thumb { border-color: var(--ns-bg); background: var(--ns-text); box-shadow: none; }
:root[data-theme] .calc-result { border-color: transparent; background: var(--ns-raised); }
:root[data-theme] .calc-result span { color: var(--ns-muted); }
:root[data-theme] .calc-result strong { font: 500 1.2rem var(--ns-mono); letter-spacing: 0; }
:root[data-theme] .calc-result.is-net { border-color: transparent; background: var(--ns-green-tint); }
:root[data-theme] .calc-result.is-net strong { color: var(--ns-green); }
:root[data-theme] .calc-bar-tax { background: var(--ns-muted); }
:root[data-theme] .calc-scale,
:root[data-theme] .calc-note { color: var(--ns-muted); }

:root[data-theme] .detail-more summary { font-weight: 600; }
:root[data-theme] .detail-more summary::after { background: var(--ns-raised); font-weight: 400; }
:root[data-theme] .detail-more-body p,
:root[data-theme] .detail-more-body li { color: var(--ns-soft); }
:root[data-theme] .detail-links a { color: var(--ns-text); }
:root[data-theme] .detail-more-body .detail-checked { color: var(--ns-muted); }

@media (max-width: 760px) {
  :root[data-theme] .offer-card .card-details { align-self: stretch; }
}

/* ---------- Karuzela banków pod nagłówkiem ----------
   Jedna karta stoi na wprost, po trzy z każdej strony są skręcone i chowają się jedna za drugą.
   Co --bm-step wszystko przesuwa się o jedno miejsce w lewo; karta, która wyszła z lewej,
   wraca niewidoczna na prawy koniec. Każda karta ma tę samą animację i inne opóźnienie. */
.bank-marquee {
  --bm-w: 230px;
  --bm-h: 176px;
  --bm-step: 2.8s;
  position: relative;
  height: calc(var(--bm-h) + 72px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  perspective: 1100px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.bank-flow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}
.bank-flow li {
  position: absolute;
  top: calc(var(--bm-h) / -2);
  left: calc(var(--bm-w) / -2);
  width: var(--bm-w);
  height: var(--bm-h);
  animation: bank-flow calc(var(--bm-step) * 13) cubic-bezier(.5, 0, .15, 1) infinite;
  animation-delay: calc(var(--bm-step) * (var(--bm-i, 0) - 13));
}
.bank-flow li:nth-child(2) { --bm-i: 1; }
.bank-flow li:nth-child(3) { --bm-i: 2; }
.bank-flow li:nth-child(4) { --bm-i: 3; }
.bank-flow li:nth-child(5) { --bm-i: 4; }
.bank-flow li:nth-child(6) { --bm-i: 5; }
.bank-flow li:nth-child(7) { --bm-i: 6; }
.bank-flow li:nth-child(8) { --bm-i: 7; }
.bank-flow li:nth-child(9) { --bm-i: 8; }
.bank-flow li:nth-child(10) { --bm-i: 9; }
.bank-flow li:nth-child(11) { --bm-i: 10; }
.bank-flow li:nth-child(12) { --bm-i: 11; }
.bank-flow li:nth-child(13) { --bm-i: 12; }
.bank-marquee:is(:hover, :focus-within) .bank-flow li { animation-play-state: paused; }
@keyframes bank-flow {
  0.0% { transform: translate3d(calc(var(--bm-w) * 0), 0, 0px) rotateY(0deg); filter: brightness(1); opacity: 1; }
  3.85% { transform: translate3d(calc(var(--bm-w) * 0), 0, 0px) rotateY(0deg); filter: brightness(1); opacity: 1; }
  7.69% { transform: translate3d(calc(var(--bm-w) * -0.74), 0, -150px) rotateY(46deg); filter: brightness(0.8); opacity: 1; }
  11.54% { transform: translate3d(calc(var(--bm-w) * -0.74), 0, -150px) rotateY(46deg); filter: brightness(0.8); opacity: 1; }
  15.38% { transform: translate3d(calc(var(--bm-w) * -1.3), 0, -250px) rotateY(46deg); filter: brightness(0.6); opacity: 1; }
  19.23% { transform: translate3d(calc(var(--bm-w) * -1.3), 0, -250px) rotateY(46deg); filter: brightness(0.6); opacity: 1; }
  23.08% { transform: translate3d(calc(var(--bm-w) * -1.78), 0, -330px) rotateY(46deg); filter: brightness(0.42); opacity: 1; }
  26.92% { transform: translate3d(calc(var(--bm-w) * -1.78), 0, -330px) rotateY(46deg); filter: brightness(0.42); opacity: 1; }
  30.77% { transform: translate3d(calc(var(--bm-w) * -2.2), 0, -400px) rotateY(46deg); filter: brightness(0.42); opacity: 0; }
  30.78% { transform: translate3d(calc(var(--bm-w) * 2.2), 0, -400px) rotateY(-46deg); filter: brightness(0.42); opacity: 0; }
  73.08% { transform: translate3d(calc(var(--bm-w) * 2.2), 0, -400px) rotateY(-46deg); filter: brightness(0.42); opacity: 0; }
  76.92% { transform: translate3d(calc(var(--bm-w) * 1.78), 0, -330px) rotateY(-46deg); filter: brightness(0.42); opacity: 1; }
  80.77% { transform: translate3d(calc(var(--bm-w) * 1.78), 0, -330px) rotateY(-46deg); filter: brightness(0.42); opacity: 1; }
  84.62% { transform: translate3d(calc(var(--bm-w) * 1.3), 0, -250px) rotateY(-46deg); filter: brightness(0.6); opacity: 1; }
  88.46% { transform: translate3d(calc(var(--bm-w) * 1.3), 0, -250px) rotateY(-46deg); filter: brightness(0.6); opacity: 1; }
  92.31% { transform: translate3d(calc(var(--bm-w) * 0.74), 0, -150px) rotateY(-46deg); filter: brightness(0.8); opacity: 1; }
  96.15% { transform: translate3d(calc(var(--bm-w) * 0.74), 0, -150px) rotateY(-46deg); filter: brightness(0.8); opacity: 1; }
  100% { transform: translate3d(calc(var(--bm-w) * 0), 0, 0px) rotateY(0deg); filter: brightness(1); opacity: 1; }
}
.bank-flow a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 18px 20px 16px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--ns-raised-hover), var(--ns-raised) 55%, var(--ns-panel-hover));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  color: var(--ns-text);
  text-decoration: none;
}
.bank-flow img {
  display: block;
  width: auto;
  max-width: 100%;
  height: calc(var(--bm-logo, 30px) * var(--bm-scale, 1));
  margin: auto 0;
  object-fit: contain;
  object-position: left center;
}
/* is-empty: bank bez aktualnej promocji. */
.bm-caption.is-empty span { color: var(--ns-muted); }
.bm-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.bm-caption strong { font: 600 1.3rem/1 Manrope, sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.bm-caption span { color: var(--ns-green); font: 500 .66rem var(--ns-mono); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }

/* Wysokości dobrane na oko, żeby szerokie napisy i kwadratowe znaki ważyły podobnie. */
.bm-pko, .bm-velo { --bm-logo: 58px; }
.bm-alior { --bm-logo: 54px; }
.bm-nest, .bm-mbank, .bm-millennium { --bm-logo: 44px; }
.bm-erste { --bm-logo: 42px; }
.bm-ing, .bm-scb { --bm-logo: 36px; }
.bm-pekao, .bm-bnp { --bm-logo: 30px; }
.bm-unicredit, .bm-pocztowy { --bm-logo: 26px; }

@media (max-width: 760px) {
  .bank-marquee { --bm-w: 186px; --bm-h: 148px; --bm-scale: .84; height: calc(var(--bm-h) + 52px); }
  .bank-flow a { padding: 14px 16px 13px; border-radius: 18px; }
  .bm-caption strong { font-size: 1.1rem; }
}
/* Bez ruchu: karty zastygają w układzie początkowym. */
@media (prefers-reduced-motion: reduce) {
  .bank-flow li { animation-play-state: paused; }
}

/* Telefon: logo, przycisk i przełącznik motywu muszą zmieścić się w jednym wierszu. */
@media (max-width: 520px) {
  .brand { font-size: 1.7rem; }
  .topbar { gap: 12px; }
  .topbar-actions { gap: 8px; }
  /* Na środku stoi moneta, więc przycisk „Zobacz oferty” znika - wstęp i tak jest tuż pod spodem. */
  .topbar-cta { display: none; }
  .top-coin { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .theme-toggle { width: 40px; height: 40px; min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .offer-card:is(:hover, :focus-visible, .is-in-view),
  :root[data-theme] .glow-link,
:root[data-theme] .offer-dialog .glow-link { animation: none; }
}

/* Etykieta „Możesz zyskać do” miała jeszcze starą limonkę. */
:root[data-theme] .detail-amount > span { color: var(--ns-green); }

/* ---------- Karty ofert: kolor banku, pasek premii, lista warunków, drugi przycisk ----------
   Elementy dokłada banklik.js; --bank to barwa marki ustawiana na karcie. */
:root[data-theme] .offer-card[data-bank] {
  --ns-card-glow:
    radial-gradient(ellipse 60% 70% at 88% 0%, color-mix(in srgb, var(--bank) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in srgb, var(--bank) 8%, transparent), transparent 70%);
}
:root[data-theme] .offer-card[data-bank] .money-line strong::after {
  background: linear-gradient(90deg, var(--bank), color-mix(in srgb, var(--bank) 40%, var(--ns-text)));
}
:root[data-theme] .offer-card[data-bank]:is(:hover, :focus-visible, .is-in-view) {
  background:
    var(--ns-card-glow) padding-box,
    linear-gradient(var(--ns-panel-hover), var(--ns-panel-hover)) padding-box,
    conic-gradient(from var(--orbit-angle), var(--ns-orbit-base) 0deg 225deg, var(--bank) 268deg, color-mix(in srgb, var(--bank) 45%, #fff) 300deg, var(--bank) 332deg, var(--ns-orbit-base) 360deg) border-box;
  box-shadow: 0 22px 48px var(--ns-shadow), 0 0 0 1px color-mix(in srgb, var(--bank) 40%, transparent), 0 0 40px color-mix(in srgb, var(--bank) 16%, transparent);
}

.card-urgent {
  flex: none;
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 154, 107, .18);
  color: var(--ns-urgent-text);
  font: 600 .72rem 'DM Sans', sans-serif;
  white-space: nowrap;
}
.card-top .card-urgent + .card-deadline { margin-left: 0; }

/* Nagłówki bloków na karcie: zwykłym, czytelnym pismem zamiast drobnych wersalików. */
.card-label { color: var(--ns-text); font: 600 1rem/1.2 'DM Sans', sans-serif; }
:root[data-theme] .card-offer-info { gap: 12px; }
.card-offer-info > .card-label { margin-top: 12px; }

.premium-bar { display: flex; gap: 3px; height: 10px; overflow: hidden; border-radius: 999px; transform-origin: left center; }
.premium-bar i { flex-basis: 0; min-width: 6px; background: color-mix(in srgb, var(--bank, var(--ns-green)) var(--seg), var(--ns-raised)); }
.offer-card.is-seen .premium-bar { animation: premium-fill 1.1s .15s cubic-bezier(.2, .75, .2, 1) both; }
/* Rozwijanie przez skalę, nie clip-path: przycięcie z zaokrągleniem chowało pasek po zakończeniu animacji. */
@keyframes premium-fill { from { transform: scaleX(0); } to { transform: none; } }
/* Wiersze pod paskiem: kropka w kolorze swojego odcinka. */
:root[data-theme] .card-breakdown.has-bar .card-breakdown-row { grid-template-columns: 10px 75px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 0; }
.card-breakdown.has-bar .card-breakdown-row::before {
  content: "";
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--bank, var(--ns-green)) var(--seg), var(--ns-raised));
}

/* Zielone pigułki z ptaszkiem: warunki oferty i wyróżnienia. */
.card-todo { display: flex; flex-wrap: wrap; gap: 8px; }
.check-pill,
:root[data-theme] .offer-card .featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: var(--ns-green-tint);
  color: var(--ns-green);
  font: 600 .9rem/1.2 'DM Sans', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.check-pill svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Zadania („Co trzeba zrobić”): niebieskie pigułki z ikoną czynności. Zieleń zostaje dla tego, co się dostaje. */
.task-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ns-blue) 15%, transparent);
  color: var(--ns-blue);
  font: 600 .9rem/1.2 'DM Sans', sans-serif;
}
.task-pill svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Wyróżnienie na karcie: ta sama pigułka, bez gwiazdki (pisownię poprawia skrypt). */
:root[data-theme] .offer-card .featured-tag { padding: 6px 12px 6px 9px; font-size: .8rem; }
.offer-card .featured-tag::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .offer-card.is-seen .premium-bar { animation: none; }
}
/* Telefon: stary układ dzielił wiersze premii na dwie kolumny; z paskiem i kropkami zostają jedną listą. */
@media (max-width: 760px) {
  :root[data-theme] .card-breakdown.has-bar { display: flex; flex-direction: column; gap: 0; }
  :root[data-theme] .card-breakdown.has-bar .card-breakdown-row { display: grid; grid-template-columns: 10px 68px minmax(0, 1fr); align-items: baseline; }
}

/* ---------- Logo: kursor klika w „Banklik” ----------
   Strzałka co kilka sekund „wciska się”, a wokół grotu błyskają trzy zielone kreski. */
.brand { position: relative; }
.brand-cursor {
  position: absolute;
  top: .38em;
  left: calc(100% - .32em);
  width: .7em;
  height: .8em;
  overflow: visible;
  pointer-events: none;
}
.brand-arrow {
  fill: var(--ns-text);
  stroke: var(--ns-bg);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transform-origin: 0 0;
  animation: brand-press 2.8s ease-in-out infinite;
}
.brand-rays path { fill: none; stroke: var(--ns-green); stroke-width: 2.2; stroke-linecap: round; }
.brand-rays { opacity: 0; transform-origin: 0 0; animation: brand-rays 2.8s ease-out infinite; }
@keyframes brand-press {
  0%, 34%, 58%, 100% { transform: none; }
  42%, 48% { transform: translate(.6px, .6px) scale(.86); }
}
@keyframes brand-rays {
  0%, 40% { opacity: 0; transform: scale(.6); }
  48% { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-arrow, .brand-rays { animation: none; }
  .brand-rays { opacity: 1; }
}

/* ---------- „Co dostajesz” na zielono ----------
   Pasek w odcieniach zieleni, a każda pozycja premii to zielona pigułka z kwotą „+500 zł” i opisem obok. */
.premium-bar i { background: color-mix(in srgb, var(--ns-green) var(--seg), var(--ns-raised)); }
:root[data-theme] .offer-card .card-breakdown { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
:root[data-theme] .offer-card .card-breakdown .card-breakdown-row,
:root[data-theme] .offer-card .card-breakdown.has-bar .card-breakdown-row {
  display: inline-flex;
  /* Stary układ telefonu stawiał kwotę nad opisem; tu zawsze obok siebie. */
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  max-width: 100%;
  padding: 8px 16px 8px 12px;
  border: 0;
  border-radius: 18px;
  background: var(--ns-green-tint);
}
:root[data-theme] .offer-card .card-breakdown.has-bar .card-breakdown-row::before { content: none; }
:root[data-theme] .offer-card .card-breakdown-row strong { flex: none; color: var(--ns-green); font: 700 .98rem 'DM Sans', sans-serif; letter-spacing: 0; }
/* Plus tylko przy kwotach premii; w kontach oszczędnościowych wiersze to stawki („6%”), nie zysk do dodania. */
:root[data-theme] .offer-card .card-breakdown-row strong[data-value]::before { content: "+"; }
:root[data-theme] .offer-card .card-breakdown-row > span { color: var(--ns-text); font-size: .88rem; line-height: 1.35; }

/* ---------- Odliczanie do końca oferty w rogu karty ---------- */
:root[data-theme] .offer-card .card-top { align-items: flex-start; }
:root[data-theme] .offer-card .card-countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
  color: var(--ns-muted);
  text-align: right;
}
.cd-time {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  color: var(--ns-text);
  font: 700 1.12rem/1 Manrope, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  text-transform: none;
}
.cd-days { margin-right: .5em; }
.cd-days:empty { display: none; }
.cd-digit { display: inline-block; }
.cd-sec { color: var(--ns-green); }
.cd-date { font: 500 .8rem 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; }
.card-countdown.is-urgent .cd-time,
.card-countdown.is-urgent .cd-sec { color: var(--ns-warn); }
@media (max-width: 760px) {
  .cd-time { font-size: .92rem; }
}

/* ---------- Podpowiedzi kliknięcia ----------
   Kursor pojawia się przy prawym dolnym rogu elementu, wciska się (zielone kreski), znika; cykl co 9 s. */
:is(#bank-roll, .offer-index-group summary, .offer-card .card-details) { position: relative; }
.click-hint {
  position: absolute;
  right: 14%;
  bottom: -6px;
  width: 20px;
  height: 23px;
  opacity: 0;
  pointer-events: none;
  animation: click-hint 9s var(--hint-delay, 0s) ease-in-out infinite;
}
.click-hint svg { display: block; width: 100%; height: 100%; overflow: visible; }
.click-hint-arrow { fill: var(--ns-text); stroke: var(--ns-bg); stroke-width: 1.4; stroke-linejoin: round; transform-origin: 0 0; animation: click-hint-press 9s var(--hint-delay, 0s) ease-in-out infinite; }
.click-hint-rays path { fill: none; stroke: var(--ns-green); stroke-width: 2.2; stroke-linecap: round; }
.click-hint-rays { opacity: 0; transform-origin: 0 0; animation: click-hint-rays 9s var(--hint-delay, 0s) ease-out infinite; }
@keyframes click-hint {
  0% { opacity: 0; transform: translate(14px, 12px); }
  6%, 16% { opacity: 1; transform: none; }
  22%, 100% { opacity: 0; transform: none; }
}
@keyframes click-hint-press {
  0%, 9%, 13%, 100% { transform: none; }
  10.5%, 11.5% { transform: translate(.6px, .6px) scale(.84); }
}
@keyframes click-hint-rays {
  0%, 10% { opacity: 0; transform: scale(.6); }
  12% { opacity: 1; transform: scale(1); }
  18%, 100% { opacity: 0; transform: scale(1.2); }
}


@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .offer-card .card-details:hover::after { animation: none; }
}

.bank-roll-logo img.has-chip { inset: 4px 0; height: auto; max-height: calc(100% - 8px); padding: 5px 9px; border-radius: 8px; background: #fff; box-sizing: border-box; }

/* Przełącznik motywu ukryty: strona ma jeden, grafitowy wygląd. Przycisk zostaje w HTML, bo app.js się do niego odwołuje. */
.theme-toggle { display: none !important; }

/* Każda karta ma wysokość swojej treści. Wcześniej siatka (grid-auto-rows: 1fr) i min-height
   wyrównywały wszystkie karty do najwyższej, więc oferty z jednym warunkiem były w połowie puste. */
:root[data-theme] .offer-grid { grid-auto-rows: auto; }
:root[data-theme] .offer-card,
:root[data-theme] .offer-card-featured { min-height: 0; }
:root[data-theme] .offer-card .card-main { align-content: start; align-items: start; }

/* Logotypy na kartach i w okienku: wymiary liczy skrypt (równa powierzchnia), obrazek wypełnia ramkę. */
:root[data-theme] .bank-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
:root[data-theme] .bank-logo.ing-logo img { width: auto; }

/* ---------- Szeroki ekran: zwarta karta ----------
   Lewa kolumna (logo, nazwa, kwota) trzyma się góry zamiast rozciągać się na wysokość prawej,
   a „Co dostajesz” i „Co trzeba zrobić” stoją obok siebie, więc karta jest niższa i bez pustego środka. */
.info-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.info-col > .card-label { margin-top: 0 !important; }
:root[data-theme] .card-offer-info { gap: 22px; }
@media (min-width: 1100px) {
  :root[data-theme] .card-main {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    grid-template-areas: "logo breakdown" "name breakdown" "amount breakdown" ". breakdown";
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    column-gap: clamp(32px, 4vw, 64px);
  }
  :root[data-theme] .card-main .card-offer-info {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-self: start;
    gap: 22px 36px;
  }
  :root[data-theme] .card-offer-info > .card-chips { grid-column: 1 / -1; }
}
.info-col > .premium-bar { align-self: stretch; }

/* ======================================================================
   Podstrony: oferty, banki, kategorie, dokumenty, 404
   Te same zmienne i ten sam język co strona główna; nadpisują fiolet i limonkę ze starych arkuszy.
   ====================================================================== */
/* Na podstronach nie ma monety nad logo, więc nagłówek nie potrzebuje miejsca na nią. */
.static-page .topbar { padding-top: 34px; }

:root[data-theme] :is(.static-eyebrow, .legal-kicker) { color: var(--ns-green); font: 600 .72rem 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
:root[data-theme] .static-offer-hero .static-eyebrow { color: var(--ns-green); }
:root[data-theme] .breadcrumbs { color: var(--ns-muted); }
:root[data-theme] .breadcrumbs a:hover { color: var(--ns-text); }
:root[data-theme] .static-intro h1 { color: var(--ns-text); font-weight: 500; letter-spacing: -.045em; }
:root[data-theme] .static-intro > p:not(.static-eyebrow),
:root[data-theme] .static-card > p,
:root[data-theme] .static-section :is(p, li),
:root[data-theme] .static-not-found > p:not(.static-eyebrow) { color: var(--ns-soft); }
:root[data-theme] .static-intro .static-date,
:root[data-theme] :is(.static-card-head, .static-disclosure, .static-steps .step-meta, .static-partner-note) { color: var(--ns-muted) !important; }

/* Przełącznik kategorii na stronach zbiorczych: jak zakładki na stronie głównej. */
:root[data-theme] .static-category-nav a { border-color: var(--line); background: var(--ns-panel); color: var(--ns-soft); font-weight: 600; }
:root[data-theme] .static-category-nav a:hover { border-color: var(--ns-line-strong); color: var(--ns-text); }
:root[data-theme] .static-category-nav a[aria-current="page"] { border-color: transparent; background: var(--ns-tab-bg); color: var(--ns-tab-text); }

/* Kafelki ofert na stronach banków i kategorii: jak karty na stronie głównej. */
:root[data-theme] .hub-card {
  border: 2px solid var(--line);
  border-radius: 32px;
  background: var(--ns-card-glow), var(--ns-panel);
  color: var(--ns-text);
}
:root[data-theme] .hub-card::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ns-blue) 7%, transparent), color-mix(in srgb, var(--ns-green) 4%, transparent), transparent); }
:root[data-theme] .hub-card:is(:hover, :focus-within, .is-in-view) {
  border-color: transparent;
  background:
    var(--ns-card-glow) padding-box,
    linear-gradient(var(--ns-panel-hover), var(--ns-panel-hover)) padding-box,
    conic-gradient(from var(--orbit-angle), var(--ns-orbit-base) 0deg 225deg, var(--ns-blue) 262deg, var(--ns-sky) 288deg, var(--ns-green) 317deg, var(--ns-blue) 342deg, var(--ns-orbit-base) 360deg) border-box;
  box-shadow: 0 22px 48px var(--ns-shadow), 0 0 0 1px color-mix(in srgb, var(--ns-blue) 40%, transparent), 0 0 40px color-mix(in srgb, var(--ns-blue) 16%, transparent);
}
:root[data-theme] .hub-card-top { color: var(--ns-muted); font-family: 'DM Sans', sans-serif; }
:root[data-theme] .hub-chip { border-color: transparent; background: var(--ns-raised); color: var(--ns-soft); }
:root[data-theme] .hub-meter i { background: var(--ns-meter-off); }
:root[data-theme] .hub-card h2 { color: var(--ns-muted); font-weight: 500; }
:root[data-theme] .hub-amount { flex-wrap: wrap; gap: 6px 10px; }
:root[data-theme] .hub-amount span { flex: 1 0 100%; color: var(--ns-muted); font: 600 .72rem 'DM Sans', sans-serif; letter-spacing: .12em; }
:root[data-theme] .hub-amount strong { font: 400 clamp(2.6rem, 5vw, 3.8rem)/1.05 'Special Gothic Expanded One', Manrope, sans-serif; letter-spacing: -.01em; }
:root[data-theme] .hub-amount strong::after { height: 3px; bottom: -6px; border-radius: 0; background: var(--ns-grad-green); box-shadow: none; }
:root[data-theme] .hub-amount small { color: var(--ns-muted); font: 600 1.2rem 'DM Sans', sans-serif; }
:root[data-theme] .hub-summary { color: var(--ns-soft); }
/* Przycisk kafelka: kremowa pigułka z kółkiem „klik”, jak „Szczegóły promocji”. */
:root[data-theme] .hub-cta {
  align-self: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 6px 6px 6px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ns-cta-bg);
  color: var(--ns-on-accent);
  font: 600 1rem 'DM Sans', sans-serif;
  box-shadow: none;
}
:root[data-theme] .hub-cta > span { display: none; }
:root[data-theme] .hub-cta::after { content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ns-click-icon) 58% 56% / 19px 22px no-repeat, var(--ns-bg); }
:root[data-theme] .hub-cta:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 10px 28px var(--ns-shadow); }
:root[data-theme] .hub-card:is(:hover, .is-in-view) .hub-cta { box-shadow: none; }

/* Pozostałe bloki podstron. */
:root[data-theme] :is(.static-card, .static-steps > li) { border-color: var(--line); border-radius: 20px; background: var(--ns-panel); }
:root[data-theme] .static-steps > li::before { background: var(--ns-raised); color: var(--ns-text); }
:root[data-theme] :is(.static-section, .static-rewards li) { border-bottom-color: var(--line); }
:root[data-theme] .static-rewards strong { color: var(--ns-green); }
:root[data-theme] .static-warning { border-color: rgba(255, 154, 107, .45); border-radius: 16px; background: var(--ns-warn-bg); }
:root[data-theme] :is(.static-card-foot a, .static-sources a, .static-back a, .legal a) { color: var(--ns-sky); }
:root[data-theme] .static-offer-hero { border: 1px solid var(--line); background: var(--ns-card-glow), var(--ns-panel); }
:root[data-theme] .static-offer-hero .offer-summary { color: var(--ns-soft); }
:root[data-theme] .offer-facts span { border-color: transparent; background: var(--ns-raised); color: var(--ns-soft); }
/* Główny przycisk na stronie 404 i zakończonych ofert. */
:root[data-theme] .static-cta { border-radius: 999px; background: var(--ns-cta-bg); color: var(--ns-on-accent); font-family: 'DM Sans', sans-serif; font-weight: 600; }
:root[data-theme] .static-cta:hover { background: var(--ns-cta-bg); filter: brightness(1.1); }

/* Regulamin i polityka prywatności. */
:root[data-theme] .legal { color: var(--ns-soft); }
:root[data-theme] .legal :is(h1, h2, h3) { color: var(--ns-text); }
:root[data-theme] :is(.legal-meta, .legal-toc strong, .legal th, .legal-back) { color: var(--ns-muted); }
:root[data-theme] .legal-back:hover { color: var(--ns-text); }
:root[data-theme] .legal-toc { border-color: var(--line); background: var(--ns-panel); }
:root[data-theme] .legal-callout { border-left-color: var(--ns-green); background: var(--ns-panel); }
:root[data-theme] footer .footer-links a { color: var(--ns-soft); }
:root[data-theme] footer .footer-links a:hover { color: var(--ns-text); }

/* Strona zakończonej oferty: komunikat o końcu edycji i kafelki aktualnych promocji. */
:root[data-theme] .offer-page .ended-notice { border-color: rgba(255, 154, 107, .45); background: var(--ns-warn-bg); }
:root[data-theme] .offer-page .ended-notice p { color: var(--ns-soft); }
:root[data-theme] .offer-page .detail-ended { color: var(--ns-urgent-text); }
:root[data-theme] .related-card { border-color: var(--line); background: var(--ns-panel); }
:root[data-theme] .related-card:hover { border-color: var(--ns-line-strong); }
:root[data-theme] .related-card:focus-visible { outline-color: var(--ns-blue); }
:root[data-theme] .related-bank { color: var(--ns-green); font-family: 'DM Sans', sans-serif; }
:root[data-theme] .related-amount { font: 400 1.4rem 'Special Gothic Expanded One', Manrope, sans-serif; letter-spacing: -.01em; }
:root[data-theme] .related-meta { color: var(--ns-muted); }
:root[data-theme] .related-more a { color: var(--ns-sky); }
:root[data-theme] .offer-page .detail-page-cta .glow-link:hover { box-shadow: 0 10px 28px var(--ns-shadow); }

/* Pasek „na czysto / podatek” w kalkulatorze oszczędności: zieleń palety zamiast starej limonki. */
:root[data-theme] .calc-bar-net { background: var(--ns-green); }

/* Świecenie głównego przycisku: za obwódką biegnie rozmyta łuna w tych samych kolorach,
   więc błysk widać też na jasnym, kremowym przycisku. */
:root[data-theme] .glow-link { position: relative; isolation: isolate; overflow: visible; }
/* Pływający przycisk w okienku musi zostać absolutny, inaczej spada pod dolną krawędź i jest przycięty. */
:root[data-theme] .detail-float-cta .glow-link { position: absolute; }
:root[data-theme] .glow-link::after {
  content: "";
  display: block;
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--orbit-angle), transparent 0deg 200deg, var(--ns-blue) 250deg, var(--ns-sky) 285deg, var(--ns-green) 320deg, transparent 360deg);
  filter: blur(14px);
  opacity: .75;
  animation: border-orbit 2.7s linear infinite;
  pointer-events: none;
}
:root[data-theme] .glow-link:hover::after { opacity: 1; filter: blur(18px); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .glow-link::after { animation: none; }
}
/* Łuna leży pod treścią przycisku, ale nad jego własnym tłem - dlatego kremowe wypełnienie niesie napis w środku. */
:root[data-theme] .glow-link span,
:root[data-theme] .glow-link:hover span { position: relative; border-radius: 999px; background: var(--ns-cta-bg); }

/* ---------- Liczniki ofert na żółto, w kolorze monety ----------
   Pigułka „15 aktywnych” przy tytule i liczby w zwijanym spisie: ten sam kształt co zielone pigułki,
   ale żółte - zieleń zostaje dla tego, co się zyskuje. */
:root[data-theme] .title-count { background: var(--ns-yellow-tint); color: var(--ns-yellow); }
:root[data-theme] .offer-index-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: var(--ns-yellow-tint);
  color: var(--ns-yellow);
  font: 600 .82rem/1.2 'DM Sans', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
:root[data-theme] .offer-index-count::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- „Promocje według banku” jako kafelki z logo ---------- */
:root[data-theme] .bank-tiles.is-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 28px;
}
:root[data-theme] .bank-tiles.is-tiles > span { grid-column: 1 / -1; margin-bottom: 2px; }
:root[data-theme] .bank-tiles.is-tiles a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ns-panel);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
:root[data-theme] .bank-tiles.is-tiles a:hover { border-color: var(--ns-line-strong); background: var(--ns-panel-hover); transform: translateY(-2px); }
.bank-tile-logo { display: flex; align-items: center; height: 42px; margin-bottom: 4px; }
.bank-tile-logo img { display: block; object-fit: contain; object-position: left center; }
.bank-tile-logo img.has-chip { padding: 4px 7px; border-radius: 6px; background: #fff; box-sizing: border-box; }
.bank-tile-name { color: var(--ns-text); font: 600 .92rem 'DM Sans', sans-serif; }
.bank-tile-meta { color: var(--ns-muted); font: 500 .8rem 'DM Sans', sans-serif; }
.bank-tile-meta strong { color: var(--ns-text); font-weight: 700; white-space: nowrap; }
.is-empty .bank-tile-meta { color: var(--ns-muted); }
@media (max-width: 520px) {
  :root[data-theme] .bank-tiles.is-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Wyrównanie kafelków banków: treść na środku, ostatni niepełny rząd też wyśrodkowany (13 banków nie dzieli się równo). */
:root[data-theme] .bank-tiles.is-tiles { display: flex; flex-wrap: wrap; justify-content: center; }
:root[data-theme] .bank-tiles.is-tiles > span { flex: 1 0 100%; text-align: center; }
:root[data-theme] .bank-tiles.is-tiles a { flex: 0 0 calc((100% - 30px) / 4); align-items: center; text-align: center; }
.bank-tile-logo { justify-content: center; width: 100%; }
.bank-tile-logo img { object-position: center; }
@media (max-width: 520px) {
  :root[data-theme] .bank-tiles.is-tiles a { flex-basis: calc((100% - 10px) / 2); }
}

/* ======================================================================
   Regulamin i polityka prywatności: ten sam język co strona główna.
   Tylko wygląd - treść dokumentów zostaje nietknięta.
   ====================================================================== */
.legal-page .topbar { padding: 34px 0 30px; }
.legal-page .brand { font: 400 clamp(2.1rem, 4.4vw, 3.4rem)/1 'Special Gothic Expanded One', Manrope, sans-serif; letter-spacing: -.01em; }
.legal-page .topbar-actions { top: 50%; transform: translateY(-50%); }
/* „← Lista promocji”: pigułka jak „Wróć na górę” w stopce. */
:root[data-theme] .legal-back {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ns-raised);
  color: var(--ns-text);
  font: 600 .74rem/1 'DM Sans', sans-serif;
  letter-spacing: .08em;
  transition: background .2s ease;
}
:root[data-theme] .legal-back:hover { background: var(--ns-raised-hover); color: var(--ns-text); }

/* Kolumna z tekstem na środku, pod wyśrodkowanym nagłówkiem. */
:root[data-theme] .legal { max-width: 820px; margin-inline: auto; padding-top: 48px; color: var(--ns-soft); line-height: 1.75; }
/* „DOKUMENTY”: zielona pigułka jak wyróżnienia na kartach. */
:root[data-theme] .legal-kicker {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ns-green-tint);
  color: var(--ns-green);
  font: 600 .72rem/1 'DM Sans', sans-serif;
  letter-spacing: .1em;
}
/* Tytuł dokumentu krojem z logo, jak „Lista promocji”. */
:root[data-theme] .legal h1 { margin: 18px 0 10px; color: var(--ns-text); font: 400 clamp(1.8rem, 4vw, 2.8rem)/1.15 'Special Gothic Expanded One', Manrope, sans-serif; letter-spacing: -.01em; }
:root[data-theme] .legal-meta { color: var(--ns-muted); }

/* Spis treści: panel jak karta oferty. */
:root[data-theme] .legal-toc {
  margin: 32px 0 18px;
  padding: 24px 28px;
  border: 2px solid var(--line);
  border-radius: 28px;
  background: var(--ns-card-glow), var(--ns-panel);
}
:root[data-theme] .legal-toc strong { color: var(--ns-text); font: 600 1rem 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; }
:root[data-theme] .legal-toc li { margin-bottom: 8px; }
:root[data-theme] .legal-toc li::marker { color: var(--ns-muted); font-weight: 600; }
:root[data-theme] .legal-toc a { color: var(--ns-text); text-decoration: none; }
:root[data-theme] .legal-toc a:hover { color: var(--ns-green); text-decoration: underline; text-underline-offset: 4px; }

/* Paragrafy oddzielone cienką linią, nagłówki jak na kartach. */
:root[data-theme] .legal h2 { margin: 48px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--ns-text); font: 600 1.4rem/1.25 'DM Sans', sans-serif; letter-spacing: -.02em; scroll-margin-top: 24px; }
:root[data-theme] .legal h3 { color: var(--ns-text); font: 600 1.05rem/1.3 'DM Sans', sans-serif; }
:root[data-theme] .legal li::marker { color: var(--ns-muted); }
:root[data-theme] .legal a { color: var(--ns-sky); }
:root[data-theme] .legal strong { color: var(--ns-text); }
:root[data-theme] .legal-callout { padding: 18px 22px; border-left: 3px solid var(--ns-green); border-radius: 0 16px 16px 0; background: var(--ns-panel); }
:root[data-theme] .legal table { border-color: var(--line); }
:root[data-theme] .legal :is(th, td) { border-color: var(--line); }
:root[data-theme] .legal th { color: var(--ns-muted); font-family: 'DM Sans', sans-serif; }
@media (max-width: 640px) {
  .legal-page .topbar { flex-direction: row; justify-content: space-between; padding: 22px 0; }
  .legal-page .topbar-actions { position: static; transform: none; }
  :root[data-theme] .legal-toc { padding: 20px; }
  :root[data-theme] .legal-toc ol { columns: 1; }
}

/* Spis promocji: małe logo banku po lewej, nazwa w środku, kwota po prawej. */
:root[data-theme] .offer-index-group li { align-items: center; }
:root[data-theme] .offer-index-group li > a { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 14px; }
.offer-index-logo { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; background: var(--ns-raised); }
.offer-index-logo img { display: block; object-fit: contain; }
.offer-index-logo img.has-chip { padding: 3px 5px; border-radius: 5px; background: #fff; box-sizing: border-box; }
:root[data-theme] .offer-index-group li > a .offer-index-bank,
:root[data-theme] .offer-index-group li > a .offer-index-name { grid-column: 2; }
@media (max-width: 520px) {
  :root[data-theme] .offer-index-group li > a { grid-template-columns: 60px minmax(0, 1fr); column-gap: 10px; }
}

/* Tytuły stron banków, kategorii i 404 krojem z logo - tak jak „Lista promocji” i tytuły dokumentów. */
:root[data-theme] :is(.static-intro, .static-not-found) h1 {
  font: 400 clamp(1.8rem, 4vw, 2.9rem)/1.15 'Special Gothic Expanded One', Manrope, sans-serif;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* Kafelki banków: wspólne reguły dla strony głównej i stron zbiorczych (tam lista jest w nav.static-category-nav). */
:root[data-theme] .bank-tiles.is-tiles a { height: auto; min-height: 0; border-color: var(--line); background: var(--ns-panel); color: var(--ns-text); font-weight: 400; }
:root[data-theme] .bank-tiles.is-tiles a[aria-current="page"] { border-color: var(--ns-line-strong); background: var(--ns-panel-hover); }
:root[data-theme] .bank-tiles.is-tiles a[aria-current="page"] .bank-tile-name::after { content: " · ta strona"; color: var(--ns-muted); font-weight: 500; }

/* ---------- Strony banków i kategorii: liczby obok wstępu ---------- */
.hub-stats { display: grid; gap: 10px; margin-top: 26px; }
.hub-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--ns-card-glow), var(--ns-panel); }
.hub-stat span { color: var(--ns-muted); font: 600 .7rem 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.hub-stat strong { color: var(--ns-text); font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.1 'Special Gothic Expanded One', Manrope, sans-serif; letter-spacing: -.01em; }
.hub-stat em { color: var(--ns-muted); font: 500 .82rem 'DM Sans', sans-serif; font-style: normal; }
@media (min-width: 1000px) {
  .static-intro.has-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
  .static-intro.has-stats > :not(.hub-stats) { grid-column: 1; }
  .static-intro.has-stats > .hub-stats { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; align-self: center; }
}
@media (max-width: 999px) {
  .hub-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---------- Trudność: cztery schodki w kolorze poziomu ----------
   Zielony - łatwa, niebieski - średnia, pomarańczowy - wymagająca, czerwony - bardzo trudna.
   Ten sam wskaźnik na kartach, w okienku oferty, na stronach ofert i na stronach banków i kategorii. */
:is(.effort-meter, .hub-meter)[data-level="1"] { --lvl: #9be48b; }
:is(.effort-meter, .hub-meter)[data-level="2"] { --lvl: #84cffa; }
:is(.effort-meter, .hub-meter)[data-level="3"] { --lvl: #ffb067; }
:is(.effort-meter, .hub-meter)[data-level="4"] { --lvl: #ff7a6b; }
:root[data-theme] :is(.effort-meter, .hub-meter) { gap: 3px; height: 18px; }
:root[data-theme] :is(.effort-meter, .hub-meter) i { width: 5px; border-radius: 2px; }
:root[data-theme] :is(.effort-meter, .hub-meter) i:nth-child(1) { height: 25%; }
:root[data-theme] :is(.effort-meter, .hub-meter) i:nth-child(2) { height: 50%; }
:root[data-theme] :is(.effort-meter, .hub-meter) i:nth-child(3) { height: 75%; }
:root[data-theme] :is(.effort-meter, .hub-meter) i:nth-child(4) { height: 100%; }
:root[data-theme] :is(
  :is(.effort-meter, .hub-meter)[data-level="1"] i:nth-child(-n+1),
  :is(.effort-meter, .hub-meter)[data-level="2"] i:nth-child(-n+2),
  :is(.effort-meter, .hub-meter)[data-level="3"] i:nth-child(-n+3),
  :is(.effort-meter, .hub-meter)[data-level="4"] i
) { background: var(--lvl); }
/* Karta: chip trudności z drugą linijką - ile warunków trzeba spełnić (liczone z danych oferty). */
:root[data-theme] .card-chip.effort-chip { gap: 10px; padding: 7px 14px 7px 11px; border-radius: 16px; font: 600 .82rem/1.25 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; }
.effort-chip > span:last-child { display: flex; flex-direction: column; }
.effort-chip small { color: var(--ns-muted); font-size: .74rem; font-weight: 500; }

/* ---------- Wyszukiwanie obok sortowania listy ---------- */
.ranking .section-head { flex-wrap: wrap; align-items: center; }
.ranking .section-head > div:first-child { min-width: 0; max-width: 100%; }
.list-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; max-width: 100%; margin-left: auto; }
.offer-search { display: flex; align-items: center; gap: 10px; width: 240px; min-width: 0; min-height: 44px; padding: 6px 10px 6px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--ns-panel); color: var(--ns-muted); transition: border-color .2s ease; }
.offer-search:focus-within { border-color: var(--ns-blue); outline: 2px solid var(--ns-blue); outline-offset: 2px; }
.offer-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.search-icon { flex: none; }
.offer-search input { flex: 1; width: 100%; min-width: 0; padding: 4px 0; border: 0; outline: none; background: transparent; color: var(--ns-text); font: 400 .9rem 'DM Sans', sans-serif; }
.offer-search input::placeholder { color: var(--ns-muted); opacity: 1; }
.offer-search input::-webkit-search-cancel-button { display: none; }
.search-clear { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ns-muted); }
.search-clear[hidden] { display: none; }
.search-clear:hover { background: var(--ns-raised); color: var(--ns-text); }
.search-clear:focus-visible { outline: 2px solid var(--ns-blue); outline-offset: 2px; }
.search-results { margin: 0 0 18px; color: var(--ns-muted); font-size: .85rem; line-height: 1.5; }
:root[data-theme] .empty-note { color: var(--ns-muted); }
@media (max-width: 760px) {
  .ranking .section-head { align-items: flex-start; gap: 18px; }
  .list-controls { width: 100%; margin-left: 0; justify-content: space-between; }
  .offer-search { flex: 1 1 220px; width: auto; }
  .list-controls .sort-toggle { min-height: 44px; margin-left: auto; }
}