/* =====================================================================
   AMKBIT.pl — styl portalu narzędzi (robot_1, 22.10.2026)
   Kolory marki z dotychczasowej strony (#4361ee + gradient logo),
   neutralne szarości z lekkim odcieniem niebieskim. Jasny i ciemny motyw.
   ===================================================================== */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/zasoby/fonty/space-grotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/zasoby/fonty/space-grotesk-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --tlo: #f5f6fa; --pow: #ffffff; --pow2: #f9fafd; --tekst: #151b2f; --szary: #5a6278; --szary2: #8a91a5;
  --linia: #e2e5ee; --linia2: #cfd4e1; --akcent: #3651e0; --akcent-c: #2a41bd; --akcent-t: #edf0fd;
  --ok: #13845a; --ok-t: #e6f6ee; --zle: #c22f3d; --zle-t: #fdecee; --uwaga: #9a5b00; --uwaga-t: #fff5e0;
  --k-kalkulatory: #3651e0; --k-tekst: #0b8f80; --k-obrazy: #cc3d66; --k-pliki: #b86d06; --k-programisci: #7239d6;
  --cien: 0 1px 2px rgba(20,27,47,.05), 0 4px 18px rgba(20,27,47,.06);
  --promien: 14px; --promien-m: 9px;
  --kod: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --nagl: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --tlo: #0f1320; --pow: #171c2c; --pow2: #1c2235; --tekst: #e8ebf4; --szary: #a3aac0; --szary2: #7d849b;
    --linia: #2a3148; --linia2: #39415b; --akcent: #7d90ff; --akcent-c: #a1b0ff; --akcent-t: #222b4d;
    --ok: #4cc993; --ok-t: #143327; --zle: #ff7b86; --zle-t: #3a1a20; --uwaga: #f3b64d; --uwaga-t: #35290f;
    --k-kalkulatory: #8496ff; --k-tekst: #3cc9b7; --k-obrazy: #f17497; --k-pliki: #e6a23b; --k-programisci: #a98af5;
    --cien: 0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-motyw="ciemny"] {
    --tlo: #0f1320; --pow: #171c2c; --pow2: #1c2235; --tekst: #e8ebf4; --szary: #a3aac0; --szary2: #7d849b;
    --linia: #2a3148; --linia2: #39415b; --akcent: #7d90ff; --akcent-c: #a1b0ff; --akcent-t: #222b4d;
    --ok: #4cc993; --ok-t: #143327; --zle: #ff7b86; --zle-t: #3a1a20; --uwaga: #f3b64d; --uwaga-t: #35290f;
    --k-kalkulatory: #8496ff; --k-tekst: #3cc9b7; --k-obrazy: #f17497; --k-pliki: #e6a23b; --k-programisci: #a98af5;
    --cien: 0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.25);
    color-scheme: dark;
  }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
img, svg { max-width: 100%; }
a { color: var(--akcent); text-underline-offset: 2px; }
a:hover { color: var(--akcent-c); }
h1, h2, h3 { font-family: var(--nagl); line-height: 1.2; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); margin: .3em 0 .35em; }
h2 { font-size: 1.35rem; margin: 1.8em 0 .6em; }
h3 { font-size: 1.08rem; margin: 1.2em 0 .4em; }
code, kbd, .kod { font-family: var(--kod); font-size: .92em; }
.opis code, .przyklad code, .tylko-wynik { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; border-radius: 4px; }
.pomin { position: absolute; left: -999px; top: 8px; background: var(--pow); padding: 8px 12px; z-index: 50; }
.pomin:focus { left: 12px; }
.ikona { width: 22px; height: 22px; flex: none; }

/* ---------------- nagłówek ---------------- */
.gora { background: var(--pow); border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 20; }
.gora-w { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; }
.logo { display: flex; flex: none; }
.logo img { width: 150px; height: auto; display: block; }
.szukaj-gora, .szukaj-duza { position: relative; flex: 1; display: flex; align-items: center; }
.szukaj-gora svg, .szukaj-duza > svg { position: absolute; left: 12px; width: 18px; height: 18px; fill: none; stroke: var(--szary2); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.szukaj-gora input[type=search] { width: 100%; max-width: 520px; padding: 9px 12px 9px 38px; border: 1px solid var(--linia2); border-radius: 999px; background: var(--pow2); color: var(--tekst); font: inherit; font-size: .95rem; }
.szukaj-gora input:focus { outline: none; border-color: var(--akcent); background: var(--pow); box-shadow: 0 0 0 3px var(--akcent-t); }
.menu-przycisk { display: none; background: none; border: 1px solid var(--linia2); border-radius: 10px; padding: 7px; color: var(--tekst); cursor: pointer; }
.menu-przycisk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: block; }
.kategorie-pasek { max-width: 1200px; margin: 0 auto; padding: 0 10px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.kategorie-pasek::-webkit-scrollbar { display: none; }
.kategorie-pasek a { display: flex; align-items: center; gap: 7px; padding: 8px 12px 10px; color: var(--szary); text-decoration: none; font-size: .93rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.kategorie-pasek a .ikona { width: 18px; height: 18px; }
.kategorie-pasek a:hover { color: var(--tekst); }
.kategorie-pasek a[aria-current] { color: var(--tekst); border-bottom-color: var(--akcent); font-weight: 600; }
.podpowiedzi { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-width: 560px; background: var(--pow); border: 1px solid var(--linia); border-radius: 12px; box-shadow: var(--cien); padding: 6px; z-index: 30; }
.podpowiedzi a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--tekst); text-decoration: none; }
.podpowiedzi a small { color: var(--szary2); white-space: nowrap; }
.podpowiedzi a:hover, .podpowiedzi a.wybrana { background: var(--akcent-t); }
.podpowiedzi p { margin: 6px 10px; color: var(--szary); font-size: .92rem; }

main { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; min-height: 60vh; }

/* ---------------- strona główna ---------------- */
.powitanie { text-align: center; padding: 44px 0 18px; }
.powitanie h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); margin-bottom: .2em; }
.powitanie-p { color: var(--szary); font-size: 1.08rem; max-width: 640px; margin: 0 auto 24px; }
.szukaj-duza { max-width: 680px; margin: 0 auto; }
.szukaj-duza input[type=search] { width: 100%; padding: 15px 120px 15px 46px; font: inherit; font-size: 1.05rem; border: 1.5px solid var(--linia2); border-radius: 14px; background: var(--pow); color: var(--tekst); box-shadow: var(--cien); }
.szukaj-duza input:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-t); }
.szukaj-duza > svg { left: 16px; width: 20px; height: 20px; }
.szukaj-duza .przycisk { position: absolute; right: 6px; top: 6px; bottom: 6px; }
.szukaj-duza .podpowiedzi { max-width: none; text-align: left; }
.szybkie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px auto 0; max-width: 760px; font-size: .92rem; }
.szybkie span { color: var(--szary2); padding: 4px 0; }
.szybkie a { padding: 4px 11px; border: 1px solid var(--linia); border-radius: 999px; background: var(--pow); text-decoration: none; color: var(--tekst); }
.szybkie a:hover { border-color: var(--akcent); color: var(--akcent); }
.sekcja { margin-top: 36px; }
.sekcja > h2, .sekcja section > h2 { margin-top: 0; }
.kategorie-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; }
.kat-blok { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien); padding: 18px; display: flex; flex-direction: column; }
.kat-naglowek { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tekst); margin-bottom: 10px; }
.kat-naglowek .ikona { width: 40px; height: 40px; padding: 8px; border-radius: 11px; color: #fff; }
.kat-naglowek b { display: block; font-family: var(--nagl); font-size: 1.07rem; }
.kat-naglowek small { color: var(--szary2); }
.kat-blok ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.kat-blok li a { display: block; padding: 5px 0; color: var(--tekst); text-decoration: none; border-top: 1px dashed var(--linia); font-size: .95rem; }
.kat-blok li:first-child a { border-top: 0; }
.kat-blok li a:hover { color: var(--akcent); }
.wiecej { display: inline-block; margin-top: 10px; font-size: .92rem; font-weight: 600; text-decoration: none; }
.kat-kalkulatory .ikona, .karta .ikona.k-kalkulatory { background: var(--k-kalkulatory); }
.kat-tekst .ikona { background: var(--k-tekst); } .kat-obrazy .ikona { background: var(--k-obrazy); }
.kat-pliki .ikona { background: var(--k-pliki); } .kat-programisci .ikona { background: var(--k-programisci); }
.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.karty.waskie { grid-template-columns: 1fr; }
.karta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-m); text-decoration: none; color: var(--tekst); transition: border-color .15s; }
.karta:hover { border-color: var(--akcent); color: var(--tekst); }
.karta .ikona { color: var(--akcent); margin-top: 2px; }
.karta-t { display: flex; flex-direction: column; min-width: 0; }
.karta-t b { font-weight: 600; }
.karta-t small { color: var(--szary2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.karta-t span { color: var(--szary); font-size: .9rem; line-height: 1.45; }
.dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.zalety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--linia); padding-top: 26px; }
.zalety h3 { margin-top: 0; }
.zalety p { color: var(--szary); margin: 0; font-size: .95rem; }

/* ---------------- kategoria, dokumenty ---------------- */
.waska { max-width: 900px; margin: 0 auto; }
.okruszki ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 18px 0 0; font-size: .87rem; color: var(--szary2); }
.okruszki li + li::before { content: '›'; margin-right: 6px; }
.okruszki a { color: var(--szary); text-decoration: none; }
.okruszki a:hover { text-decoration: underline; }
.z-ikona { display: flex; align-items: center; gap: 12px; }
.z-ikona .ikona { width: 34px; height: 34px; color: var(--akcent); }
.wstep { color: var(--szary); font-size: 1.05rem; margin-top: 0; max-width: 70ch; }
.inne-kat { display: flex; flex-wrap: wrap; gap: 10px; }
.inne-kat a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--pow); border: 1px solid var(--linia); border-radius: 999px; text-decoration: none; color: var(--tekst); }
.inne-kat a .ikona { width: 18px; height: 18px; color: var(--akcent); }
.dokument { max-width: 760px; }
.dokument ol, .dokument ul { padding-left: 1.3em; }
.dokument li { margin: .35em 0; }
.kontakt-dane { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien); padding: 6px 20px; }

/* ---------------- strona narzędzia ---------------- */
.uklad-narzedzia { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 32px; align-items: start; }
.narzedzie-tresc { min-width: 0; }
.narzedzie { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien); padding: 22px; box-shadow: var(--cien); margin: 14px 0 26px; }
.boczne { position: sticky; top: 120px; margin-top: 64px; }
.boczne h2 { font-size: 1rem; margin: 0 0 8px; color: var(--szary); text-transform: uppercase; letter-spacing: .05em; }
.lista-boczna { list-style: none; padding: 0; margin: 0; }
.lista-boczna a { display: flex; gap: 9px; align-items: center; padding: 7px 0; text-decoration: none; color: var(--tekst); border-bottom: 1px solid var(--linia); font-size: .94rem; }
.lista-boczna .ikona { width: 18px; height: 18px; color: var(--szary2); }
.lista-boczna a:hover { color: var(--akcent); }
.opis { max-width: 75ch; }
.opis h2:first-child { margin-top: 0; }
.wzor { font-family: var(--kod); background: var(--pow2); border: 1px solid var(--linia); border-left: 3px solid var(--akcent); border-radius: 8px; padding: 10px 14px; overflow-x: auto; white-space: pre-wrap; }
.przyklady { display: grid; gap: 12px; }
.przyklad { background: var(--pow); border: 1px solid var(--linia); border-radius: 10px; padding: 4px 16px; }
.przyklad h3 { font-size: 1rem; }
.faq details { border-bottom: 1px solid var(--linia); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details > div { color: var(--szary); padding-top: 6px; }
.zastrzezenie { color: var(--szary2); font-size: .86rem; border-top: 1px solid var(--linia); padding-top: 12px; margin-top: 32px; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linia); vertical-align: top; }
th { color: var(--szary); font-weight: 600; font-size: .85rem; }
.tabela { overflow-x: auto; }

/* ---------------- elementy narzędzi ---------------- */
.pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.pole { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pole > span, .etykieta { font-size: .88rem; color: var(--szary); font-weight: 500; }
input[type=text], input[type=number], input[type=search], input[type=date], input[type=datetime-local], input[type=time], input[type=password], input[type=url], input[type=email], select, textarea {
  font: inherit; color: var(--tekst); background: var(--pow); border: 1px solid var(--linia2); border-radius: 9px; padding: 9px 11px; width: 100%; min-width: 0; }
textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
textarea.kod, input.kod { font-family: var(--kod); font-size: .9rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-t); }
input[aria-invalid=true] { border-color: var(--zle); box-shadow: 0 0 0 3px var(--zle-t); }
.jednostka { display: flex; }
.jednostka input { border-radius: 9px 0 0 9px; }
.jednostka select, .jednostka > span { width: auto; flex: none; border-radius: 0 9px 9px 0; border-left: 0; background: var(--pow2); }
.jednostka > span { border: 1px solid var(--linia2); border-left: 0; padding: 9px 11px; color: var(--szary); }
.przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.przycisk { font: inherit; font-weight: 600; font-size: .95rem; padding: 9px 18px; border-radius: 9px; border: 1px solid var(--akcent); background: var(--akcent); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.przycisk:hover { background: var(--akcent-c); border-color: var(--akcent-c); color: #fff; }
.przycisk.drugi { background: var(--pow); color: var(--tekst); border-color: var(--linia2); }
.przycisk.drugi:hover { border-color: var(--akcent); color: var(--akcent); }
.przycisk:disabled { opacity: .5; cursor: not-allowed; }
.przycisk.maly { padding: 5px 11px; font-size: .86rem; }
.przelacznik { display: inline-flex; border: 1px solid var(--linia2); border-radius: 10px; overflow: hidden; flex-wrap: wrap; }
.przelacznik label { cursor: pointer; }
.przelacznik input { position: absolute; opacity: 0; pointer-events: none; }
.przelacznik span { display: block; padding: 7px 13px; font-size: .92rem; color: var(--szary); }
.przelacznik input:checked + span { background: var(--akcent); color: #fff; }
.przelacznik input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: -2px; }
.wynik { margin-top: 18px; background: var(--akcent-t); border-radius: 12px; padding: 16px 18px; }
.wynik:empty { display: none; }
.wynik-glowny { font-family: var(--nagl); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 700; line-height: 1.2; word-break: break-word; }
.wynik-glowny small { font-size: .55em; font-weight: 500; color: var(--szary); }
.wynik-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.wynik-lista div { background: var(--pow); border-radius: 9px; padding: 9px 12px; }
.wynik-lista b { display: block; font-family: var(--nagl); font-size: 1.2rem; word-break: break-word; }
.wynik-lista span { font-size: .82rem; color: var(--szary); }
.kroki { margin: 12px 0 0; padding-left: 1.2em; color: var(--szary); font-size: .93rem; }
.kroki li { margin: 3px 0; }
.blad-pola { color: var(--zle); background: var(--zle-t); border-radius: 9px; padding: 9px 13px; margin-top: 12px; font-size: .93rem; }
.uwaga { color: var(--uwaga); background: var(--uwaga-t); border-radius: 9px; padding: 9px 13px; font-size: .93rem; }
.ok-info { color: var(--ok); background: var(--ok-t); border-radius: 9px; padding: 9px 13px; font-size: .93rem; }
.upusc { border: 2px dashed var(--linia2); border-radius: 12px; padding: 26px 16px; text-align: center; color: var(--szary); cursor: pointer; background: var(--pow2); transition: border-color .15s, background .15s; }
.upusc:hover, .upusc.nad { border-color: var(--akcent); background: var(--akcent-t); }
.upusc b { color: var(--tekst); }
.upusc input { display: none; }
.lista-plikow { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.lista-plikow li { display: flex; align-items: center; gap: 10px; background: var(--pow2); border: 1px solid var(--linia); border-radius: 9px; padding: 7px 10px; font-size: .92rem; }
.lista-plikow li .nazwa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-plikow li small { color: var(--szary2); white-space: nowrap; }
.lista-plikow button { background: none; border: 1px solid var(--linia2); border-radius: 7px; cursor: pointer; color: var(--szary); padding: 2px 7px; font: inherit; font-size: .85rem; }
.podglad { max-width: 100%; max-height: 420px; display: block; margin: 12px auto 0; border-radius: 8px; background: repeating-conic-gradient(var(--linia) 0% 25%, transparent 0% 50%) 50% / 16px 16px; }
.miniatury { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.miniatury figure { margin: 0; background: var(--pow2); border: 1px solid var(--linia); border-radius: 10px; padding: 8px; font-size: .8rem; color: var(--szary); text-align: center; }
.miniatury img, .miniatury canvas { max-width: 100%; max-height: 120px; display: block; margin: 0 auto 6px; }
.dwa-pola { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.statystyki-tekstu { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.statystyki-tekstu div { background: var(--pow2); border: 1px solid var(--linia); border-radius: 10px; padding: 10px 12px; }
.statystyki-tekstu b { font-family: var(--nagl); font-size: 1.4rem; display: block; }
.statystyki-tekstu span { font-size: .82rem; color: var(--szary); }
.diff-wynik { font-family: var(--kod); font-size: .88rem; background: var(--pow2); border: 1px solid var(--linia); border-radius: 10px; padding: 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; max-height: 560px; overflow-y: auto; }
.diff-wynik .dod { background: var(--ok-t); color: var(--ok); display: block; }
.diff-wynik .usu { background: var(--zle-t); color: var(--zle); display: block; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--zle) 40%, transparent); }
.diff-wynik ins { background: var(--ok-t); color: var(--ok); text-decoration: none; }
.diff-wynik del { background: var(--zle-t); color: var(--zle); }
.kolory { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.kolor { border-radius: 10px; overflow: hidden; border: 1px solid var(--linia); background: var(--pow); font-size: .85rem; }
.kolor i { display: block; height: 70px; }
.kolor button { width: 100%; border: 0; background: none; font: inherit; font-family: var(--kod); padding: 6px; cursor: pointer; color: var(--tekst); }
.wybor-kolumn { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wybor-kolumn label { display: flex; gap: 6px; align-items: center; font-size: .93rem; }
.qr-podglad { display: flex; justify-content: center; margin-top: 16px; }
.qr-podglad canvas, .qr-podglad img { background: #fff; padding: 10px; border-radius: 10px; max-width: 100%; height: auto; image-rendering: pixelated; }
.tylko-wynik { font-family: var(--kod); word-break: break-all; }
.kopiuj { background: none; border: 1px solid var(--linia2); color: var(--szary); border-radius: 7px; font: inherit; font-size: .82rem; padding: 3px 9px; cursor: pointer; }
.kopiuj:hover { color: var(--akcent); border-color: var(--akcent); }
.pasek-postepu { height: 6px; background: var(--linia); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.pasek-postepu i { display: block; height: 100%; background: var(--akcent); width: 0; transition: width .2s; }
.miara { height: 10px; border-radius: 5px; background: var(--linia); overflow: hidden; margin-top: 6px; }
.miara i { display: block; height: 100%; }

/* ---------------- reklamy, stopka, zgoda ---------------- */
.reklama { margin: 24px 0; text-align: center; min-height: 100px; }
.reklama-napis { display: block; font-size: .72rem; color: var(--szary2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.stopka { background: var(--pow); border-top: 1px solid var(--linia); margin-top: 40px; }
.stopka-w { max-width: 1200px; margin: 0 auto; padding: 32px 16px 8px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.stopka-o p { color: var(--szary); font-size: .92rem; max-width: 46ch; }
.stopka h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--szary2); margin: 6px 0 10px; }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li a, .stopka li button { display: block; padding: 3px 0; color: var(--tekst); text-decoration: none; font-size: .93rem; background: none; border: 0; font: inherit; font-size: .93rem; cursor: pointer; text-align: left; }
.stopka li a:hover, .stopka li button:hover { color: var(--akcent); }
.stopka-dol { max-width: 1200px; margin: 0 auto; padding: 14px 16px 26px; color: var(--szary2); font-size: .84rem; border-top: 1px solid var(--linia); }
.zgoda { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; background: var(--pow); border: 1px solid var(--linia2); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.18); padding: 14px 16px; z-index: 40; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.zgoda[hidden] { display: none; }
.zgoda p { margin: 0; font-size: .9rem; flex: 1 1 280px; }
.zgoda div { display: flex; gap: 8px; }
.blad404 { text-align: center; padding-top: 30px; }
.blad404 .karty { text-align: left; }

/* ---------------- telefon i tablet ---------------- */
@media (max-width: 960px) {
  .uklad-narzedzia { grid-template-columns: 1fr; }
  .boczne { position: static; margin-top: 0; }
  .dwie { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .gora-w { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .logo img { width: 118px; }
  .szukaj-gora { order: 3; flex-basis: 100%; }
  .szukaj-gora input[type=search] { max-width: none; }
  .menu-przycisk { display: block; margin-left: auto; }
  .kategorie-pasek { display: none; flex-direction: column; padding: 4px 12px 10px; }
  .kategorie-pasek.otwarte { display: flex; }
  .kategorie-pasek a { border-bottom: 1px solid var(--linia); padding: 11px 4px; }
  .kategorie-pasek a[aria-current] { border-bottom-color: var(--linia); color: var(--akcent); }
  main { padding: 0 14px 40px; }
  .powitanie { padding-top: 26px; }
  .szukaj-duza input[type=search] { padding-right: 16px; }
  .szukaj-duza .przycisk { display: none; }
  .narzedzie { padding: 16px; border-radius: 12px; }
  .zalety { grid-template-columns: 1fr; }
  .stopka-w { grid-template-columns: 1fr; gap: 14px; }
  .dwa-pola { grid-template-columns: 1fr; }
  .pola { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .pola { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .gora, .stopka, .reklama, .boczne, .zgoda { display: none !important; } }

/* ---------- blog, przewodniki, widżety (27.10.2026) ---------- */
.karty-art { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.karta-art { display: flex; flex-direction: column; background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden; text-decoration: none; color: var(--tekst); transition: border-color .15s; }
.karta-art:hover { border-color: var(--akcent); color: var(--tekst); }
.karta-art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--pow2); }
.karta-art-t { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.karta-art-t small { color: var(--akcent); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.karta-art-t b { font-family: var(--nagl); font-size: 1.05rem; line-height: 1.3; }
.karta-art-t span { color: var(--szary); font-size: .9rem; line-height: 1.45; }
.blog-kat { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; }
.blog-kat a { padding: 6px 13px; border: 1px solid var(--linia); border-radius: 999px; background: var(--pow); color: var(--tekst); text-decoration: none; font-size: .9rem; }
.blog-kat a[aria-current] { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.stronicowanie { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 26px; }
.stronicowanie a { min-width: 40px; text-align: center; padding: 8px 10px; border: 1px solid var(--linia); border-radius: 9px; background: var(--pow); text-decoration: none; color: var(--tekst); }
.stronicowanie a[aria-current] { background: var(--akcent); color: #fff; border-color: var(--akcent); }
.artykul { min-width: 0; max-width: 760px; }
.art-meta { color: var(--szary2); font-size: .88rem; margin: -4px 0 12px; }
.art-tresc { max-width: none; font-size: 1.04rem; }
.art-tresc h2 { scroll-margin-top: 120px; }
.art-tresc img, .art-tresc svg { max-width: 100%; height: auto; }
.art-tresc figure { margin: 18px 0; } .art-tresc figcaption { color: var(--szary2); font-size: .85rem; text-align: center; margin-top: 6px; }
.art-tresc .schemat { background: var(--pow); border: 1px solid var(--linia); border-radius: 12px; padding: 12px; }
.art-tresc .schemat svg text { fill: var(--tekst); font-family: system-ui, sans-serif; }
.art-tresc blockquote { border-left: 3px solid var(--akcent); margin: 16px 0; padding: 4px 16px; color: var(--szary); }
.art-obraz { margin: 14px 0; } .art-obraz img { width: 100%; height: auto; border-radius: 12px; }
.art-narzedzie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--akcent-t); border-radius: 12px; padding: 12px 16px; margin: 16px 0; font-weight: 600; }
.art-narzedzie span { color: var(--szary); font-weight: 500; }
.spis { background: var(--pow); border: 1px solid var(--linia); border-radius: 12px; padding: 12px 18px; margin: 18px 0; }
.spis b { font-family: var(--nagl); } .spis ol { margin: 6px 0 0; padding-left: 1.3em; } .spis a { text-decoration: none; }
.art-powiazane { margin-top: 30px; }
.tagi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .tagi span { font-size: .8rem; background: var(--pow2); border: 1px solid var(--linia); border-radius: 999px; padding: 2px 10px; color: var(--szary); }
.zrodla { font-size: .9rem; color: var(--szary); }
.hub-nagl { margin-top: 10px; }
.sekcja-blog .karty-art.wyr { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sekcja-widzety { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien); padding: 22px; }
.sekcja-widzety pre { font-family: var(--kod); font-size: .8rem; background: var(--pow2); border: 1px solid var(--linia); border-radius: 10px; padding: 12px; overflow-x: auto; margin: 0; }
details.widzet-kreator { margin: 0 0 26px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--pow); }
details.widzet-kreator > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: center; }
details.widzet-kreator > summary::-webkit-details-marker { display: none; }
details.widzet-kreator > summary::before { content: '</>'; font-family: var(--kod); color: var(--akcent); font-size: .85rem; }
details.widzet-kreator > div { padding: 0 18px 18px; }
#wk-podglad { width: 100%; border: 1px dashed var(--linia2); border-radius: 12px; margin-top: 12px; background: var(--tlo); }
body.widzet { background: var(--pow); }
.widzet-w { max-width: none; padding: 12px; min-height: 0; }
.widzet-w .narzedzie { box-shadow: none; margin: 0; padding: 14px; }
.widzet-t { font-size: 1.15rem; margin: 0 0 10px; }
.widzet-stopka { text-align: right; font-size: .82rem; color: var(--szary); margin: 8px 2px 0; }
.widzet-stopka a { font-weight: 700; }
@media (max-width: 720px) { .sekcja-widzety { grid-template-columns: 1fr; } }

/* kolory kategorii (13) */
.kat-matematyka .ikona { background: #3651e0; } .kat-fizyka .ikona { background: #0b7fa8; } .kat-elektryka .ikona { background: #d18a00; }
.kat-finanse .ikona { background: #13845a; } .kat-budownictwo .ikona { background: #a4562a; } .kat-przeliczniki .ikona { background: #5b6bd6; }
.kat-czas .ikona { background: #7a5af0; } .kat-programowanie .ikona { background: #7239d6; } .kat-sieci .ikona { background: #0f8f9c; }
.kat-zdrowie .ikona { background: #d0435e; }
.art-tresc pre { max-width: 100%; overflow-x: auto; background: var(--pow2); border: 1px solid var(--linia); border-radius: 10px; padding: 12px 14px; font-size: .86rem; line-height: 1.5; }
.art-tresc pre code { background: none; padding: 0; border: 0; }
@media (max-width: 720px) { .art-tresc table { display: block; max-width: 100%; overflow-x: auto; } }
.art-tresc .wzor { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- kolory kategorii i ożywienie strony (31.10.2026) ----------
   --kp: kolor pod biały tekst i na jasnym tle, --kj: wersja na ciemny motyw */
body { --kp: #3651e0; --kj: #8fa0ff; }
.kol-matematyka, .kat-matematyka { --kp: #3651e0; --kj: #8fa0ff; }
.kol-fizyka, .kat-fizyka { --kp: #0b76a0; --kj: #5cc3ea; }
.kol-elektryka, .kat-elektryka { --kp: #a85f00; --kj: #f2b84b; }
.kol-finanse, .kat-finanse { --kp: #0f7b55; --kj: #4fd09b; }
.kol-budownictwo, .kat-budownictwo { --kp: #b4461c; --kj: #f49a6c; }
.kol-przeliczniki, .kat-przeliczniki { --kp: #4b55c9; --kj: #a3acf5; }
.kol-czas, .kat-czas { --kp: #7239d6; --kj: #b89bf7; }
.kol-zdrowie, .kat-zdrowie { --kp: #cc2b5e; --kj: #f7819f; }
.kol-tekst, .kat-tekst { --kp: #0b7a6e; --kj: #4cd2c0; }
.kol-obrazy, .kat-obrazy { --kp: #b5209a; --kj: #ee87d8; }
.kol-pliki, .kat-pliki { --kp: #99600a; --kj: #e8b35a; }
.kol-programowanie, .kat-programowanie { --kp: #6d28d9; --kj: #b08cf8; }
.kol-sieci, .kat-sieci { --kp: #0369a1; --kj: #6cc4f0; }
body, [class*="kol-"], [class*="kat-"] { --kk: var(--kp); }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) body, :root:not([data-motyw="jasny"]) [class*="kol-"], :root:not([data-motyw="jasny"]) [class*="kat-"] { --kk: var(--kj); }
}
:root[data-motyw="ciemny"] body, :root[data-motyw="ciemny"] [class*="kol-"], :root[data-motyw="ciemny"] [class*="kat-"] { --kk: var(--kj); }

body:not(.widzet) { background-image: radial-gradient(900px 420px at 95% -5%, color-mix(in srgb, var(--kk) 9%, transparent), transparent 70%); background-repeat: no-repeat; }
.gora::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, #3651e0, #7239d6, #cc2b5e, #e8890c, #0f9d6e, #0b86b5); }
.kategorie-pasek a .ikona { color: var(--kk); }
.kategorie-pasek a:hover { color: var(--kk); border-bottom-color: var(--kk); }
.kategorie-pasek a[aria-current] { color: var(--kk); border-bottom-color: var(--kk); }

.powitanie { margin-top: 18px; padding: 54px 22px 36px; border-radius: 24px; color: #fff; background: radial-gradient(520px 300px at 12% 110%, rgba(255,176,59,.55), transparent 70%), radial-gradient(560px 320px at 92% -10%, rgba(30,190,200,.5), transparent 70%), linear-gradient(120deg, #3147d6, #6d2fd0 52%, #c5286f); box-shadow: 0 14px 34px rgba(76,48,190,.24); }
.powitanie h1 { color: #fff; }
.powitanie-p { color: #fff; }
.powitanie .szukaj-duza input[type=search] { border-color: transparent; box-shadow: 0 8px 24px rgba(20,16,70,.28); }
.powitanie .przycisk { background: #3651e0; border-color: #3651e0; color: #fff; }
.powitanie .szybkie span { color: #fff; }
.powitanie .szybkie a { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); }
.powitanie .szybkie a:hover { color: #1c2150; background: #fff; border-color: #fff; }

.sekcja > h2::after, .sekcja section > h2::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 7px; border-radius: 4px; background: linear-gradient(90deg, #3651e0, #cc2b5e); }
.karta { border-top: 3px solid var(--kk); box-shadow: var(--cien); transition: transform .15s, box-shadow .15s, border-color .15s; }
.karta:hover { transform: translateY(-3px); border-color: var(--kk); box-shadow: 0 10px 24px color-mix(in srgb, var(--kk) 24%, transparent); }
.karta > .ikona { width: 36px; height: 36px; padding: 7px; border-radius: 10px; margin-top: 0; color: var(--kk); background: color-mix(in srgb, var(--kk) 13%, var(--pow)); }
.karta-t small { color: var(--kk); font-weight: 600; }
.kat-blok { border-top: 4px solid var(--kk); box-shadow: var(--cien); }
.kat-blok .ikona { background: var(--kp); }
.kat-blok li a:hover, .wiecej { color: var(--kk); }
.zalety > * { padding: 16px 18px; border-radius: var(--promien); background: color-mix(in srgb, var(--kz, #3651e0) 10%, var(--pow)); }
.zalety > :nth-child(2) { --kz: #0f7b55; } .zalety > :nth-child(3) { --kz: #cc2b5e; }

.z-ikona .ikona { color: var(--kk); }
.narzedzie { border-top: 4px solid var(--kk); }
.narzedzie .przycisk:not(.drugi) { background: var(--kp); border-color: var(--kp); }
.narzedzie .przycisk:not(.drugi):hover { background: color-mix(in srgb, var(--kp) 82%, #000); border-color: color-mix(in srgb, var(--kp) 82%, #000); }
.wynik { background: color-mix(in srgb, var(--kk) 10%, var(--pow)); border-left: 4px solid var(--kk); }
.wynik-lista > div:first-child b { color: var(--kk); }
input:focus, select:focus, textarea:focus { border-color: var(--kk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kk) 20%, transparent); }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--kk); }
.lista-boczna .ikona { color: var(--kk); }
.lista-boczna a:hover { color: var(--kk); }
.inne-kat a .ikona { color: var(--kk); }
.opis h2, .dokument h2 { padding-left: 11px; border-left: 4px solid var(--kk); }
.wzor { border-left: 4px solid var(--kk); }
th { color: var(--tekst); background: color-mix(in srgb, var(--kk) 9%, var(--pow)); }
.przyklad { border-top: 3px solid var(--kk); }
.faq summary { color: var(--kk); }
.karta-art { box-shadow: var(--cien); transition: transform .15s, box-shadow .15s; }
.karta-art:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(54,81,224,.18); }
.stopka { border-top: 0; }
.stopka::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, #0b86b5, #0f9d6e, #e8890c, #cc2b5e, #7239d6, #3651e0); }
@media (max-width: 720px) { .powitanie { margin-top: 12px; padding: 34px 16px 26px; border-radius: 18px; } .kategorie-pasek a[aria-current] { color: var(--kk); } }
@media print { body:not(.widzet) { background-image: none; } }