/* Panel klienta SEO (seo.robertgesiarz.pl). Barwy i kroje marki robertgesiarz.pl: Sora (nagłówki), Manrope (tekst),
   zieleń #128a5c w jasnym / #3fd98c w ciemnym, grafit #12161d. Bez stylów inline: CSP wpuszcza tylko ten plik. */
@font-face{font-family:"Manrope";src:url("czcionki/manrope-latin.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("czcionki/manrope-latin-ext.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";src:url("czcionki/sora-latin.woff2") format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";src:url("czcionki/sora-latin-ext.woff2") format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --tlo:#f5f7f6;--powierzchnia:#fff;--powierzchnia-2:#eef2f0;--tekst:#12161d;--muted:#4b5563;--faint:#6b7280;
  --ramka:#dfe5e2;--ramka-mocna:#c5cec9;--akcent:#128a5c;--akcent-tlo:#e3f3ec;--na-akcencie:#fff;
  --lepiej:#0f7a50;--lepiej-tlo:#e1f4ea;--gorzej:#b42318;--gorzej-tlo:#fdecea;--rowno:#4b5563;--rowno-tlo:#eef0f2;
  --wykres-wysw:#9aa8a1;--wykres-pole:rgba(18,138,92,.08);--cien:0 1px 2px rgba(18,22,29,.04),0 8px 24px rgba(18,22,29,.05);
  color-scheme:light
}
@media (prefers-color-scheme:dark){:root{
  --tlo:#0d1015;--powierzchnia:#151a21;--powierzchnia-2:#1c232c;--tekst:#e8edf1;--muted:#a7b0ba;--faint:#8a94a0;
  --ramka:#252d37;--ramka-mocna:#33404d;--akcent:#3fd98c;--akcent-tlo:#0f2a1f;--na-akcencie:#08150e;
  --lepiej:#3fd98c;--lepiej-tlo:#0f2a1f;--gorzej:#ff8a7a;--gorzej-tlo:#2c1513;--rowno:#a7b0ba;--rowno-tlo:#1c232c;
  --wykres-wysw:#5b6b75;--wykres-pole:rgba(63,217,140,.08);--cien:none;color-scheme:dark
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--tekst);font:16px/1.6 "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:"Sora","Manrope",system-ui,sans-serif;line-height:1.2;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(26px,4vw,36px);font-weight:700}
h2{font-size:20px;font-weight:650}
h3{font-size:16px;font-weight:650}
p{margin:0 0 .8em}
a{color:var(--akcent);text-underline-offset:2px}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:14px}
.l{text-align:right;white-space:nowrap}

.gora{background:var(--powierzchnia);border-bottom:1px solid var(--ramka)}
.gora-w{max-width:1040px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.marka{display:flex;align-items:center;gap:10px;color:var(--tekst);text-decoration:none}
.marka b{display:block;font-family:"Sora",sans-serif;font-size:15px;line-height:1.2}
.marka small{display:block;color:var(--faint);font-size:12px}
.marka-znak{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tekst);color:var(--tlo);
  font:700 13px/1 "Sora",sans-serif;box-shadow:0 0 0 2px var(--akcent)}
.gora-konto{display:flex;align-items:center;gap:12px;font-size:14px}
.gora-konto form{margin:0}

.tresc{max-width:1040px;margin:0 auto;padding:28px 16px 40px}
.karta{background:var(--powierzchnia);border:1px solid var(--ramka);border-radius:16px;padding:22px 24px;margin:0 0 18px;box-shadow:var(--cien)}
.karta-waska{max-width:480px;margin:40px auto}
.naglowek{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.naglowek .muted{margin:0}
.nad-tytulem{color:var(--akcent);font-weight:600;font-size:14px;margin:0 0 4px}
.okres{margin:-6px 0 14px}

.przycisk,.przycisk-cichy{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 "Manrope",sans-serif;
  border-radius:10px;padding:12px 18px;cursor:pointer;text-decoration:none;border:1px solid transparent}
.przycisk{background:var(--akcent);color:var(--na-akcencie)}
.przycisk:hover{filter:brightness(1.06)}
.przycisk-cichy{background:transparent;color:var(--tekst);border-color:var(--ramka-mocna);padding:8px 14px;font-size:14px}
.przycisk-cichy:hover{background:var(--powierzchnia-2)}
.przycisk:focus-visible,.przycisk-cichy:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--akcent);outline-offset:2px}

.formularz{display:grid;gap:10px;margin:18px 0}
.formularz label{font-size:14px;color:var(--muted)}
.formularz input{font:inherit;padding:12px 14px;border-radius:10px;border:1px solid var(--ramka-mocna);background:var(--powierzchnia);color:var(--tekst);width:100%}
.komunikat{padding:10px 14px;border-radius:10px;font-size:15px}
.komunikat.blad{background:var(--gorzej-tlo);color:var(--gorzej)}

.pigulki{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.pigulki a{padding:6px 12px;border-radius:999px;border:1px solid var(--ramka-mocna);color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.pigulki a:hover{background:var(--powierzchnia-2)}
.pigulki a.on{background:var(--akcent-tlo);border-color:var(--akcent);color:var(--akcent)}

.kafle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.kafel{background:var(--powierzchnia);border:1px solid var(--ramka);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--cien)}
.kafel-etykieta{font-size:13px;font-weight:600;color:var(--muted)}
.kafel-liczba{font:700 34px/1.1 "Sora",sans-serif;letter-spacing:-.02em}
.kafel-liczba small{font-size:16px;font-weight:600;color:var(--faint)}
.kafel-zmiana{min-height:24px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kafel-opis{font-size:13px;color:var(--faint);line-height:1.45;margin-top:auto}
.zmiana{display:inline-block;font-size:13px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.zmiana.lepiej{background:var(--lepiej-tlo);color:var(--lepiej)}
.zmiana.gorzej{background:var(--gorzej-tlo);color:var(--gorzej)}
.zmiana.rowno{background:var(--rowno-tlo);color:var(--rowno)}
.wzgledem{font-size:12px;color:var(--faint)}

.wykres{margin:0}
.wykres svg{width:100%;height:200px;display:block;overflow:visible}
.w-pole{fill:var(--wykres-pole)}
.w-wysw{fill:none;stroke:var(--wykres-wysw);stroke-width:2;vector-effect:non-scaling-stroke}
.w-klik{fill:none;stroke:var(--akcent);stroke-width:2.5;vector-effect:non-scaling-stroke}
.wykres figcaption{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:10px}
.leg::before{content:"";display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.leg-wysw::before{background:var(--wykres-wysw)}.leg-klik::before{background:var(--akcent)}

.notatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.notatka ul,.lista-ptaszki{margin:0;padding:0;list-style:none}
.notatka li,.lista-ptaszki li{position:relative;padding:4px 0 4px 26px}
.notatka li::before,.lista-ptaszki li::before{content:"";position:absolute;left:4px;top:12px;width:10px;height:6px;border-left:2px solid var(--akcent);
  border-bottom:2px solid var(--akcent);transform:rotate(-45deg)}

.tabela-w{overflow-x:auto;margin:0 -4px 8px}
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela th{font-size:13px;font-weight:600;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--ramka)}
.tabela td{padding:10px;border-bottom:1px solid var(--ramka);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela th.l,.tabela td.l{text-align:right}
.miejsce{font-family:"Sora",sans-serif}
.m-top10{color:var(--akcent)}
.m-top3{display:inline-block;background:var(--akcent);color:var(--na-akcencie);border-radius:8px;padding:1px 8px}
.iskra{display:block}
.iskra polyline{fill:none;stroke:var(--akcent);stroke-width:2;vector-effect:non-scaling-stroke}

.karta-pakiet{background:var(--akcent-tlo);border-color:transparent}

.stopka{max-width:1040px;margin:0 auto;padding:8px 16px 40px;font-size:14px;color:var(--muted)}
.stopka p{margin:0 0 4px}

@media (max-width:900px){.kafle{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .karta{padding:18px 16px;border-radius:14px}
  .notatka{grid-template-columns:1fr;gap:12px}
  .kafel-liczba{font-size:28px}
  .ukryj-waskie,.ukryj-tel{display:none}
  .naglowek .przycisk{width:100%}
  .wykres svg{height:160px}
}
@media (max-width:380px){.kafle{grid-template-columns:1fr}}