/* Wspólne Pole – style aplikacji. Mobile-first, jasny i ciemny motyw. */

/* Czcionka Nunito (SIL Open Font License 1.1, static/vendor/fonts/OFL-Nunito.txt) – z własnego serwera,
   bez łączenia z Google (RODO). Czcionka zmienna: grubości 200–1000 w jednym pliku. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url("../vendor/fonts/nunito-latin-ext-wght-normal.ffdc8b0c86fb.woff2") format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url("../vendor/fonts/nunito-latin-wght-normal.166202cc391c.woff2") format("woff2-variations");
  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;
}

/* Kierunek: porządny rejestr polowy. Papierowe tło, atramentowy tekst, jeden akcent – zieleń marki.
   Inne kolory tylko tam, gdzie niosą informację (uprawy, rodzaje wpisów, stany). Sekcje dzielą linie,
   ramki tylko dla samodzielnych obiektów, cienie tylko dla menu i dymków. */
:root {
  --tlo: #f4f1e8;
  --powierzchnia: #fffdf8;
  --powierzchnia-2: #ece8dc;
  --tekst: #1f231b;
  --tekst-slaby: #5d6456;
  --ramka: #ddd8c9;
  --ramka-mocna: #c4bda8;
  --typ-oprysk: #3b6fa0;
  --typ-nawozenie: #a8740f;
  --typ-agro: #7a5c3e;
  --cien-menu: 0 10px 30px rgba(31, 35, 27, .16);
  --promien-maly: 8px;
  --glowny: #2f6b2a;
  --glowny-hover: #27591f;
  --na-glownym: #ffffff;
  --glowny-jasny: #e6f0e1;
  --zboze: #c99a2e;
  --ostrzezenie-tlo: #fff4d6;
  --ostrzezenie-tekst: #6e4e00;
  --sukces-tlo: #e3f1dc;
  --sukces-tekst: #23501d;
  --blad: #b3261e;
  --blad-tlo: #fbe4e2;
  --cien: none;
  --promien: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #14170f;
    --powierzchnia: #1b1f16;
    --powierzchnia-2: #252b1f;
    --tekst: #e8eae1;
    --tekst-slaby: #a5ac9c;
    --ramka: #31392a;
    --ramka-mocna: #4a5440;
    --typ-oprysk: #8db6dc;
    --typ-nawozenie: #e0b65a;
    --typ-agro: #c4a27e;
    --cien-menu: 0 10px 30px rgba(0, 0, 0, .45);
    --glowny: #86c27a;
    --glowny-hover: #9ad08f;
    --na-glownym: #10230c;
    --glowny-jasny: #1f3319;
    --zboze: #e0b65a;
    --ostrzezenie-tlo: #3a2f12;
    --ostrzezenie-tekst: #f3d38a;
    --sukces-tlo: #1f3319;
    --sukces-tekst: #b5e0a8;
    --blad: #f2867d;
    --blad-tlo: #3b1d1a;
    --cien: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 17px/1.5 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--tlo);
  color: var(--tekst);
  padding-bottom: 92px; /* miejsce na dolne menu na telefonie */
}

a { color: var(--glowny); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: 1.65rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
/* liczby w tabelach i zestawieniach – cyfry równej szerokości, kolumny się nie rozjeżdżają */
table, .prawa, .ha, .liczba, .ziemia-liczba b, .statystyka .liczba, .liczby b, .ndvi-liczba { font-variant-numeric: tabular-nums; }
input, select, textarea, button { font-family: inherit; }
p { margin: 0 0 .75rem; }
.ikona { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Nagłówek i nawigacja ---------- */

.naglowek {
  position: sticky; top: 0; z-index: 20;
  background: var(--powierzchnia);
  border-bottom: 1px solid var(--ramka);
}
.naglowek-wnetrze {
  max-width: 1080px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 16px; min-height: 60px;
}
.logo {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  font-weight: 700; font-size: 1.15rem; color: var(--tekst); text-decoration: none; line-height: 1.15;
}
.logo > span { display: flex; flex-direction: column; min-width: 0; }
.logo small { font-weight: 600; font-size: .78rem; color: var(--tekst-slaby); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo .ikona { color: var(--glowny); width: 32px; height: 32px; }
.logo-znak { border-radius: 7px; }
.nav-gora { display: none; gap: 2px; margin-left: 8px; }
.nav-gora { align-self: stretch; }
.nav-gora a {
  display: flex; align-items: center; padding: 0 12px; color: var(--tekst-slaby);
  text-decoration: none; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -9px; /* linia aktywnej pozycji leży na krawędzi nagłówka */
}
.nav-gora a:hover { color: var(--tekst); }
.nav-gora a.aktywny { color: var(--tekst); border-bottom-color: var(--glowny); }
.uzytkownik { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.uzytkownik form { margin: 0; }
.tylko-pc { display: none !important; }

/* menu „Więcej” */
.menu-wiecej { position: relative; }
.menu-wiecej > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px; border-radius: var(--promien-maly); border: 1px solid var(--ramka);
  font-weight: 600; color: var(--tekst); background: var(--powierzchnia);
}
.menu-wiecej > summary::-webkit-details-marker { display: none; }
.menu-wiecej[open] > summary { background: var(--powierzchnia-2); }
.hamburger { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.hamburger i { display: block; height: 2.5px; border-radius: 2px; background: currentColor; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 24px)); z-index: 40;
  background: var(--powierzchnia); border: 1px solid var(--ramka); border-radius: var(--promien);
  box-shadow: var(--cien-menu); padding: 6px 8px 8px; display: grid;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 6px;
  color: var(--tekst); text-decoration: none; font: inherit; font-weight: 500; background: none; border: 0;
  width: 100%; text-align: left; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--powierzchnia-2); }
.menu-grupa {
  margin: 10px 10px 2px; font-size: .78rem; font-weight: 700; color: var(--tekst-slaby);
  text-transform: uppercase; letter-spacing: .05em;
}
.menu-panel form { margin: 4px 0 0; border-top: 1px solid var(--ramka); padding-top: 4px; }
.menu-osoba { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px; border-bottom: 1px solid var(--ramka); margin-bottom: 4px; }
.menu-osoba small { display: block; color: var(--tekst-slaby); font-size: .85rem; }
.awatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--glowny); color: var(--na-glownym); font-weight: 700; font-size: 1.1rem;
}

.nav-dol {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--powierzchnia); border-top: 1px solid var(--ramka);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav-dol a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; color: var(--tekst-slaby); text-decoration: none;
  font-size: .78rem; font-weight: 600; border-radius: var(--promien-maly);
}
.nav-dol a.aktywny { color: var(--glowny); font-weight: 700; }
.nav-dol .dodaj .kolko {
  display: grid; place-items: center; width: 44px; height: 30px;
  border-radius: var(--promien-maly); background: var(--glowny); color: var(--na-glownym);
}
.nav-dol .dodaj { color: var(--glowny); }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .nav-gora { display: flex; }
  .nav-dol { display: none; }
  .tylko-pc { display: inline-flex !important; }
  .tylko-tel { display: none !important; }
}

/* ---------- Układ ---------- */

.tresc { max-width: 1080px; margin: 0 auto; padding: 20px 16px 32px; }
.waska { max-width: 640px; }
.naglowek-strony {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.naglowek-strony p { color: var(--tekst-slaby); margin: 0; }
.wstecz {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;
  color: var(--tekst-slaby); text-decoration: none; font-size: .95rem;
}

.karta {
  background: var(--powierzchnia); border: 1px solid var(--ramka);
  border-radius: var(--promien); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--cien);
}
.karta > h2:first-child { margin-bottom: 12px; }

.siatka { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
@media (min-width: 760px) { .siatka { grid-template-columns: repeat(4, 1fr); } }

.statystyka {
  background: var(--powierzchnia); border: 1px solid var(--ramka);
  border-radius: var(--promien); padding: 14px 16px; box-shadow: var(--cien);
}
.statystyka .liczba { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.statystyka .opis { color: var(--tekst-slaby); font-size: .9rem; }

.dwie-kolumny { display: grid; gap: 16px; }
@media (min-width: 860px) { .dwie-kolumny { grid-template-columns: 3fr 2fr; align-items: start; } }

/* ---------- Przyciski ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: var(--promien-maly);
  border: 1px solid var(--ramka-mocna); background: var(--powierzchnia); color: var(--tekst);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--powierzchnia-2); }
.btn-glowny { background: var(--glowny); border-color: var(--glowny); color: var(--na-glownym); }
.btn-glowny:hover { background: var(--glowny-hover); }
.btn-niebezpieczny { background: var(--blad); border-color: var(--blad); color: #fff; }
.btn-maly { min-height: 38px; padding: 6px 12px; font-size: .92rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--glowny); outline-offset: 2px; }
.btn-tekst { border: 0; background: none; color: var(--tekst-slaby); }
.btn-pelny { width: 100%; }
.przyciski { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Komunikaty ---------- */

.komunikaty { display: grid; gap: 8px; margin-bottom: 16px; }
.komunikat {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--promien-maly); font-weight: 500;
  border-left: 3px solid currentColor;
}
.komunikat.success { background: var(--sukces-tlo); color: var(--sukces-tekst); }
.komunikat.warning { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie-tekst); }
.komunikat.error { background: var(--blad-tlo); color: var(--blad); }
.komunikat.info { background: var(--glowny-jasny); color: var(--tekst); border-left-color: var(--glowny); }

.baner {
  display: flex; gap: 14px; align-items: center;
  background: var(--glowny-jasny);
  border: 1px solid var(--ramka); border-radius: var(--promien);
  padding: 16px 18px; margin-bottom: 16px;
}
.baner .duza { font-size: 1.9rem; font-weight: 700; color: var(--glowny); line-height: 1; }

/* ---------- Listy ---------- */

.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-top: 1px solid var(--ramka); }
.lista > li:first-child { border-top: 0; }
.wiersz {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  color: inherit; text-decoration: none;
}
a.wiersz:hover { background: var(--powierzchnia-2); border-radius: 10px; }
.wiersz .glowna { flex: 1; min-width: 0; }
.wiersz .tytul { font-weight: 600; }
.wiersz .pod { color: var(--tekst-slaby); font-size: .9rem; }
.wiersz .prawa { text-align: right; color: var(--tekst-slaby); font-size: .9rem; white-space: nowrap; }
.data-kafel {
  display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--promien-maly); background: var(--glowny-jasny); color: var(--glowny); line-height: 1.05;
}
.data-kafel b { font-size: 1.2rem; }
.data-kafel span { font-size: .72rem; text-transform: uppercase; }

.znaczek {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: .78rem; font-weight: 600; background: var(--powierzchnia-2); color: var(--tekst-slaby);
}
.znaczek.zielony { background: var(--sukces-tlo); color: var(--sukces-tekst); }
.znaczek.zolty { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie-tekst); }
.znaczek.czerwony { background: var(--blad-tlo); color: var(--blad); }

.pusty {
  text-align: center; padding: 28px 12px; color: var(--tekst-slaby);
}
.pusty .ikona { width: 36px; height: 36px; color: var(--tekst-slaby); margin-bottom: 8px; }
.pusty p { max-width: 380px; margin: 0 auto 14px; }

.kafle-pol { display: grid; gap: 12px; }
@media (min-width: 640px) { .kafle-pol { grid-template-columns: repeat(2, 1fr); } }
.kafel-pola {
  display: block; padding: 16px; border-radius: var(--promien);
  background: var(--powierzchnia); border: 1px solid var(--ramka); box-shadow: var(--cien);
  color: inherit; text-decoration: none;
}
.kafel-pola:hover { border-color: var(--glowny); }
.kafel-pola .ha { font-size: 1.4rem; font-weight: 700; color: var(--glowny); }

/* ---------- Formularze ---------- */

.formularz { display: grid; gap: 16px; }
.rzad { display: grid; gap: 16px; }
@media (min-width: 520px) { .rzad { grid-template-columns: 1fr 1fr; } .rzad-3 { grid-template-columns: 2fr 1fr; } }
.pole-form { display: grid; gap: 6px; }
.pole-form label { font-weight: 600; }
.wymagane { color: var(--blad); }
.pomoc { color: var(--tekst-slaby); font-size: .88rem; }
.blad { color: var(--blad); font-size: .9rem; font-weight: 500; }
.ma-blad input, .ma-blad select, .ma-blad textarea { border-color: var(--blad); }

input[type=text], input[type=search], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=email], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid var(--ramka); border-radius: var(--promien-maly);
  background: var(--powierzchnia); color: var(--tekst); font: inherit;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--glowny); box-shadow: 0 0 0 3px var(--glowny-jasny);
}
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
legend {
  font-weight: 700; font-size: 1.05rem; margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
legend .nr {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--glowny); color: var(--na-glownym); font-size: .85rem;
}

/* Podpowiadanie środków */
.autouzupelnianie { position: relative; }
.podpowiedzi {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto;
  background: var(--powierzchnia); border: 1px solid var(--ramka);
  border-radius: var(--promien-maly); box-shadow: var(--cien);
}
.podpowiedzi[hidden] { display: none; }
.podpowiedzi li { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.podpowiedzi li:hover, .podpowiedzi li.zaznaczona { background: var(--glowny-jasny); }
.podpowiedzi .pod { color: var(--tekst-slaby); font-size: .86rem; }
.wybrany-srodek {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px;
  border-radius: var(--promien-maly); background: var(--glowny-jasny);
}
.wybrany-srodek[hidden] { display: none; }
.wybrany-srodek .glowna { flex: 1; }
.bbch-opis { color: var(--glowny); font-weight: 600; font-size: .9rem; min-height: 1.3em; }

.dolny-pasek {
  position: sticky; bottom: 76px; z-index: 5;
  background: var(--tlo); padding: 12px 0 4px;
}
@media (min-width: 760px) { .dolny-pasek { position: static; } }

/* ---------- Filtry ---------- */

.filtry { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.filtr {
  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--ramka);
  background: var(--powierzchnia); color: var(--tekst-slaby); text-decoration: none;
  font-size: .92rem; font-weight: 500;
}
.filtr.aktywny { background: var(--glowny); border-color: var(--glowny); color: var(--na-glownym); }
.szukajka { display: flex; gap: 8px; }
.szukajka input { flex: 1; }

button.filtr { font: inherit; font-size: .92rem; cursor: pointer; }
.przelacznik { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.przelacznik form { margin: 0; }

/* ---------- Osoby i role ---------- */

.karta-link { padding: 16px; text-decoration: none; }
.karta-link > .ikona { color: var(--glowny); width: 28px; height: 28px; }
.osoba { flex-wrap: wrap; }
.awatar {
  display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  background: var(--glowny-jasny); color: var(--glowny); font-weight: 700; font-size: 1.1rem;
}
.zmiana-roli { margin: 0; }
.zmiana-roli select { min-height: 40px; padding: 6px 10px; width: auto; font-size: .95rem; }
.osoba form { margin: 0; }
.opisy-rol .wiersz { padding: 8px 2px; }

.wybor-roli { display: grid; gap: 8px; }
.wybor-roli .opcja {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border: 1.5px solid var(--ramka); border-radius: var(--promien-maly); font-weight: 400;
}
.wybor-roli .opcja:has(input:checked) { border-color: var(--glowny); background: var(--glowny-jasny); }
.wybor-roli input { margin-top: 4px; accent-color: var(--glowny); width: 18px; height: 18px; flex-shrink: 0; }

.zaproszenie { display: grid; gap: 8px; padding: 14px 0; }
.zaproszenie .tytul { font-weight: 600; }
.zaproszenie .pod { color: var(--tekst-slaby); font-size: .9rem; }
.zaproszenie form { margin: 0; }
.kopiuj { display: flex; gap: 8px; }
.kopiuj input { min-height: 40px; padding: 6px 10px; font-size: .85rem; }

/* ---------- Ewidencja: wybór rodzaju, formularze, typy wpisów ---------- */

.kafle-wyboru { display: grid; gap: 12px; margin-top: 12px; }
.kafel-wyboru {
  display: flex; gap: 16px; align-items: center; padding: 18px;
  background: var(--powierzchnia); border: 1.5px solid var(--ramka); border-radius: var(--promien);
  box-shadow: var(--cien); color: inherit; text-decoration: none;
}
.kafel-wyboru:hover { border-color: var(--glowny); }
.kafel-wyboru strong { display: block; font-size: 1.1rem; }
.kafel-wyboru small { color: var(--tekst-slaby); }

.przelacznik-rodzaju { display: grid; gap: 8px; }
@media (min-width: 640px) { .przelacznik-rodzaju { grid-template-columns: repeat(3, 1fr); } }
.przelacznik-rodzaju .opcja, .wybor-praktyk .opcja-mala {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer; font-weight: 500;
  border: 1.5px solid var(--ramka); border-radius: var(--promien-maly);
}
.przelacznik-rodzaju .opcja:has(input:checked), .wybor-praktyk .opcja-mala:has(input:checked) {
  border-color: var(--glowny); background: var(--glowny-jasny);
}
.przelacznik-rodzaju input, .wybor-praktyk input { margin-top: 3px; accent-color: var(--glowny); width: 18px; height: 18px; flex-shrink: 0; }
.wybor-praktyk { display: grid; gap: 6px; }
.wybor-praktyk .opcja-mala { padding: 8px 12px; font-weight: 400; font-size: .92rem; }

details.rozwin { border-top: 1px dashed var(--ramka); padding-top: 10px; }
details.rozwin summary { cursor: pointer; font-weight: 600; color: var(--glowny); }

.znaczek.niebieski { background: #e1ecf7; color: #1f4f7a; }
@media (prefers-color-scheme: dark) { .znaczek.niebieski { background: #1c2c3b; color: #a8cbea; } }
.data-kafel.typ-nawozenie { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie-tekst); }
.data-kafel.typ-agro { background: var(--powierzchnia-2); color: var(--tekst-slaby); }

.dokument h2 { margin-bottom: 6px; }
.lista-punktow { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

.przypomnienia li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--ramka); }
.przypomnienia li:first-child { border-top: 0; }
.przypomnienia .ikona { color: var(--ostrzezenie-tekst); }

/* ---------- Mapy ---------- */

.mapa { height: 420px; border-radius: var(--promien-maly); overflow: hidden; background: #dfe6d8; }
.mapa-duza { height: min(70vh, 640px); border-radius: 0; }
.mapa-mala { height: 260px; border-radius: 0; }
.mapa-podpowiedz { margin: 8px 0 0; }
.mapa-podpowiedz.blad { color: var(--blad); font-weight: 600; }
.wyniki-dzialek { max-height: 240px; overflow-y: auto; margin-bottom: 10px; border: 1px solid var(--ramka); border-radius: 10px; }
.przycisk-wiersz { width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 10px 12px; }
.przycisk-wiersz:hover { background: var(--glowny-jasny); }
.wybrane-dzialki .wiersz { padding: 8px 2px; }
.dymek { display: grid; gap: 4px; font: 14px/1.4 system-ui, sans-serif; color: #1d2419; }
.dymek a { color: #2f6b2a; font-weight: 600; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.dymek small { color: #7a5600; }
.panel-warstw { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.25); color: #1d2419; font: 13px/1.4 system-ui, sans-serif; max-width: 280px; }
.panel-warstw-otworz { border: 0; background: none; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; color: inherit; }
.panel-warstw-tresc { display: grid; gap: 8px; padding: 0 12px 12px; }
.panel-warstw-tresc[hidden] { display: none !important; }
.panel-warstw label { display: grid; gap: 3px; font-weight: 600; }
.panel-warstw select { min-height: 34px; padding: 4px 6px; font-size: 13px; border-radius: 8px; border: 1px solid #ccc; background: #fff; color: #1d2419; width: 100%; }
.panel-warstw input[type=range] { width: 100%; accent-color: #2f6b2a; }
.panel-warstw-opis { color: #555; font-size: 12px; }
.panel-warstw img { max-width: 100%; background: #fff; }
.panel-warstw a { color: #2f6b2a; font-weight: 600; }
.panel-rysowania { padding: 10px 12px; margin-bottom: 10px; border-radius: var(--promien-maly); background: var(--ostrzezenie-tlo); }
.filtr.aktywny { cursor: default; }
@media (min-width: 860px) { .formularz-mapy { grid-template-columns: 3fr 2fr; } }

/* ---------- Magazyn, skróty ---------- */

.stan strong { font-size: 1.05rem; color: var(--tekst); }
.stan.ujemny strong { color: var(--blad); }
@media (min-width: 520px) { .rzad-3x { grid-template-columns: 1fr 1fr 1fr; } }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--glowny); }
.opcja-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.opcja-check input { margin-top: 3px; flex-shrink: 0; }

/* ---------- Import wniosku ---------- */

.upuszczanie {
  display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--ramka); border-radius: var(--promien); background: var(--powierzchnia-2);
}
.upuszczanie:hover { border-color: var(--glowny); }
.upuszczanie input { max-width: 100%; }
.tabela-importu td { vertical-align: middle; }
.tabela-importu select { min-height: 40px; padding: 6px 8px; font-size: .92rem; min-width: 150px; }

/* ---------- Strona powitalna i logowanie ---------- */

.wstep { max-width: 680px; padding: 28px 0 32px; }
.wstep h1 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); line-height: 1.2; margin-bottom: 14px; }
.wstep p { color: var(--tekst-slaby); font-size: 1.08rem; margin-bottom: 20px; }
.wstep-etykieta { font-size: .85rem !important; font-weight: 700; color: var(--glowny) !important; margin-bottom: 8px !important; }
.zawartosc { border-top: 1px solid var(--ramka-mocna); padding-top: 18px; }
.tabela-opisowa { margin: 0; }
.tabela-opisowa > div { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--ramka); }
.tabela-opisowa dt { font-weight: 700; }
.tabela-opisowa dd { margin: 0; color: var(--tekst-slaby); max-width: 62ch; }
@media (min-width: 760px) { .tabela-opisowa > div { grid-template-columns: 260px 1fr; } }

.logowanie { max-width: 420px; margin: 24px auto; }
.logowanie .formularz { margin-top: 12px; }

.stopka-info { color: var(--tekst-slaby); font-size: .88rem; margin-top: 20px; }

/* wybór rodzaju wpisu – lista, kolor rodzaju jak w kalendarzu */
.wybor-wpisu { list-style: none; margin: 14px 0 16px; padding: 0; border-top: 1px solid var(--ramka); }
.wybor-wpisu a {
  display: grid; gap: 2px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--ramka);
  border-left: 4px solid var(--typ, var(--ramka-mocna)); color: var(--tekst); text-decoration: none;
}
.wybor-wpisu a:hover { background: var(--powierzchnia); }
.wybor-wpisu strong { font-size: 1.1rem; }
.wybor-wpisu span { color: var(--tekst-slaby); font-size: .95rem; }
.wybor-wpisu .typ-oprysk { --typ: var(--typ-oprysk); }
.wybor-wpisu .typ-nawozenie { --typ: var(--typ-nawozenie); }
.wybor-wpisu .typ-agro { --typ: var(--typ-agro); }

/* ---------- Sezony i płodozmian ---------- */

.sezony { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.kropka { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; flex-shrink: 0; }
.kropka.duza { width: 14px; height: 14px; border-radius: 4px; margin: 0; }
.uprawy-kafla { margin: 6px 0 10px; font-weight: 500; }

.zakladki { display: flex; gap: 4px; border-bottom: 1px solid var(--ramka); margin-bottom: 14px; overflow-x: auto; }
.zakladka {
  padding: 10px 14px; text-decoration: none; color: var(--tekst-slaby); font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.zakladka.aktywna { color: var(--glowny); border-bottom-color: var(--glowny); }

.plodozmian-karta { padding: 0; overflow: hidden; }
.plodozmian-przewijanie { overflow-x: auto; }
.plodozmian { border-collapse: collapse; width: 100%; min-width: 520px; }
.plodozmian th, .plodozmian td { padding: 8px; border-bottom: 1px solid var(--ramka); text-align: left; vertical-align: top; }
.plodozmian thead th { background: var(--powierzchnia-2); font-size: .9rem; color: var(--tekst-slaby); }
.plodozmian tbody th { position: sticky; left: 0; background: var(--powierzchnia); min-width: 130px; font-weight: 600; }
.plodozmian tbody th a { color: inherit; text-decoration: none; display: block; }
.plodozmian tbody th small { color: var(--tekst-slaby); font-weight: 400; }
.komorka-uprawy {
  display: block; padding: 6px 8px; margin-bottom: 4px; border-radius: 8px; text-decoration: none; color: #1f1f1f;
  background: color-mix(in srgb, var(--kolor) 45%, white); border-left: 5px solid var(--kolor); font-size: .9rem; font-weight: 600;
}
.komorka-uprawy small { font-weight: 400; }
.komorka-pusta {
  display: block; text-align: center; padding: 6px; border: 1.5px dashed var(--ramka); border-radius: 8px;
  color: var(--tekst-slaby); text-decoration: none; font-weight: 700;
}
a.komorka-pusta:hover { border-color: var(--glowny); color: var(--glowny); }

.os-czasu { list-style: none; margin: 0; padding: 0; }
.os-czasu > li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ramka); }
.os-czasu > li:first-child { border-top: 0; }
.os-czasu .rok { font-weight: 700; font-size: 1.15rem; color: var(--tekst-slaby); padding-top: 10px; }
.os-czasu .rok small { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; }
.os-czasu .biezacy .rok { color: var(--glowny); }
.os-czasu .przyszly .rok { color: var(--ostrzezenie-tekst); }
.sezon-plan {
  display: block; padding: 10px 12px; margin: 6px 0 10px; border: 1.5px dashed var(--glowny); border-radius: 10px;
  color: var(--glowny); text-decoration: none; font-weight: 600;
}

/* ---------- Podpowiedzi z historii ---------- */

.podpowiedz-skad { margin-bottom: 4px; }
input.podpowiedziane, select.podpowiedziane { background: var(--glowny-jasny); border-color: var(--glowny); }
.czeste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.czeste .filtr { font-size: .88rem; padding: 5px 12px; }

.tabela-prosta { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela-prosta th, .tabela-prosta td { padding: 7px 6px; border-bottom: 1px solid var(--ramka); text-align: left; }
.tabela-prosta th { color: var(--tekst-slaby); font-weight: 600; font-size: .85rem; }
.tabela-prosta .liczba { text-align: right; white-space: nowrap; }

details.rozwin-karta > summary { cursor: pointer; list-style: none; padding: 2px 0; }
details.rozwin-karta > summary::-webkit-details-marker { display: none; }
details.rozwin-karta > summary::after { content: " ▾"; color: var(--glowny); }
details.rozwin-karta[open] > summary { margin-bottom: 10px; }
details.rozwin-karta[open] > summary::after { content: " ▴"; }

/* ---------- Kalendarz prac ---------- */

.przelacznik-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .przelacznik-rodzaju.przelacznik-4 { grid-template-columns: repeat(4, 1fr); } }
.wybor-pol { max-height: 320px; overflow-y: auto; }

.prognoza { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0; }
.dzien-prognozy {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--promien-maly);
  text-decoration: none; color: var(--tekst); border: 1.5px solid var(--ramka); text-align: center;
}
.dzien-prognozy.dobry { background: var(--sukces-tlo); border-color: transparent; }
.dzien-prognozy.zly { background: var(--powierzchnia-2); }
.dzien-prognozy .dzien-nazwa { font-weight: 700; }
.dzien-prognozy .ikona-pogody { font-size: 1.4rem; }
.dzien-prognozy .okno { font-size: .82rem; font-weight: 600; }
.dzien-prognozy .pod { font-size: .8rem; color: var(--tekst-slaby); }

.plany .plan { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ramka); }
.plany .plan:last-child { border-bottom: 0; }
.plan-glowna { flex: 1 1 240px; border-left: 4px solid var(--zboze); padding-left: 10px; }
.plan.typ-oprysk .plan-glowna { border-left-color: var(--typ-oprysk); }
.plan.typ-nawozenie .plan-glowna { border-left-color: var(--typ-nawozenie); }
.plan.typ-agro .plan-glowna { border-left-color: var(--typ-agro); }
.plan.zalegla .plan-glowna .tytul { color: var(--blad); }
.plan.zrobiona { opacity: .6; }
.plan-akcje { margin: 0; flex-wrap: wrap; }
.plan-akcje form { margin: 0; }

.kal-nawigacja { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; }
.kal-nawigacja h2 { margin: 0; min-width: 170px; text-align: center; }
.kal-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: .85rem; }
.probka { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.plan-probka { border: 2px dashed var(--typ-oprysk); }
.wpis-probka { background: var(--typ-oprysk); }
.termin-probka { background: var(--blad); }

.kalendarz { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 18px; }
.kal-naglowek { text-align: center; font-size: .8rem; font-weight: 700; color: var(--tekst-slaby); text-transform: uppercase; padding: 4px 0; }
.kal-dzien {
  min-height: 96px; background: var(--powierzchnia); border: 1px solid var(--ramka); border-radius: 10px;
  padding: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.kal-dzien.inny-miesiac { opacity: .45; }
.kal-dzien.dzis { border: 2px solid var(--glowny); }
.kal-data { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .9rem; }
.kal-data a { color: inherit; text-decoration: none; }
.kal-data .kal-plus { margin-left: 4px; color: var(--glowny); opacity: 0; }
.kal-dzien:hover .kal-plus { opacity: 1; }
.kal-dzien-tyg { display: none; }
.kal-wpis {
  display: block; font-size: .76rem; line-height: 1.25; padding: 3px 5px; border-radius: 6px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tekst);
}
.kal-wpis.plan { border: 1.5px dashed var(--typ-oprysk); background: transparent; }
.kal-wpis.plan.typ-nawozenie { border-color: var(--typ-nawozenie); }
.kal-wpis.plan.typ-agro { border-color: var(--typ-agro); }
.kal-wpis.plan.zalegla { border-color: var(--blad); color: var(--blad); }
.kal-wpis.wpis { background: #dbe9f7; color: #1f4f7a; }
.kal-wpis.wpis.typ-nawozenie { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie-tekst); }
.kal-wpis.wpis.typ-agro { background: var(--powierzchnia-2); color: var(--tekst-slaby); }
.kal-wpis.termin { background: var(--blad-tlo); color: var(--blad); white-space: normal; }
@media (prefers-color-scheme: dark) { .kal-wpis.wpis { background: #1c2c3b; color: #a8cbea; } }

/* telefon: kalendarz jako lista dni z wpisami */
@media (max-width: 720px) {
  .kalendarz { grid-template-columns: 1fr; gap: 6px; }
  .kal-naglowek, .kal-dzien.inny-miesiac, .kal-dzien.pusty-dzien:not(.dzis) { display: none; }
  .kal-dzien { min-height: 0; padding: 8px 10px; }
  .kal-dzien-tyg { display: inline; text-transform: capitalize; color: var(--tekst-slaby); font-weight: 600; }
  .kal-data .kal-plus { opacity: 1; }
  .kal-wpis { font-size: .9rem; white-space: normal; padding: 6px 8px; }
}

/* ---------- Stan roślin z satelity ---------- */

.satelita-wynik { display: flex; gap: 14px; align-items: center; margin: 6px 0 10px; }
.ndvi-liczba { font-size: 2rem; font-weight: 700; color: var(--glowny); min-width: 70px; }
.ndvi-skala {
  display: flex; justify-content: space-between; font-size: .75rem; font-weight: 600; color: #1f1f1f;
  padding: 3px 8px; border-radius: 6px; margin-bottom: 10px;
  background: linear-gradient(90deg, #a6611a, #dfc27d, #f6e878, #a6d96a, #66bd63, #1a9850, #006837);
}
.ndvi-skala span:last-child { color: #fff; }
.ndvi-skala-mala { display: inline-flex; gap: 30px; margin: 0 8px 0 0; vertical-align: middle; }
.wykres-ndvi { width: 100%; height: 90px; color: var(--glowny); background: var(--powierzchnia-2); border-radius: 10px; }
.wykres-ndvi circle { fill: var(--glowny); }
.wykres-os { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 8px; }
.przelacznik-ndvi { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 10px; }
.przelacznik-ndvi .opcja-mala { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1.5px solid var(--ramka); border-radius: var(--promien-maly); cursor: pointer; font-weight: 600; }
.przelacznik-ndvi .opcja-mala:has(input:checked) { border-color: var(--glowny); background: var(--glowny-jasny); }

/* ---------- Pulpit rolnika ---------- */

.karta-uwaga { border-left: 4px solid var(--ostrzezenie-tekst); }

.pasek-ndvi { height: 8px; border-radius: 4px; background: var(--powierzchnia-2); margin: 5px 0 3px; overflow: hidden; max-width: 260px; }
.pasek-ndvi i { display: block; height: 100%; background: linear-gradient(90deg, #a6611a, #f6e878 35%, #66bd63 65%, #006837); background-size: 260px 100%; }
.trend { font-size: 1.1rem; color: var(--tekst-slaby); }
.trend.gora { color: var(--glowny); }
.trend.dol { color: var(--blad); }
a.statystyka { text-decoration: none; color: inherit; display: block; }

/* ---------- Segregator dokumentów ---------- */

.dokumenty { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dokument-kafel {
  display: flex; gap: 12px; padding: 12px; border-radius: var(--promien); background: var(--powierzchnia);
  border: 1px solid var(--ramka); box-shadow: var(--cien); min-width: 0;
}
.dokument-kafel.wygasl { border-left: 4px solid var(--blad); }
.dokument-kafel.konczy-sie { border-left: 4px solid var(--ostrzezenie-tekst); }
.dokument-podglad {
  flex: 0 0 84px; height: 104px; border-radius: 10px; overflow: hidden; background: var(--powierzchnia-2);
  display: grid; place-items: center; text-decoration: none;
}
.dokument-podglad img { width: 100%; height: 100%; object-fit: cover; }
.ikona-pliku { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-slaby); }
.ikona-pliku small { font-size: .75rem; font-weight: 700; }
.dokument-opis { min-width: 0; flex: 1; }
.dokument-opis .tytul { font-weight: 700; overflow-wrap: anywhere; }
.dokument-opis .pod { color: var(--tekst-slaby); font-size: .88rem; }
.zalaczniki { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.zalaczniki .znaczek { text-decoration: none; }

.wgraj {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; cursor: pointer;
  border: 1.5px dashed var(--glowny); border-radius: var(--promien); background: var(--glowny-jasny); text-align: center;
}
.wgraj small { color: var(--tekst-slaby); }
.ukryty-plik { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- Pulpit rolnika – wersja 2 ---------- */

/* ---------- Pulpit rolnika ---------- */

.powitanie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 18px; }
.powitanie h1 { margin: 0; }
.data-dzis { margin: 0 0 2px; color: var(--tekst-slaby); font-weight: 600; }

/* pasek „Oprysk dziś” – stan opisany słowami, kolor tylko na krawędzi i w znacznikach */
.oprysk {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; align-items: center;
  padding: 14px 16px; margin-bottom: 26px; text-decoration: none; color: var(--tekst);
  background: var(--powierzchnia); border: 1px solid var(--ramka); border-left: 4px solid var(--ostrzezenie-tekst);
  border-radius: var(--promien-maly);
}
.oprysk.dobra { border-left-color: var(--glowny); }
.oprysk:hover { border-color: var(--ramka-mocna); }
.oprysk.dobra:hover { border-left-color: var(--glowny); }
.oprysk-dzis { display: grid; gap: 1px; min-width: 0; }
.oprysk .etykieta { font-size: .8rem; font-weight: 700; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: .05em; }
.oprysk strong { font-size: 1.2rem; line-height: 1.25; }
.oprysk .pod { color: var(--tekst-slaby); font-size: .92rem; }
.oprysk-dni { display: flex; gap: 18px; margin: 0; }
.oprysk-dni div { display: grid; gap: 2px; }
.oprysk-dni dt { font-size: .8rem; color: var(--tekst-slaby); font-weight: 600; }
.oprysk-dni dd { margin: 0; }
.oprysk-wiecej { grid-column: 1 / -1; font-size: .9rem; font-weight: 600; color: var(--glowny); }
@media (min-width: 720px) {
  .oprysk { grid-template-columns: 1fr auto auto; }
  .oprysk-wiecej { grid-column: auto; padding-left: 20px; border-left: 1px solid var(--ramka); align-self: stretch; display: flex; align-items: center; }
}

.stan-znak { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: .85rem; font-weight: 700; }
.stan-znak.ok { background: var(--sukces-tlo); color: var(--sukces-tekst); }
.stan-znak.nie { background: var(--blad-tlo); color: var(--blad); }
.kropka-stanu { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--blad); }
.kropka-stanu.ok { background: var(--glowny); }

/* rodzaje wpisów – zwykłe przyciski; kolor rodzaju (jak w kalendarzu) tylko jako pasek u góry */
h2.sekcja { margin: 0 0 10px; font-size: 1.15rem; }
.wpisy { margin-bottom: 26px; }
.wpisy-przyciski { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 720px) { .wpisy-przyciski { grid-template-columns: repeat(3, 1fr) minmax(0, .8fr); } }
.wpis-btn {
  display: flex; flex-direction: column; gap: 1px; min-height: 64px; padding: 12px 14px;
  background: var(--powierzchnia); border: 1px solid var(--ramka-mocna); border-top: 3px solid var(--typ, var(--ramka-mocna));
  border-radius: var(--promien-maly); color: var(--tekst); text-decoration: none; font-weight: 700; font-size: 1.08rem;
}
.wpis-btn small { font-weight: 500; font-size: .85rem; color: var(--tekst-slaby); }
.wpis-btn:hover { background: var(--powierzchnia-2); }
.wpis-btn.typ-oprysk { --typ: var(--typ-oprysk); }
.wpis-btn.typ-nawozenie { --typ: var(--typ-nawozenie); }
.wpis-btn.typ-agro { --typ: var(--typ-agro); }
.wpis-btn.wpis-plan { border-style: dashed; border-top-style: dashed; color: var(--glowny); background: transparent; }

.karta-naglowek { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.karta-naglowek h2 { margin: 0; }
.link-strzalka { font-weight: 700; text-decoration: none; white-space: nowrap; }
.link-strzalka:hover { text-decoration: underline; }

.moje-pola .wiersz { align-items: center; }
.znacznik-uprawy { width: 8px; align-self: stretch; border-radius: 4px; flex-shrink: 0; }
.stan-satelita { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--tekst-slaby); margin-top: 4px; }
.stan-satelita .pasek-ndvi { width: 90px; margin: 0; flex-shrink: 0; }
.wiecej-pol > summary { cursor: pointer; font-weight: 700; color: var(--glowny); padding: 10px 0 4px; list-style: none; }
.wiecej-pol > summary::-webkit-details-marker { display: none; }
.wiecej-pol > summary::after { content: " ▾"; }
.wiecej-pol[open] > summary::after { content: " ▴"; }

.pulpit-dol {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  border-top: 1px solid var(--ramka); padding-top: 12px; margin-top: 8px;
}
.liczby { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--tekst-slaby); margin: 0; font-size: .95rem; }
.liczby b { color: var(--tekst); font-size: 1.05rem; }
.skroty { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.skroty a { font-weight: 600; text-decoration: none; padding: 6px 0; }
.skroty a:hover { text-decoration: underline; }

/* ---------- Lista pól – wersja 2 ---------- */

.kafle-pol { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.kafel-pola { border-left: 5px solid var(--kolor, var(--ramka)); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.kafel-pola .uprawy-kafla { margin: 0; font-weight: 700; font-size: 1.12rem; line-height: 1.25; }
.kafel-pola-dol { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kafel-pola .nazwa-pola { color: var(--tekst-slaby); font-weight: 600; font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kafel-pola .ha { font-size: 1.05rem; font-weight: 700; color: var(--glowny); white-space: nowrap; }
.kafel-pola .znaczek { align-self: flex-start; }

/* ---------- Wpis krok po kroku ---------- */

.krok-ukryty { display: none !important; }
.kroki-postep {
  position: sticky; top: 60px; z-index: 10; background: var(--tlo); padding: 8px 0 10px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px;
}
.kroki-info { display: flex; flex-direction: column; }
.kroki-nr { font-size: .85rem; font-weight: 700; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: .04em; }
.kroki-tytul { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.kroki-kropki { grid-column: 1 / -1; display: flex; gap: 6px; }
.kropka-kroku { flex: 1; height: 8px; border-radius: 4px; border: 0; padding: 0; background: var(--ramka); cursor: pointer; }
.kropka-kroku.zrobiona { background: var(--glowny); opacity: .55; }
.kropka-kroku.aktywna { background: var(--glowny); }
.kroki-calosc { grid-row: 1; grid-column: 2; font-size: .85rem; }
.tryb-krokow > fieldset.karta > legend { display: none; }
.kroki-nawigacja { display: flex; gap: 10px; margin-top: 18px; }
.kroki-nawigacja .btn { flex: 1; min-height: 54px; font-size: 1.05rem; }
.kroki-nawigacja .kroki-wstecz { flex: 0 0 auto; }
.tryb-krokow .dolny-pasek .btn { min-height: 54px; font-size: 1.05rem; }
.tryb-krokow input:not([type=checkbox]):not([type=radio]), .tryb-krokow select { min-height: 52px; font-size: 1.05rem; }

/* ---------- Kafle z zaznaczaniem (plan, kopiowanie upraw) ---------- */

label.kafel-wyboru { padding: 12px 14px; gap: 12px; cursor: pointer; align-items: flex-start; box-shadow: none; }
label.kafel-wyboru > input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--glowny); flex-shrink: 0; }
label.kafel-wyboru:has(input:checked) { border-color: var(--glowny); background: var(--glowny-jasny); }
label.kafel-wyboru:has(input:disabled) { opacity: .6; cursor: default; }
.kafel-tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kafel-tresc .tytul { font-weight: 700; }
.kafel-tresc .tytul small { font-weight: 600; color: var(--tekst-slaby); }
.kafel-tresc .teraz { font-size: .92rem; }
.kafel-tresc .wczesniej { font-size: .85rem; color: var(--tekst-slaby); }
.kafel-wyboru.mignij { animation: mignij 1.2s ease; }
@keyframes mignij { 0%, 60% { box-shadow: 0 0 0 4px #ffd23f; } 100% { box-shadow: none; } }

/* ---------- Kopiowanie upraw: lista + mapa ---------- */

.kopiowanie { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .kopiowanie { grid-template-columns: 1fr 1fr; align-items: start; }
  .kopiowanie-mapa { position: sticky; top: 76px; order: 2; }
}
.mapa-kopiowania { height: 360px; }
@media (min-width: 900px) { .mapa-kopiowania { height: calc(100vh - 160px); max-height: 640px; } }
.nr-mapy {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--kolor); color: #1f1f1f; font-weight: 700; font-size: .9rem; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ramka); cursor: zoom-in;
}
.znacznik-nr {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); padding: 0;
  background: rgba(30, 30, 30, .55); color: #fff; font: 700 .9rem "Nunito", sans-serif; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.znacznik-nr.zaznaczona { background: var(--kolor); color: #1f1f1f; border-color: #fff; }
.znacznik-nr.podswietlona { outline: 4px solid #ffd23f; transform: scale(1.2); }
.legenda-kopiowania { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.probka-kop { display: inline-block; width: 16px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px;
  background: rgba(120, 150, 90, .25); border: 1.5px solid #bbb; }
.probka-kop.zaznaczona { background: #8bbf5c; border: 2px solid #fff; box-shadow: 0 0 0 1px #888; }
.probka-kop.podswietlona { background: transparent; border: 3px solid #ffd23f; }

.plodozmian tbody th small { display: block; }

/* ---------- Plan sezonu na mapie ---------- */

.plan-uklad { display: grid; gap: 16px; }
@media (min-width: 960px) {
  .plan-uklad { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .plan-mapa { position: sticky; top: 76px; }
}
.mapa-planu { height: 420px; }
@media (min-width: 960px) { .mapa-planu { height: calc(100vh - 150px); max-height: 760px; } }
.plan-pod-mapa { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; }
.plan-pod-mapa .opcja-mala { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1.5px solid var(--ramka); border-radius: 10px; }
.plan-panel h2 { display: flex; align-items: center; gap: 8px; }
.plan-panel h2 .nr {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--glowny); color: var(--na-glownym); font-size: .9rem;
}
.plan-wybrane { margin: 0 0 8px; }
.historia-dzialki { padding: 8px 0; border-bottom: 1px solid var(--ramka); }
.historia-dzialki:last-child { border-bottom: 0; }
.historia-dzialki .pod { font-size: .9rem; color: var(--tekst-slaby); }
.lista-podpowiedzi { list-style: none; padding: 0; margin: 10px 0 6px; display: grid; gap: 6px; }
.lista-podpowiedzi li { padding: 8px 10px; border-radius: 10px; font-size: .92rem; }
.lista-podpowiedzi .uwaga { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie-tekst); }
.lista-podpowiedzi .dobrze { background: var(--sukces-tlo); color: var(--sukces-tekst); }
.plan-podsumowanie { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.link-dzialka { background: none; border: 0; padding: 0; font: inherit; color: var(--glowny); text-decoration: underline; cursor: pointer; font-weight: 700; }
.plan-akcje-gora { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }

.plodozmian .nr-dzialki { display: block; font-weight: 700; }
.plodozmian .opis-dzialki { display: block; font-style: italic; }
.komorka-uprawy .ha-komorki { display: block; font-weight: 600; opacity: .8; }

/* ---------- Działki, dzierżawy, „Twoja ziemia” ---------- */

.wladanie-wlasnosc { background: var(--sukces-tlo); color: var(--sukces-tekst); }
.wladanie-dzierzawa { background: #fbe8c8; color: #7a4a00; }
.wladanie-uzyczenie { background: #dbe9f7; color: #1f4f7a; }
.wladanie-wspolwlasnosc { background: #eadcf3; color: #5a2d7a; }
.lista-dzialek li { border-bottom: 1px solid var(--ramka); }
.lista-dzialek li:last-child { border-bottom: 0; }
.form-dzialki { padding: 4px 0 12px; }

.ziemia-gora { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; margin-bottom: 16px; }
.ziemia-liczba { font-size: .95rem; color: var(--tekst-slaby); }
.ziemia-liczba b { display: block; font-size: 1.7rem; color: var(--tekst); line-height: 1.1; }
.ziemia-liczba small { display: block; font-size: .8rem; }
.pasek-struktury { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: var(--powierzchnia-2); margin-bottom: 8px; }
.pasek-struktury span { display: block; height: 100%; min-width: 3px; }
.legenda-struktury { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; margin-bottom: 14px; }
.legenda-struktury i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.mini-pasek { display: inline-block; width: 80px; height: 8px; border-radius: 4px; background: var(--powierzchnia-2); overflow: hidden; vertical-align: middle; }
.mini-pasek i { display: block; height: 100%; background: var(--glowny); }
@media (max-width: 520px) { .ziemia-gora { grid-template-columns: 1fr 1fr; } .mini-pasek { width: 48px; } }
.ziemia-gora { grid-template-columns: repeat(4, 1fr); }
.ziemia-liczba { font-weight: 600; color: var(--tekst); border-top: 1px solid var(--ramka-mocna); padding-top: 8px; }
.ziemia-liczba small { font-weight: 500; color: var(--tekst-slaby); }
@media (max-width: 720px) { .ziemia-gora { grid-template-columns: 1fr 1fr; } }

/* ---------- Płodozmian: filtry i widok według upraw ---------- */

.filtry-plodozmianu { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 12px; }
.filtry-plodozmianu select { min-height: 42px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--ramka); background: var(--powierzchnia); font: inherit; }
.przelacznik-ukladu { display: inline-flex; border: 1.5px solid var(--ramka); border-radius: var(--promien-maly); overflow: hidden; }
.przelacznik-ukladu label { padding: 8px 14px; cursor: pointer; font-weight: 700; color: var(--tekst-slaby); background: var(--powierzchnia); }
.przelacznik-ukladu label.aktywny, .przelacznik-ukladu label:has(input:checked) { background: var(--glowny); color: var(--na-glownym); }
.przelacznik-ukladu input { position: absolute; opacity: 0; pointer-events: none; }
.komorka-uprawy.przygaszona { opacity: .35; }
.komorka-uprawy.wyrozniona { box-shadow: 0 0 0 2px var(--kolor); }
.nazwa-uprawy-wiersza { display: block; padding-left: 10px; border-left: 6px solid var(--kolor); font-weight: 700; }
.suma-komorki { font-weight: 700; border-left: 5px solid var(--kolor); padding-left: 8px; margin-bottom: 4px; }
.dzialki-komorki { list-style: none; margin: 0; padding: 0; font-size: .85rem; display: grid; gap: 2px; }
.dzialki-komorki small { color: var(--tekst-slaby); }

.pobierz-satelite { display: inline-flex; margin: 0; }
.satelita-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; }

.suwak-zdjec { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.suwak-zdjec input[type=range] { flex: 1; accent-color: var(--glowny); min-height: 32px; }
.suwak-zdjec output { min-width: 150px; font-weight: 700; font-size: .92rem; }
.wykres-ndvi circle[data-i] { cursor: pointer; }
.wykres-ndvi circle.aktywny { fill: #ffd23f; stroke: #1f1f1f; stroke-width: 1.5; r: 6; }
@media (max-width: 520px) { .suwak-zdjec { flex-wrap: wrap; } .suwak-zdjec output { min-width: 0; width: 100%; } }

.filtry-dokumentow { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 6px 0 14px; }
.filtry-dokumentow select, .filtry-dokumentow input[type=search] { min-height: 42px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--ramka); background: var(--powierzchnia); font: inherit; }
.grupa-dokumentow { margin-bottom: 20px; }
.grupa-dokumentow > h2 { margin: 0 0 10px; }

.godziny-pasek { display: flex; gap: 1px; width: 100%; margin-top: 4px; }
.godziny-pasek i { flex: 1; height: 7px; border-radius: 2px; background: #d9534f; opacity: .75; }
.godziny-pasek i.ok { background: #3c9a3c; opacity: 1; }
.godziny-pasek i.minelo { background: var(--ramka); opacity: 1; }
.probka-godz { display: inline-block; width: 14px; height: 8px; border-radius: 2px; background: #d9534f; vertical-align: middle; }
.probka-godz.ok { background: #3c9a3c; }
.dzien-prognozy .okno { line-height: 1.25; }

.wladanie-wydzierzawiona { background: #e6e6e6; color: #555; }
@media (prefers-color-scheme: dark) { .wladanie-wydzierzawiona { background: #333; color: #bbb; } }

/* ---------- Wybór kilku pól w ewidencji ---------- */

.wybor-upraw .kafle-wyboru { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 6px; }
.grupa-upraw { margin-top: 10px; }
.grupa-upraw-naglowek { font-weight: 700; font-size: .9rem; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: .03em; }
.grupa-upraw[data-starszy] .kafel-wyboru { opacity: .8; }
.szukaj-upraw { margin: 4px 0; }
input[readonly] { background: var(--powierzchnia-2); }

.stopka { max-width: 1080px; margin: 0 auto; padding: 16px 16px 110px; display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: .8rem; color: var(--tekst-slaby); border-top: 1px solid var(--ramka); }
.stopka a { color: var(--tekst-slaby); font-weight: 700; }
@media (min-width: 900px) { .stopka { padding-bottom: 24px; } }

/* ---------- Drobne ---------- */

.zebrano { color: var(--glowny); font-weight: 700; }
.karta > h2:first-child, .karta-naglowek h2 { font-size: 1.1rem; }
.kafel-wyboru, label.kafel-wyboru { border-width: 1px; }
.dzien-prognozy .ikona-pogody { font-size: 1rem; }
.kal-data .kropka-stanu { margin-left: 4px; }.przypomnienia li { font-size: .95rem; }
.stan-satelita .trend { font-size: .82rem; }

/* ---------- Agronomia: plan azotu, gleba, finanse ---------- */

.limit-n {
  display: grid; gap: 8px; padding: 12px 16px; margin: 0 0 16px; background: var(--powierzchnia);
  border: 1px solid var(--ramka); border-left: 4px solid var(--glowny); border-radius: var(--promien-maly);
}
.limit-n.przekroczony { border-left-color: var(--blad); }
.limit-n > div { display: grid; gap: 1px; }
.limit-n .etykieta { font-size: .8rem; font-weight: 700; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: .05em; }
.limit-n strong { font-size: 1.2rem; }
.limit-n.przekroczony strong { color: var(--blad); }
.limit-n .pod { color: var(--tekst-slaby); font-size: .9rem; }
.limit-n p { margin: 0; }
.mini-pasek.duzy { width: 100%; max-width: 420px; height: 8px; }
.limit-n.przekroczony .mini-pasek i { background: var(--blad); }

.tabela-azotu td, .tabela-finansow td, .tabela-gleby td { vertical-align: top; }
.tabela-azotu small, .tabela-finansow small { display: block; }
.tabela-azotu .nazwa-uprawy-wiersza, .tabela-finansow .nazwa-uprawy-wiersza { text-decoration: none; color: var(--tekst); }
.tabela-finansow tr.pozycja td { padding-top: 0; font-size: .88rem; border-bottom-style: dashed; padding-left: 22px; }
.ujemny { color: var(--blad); }

.wyliczenie { margin: 0; }
.wyliczenie > div { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; padding: 8px 0; border-bottom: 1px solid var(--ramka); }
.wyliczenie dt { font-weight: 600; }
.wyliczenie dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.wyliczenie small { grid-column: 1 / -1; color: var(--tekst-slaby); font-size: .85rem; }
.wyliczenie .suma { border-bottom: 2px solid var(--ramka-mocna); }
.wyliczenie .suma dt, .wyliczenie .suma dd { font-size: 1.1rem; }

.klasa { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.klasa.poziom-0 { background: var(--blad-tlo); color: var(--blad); }
.klasa.poziom-1 { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie-tekst); }
.klasa.poziom-2 { background: var(--sukces-tlo); color: var(--sukces-tekst); }
.klasa.poziom-3, .klasa.poziom-4 { background: var(--powierzchnia-2); color: var(--tekst-slaby); }
@media (min-width: 640px) { .rzad-4 { grid-template-columns: repeat(4, 1fr); } }

.liczby-sezonu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; margin: 0 0 18px; }
@media (min-width: 720px) { .liczby-sezonu { grid-template-columns: repeat(4, 1fr); } }
.liczby-sezonu > div { border-top: 1px solid var(--ramka-mocna); padding-top: 8px; }
.liczby-sezonu dt { color: var(--tekst-slaby); font-size: .9rem; }
.liczby-sezonu dd { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.liczby-sezonu .ujemny dd { color: var(--blad); }
.karta-zadania { border-left: 4px solid var(--glowny); }

/* ---------- Maszyny ---------- */

.lista-maszyn { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .lista-maszyn { grid-template-columns: repeat(2, 1fr); } }
.maszyna-karta { margin: 0; display: grid; gap: 8px; align-content: start; }
.maszyna-karta.w-naprawie { border-left: 4px solid var(--blad); }
.maszyna-tytul { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.maszyna-tytul .tytul { font-weight: 700; font-size: 1.1rem; }
.maszyna-tytul:hover .tytul { color: var(--glowny); }
.maszyna-tytul small { color: var(--tekst-slaby); }
.maszyna-stan { display: flex; flex-wrap: wrap; gap: 6px; }
.maszyna-karta .pod { font-size: .9rem; color: var(--tekst-slaby); }
.wybor-maszyn { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }@media (min-width: 640px) { .przelacznik-rodzaju.przelacznik-2 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Ekoschematy ---------- */
.lista-ekoschematow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-ekoschematow > li { margin: 0; }
.ekoschemat { border-left: 4px solid var(--ramka); padding: 6px 0 6px 12px; margin: 8px 0; }
.ekoschemat.stan-ok { border-left-color: var(--glowny); }
.ekoschemat.stan-uwaga { border-left-color: var(--ostrzezenie-tekst); }
.ekoschemat.stan-naruszenie { border-left-color: var(--blad); }
.ekoschemat .tytul { font-weight: 600; }
.ekoschemat ul { margin: 4px 0 0; padding-left: 18px; color: var(--tekst-slaby); font-size: .95rem; }.z-etykiety { padding: 10px 12px; margin: 4px 0 10px; border-left: 4px solid var(--glowny); background: var(--powierzchnia-2); border-radius: var(--promien-maly); font-size: .92rem; }
.z-etykiety .tytul { font-weight: 600; margin-bottom: 2px; }
.z-etykiety .pod { color: var(--tekst-slaby); }
.kalkulator-cieczy { padding: 10px 12px; margin: 4px 0 12px; border: 1.5px solid var(--ramka-mocna); border-radius: var(--promien-maly); font-size: .95rem; }
.kalkulator-cieczy .tytul { font-weight: 700; margin-bottom: 4px; }
.kalkulator-cieczy .wiersz-kalk { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.kalkulator-cieczy .wiersz-kalk b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kalkulator-cieczy .pod { color: var(--tekst-slaby); font-size: .88rem; margin-top: 4px; }
.ostrzezenia-pogody { display: grid; gap: 6px; margin: 0 0 16px; }
.ostrzezenia-pogody .komunikat { margin: 0; }
.ostrzezenia-pogody .pomoc { margin: 2px 0 0; }

/* ---------- Szkody ---------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.galeria a, .galeria label { display: grid; gap: 2px; color: inherit; text-decoration: none; font-size: .85rem; position: relative; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--promien-maly); border: 1px solid var(--ramka); }
.wybor-zdjec input { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; accent-color: var(--glowny); }
.wybor-zdjec label:has(input:checked) img { outline: 3px solid var(--glowny); }.tabela-cen td { padding: 6px 4px; vertical-align: top; }
.tabela-cen .dodatni { color: var(--glowny); }
.terminy-urzedowe .tytul { font-weight: 600; font-size: .95rem; }
.terminy-urzedowe .tytul a { color: inherit; }

/* ---------- Kalkulatory ---------- */
.siatka-kalk { display: grid; gap: 12px; }
@media (min-width: 860px) { .siatka-kalk { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.kalk { margin: 0; }
.kalk label { display: grid; gap: 4px; font-weight: 500; font-size: .92rem; }
.kalk .rzad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kalk input, .kalk select { min-height: 44px; }
/* ---------- Płodozmian: podsumowanie sezonów i okno dodawania uprawy ---------- */
.podsumowanie-sezonow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
.sezon-podsumowanie { margin: 0; padding: 10px 12px; display: grid; gap: 4px; align-content: start; }
.sezon-podsumowanie.biezacy { border-color: var(--glowny); }
.sezon-tytul { font-weight: 700; color: var(--tekst-slaby); font-size: .85rem; }
.sezon-ha { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pasek-upraw { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--ramka); }
.pasek-upraw i { display: block; height: 100%; }
.uprawy-sezonu { list-style: none; margin: 2px 0 0; padding: 0; font-size: .85rem; display: grid; gap: 1px; }
.uprawy-sezonu .kropka { margin-right: 4px; }
.plodozmian tfoot th, .plodozmian tfoot td { font-weight: 700; border-top: 2px solid var(--ramka-mocna); }
dialog.okno { border: 1px solid var(--ramka-mocna); border-radius: var(--promien); padding: 18px; width: min(460px, calc(100vw - 32px)); background: var(--powierzchnia); color: var(--tekst); }
dialog.okno::backdrop { background: rgba(0, 0, 0, .45); }
dialog.okno label { display: grid; gap: 4px; font-weight: 500; margin-top: 8px; }
dialog.okno .rzad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.wybor-dzialki { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--glowny); }
.pasek-kopiowania { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 14px; margin: 10px 0; background: var(--powierzchnia); border: 2px solid var(--glowny); border-radius: var(--promien); }
dialog.okno-szerokie { width: min(760px, calc(100vw - 32px)); }
.lista-kopiowania { display: grid; gap: 8px; margin: 12px 0; max-height: 55vh; overflow-y: auto; }
.wiersz-kopiowania { display: grid; grid-template-columns: 1.3fr 1.6fr .8fr .7fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ramka); }
.wiersz-kopiowania select, .wiersz-kopiowania input { min-height: 42px; width: 100%; }
@media (max-width: 640px) { .wiersz-kopiowania { grid-template-columns: 1fr 1fr; } .wiersz-kopiowania .opis { grid-column: 1 / -1; } }dialog.okno input, dialog.okno select { min-height: 44px; font: inherit; padding: 8px 10px; border: 1px solid var(--ramka-mocna); border-radius: var(--promien-maly); background: var(--powierzchnia); color: var(--tekst); width: 100%; box-sizing: border-box; }
.przyciski-pionowe { display: grid; gap: 8px; }
.przyciski-pionowe .btn { justify-content: center; text-align: center; }
.wiersz-zamkniecia { display: grid; grid-template-columns: auto 1.6fr 1fr .7fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--ramka); font-weight: 400 !important; margin: 0 !important; }
.wiersz-zamkniecia .wybor { width: 20px; height: 20px; min-height: 0; accent-color: var(--glowny); }
@media (max-width: 640px) { .wiersz-zamkniecia { grid-template-columns: auto 1fr; } .wiersz-zamkniecia .data, .wiersz-zamkniecia .plon { grid-column: 2; } }
.sezon-podsumowanie .zamknij-sezon { justify-self: start; margin-top: 4px; }dialog.okno input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--glowny); }
dialog.okno .opcja-check { display: flex; align-items: center; gap: 8px; }

/* strona pola: przyciski uprawy pod opisem, nie obok */
.os-czasu .wiersz { align-items: flex-start; }
.os-czasu .glowna { min-width: 0; flex: 1 1 auto; }
.akcje-uprawy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.akcje-uprawy .btn { white-space: nowrap; }
/* strona pola: uprawy po lewej, mapa i satelita po prawej; na telefonie mapa na górze */
.pole-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pole-lewa, .pole-prawa { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pole-lewa > .karta, .pole-prawa > .karta, .pole-prawa > .komunikat { margin: 0; }
@media (max-width: 900px) {
  .pole-uklad { grid-template-columns: minmax(0, 1fr); }
  .pole-prawa { order: -1; }
}
/* skróty wyciągnięte z menu „Więcej” (gwiazdka) */
.menu-poz { display: flex; align-items: center; gap: 2px; }
.menu-poz > a { flex: 1; min-width: 0; }
.menu-panel .menu-poz form { margin: 0; border: 0; padding: 0; }
.menu-panel .przypnij {
  width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 1.15rem;
  color: var(--tekst-slaby); opacity: .55;
}
.menu-panel .przypnij:hover, .menu-panel .przypnij:focus-visible { opacity: 1; }
.menu-panel .przypnij.wlaczony { color: var(--glowny); opacity: 1; }
.skroty-tel {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 8px; scrollbar-width: none;
}
.skroty-tel::-webkit-scrollbar { display: none; }
.skroty-tel a {
  flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--ramka); border-radius: 999px;
  color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .9rem; background: var(--powierzchnia);
}
.skroty-tel a.aktywny { border-color: var(--glowny); color: var(--glowny); }
.nav-gora { min-width: 0; overflow: hidden; }
/* kalendarz: dziś – oprócz planu szybki wpis do ewidencji */
.kal-data .kal-wpisz { font-size: .75rem; font-weight: 600; color: var(--glowny); margin-left: auto; padding: 0 4px; white-space: nowrap; }
.kal-data .kal-wpisz + span { margin-left: 2px; }
/* formularz uprawy: mapa po lewej, dane po prawej (jak edycja pola) */
.kolumna-formularza { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kolumna-formularza > .karta, .formularz-mapy > .karta { margin: 0; }
.panel-edycji { margin-top: 10px; }
.wybrane-dzialki .wiersz { flex-wrap: wrap; }

/* formularz uprawy: mapa i dane po równo, pola w rzędach wyrównane do góry */
@media (min-width: 860px) { .formularz-uprawy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kolumna-formularza .rzad { align-items: start; }
.panel-przycinania { margin-top: 10px; }
/* ---------- Wyrównanie pól w rzędach ----------
   Pole nie rozciąga się na wysokość sąsiada; etykiety, pola i podpowiedzi w rzędzie leżą na tych samych liniach
   (subgrid), nawet gdy jedna etykieta zawija się do dwóch wierszy. */
.pole-form { align-content: start; }
.rzad { align-items: start; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 520px) {
    .rzad { grid-auto-rows: auto; row-gap: 0; }
    .rzad > .pole-form { grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; }
    .rzad > .pole-form > label { align-self: end; }
  }
}
select { height: 50px; }
select[multiple] { height: auto; }

/* okno „niezapisane zmiany” */
.okno-zmian { max-width: 420px; }
.okno-zmian .przyciski { flex-wrap: wrap; }
/* kalendarz: duży plus pod wpisami dnia (zamiast małego plusa w rogu) */
.kal-dodaj { margin-top: auto; display: flex; gap: 3px; padding-top: 3px; }
.kal-dodaj a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px;
  border: 1.5px dashed var(--ramka-mocna, var(--ramka)); border-radius: 6px; color: var(--glowny);
  font-size: 1.25rem; font-weight: 700; line-height: 1; text-decoration: none; opacity: .45;
}
.kal-dodaj a small { font-size: .72rem; font-weight: 600; }
.kal-dzien:hover .kal-dodaj a, .kal-dodaj a:focus-visible { opacity: 1; }
.kal-dodaj a:hover { background: var(--glowny-jasny); border-color: var(--glowny); }
a.kal-wpis.termin:hover { text-decoration: underline; }
@media (max-width: 720px) { .kal-dodaj a { opacity: 1; min-height: 36px; } }
/* Pola → W sezonie: lista pól po lewej, mapa po prawej */
.sezon-uklad { display: grid; gap: 16px; align-items: start; }
.sezon-uklad > .karta { margin: 0; }
.lista-sezonu { padding: 6px 0; overflow-x: auto; }
.tabela-pol-sezonu { width: 100%; }
.tabela-pol-sezonu th, .tabela-pol-sezonu td { padding: 9px 12px; vertical-align: top; }
.tabela-pol-sezonu tbody tr { cursor: pointer; }
.tabela-pol-sezonu tbody tr:hover, .tabela-pol-sezonu tbody tr.wyrozniony { background: var(--glowny-jasny); }
.tabela-pol-sezonu tr.bez-uprawy { color: var(--tekst-slaby); }
.tabela-pol-sezonu .nazwa-pola-wiersza { font-weight: 600; color: var(--tekst); text-decoration: none; }
.tabela-pol-sezonu td small.pomoc { display: block; }
.uprawa-wiersza { display: flex; align-items: center; gap: 6px; }
.uprawa-wiersza + .uprawa-wiersza { margin-top: 2px; }
.uprawa-wiersza .kropka { flex-shrink: 0; }
.mapa-sezonu { padding: 0; overflow: hidden; }
.mapa-sezonu .mapa { height: 340px; border-radius: 0; }
.mapa-sezonu .legenda-mapy { padding: 8px 10px; margin: 0; }
@media (min-width: 900px) {
  .sezon-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mapa-sezonu { position: sticky; top: 76px; }
  .mapa-sezonu .mapa { height: calc(100vh - 190px); min-height: 380px; }
}
@media (max-width: 899px) { .mapa-sezonu { order: -1; } }
/* płodozmian według upraw: działka w kratce jest klikalna (okno edycji uprawy) */
.dzialki-komorki .komorka-dzialki { display: block; padding: 2px 6px; margin: 1px -6px; border-radius: 6px; color: inherit; text-decoration: none; background: none; border: 0; }
.dzialki-komorki .komorka-dzialki:hover { background: var(--glowny-jasny); text-decoration: underline; }
/* filtry nad tabelami: pola wyboru na szerokość treści, nie całej strony */
.filtry-plodozmianu select, .filtry select { width: auto; max-width: 100%; height: 42px; min-height: 42px; }

.oddane-podsumowanie { padding: 8px 12px 4px; margin: 0; }

.ksztalt-z-sezonu { display: grid; gap: 6px; margin: 0 0 12px; }
.ksztalt-z-sezonu label { font-weight: 600; }
.ksztalt-z-sezonu select { flex: 1; min-width: 0; }

/* ---------- Start: pulpit ---------- */
.pulpit-pogoda {
  background: var(--powierzchnia); border: 1px solid var(--ramka); border-radius: var(--promien);
  margin-bottom: 20px; overflow: hidden;
}
.pulpit-pogoda .oprysk { margin: 0; border: 0; border-left: 4px solid var(--ostrzezenie-tekst); border-radius: 0; }
.pulpit-pogoda .oprysk.dobra { border-left-color: var(--glowny); }
.pogoda-uwagi { border-top: 1px solid var(--ramka); padding: 10px 16px; display: grid; gap: 6px; }
.pogoda-uwagi p { margin: 0; }
.pogoda-ostrzezenie { display: flex; gap: 8px; align-items: flex-start; color: var(--ostrzezenie-tekst); font-size: .95rem; }
.pogoda-ostrzezenie.czerwone { color: var(--blad); }
.pogoda-ostrzezenie .ikona { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.wpisy { margin-bottom: 20px; }
@media (min-width: 900px) { .wpisy-przyciski { grid-template-columns: repeat(4, 1fr); } }

.pulpit-siatka { display: grid; gap: 16px; align-items: start; }
.pulpit-glowna, .pulpit-boczna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pulpit-glowna > .karta, .pulpit-boczna > .karta { margin: 0; }
@media (min-width: 960px) { .pulpit-siatka { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.podtytul { margin: 6px 0 2px; font-size: .78rem; font-weight: 700; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: .05em; }
.karta-uwaga .lista { margin: 0; }

/* ziemia w kolumnie bocznej */
.ziemia-liczby { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ziemia-liczby div { display: grid; }
.ziemia-liczby b { font-size: 1.4rem; line-height: 1.2; }
.ziemia-liczby span { font-size: .85rem; color: var(--tekst-slaby); }
.ziemia-krotko .legenda-struktury { gap: 4px 14px; font-size: .85rem; margin-bottom: 8px; }
.ziemia-krotko .pasek-struktury { height: 12px; }
.ziemia-krotko .pomoc { margin: 6px 0 0; }
.ziemia-umowa { margin: 8px 0 0; }
.ziemia-gminy { margin-top: 8px; font-size: .9rem; }
.ziemia-gminy summary { cursor: pointer; color: var(--glowny); font-weight: 600; }
.ziemia-gminy ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ziemia-gminy li { display: flex; gap: 8px; align-items: baseline; }
.ziemia-gminy li span { flex: 1; }

/* terminy i ceny w kolumnie bocznej – jedna linia na pozycję */
.terminy-krotko, .ceny-krotko { list-style: none; margin: 0; padding: 0; }
.terminy-krotko li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ramka); align-items: start; }
.terminy-krotko li:first-child { border-top: 0; padding-top: 2px; }
.termin-data { font-size: .8rem; font-weight: 700; text-align: center; padding: 3px 4px; border-radius: 6px; background: var(--powierzchnia-2); color: var(--tekst-slaby); white-space: nowrap; }
.termin-data.trwa { background: var(--glowny-jasny); color: var(--glowny); }
.termin-tekst { font-size: .9rem; line-height: 1.3; min-width: 0; }
.termin-tekst a { color: var(--tekst); text-decoration: none; }
.termin-tekst a:hover { color: var(--glowny); text-decoration: underline; }
.termin-tekst small { display: block; color: var(--tekst-slaby); font-size: .78rem; margin-top: 2px; }
.ceny-krotko li { display: grid; grid-template-columns: 1fr auto 58px; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--ramka); font-size: .92rem; }
.ceny-krotko li:first-child { border-top: 0; }
.ceny-krotko small { text-align: right; font-size: .8rem; color: var(--tekst-slaby); }
.ceny-krotko small.dodatni { color: var(--glowny); }
.ceny-krotko small.ujemny { color: var(--blad); }
.pulpit-boczna .pomoc { font-size: .8rem; }
.pulpit-dol { margin-top: 20px; }/* Start: gęstsza lista pól */
.pulpit-glowna .moje-pola .wiersz { padding-top: 8px; padding-bottom: 8px; }
.pulpit-glowna .moje-pola .tytul { font-size: 1rem; }
.pulpit-glowna .moje-pola .stan-satelita { margin-top: 3px; font-size: .8rem; }
/* mapa plonu na stronie pola */
.plon-skala { display: flex; justify-content: space-between; height: 22px; align-items: center; padding: 0 8px; border-radius: 6px; font-size: .8rem; font-weight: 700; color: #fff; background: linear-gradient(90deg, #c62828, #f2c230, #2e7d32); }

/* ---------- Start: wyrównanie ----------
   Kolorowy pasek kart (uwaga, pogoda) rysowany cieniem wewnętrznym zamiast grubszej ramki – tekst zaczyna się
   w tym samym miejscu co w innych kartach. Nagłówki kart mają jedną wysokość, kolumny kończą się równo. */
.pulpit-siatka .karta { padding: 20px; }
/* pasek 4 px zamiast ramki 1 px – odstęp wewnętrzny mniejszy o 3 px, więc tekst stoi tam, gdzie w innych kartach */
.pulpit-siatka .karta.karta-uwaga { border-left: 4px solid var(--ostrzezenie-tekst); padding-left: 17px; }
.pulpit-pogoda .oprysk { padding: 16px 20px 16px 17px; }
.pulpit-pogoda .pogoda-uwagi { padding: 10px 20px 12px; }
.pulpit-siatka .karta-naglowek { align-items: center; min-height: 30px; margin-bottom: 12px; }
.pulpit-siatka .karta-naglowek h2 { font-size: 1.1rem; line-height: 1.3; }
.licznik-uwag {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; display: inline-grid; place-items: center;
  background: var(--ostrzezenie-tlo); color: var(--ostrzezenie-tekst); font-weight: 700; font-size: .85rem;
}
.przypomnienia li { align-items: flex-start; }
.przypomnienia li .ikona { margin-top: 2px; flex-shrink: 0; }
@media (min-width: 960px) {
  .pulpit-siatka { align-items: stretch; }
  .pulpit-glowna > .karta:last-child, .pulpit-boczna > .karta:last-child { flex: 1 1 auto; }
}
/* średnie ekrany: liczby „Twojej ziemi” jedna pod drugą zamiast ściśniętych obok */
@media (min-width: 960px) and (max-width: 1150px) {
  .ziemia-liczby { grid-template-columns: 1fr; gap: 6px; }
}
/* ---------- Strona główna przed logowaniem (witryna) ---------- */
.tresc-witryna { max-width: 1140px; padding-top: 8px; }
.w-etykieta { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--glowny); margin-bottom: 10px; }
.w-btn-duzy { padding: 14px 26px; font-size: 1.05rem; border-radius: 12px; }

.w-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding: 40px 0 56px; }
.w-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 18px; }
.w-lead { font-size: 1.15rem; color: var(--tekst-slaby); max-width: 56ch; margin-bottom: 26px; }
.w-przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.w-atuty { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--tekst-slaby); font-size: .95rem; }
.w-atuty li { display: flex; align-items: center; gap: 8px; }
.w-atuty li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--glowny-jasny) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b2a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* podgląd aplikacji */
.w-podglad { position: relative; display: flex; justify-content: center; }
.w-podglad::before { content: ""; position: absolute; inset: 8% 4% 4%; border-radius: 40px; z-index: 0;
  background: radial-gradient(circle at 30% 20%, #cfe7b8 0, transparent 60%), radial-gradient(circle at 80% 90%, #f0d48a 0, transparent 55%); opacity: .8; }
.w-telefon { position: relative; z-index: 1; width: 300px; max-width: 100%; border-radius: 36px; padding: 12px; background: #1d2118;
  box-shadow: 0 30px 60px -20px rgba(31, 35, 27, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset; transform: rotate(2deg); }
.w-telefon-ekran { background: #f4f1e8; color: #1f231b; border-radius: 26px; padding: 18px 14px 16px; display: grid; gap: 10px; font-size: .82rem; }
.w-tel-gora span { display: block; font-weight: 800; font-size: 1.02rem; }
.w-tel-gora small { color: #5d6456; }
.w-tel-pogoda { background: #e3f1dc; border-left: 4px solid #2f6b2a; border-radius: 10px; padding: 10px 12px; display: grid; }
.w-tel-pogoda strong { color: #23501d; font-size: 1rem; }
.w-tel-mala { color: #5d6456; font-size: .75rem; }
.w-tel-przyciski { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.w-tp { text-align: center; color: #fff; font-weight: 700; padding: 10px 2px; border-radius: 10px; font-size: .78rem; }
.w-tp.w-c-oprysk { background: #3b6fa0; } .w-tp.w-c-nawoz { background: #a8740f; } .w-tp.w-c-agro { background: #7a5c3e; }
.w-tel-wpis { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; background: #fffdf8; border: 1px solid #ddd8c9; border-radius: 10px; padding: 9px 10px; }
.w-tel-wpis b { display: block; font-size: .82rem; } .w-tel-wpis small { color: #5d6456; font-size: .72rem; }
.w-kropka { width: 10px; height: 10px; border-radius: 50%; } .w-kropka.w-c-oprysk { background: #3b6fa0; } .w-kropka.w-c-nawoz { background: #a8740f; }
.w-ok { color: #2f6b2a; font-weight: 800; }
.w-tel-alarm { background: #fff4d6; border-left: 4px solid #c99a2e; border-radius: 10px; padding: 9px 12px; display: grid; color: #6e4e00; }
.w-tel-alarm small { font-size: .72rem; }

/* termin */
.w-termin { display: flex; gap: 24px; align-items: center; background: var(--powierzchnia); border: 1px solid var(--ramka); border-left: 5px solid var(--zboze);
  border-radius: 16px; padding: 22px 26px; margin-bottom: 64px; }
.w-termin p { margin: 0; color: var(--tekst-slaby); } .w-termin p strong { color: var(--tekst); display: block; margin-bottom: 4px; }
.w-termin-liczba { display: grid; justify-items: center; min-width: 96px; }
.w-termin-liczba b { font-size: 2.6rem; line-height: 1; color: var(--zboze); font-variant-numeric: tabular-nums; }
.w-termin-liczba span { font-size: .85rem; color: var(--tekst-slaby); font-weight: 700; }

/* sekcje */
.w-sekcja { margin-bottom: 72px; }
.w-sekcja > h2, .w-telefon-sekcja h2 { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.015em; margin-bottom: 28px; max-width: 30ch; }
.w-kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.w-kafel { background: var(--powierzchnia); border: 1px solid var(--ramka); border-radius: 16px; padding: 24px; transition: border-color .15s, transform .15s; }
.w-kafel:hover { border-color: var(--ramka-mocna); transform: translateY(-2px); }
.w-kafel h3 { font-size: 1.08rem; margin: 14px 0 8px; }
.w-kafel p { color: var(--tekst-slaby); margin: 0; font-size: .97rem; }
.w-ikona { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; }
.w-ikona .ikona { width: 24px; height: 24px; }
.w-ikona.w-c-oprysk { background: #e3ecf5; color: #3b6fa0; } .w-ikona.w-c-nawoz { background: #f6ecd5; color: #a8740f; }
.w-ikona.w-c-pole { background: var(--glowny-jasny); color: var(--glowny); } .w-ikona.w-c-pogoda { background: #fdf0cf; color: #b07d0c; }
.w-ikona.w-c-satelita { background: #e8e4f3; color: #5b4a96; } .w-ikona.w-c-dokumenty { background: #efe8de; color: #7a5c3e; }

.w-kroki { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: krok; }
.w-kroki li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 16px; background: var(--glowny-jasny); }
.w-kroki h3 { margin: 4px 0 6px; font-size: 1.05rem; } .w-kroki p { margin: 0; color: var(--tekst-slaby); font-size: .97rem; }
.w-nr { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--glowny); color: var(--na-glownym); font-weight: 800; }

.w-telefon-sekcja { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center;
  background: #1f2a1a; color: #eef2e8; border-radius: 24px; padding: 44px; margin-bottom: 72px; }
.w-telefon-sekcja .w-etykieta { color: #a6d394; }
.w-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.w-lista li { padding-left: 30px; position: relative; color: #c9d2bf; }
.w-lista li b { color: #fff; }
.w-lista li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: #86c27a; }
.w-cytat { border-left: 3px solid #86c27a; padding: 4px 0 4px 22px; font-size: 1.12rem; line-height: 1.55; color: #eef2e8; }
.w-cytat p { margin: 0; }

.w-faq { display: grid; gap: 10px; max-width: 820px; }
.w-faq details { background: var(--powierzchnia); border: 1px solid var(--ramka); border-radius: 14px; padding: 0 22px; }
.w-faq summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--glowny); transition: transform .2s; }
.w-faq details[open] summary::after { transform: rotate(45deg); }
.w-faq details p { color: var(--tekst-slaby); margin: 0 0 18px; }

.w-koniec { text-align: center; padding: 48px 24px; margin-bottom: 24px; border-radius: 24px; background: var(--glowny-jasny); }
.w-koniec h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); } .w-koniec p { color: var(--tekst-slaby); margin-bottom: 22px; }

@media (prefers-color-scheme: dark) {
  .w-podglad::before { opacity: .25; }
  .w-telefon-sekcja { background: #10160c; border: 1px solid var(--ramka); }
  .w-ikona.w-c-oprysk { background: #1c2c3b; color: #8db6dc; } .w-ikona.w-c-nawoz { background: #3a2f12; color: #e0b65a; }
  .w-ikona.w-c-pogoda { background: #3a2f12; color: #f3d38a; } .w-ikona.w-c-satelita { background: #2a2540; color: #b9aaf0; }
  .w-ikona.w-c-dokumenty { background: #2e261c; color: #c4a27e; }
}
@media (max-width: 900px) {
  .w-hero { grid-template-columns: 1fr; gap: 36px; padding: 20px 0 40px; }
  .w-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-kroki { grid-template-columns: 1fr; }
  .w-telefon-sekcja { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
}
@media (max-width: 560px) {
  .w-hero h1 { font-size: 1.85rem; }
  .w-przyciski .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
  .w-kafle { grid-template-columns: 1fr; }
  .w-termin { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; margin-bottom: 48px; }
  .w-termin-liczba { justify-items: start; }
  .w-sekcja, .w-telefon-sekcja { margin-bottom: 52px; }
  .w-telefon { transform: none; width: 280px; }
}