:root {
    /* TrafficWatchdog palette: blue #289be5 → purple #9747ff brand gradient. */
    --brand: #289be5;
    --brand-strong: #1f86c9;
    --brand-deep:   #6d28d9;
    --brand-ghost:  color-mix(in srgb, var(--brand) 8%, #fff);
    --brand-line:   color-mix(in srgb, var(--brand) 28%, #fff);
    --accent: #9747ff;
    --brand-grad: linear-gradient(135deg, #289be5, #9747ff);
    --brand-grad-90: linear-gradient(90deg, #289be5, #9747ff);
    --ink: #0c1424;
    --ink-2: #33405a;
    --muted: #64708a;
    --muted-2: #95a0b8;
    --line: #e3e8f1;
    --line-soft: #eef1f7;
    --bg: #e2e8f3;   /* light page field: a touch bluer/deeper than pure white so the aurora + dots read */
    --card: #ffffff;
    --card-soft: #fbfcfe;
    --ok: #12a150; --ok-bg: #e6f6ec;
    --err: #e5484d; --err-bg: #fdecec;
    --warn: #b45309; --warn-bg: #fff7ed; --warn-line: #fed7aa; --warn-ink: #92400e;
    --radius: 18px;
    --radius-sm: 11px;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 34px rgba(16,24,40,.07);
    --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.04);
    --font-ui: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  }
  /* Dark: deep-navy surfaces, lifted text, SAME brand gradient (trafficwatchdog vibe). */
  :root[data-theme="dark"] {
    --brand-strong: #4fb2f0;
    --brand-ghost: color-mix(in srgb, var(--brand) 15%, #0e1526);
    --brand-line:  color-mix(in srgb, var(--brand) 40%, #16203a);
    --ink: #eef3fb;
    --ink-2: #c6d0e4;
    --muted: #8e9bb8;
    --muted-2: #66738f;
    --line: #253048;
    --line-soft: #1d2740;
    --bg: #0a101e;
    --card: #141b2b;
    --card-soft: #18202f;
    --ok: #3ecf7a; --ok-bg: #10331f;
    --err: #ff7076; --err-bg: #3a1518;
    --warn: #f0a95c; --warn-bg: #2b1e0e; --warn-line: #4d3413; --warn-ink: #f3c07d;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.38);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
  html { color-scheme: light; }
  html[data-theme="dark"] { color-scheme: dark; }

  body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--ink);
    /* Static fallback field (animation off / has-bg absent): faint blue dot-grid + two
       soft brand/accent glows. Replaced by the live canvas while it runs (.bg-live). */
    background-color: var(--bg);
    background-image:
      radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand) 24%, transparent) 1px, transparent 1.7px),
      radial-gradient(120% 75% at 50% -12%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 60%),
      radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 55%);
    background-size: 24px 24px, 100% 760px, 100% 540px;
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  /* Client-supplied background image (templates/bg-pattern.*) replaces the CSS field;
     the canvas skips itself for this case too. */
  body.has-bg {
    background-image:
      linear-gradient(color-mix(in srgb, var(--bg) 60%, transparent), color-mix(in srgb, var(--bg) 74%, transparent)),
      url("/review/assets/bg");
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: cover, cover;
    background-attachment: fixed, fixed;
  }
  /* While the live canvas runs, drop the static pattern (color stays). Declared after
     body.has-bg so it also wins over the drop-in image at equal specificity. */
  body.bg-live { background-image: none; }

  #bg-canvas {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    z-index: -1; pointer-events: none; display: block;
  }
  #bg-canvas[hidden] { display: none; }

  /* Masthead icon toggles (theme / animation). */
  .icon-btn {
    appearance: none; cursor: pointer; font-family: inherit;
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2); background: var(--card); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: color .15s, border-color .15s, transform .12s ease, box-shadow .15s ease;
  }
  .icon-btn:hover { color: var(--brand-strong); border-color: var(--brand-line); transform: translateY(-1px); }
  .icon-btn:active { transform: translateY(0); }
  .icon-btn svg { width: 17px; height: 17px; }
  .icon-btn[hidden] { display: none; }
  /* Theme button: moon in light (click → dark), sun in dark. */
  .icon-btn .i-sun, :root[data-theme="dark"] .icon-btn .i-moon { display: none; }
  :root[data-theme="dark"] .icon-btn .i-sun { display: block; }
  /* Animation button: waves, slashed while off. */
  .icon-btn .i-motion-off { display: none; }
  .icon-btn[aria-pressed="false"] .i-motion-on { display: none; }
  .icon-btn[aria-pressed="false"] .i-motion-off { display: block; }
  .icon-btn[aria-pressed="false"] { color: var(--muted-2); }

  /* Primary button: brand gradient that shifts on hover + shine sweep + lift. */
  .btn {
    appearance: none; border: 1px solid transparent; border-radius: 11px;
    padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit; letter-spacing: -.01em; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    color: #fff; white-space: nowrap; position: relative; overflow: hidden;
    background: linear-gradient(90deg, #289be5, #9747ff, #289be5);
    background-size: 220% 100%; background-position: 0% 0;
    box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 6px 16px color-mix(in srgb, var(--brand) 22%, transparent);
    transition: transform .12s ease, box-shadow .18s ease, background-position .5s ease, opacity .15s ease;
  }
  .btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  .btn:hover:not(:disabled) {
    transform: translateY(-1px); background-position: 92% 0;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 38%, transparent);
  }
  .btn:hover:not(:disabled)::after { left: 130%; transition: left .55s ease; }
  .btn:active:not(:disabled) { transform: translateY(0) scale(.985); box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 25%, transparent); }
  .btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
  .btn.secondary {
    background: var(--card); color: var(--ink-2); border-color: var(--line); box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, color .15s ease, background .15s ease;
  }
  .btn.secondary::after { display: none; }
  .btn.secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    color: var(--brand-strong); transform: translateY(-1px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 14%, transparent);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn, .btn.secondary, .icon-btn { transition: none; }
    .btn::after { display: none; }
  }

  /* Language switcher (masthead): styled like a .btn.secondary pill. */
  .lang-select {
    appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364708a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid var(--line); border-radius: 11px; padding: 9px 26px 9px 12px;
    box-shadow: var(--shadow-sm); transition: border-color .15s, color .15s;
  }
  .lang-select:hover { border-color: var(--brand-line); color: var(--brand-strong); }

  /* ── Masthead brand lockup (markup: brand_lockup() in _ui_polish.html) ───────
     ONE copy for all three pages — the identical .brand/.studio-logo blocks that used to
     be duplicated in auth/review/settings.css are gone; those keep only the link
     behaviour (cursor/hover), which the auth gate's <span> doesn't want.
     To resize the whole lockup, touch the three custom props + font-size below.
     align-items:flex-end trails the byline off to the RIGHT of the stack (flush with the
     end of the wordmark, always the wider line) instead of parking it under the name;
     .brand-by opts back out with align-self:flex-start (see there). */
  .brand {
    --brand-mark: 54px;       /* the square mark's height — deliberately outgrows the text */
    --brand-by-size: 11.5px;  /* byline size */
    --brand-by-lh: 1.18;
    display: inline-flex; align-items: center; gap: 13px;
    font-weight: 800; font-size: 19.5px; letter-spacing: -.015em; color: var(--ink);
  }
  /* "Media Agent AI": Black (900) + the brand gradient as a clipped text fill. -webkit-*
     properties are the only ones every current engine honours for this; the plain
     `color: transparent` under them is the fallback if text-fill-color is ignored. */
  .brand .brand-ai {
    font-weight: 900;
    background: var(--brand-grad-90);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  /* "Studio": solid near-black, Bold — the quiet half of the two-tone wordmark.
     Dark theme swaps in the theme ink, or it would vanish into the navy background. */
  .brand span.dim { color: #090909; font-weight: 700; }
  :root[data-theme="dark"] .brand span.dim { color: var(--ink); }
  .studio-logo {
    height: var(--brand-mark); width: auto; max-width: 200px;
    object-fit: contain; display: block;
  }
  .brand-stack {
    display: inline-flex; flex-direction: column; align-items: flex-end;
    gap: 0; line-height: var(--brand-by-lh);
    /* No vertical nudge: .brand's align-items:center centres the WHOLE stack (wordmark +
       byline together) on the mark, which is what reads as "balanced" next to the larger
       mark. An earlier version pushed the stack down by half a byline to centre the
       wordmark alone — that left the block visibly bottom-heavy. */
  }
  .brand-name { white-space: nowrap; }
  /* Byline: Light (300), near-black, flush LEFT under the wordmark — align-self overrides
     the stack's flex-end, so it starts where "Media Agent" starts instead of trailing off
     the right edge. Dark theme swaps in the theme ink (same reason as span.dim). */
  .brand-by {
    align-self: flex-start;
    font-size: var(--brand-by-size); font-weight: 300; letter-spacing: .01em;
    color: #090909; white-space: nowrap;
  }
  :root[data-theme="dark"] .brand-by { color: var(--ink); }
  /* "TrafficWatchdog" → trafficwatchdog.pl. A role="link" span (see brand_lockup: no <a>
     inside the lockup's own <a>), so it has to paint its own affordance: kursor + zmiana
     koloru na markowy błękit po najechaniu. Bez podkreślenia — kreska pod bylinią rozbijała
     metrykę lockupu, więc podświetlamy SAM kolor. */
  .brand-by-link { cursor: pointer; text-decoration: none; transition: color .15s ease; }
  .brand-by-link:hover, .brand-by-link:focus-visible {
    color: var(--brand-strong); text-decoration: none;
  }

  /* Cursor-follow highlight on masthead + cards (.glow-track added by JS below). */
  .glow-track { position: relative; }
  .glow-track::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: inherit; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%);
  }
  :root[data-theme="dark"] .glow-track::after {
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
  }
  .glow-track:hover::after { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .glow-track::after { display: none; } }

  /* ── Mobile (shared masthead layout for review + settings + auth) ────────────
     ⚠️ Selektory MUSZĄ być szczegółowsze niż `.masthead-inner` / `.masthead-actions`
     w review/settings/auth.css. Tamte pliki ładują się PO base.css i deklarują
     `padding`/`gap`/`display`, więc przy równej specyficzności wygrywała ich wersja
     DESKTOPOWA: pasek akcji dostawał 20px marginesu zamiast 14px i przy 320–360px
     brakowało dosłownie kilku pikseli — „Ustawienia" spadały do drugiego wiersza. */
  @media (max-width: 680px) {
    /* Brand keeps the first row, the action pills drop to their own row below. */
    .masthead .masthead-inner { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    /* Jeden rząd, ZAWSZE (nowrap). Jedyny element, któremu wolno się ścisnąć, to select
       języka — flaga niesie znaczenie, nazwa jest dopowiedzeniem. Przy `wrap` wystarczyła
       dłuższa nazwa („Português") albo wąski telefon, żeby rząd się rozjechał na dwa. */
    .masthead .masthead-actions { flex-wrap: nowrap; width: 100%; justify-content: flex-end; gap: 6px; }
    .masthead-actions .lang-select { flex: 0 1 auto; min-width: 56px; overflow: hidden; text-overflow: ellipsis; }
    .masthead-actions .btn, .masthead-actions .icon-btn { flex: 0 0 auto; }
    /* Jedna wysokość na cały rząd: select ma własne pudełko (33px), .btn 39px,
       .icon-btn 38px — obok siebie czytały się jak rozjechane klocki. */
    .masthead-actions .lang-select,
    .masthead-actions .btn { height: 38px; padding-top: 0; padding-bottom: 0; }
    .lang-select { padding-left: 10px; padding-right: 24px; font-size: 12.5px; }
    /* Whole lockup steps down one size. */
    .brand { --brand-mark: 42px; --brand-by-size: 10.5px; font-size: 17px; gap: 11px; }
    .studio-logo { max-width: 160px; }
  }
  @media (max-width: 380px) {
    /* Last resort at 320–380px: hide the language label, keep the flag. */
    .lang-select { max-width: 96px; text-overflow: ellipsis; }
  }

  /* ── Site footer + cookie notice ─────────────────────────────────────────────
     Markup: templates/_site_footer.html (macros site_footer / cookie_notice).
     Width matches the 1040px masthead on both pages. Background stays transparent
     so the particle canvas keeps showing through — only a hairline separates it.

     --bottom-bar-h is the CONTRACT for pages with their own fixed bottom bar: set it
     to that bar's height and both the footer and the cookie strip step out of its way.
     settings.css declares it for .save-bar; review.html has no such bar, so it stays 0. */
  .site-footer {
    position: relative; z-index: 2;
    margin: auto auto 16px; padding: 34px 32px;
    max-width: 1040px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
  }

  .site-footer-inner {
    display: grid;
    grid-template-columns: 1.8fr 0.9fr 0.9fr 1.15fr;
    gap: 40px;
    align-items: start;
  }
  .foot-h {
    margin: 16px 0 14px; font-size: 14.5px; font-weight: 700;
    color: var(--ink);
  }
  .foot-col-logo {
    padding-right: 0;
  }

  .foot-desc {
    margin: 0; padding: 18px 0 0;
    font-size: 14px; line-height: 1.5; font-weight: 500;
    color: var(--muted);
  }
  
  .foot-socials {
    display: flex; gap: 20px; margin-top: 12px;
  }
  /* Bywa <a> (telefon, mail) albo <button> (formularz kontaktowy — akcja, nie adres).
     `padding`/`font` zerowane, bo <button> ich nie dziedziczy i rozjechałby ikonę. */
  .social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; font: inherit; cursor: pointer;
    width: 34px; height: 34px;
    background: color-mix(in srgb, var(--ink) 5%, var(--card));
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--muted);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .social-btn svg {
    width: 17px; height: 17px;
  }
  .social-btn:hover {
    background: var(--brand-ghost, color-mix(in srgb, var(--brand) 10%, var(--card)));
    color: var(--brand); border-color: var(--brand);
  }
  
  .foot-contact-box {
    display: flex; align-items: center; gap: 14px;
    margin-top: 20px;
  }
  .foot-contact-box.align-top {
    align-items: flex-start;
  }
  .foot-contact-box + .foot-contact-box {
    margin-top: 24px;
  }
  .foot-contact-divider {
    height: 1px;
    background: var(--line);
    margin: 28px 0;
  }
  .fc-text {
    display: flex; flex-direction: column; gap: 2px;
  }
  .fc-text-large .fc-title-solid {
    font-size: 14.5px;
  }
  .fc-text-large .fc-sub {
    font-size: 12.5px;
    line-height: 1.4;
  }
  /* Bywa <button> (formularz kontaktowy — akcja, nie adres), stąd zerowanie tła/ramki/paddingu
     i `font: inherit` — <button> nie dziedziczy ani kroju, ani wielkości pisma. */
  .fc-title {
    display: inline; padding: 0; border: 0;
    text-align: left; cursor: pointer; font-family: inherit;
    font-weight: 700; font-size: 13.5px;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    transition: filter 0.15s ease;
  }
  .fc-title:hover {
    filter: brightness(1.2);
  }
  .fc-title-solid {
    font-weight: 700; font-size: 13.5px;
    color: var(--ink); text-decoration: none;
    transition: color 0.15s ease;
  }
  .fc-title-solid:hover {
    color: var(--brand);
  }
  .fc-sub {
    font-size: 11.5px; color: var(--muted);
  }

  .foot-nav-list {
    list-style: none; margin: 0; padding: 0;
    margin-top: 20px;
    display: flex; flex-direction: column; gap: 20px;
  }
  .foot-nav-link {
    display: flex; align-items: center; gap: 16px;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s ease;
  }
  .foot-nav-link:hover {
    color: var(--brand);
  }
  .foot-nav-link > span {
    flex: 1;
  }
  .foot-nav-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
  }
  .foot-nav-chevron {
    width: 16px; height: 16px;
    opacity: 0.7;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .foot-nav-link:hover .foot-nav-chevron {
    opacity: 1;
    transform: translateX(2px);
  }
  
  .site-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 42px -32px 0;
    padding: 28px 32px 0;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--muted-2);
  }
  .foot-bottom-left {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
  }
  .foot-bottom-logo svg {
    height: 20px; width: auto;
    display: block;
  }
  .foot-divider-pipe {
    color: var(--line-heavy);
    font-size: 14px;
    margin-left: 4px;
  }
  .foot-bottom-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--muted); font-weight: 600; text-decoration: none;
    transition: color 0.15s ease;
  }
  .foot-bottom-link:hover {
    color: var(--brand);
  }
  .foot-bottom-link svg {
    width: 14px; height: 14px;
  }
  /* Informational strip, not a consent gate — it never blocks the page, so it is a
     plain fixed card (no overlay, no focus trap, not role=dialog). Icon column +
     content column; the brand hairline on top is the only decoration that survives
     dark mode unchanged (both themes read it as "ours", not as a warning). */
  .cookie-note {
    position: fixed; z-index: 60; left: 16px; right: 16px;
    bottom: calc(16px + var(--bottom-bar-h, 0px));
    max-width: 460px; margin: 0 auto;
    display: grid; grid-template-columns: auto 1fr; gap: 14px;
    padding: 18px 20px 17px; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--shadow), 0 24px 60px rgba(16, 24, 40, .14);
    color: var(--ink-2); font-size: 12.8px; line-height: 1.55;
    transform: translateY(140%); opacity: 0;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
  }
  .cookie-note::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    background: var(--brand-grad-90);
  }
  .cookie-note-icon {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--brand-ghost); border: 1px solid var(--brand-line);
    color: var(--brand); flex: 0 0 auto;
  }
  .cookie-note-icon svg { width: 19px; height: 19px; }
  .cookie-note-title {
    margin: 0 0 3px; font-size: 13.5px; font-weight: 800;
    letter-spacing: -.01em; color: var(--ink);
  }
  .cookie-note-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 10px 16px; margin-top: 13px;
  }
  .cookie-note.is-in { transform: translateY(0); opacity: 1; }
  .cookie-note[hidden] { display: none; }
  /* Klasa + --cookie-note-h z cookie-notice.js: dopóki pasek wisi (position:fixed),
     stopka rezerwuje miejsce pod nim, żeby nie zasłonił kontaktu i noty copyright.
     Wysokość jest mierzona, bo pasek łamie się na 2–3 wiersze na wąskich ekranach. */
  :root.cookie-note-open .site-footer {
    padding-bottom: calc(var(--cookie-note-h, 96px) + var(--bottom-bar-h, 0px) + 38px);
  }
  .cookie-note-text { margin: 0; color: var(--muted); }
  .cookie-note-link {
    margin-right: auto;  /* link po lewej, przycisk po prawej */
    color: var(--muted); font-weight: 600; font-size: 12.3px; text-decoration: none;
    border-bottom: 1px solid var(--line); transition: color .18s ease, border-color .18s ease;
  }
  .cookie-note-link:hover { color: var(--brand); border-bottom-color: var(--brand-line); }
  .cookie-note-ok { flex: 0 0 auto; padding: 9px 22px; font-size: 12.8px; }
  @media (prefers-reduced-motion: reduce) {
    .cookie-note { transition: none; transform: none; }
  }
  @media (max-width: 1040px) {
    .site-footer {
      margin-bottom: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-bottom: none;
    }
  }
  /* 1040px, nie 850px: cztery kolumny mają razem ~947px min-contentu (+64px paddingu stopki),
     więc między 851 a ~1040px okna stopka nie mieściła się i CAŁA strona dostawała poziomy
     pasek przewijania — na każdej zakładce, bo to chrome, nie treść. */
  @media (max-width: 1040px) {
    .site-footer-inner {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .site-footer-inner > .foot-col:nth-child(1) { grid-column: span 2; }
    .site-footer-inner > .foot-col:nth-child(4) { grid-column: span 2; }
  }
  @media (max-width: 680px) {
    .site-footer { padding: 24px 14px calc(18px + var(--bottom-bar-h, 0px)); }
    .site-footer-inner { gap: 32px 20px; }
    /* Poniżej 680px kolumny i tak się zawijają, więc dosuwanie kontaktu w prawo
       zostawiłoby tylko dziurę — wraca zwykły, równy układ. */
    .foot-contact { margin-left: 0; }
    .site-footer-bottom {
      margin: 32px -14px 0;
      padding: 24px 14px 0;
    }
    .cookie-note {
      left: 10px; right: 10px; bottom: calc(10px + var(--bottom-bar-h, 0px));
      padding: 15px 16px 14px; gap: 12px;
    }
    .cookie-note-actions { margin-top: 12px; }
    .cookie-note-ok { flex: 1 1 auto; text-align: center; }
  }
  @media (max-width: 560px) {
    /* Jedna kolumna. Przy dwóch min-content obu (długie niemieckie etykiety nawigacji,
       „Media Agent AI Studio" w kolumnie logo) sumował się do ~363px i rozpychał dokument
       na telefonie — a że stopka jest ostatnia, objaw wyglądał na problem treści nad nią. */
    .site-footer-inner { grid-template-columns: 1fr; gap: 26px; }
    .site-footer-inner > .foot-col:nth-child(1),
    .site-footer-inner > .foot-col:nth-child(4) { grid-column: auto; }
    /* Nazwy pozycji w stopce bywają jednym długim złożeniem — niech się łamią. */
    .site-footer { overflow-wrap: anywhere; }
  }
  @media (max-width: 480px) {
    .site-footer-bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  /* --- CookieConsent v3 - modyfikacje wyglądu i układu --- */

  /* Biblioteka maluje się WŁASNYMI zmiennymi `--cc-*` deklarowanymi w `:root`
     (cookieconsent.css) i przełącza motyw dopiero po dołożeniu klasy `.cc--darkmode`,
     której nasz przełącznik nie ustawia — a że tło baneru nadpisujemy na `var(--card)`,
     w dark mode zostawał ciemny tekst na ciemnej karcie. Zamiast klasy mapujemy zmienne
     biblioteki na tokeny strony: `html[data-theme="dark"]` (0,1,1) bije bibliotekowe
     `:root` (0,1,0) niezależnie od kolejności ładowania arkuszy. */
  html[data-theme="dark"] {
    --cc-bg: var(--card);
    --cc-primary-color: var(--ink);
    --cc-secondary-color: var(--muted);
    --cc-link-color: var(--brand-strong);
    --cc-btn-primary-bg: var(--brand);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
    --cc-btn-primary-hover-bg: var(--brand-strong);
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);
    --cc-btn-secondary-bg: color-mix(in srgb, var(--ink) 8%, transparent);
    --cc-btn-secondary-color: var(--ink);
    --cc-btn-secondary-border-color: var(--line);
    --cc-btn-secondary-hover-bg: color-mix(in srgb, var(--ink) 14%, transparent);
    --cc-btn-secondary-hover-color: var(--ink);
    --cc-btn-secondary-hover-border-color: var(--line);
    --cc-separator-border-color: var(--line);
    --cc-toggle-off-bg: var(--muted-2);
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: var(--card);
    --cc-toggle-enabled-icon-color: var(--card);
    --cc-toggle-disabled-icon-color: var(--card);
    --cc-toggle-readonly-bg: var(--line);
    --cc-toggle-readonly-knob-bg: var(--muted);
    --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
    --cc-cookie-category-block-bg: var(--card-soft);
    --cc-cookie-category-block-border: var(--line);
    --cc-cookie-category-block-hover-bg: color-mix(in srgb, var(--ink) 10%, var(--card-soft));
    --cc-cookie-category-block-hover-border: var(--line);
    --cc-cookie-category-expanded-block-bg: transparent;
    --cc-cookie-category-expanded-block-hover-bg: color-mix(in srgb, var(--ink) 8%, var(--card-soft));
    --cc-section-category-border: var(--line);
    --cc-overlay-bg: rgba(0, 0, 0, .65);
    --cc-webkit-scrollbar-bg: var(--line);
    --cc-webkit-scrollbar-hover-bg: var(--muted-2);
    --cc-footer-bg: transparent;
    --cc-footer-color: var(--muted);
    --cc-footer-border-color: var(--line);
  }
  html[data-theme="dark"] #cc-main { color-scheme: dark; }

  /* Dopasowanie tła i ramki do stylu "cookie-note" (rozmycie, półprzezroczystość) */
  #cc-main .cm--cloud {
    background: color-mix(in srgb, var(--card) 94%, transparent) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--shadow), 0 24px 60px rgba(16, 24, 40, .14) !important;
    padding: 6px 8px 6px 6px !important; /* Zmniejszono odstęp z prawej strony */
    width: max-content !important;
    /* `100%` liczy się od bloku zawierającego (viewport), a karta ma jeszcze własny
       margines `--cc-modal-margin` — przy 320px wychodziła więc ~3px za prawą krawędź.
       Odejmujemy ten margines po obu stronach. */
    max-width: calc(100vw - 2 * var(--cc-modal-margin, 1rem)) !important;
  }
  
  /* Reset tła zawartości, żeby nie psuła blur'a karty.
     ⚠️ NIE celuj w `.cm` — to TEN SAM element co `.cm--cloud` powyżej, więc reguła kasowała
     szkło z całego baneru: tekst lądował wprost na kafelkach artykułów (w obu motywach). */
  #cc-main .cm__body,
  #cc-main .cm__texts,
  #cc-main .cm__btns,
  #cc-main .cm__footer {
    background: transparent !important;
  }

  /* =========================================================================
     Wyśrodkowanie w pionie i układ w jednej linii TYLKO dla desktopu
     Na telefonach pozwalamy bibliotece ułożyć elementy wg własnego (lepszego) RWD
     ========================================================================= */
  @media (min-width: 769px) {
    #cc-main .cm--cloud.cm--inline .cm__body {
      align-items: center !important;
    }
    
    #cc-main .cm__title {
      font-size: 14px !important;
      font-weight: 500 !important;
      line-height: 1.4 !important;
      margin: 0 !important;
      white-space: nowrap !important;
    }

    #cc-main .cm__texts {
      margin: 0 !important;
      padding: 0 !important;
      display: flex;
      align-items: center;
    }
    
    #cc-main .cm--cloud.cm--inline .cm__btns {
      flex-direction: row !important;
      align-items: center !important;
      width: auto !important;
      border-left: none !important;
      gap: 8px;
      padding-left: 16px;
      margin: 0 !important;
    }
    
    #cc-main .cm--cloud.cm--inline .cm__btn-group {
      flex-direction: row !important;
      align-items: center !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 8px;
    }
    
    #cc-main .cm--cloud.cm--inline .cm__btn {
      min-width: auto !important;
      padding: 8px 12px !important;
      margin: 0 !important;
      white-space: normal !important;
      font-size: 12.5px !important;
      line-height: 1.25 !important;
      text-align: center !important;
    }

    /* Usunięcie tła dla przycisku "Zarządzaj preferencjami" (sam napis) */
    #cc-main .cm--cloud.cm--inline .cm__btn[data-role="show"],
    #cc-main .cm--cloud.cm--inline .cm__btn[data-cc="show-preferencesModal"],
    #cc-main .cm--cloud.cm--inline [data-cc="show-preferencesModal"] {
      background: transparent !important;
      border-color: transparent !important;
      color: var(--ink) !important;
      opacity: 0.55 !important;
      font-size: 11px !important;
      text-decoration: underline !important;
      box-shadow: none !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
  }

  /* Styl przycisku 'Zarządzaj preferencjami' dla mobile (by też był szarym linkiem) */
  @media (max-width: 768px) {
    #cc-main .cm__btn[data-role="show"],
    #cc-main .cm__btn[data-cc="show-preferencesModal"] {
      background: transparent !important;
      border-color: transparent !important;
      color: var(--ink) !important;
      opacity: 0.6 !important;
      font-size: 12px !important;
      text-decoration: underline !important;
      box-shadow: none !important;
      margin-top: 8px !important;
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
    }
  }
  
  /* Kolorystyczne wyróżnienie przycisku "Akceptuj wszystkie" */
  #cc-main .cm__btn[data-role="all"] {
    background: var(--brand-grad) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
  }
  
  /* Lżejszy styl dla przycisku "Tylko niezbędne" */
  #cc-main .cm__btn[data-role="necessary"] {
    background: transparent !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
  }

  /* --- Wygląd okna "Zarządzaj preferencjami" (Preferences Modal) --- */
  
  /* Szklany efekt i zaokrąglenia dla całego okna preferencji */
  #cc-main .pm {
    background: color-mix(in srgb, var(--card) 96%, transparent) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--shadow), 0 24px 60px rgba(16, 24, 40, .14) !important;
    margin: 16px auto !important;
    width: 740px !important; /* Zwiększona szerokość okna */
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    max-height: 80vh !important; /* Mniejsze ograniczenie wysokości */
  }
  
  html[data-theme="dark"] #cc-main .pm {
    background: rgba(20, 27, 43, 0.85) !important;
  }

  /* Tło nagłówka i stopki wewnątrz okna na przezroczyste by blur działał */
  #cc-main .pm__header,
  #cc-main .pm__footer {
    background: transparent !important;
    border-color: var(--line) !important;
  }
  
  /* Dodatkowy odstęp pod akordeonami względem stopki z przyciskami */
  #cc-main .pm__body {
    padding-bottom: 56px !important;
  }
  
  /* Kolorystyczne wyróżnienie przycisków głównych w oknie preferencji (Zapisz / Akceptuj wszystkie) */
  #cc-main .pm__btn[data-role="all"],
  #cc-main .pm__btn[data-role="save"] {
    background: var(--brand-grad) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
  }
  
  /* Lżejszy styl dla przycisku "Tylko niezbędne" w oknie preferencji */
  #cc-main .pm__btn[data-role="necessary"] {
    background: transparent !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
  }
  
  /* Kolor suwaków (toggle) po włączeniu zgody na gradient (tylko te, które można kliknąć) */
  #cc-main .section__toggle:checked:not(:disabled) ~ .toggle__icon {
    background: var(--brand-grad) !important;
    box-shadow: none !important;
  }
  
  #cc-main .section__toggle:checked:not(:disabled) ~ .toggle__icon svg {
    stroke: var(--brand) !important;
  }
  
  /* Kolor zablokowanych (Niezbędnych) suwaków - wyraźnie stonowane i odróżniające się */
  #cc-main .section__toggle:checked:disabled ~ .toggle__icon {
    background: var(--line) !important; /* Szare tło pigułki */
    box-shadow: none !important;
  }
  
  #cc-main .section__toggle:checked:disabled ~ .toggle__icon svg {
    stroke: var(--muted) !important; /* Stonowany, ciemnoszary haczyk */
  }
  
  /* Wymuszenie firmowej czcionki (Figtree) dla całego baneru CookieConsent */
  #cc-main, #cc-main * {
    font-family: var(--font-ui) !important;
  }
  
  /* --- Wygląd tabel w oknie preferencji (lista ciasteczek) --- */
  
  /* Zmniejszenie czcionki dla całej tabeli */
  #cc-main .pm__section-table {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  
  /* Wyróżnienie nazwy pojedynczego ciasteczka (pierwsza kolumna) */
  #cc-main .pm__table-td:first-child {
    font-weight: 700 !important;
    color: var(--brand-strong) !important;
    letter-spacing: -0.01em;
  }
  
  /* Opcjonalnie: minimalnie mniejszy odstęp w komórkach by zrekompensować mniejszą czcionkę */
  #cc-main .pm__table-td,
  #cc-main .pm__table-th {
    padding: 0.6em 0.8em !important;
  }

  @media (max-width: 640px) {
    #cc-main .pm {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      border-radius: 0 !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
      max-height: 100% !important;
    }
  }