/* GLOBHEALS - arkusz interfejsu.

   Dwa motywy przez zmienne na :root. Jasny: biały papier, ciemny druk.
   Ciemny: czarny papier, jasny druk. Kolory warstw (skala, klasy organizacji,
   potrzeby) są wspólne i stoją w JS; tutaj tylko papier, druk, ramki i tło
   paneli. Motyw wybiera html[data-theme], ustawiany przez assets/motyw.js
   zanim narysuje się cokolwiek, więc nie ma mignięcia. */

:root {
  --tlo: #FFFFFF;
  --papier: #FFFFFF;
  --druk: #1B1B1B;
  --druk-dim: #5E5E5E;
  --druk-slaby: #8A8A8A;
  --ramka: #D9D9D9;
  --ramka-mocna: #B8B8B8;
  --panel: rgba(255,255,255,.90);
  --panel-pelny: rgba(255,255,255,.97);
  --panel-edge: #D9D9D9;
  --podklad: rgba(0,0,0,.035);
  --podklad-mocny: rgba(0,0,0,.07);
  --cien: 0 6px 22px rgba(0,0,0,.14);
  --teal: #2E8B9A;
  --akcent: #C2185B;
  --s1: #EFC15E;
  --s2: #E0993F;
  --s3: #D06C37;
  --s4: #B2432E;
  --s5: #8C1F1F;
  --potrzeby: #D4842A;
  --etykieta: #1B1B1B;
  --etykieta-cien: rgba(255,255,255,.7);
  --font: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
}
html[data-theme="dark"] {
  --tlo: #000000;
  --papier: #000000;
  --druk: #EDEDED;
  --druk-dim: #A6A6A6;
  --druk-slaby: #7C7C7C;
  --ramka: #2A2A2A;
  --ramka-mocna: #3E3E3E;
  --panel: rgba(8,8,8,.88);
  --panel-pelny: rgba(8,8,8,.97);
  --panel-edge: #2A2A2A;
  --podklad: rgba(255,255,255,.05);
  --podklad-mocny: rgba(255,255,255,.09);
  --cien: 0 6px 22px rgba(0,0,0,.6);
  --teal: #5FB3C1;
  --akcent: #E2497F;
  --etykieta: #F2F2F2;
  --etykieta-cien: rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--tlo);
  color: var(--druk);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
a { color: var(--teal); }

/* ---------- scena ---------- */
#scena { position: fixed; inset: 0; }
#scena canvas { display: block; touch-action: none; }

#ladowanie {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--tlo); z-index: 50;
  transition: opacity .6s ease; font-size: 15px; color: var(--druk-dim);
}
#ladowanie.zniknij { opacity: 0; pointer-events: none; }

/* ---------- nagłówek ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--tlo) 0%, transparent 100%);
  pointer-events: none;
}
header h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: .18em; }
header .podtytul { font-size: 13px; color: var(--druk-dim); }
header .nawigacja { pointer-events: auto; display: flex; gap: 14px; margin-left: auto; }
header .nawigacja a { color: var(--druk-dim); text-decoration: none; font-size: 13px; }
header .nawigacja a:hover { color: var(--druk); }

/* Przełącznik motywu: słońce i księżyc, oba rysowane kreską w CSS. */
header .motyw, #tel-menu .motyw {
  pointer-events: auto; width: 30px; height: 26px; padding: 0;
  border: 1px solid var(--ramka); border-radius: 3px; background: var(--panel);
  position: relative; align-self: center;
}
header .motyw:hover, #tel-menu .motyw:hover { border-color: var(--teal); }
header .motyw:focus-visible, #tel-menu .motyw:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.motyw-slonce, .motyw-ksiezyc {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%,-50%); border-radius: 50%;
}
.motyw-slonce { border: 2px solid var(--druk); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--druk-slaby); }
.motyw-ksiezyc { display: none; background: var(--druk); box-shadow: inset -4px -2px 0 0 var(--panel); }
html[data-theme="dark"] .motyw-slonce { display: none; }
html[data-theme="dark"] .motyw-ksiezyc { display: block; }

header .wybor-jezyka {
  pointer-events: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--druk-dim);
}
header .wybor-jezyka .etykieta { display: none; }
header select {
  font-family: inherit; font-size: 13px; color: var(--druk);
  background: var(--panel); border: 1px solid var(--ramka);
  border-radius: 2px; padding: 4px 8px;
}
header select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* ---------- karty ---------- */
.karta {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  backdrop-filter: blur(6px);
}
.karta > h2 {
  margin: 0; padding: 11px 14px 9px;
  font-size: 13px; font-weight: 600; color: var(--druk-dim);
  border-bottom: 1px solid var(--panel-edge);
}
.karta.zwijana { padding: 0; }
.karta-naglowek {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; text-align: left;
  padding: 11px 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--druk-dim);
}
[dir="rtl"] .karta-naglowek { text-align: right; }
.karta-naglowek:hover { color: var(--druk); }
.karta-naglowek:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.karta-naglowek .strzalka {
  width: 8px; height: 8px; flex: none; margin-inline-start: 10px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .18s ease;
}
.karta-naglowek[aria-expanded="false"] .strzalka { transform: rotate(-45deg) translate(-1px,1px); }
.karta.zwijana .karta-cialo { padding: 0 14px 12px; }

/* ---------- lewa kolumna ---------- */
#sterowanie {
  position: fixed; top: 72px; left: 22px; z-index: 20;
  width: 300px; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
#karta-aktualnosci { display: flex; flex-direction: column; min-height: 0; }
#karta-obserwowane .pusto { margin: 4px 0 2px; }
#karta-obserwowane .lokalnie { padding: 0 14px 10px; margin: 0; font-size: 11px; opacity: .8; }
#lista { overflow-y: auto; scrollbar-width: thin; }
.obs-poz { display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--ramka); padding: 9px 14px; font-size: 13.5px; }
[dir="rtl"] .obs-poz { text-align: right; }
.obs-poz:hover { background: var(--podklad); }
.obs-poz .pasek { display: inline-block; width: 3px; height: 12px; margin-right: 8px; vertical-align: -1px; }
[dir="rtl"] .obs-poz .pasek { margin-right: 0; margin-left: 8px; }
.obs-poz .reg { color: var(--druk-dim); font-size: 12px; }
.meta { font-size: 12.5px; color: var(--druk-dim); }

/* ---------- prawa kolumna ---------- */
#panel-prawy {
  position: fixed; top: 72px; right: 22px; z-index: 20;
  width: 360px; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
#panel-prawy > * { pointer-events: auto; }
[dir="rtl"] #panel-prawy { right: auto; left: 22px; }
[dir="rtl"] #sterowanie { left: auto; right: 22px; }

.warstwa {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 10px 14px; text-align: left;
  background: none; border: 0;
}
[dir="rtl"] .warstwa { text-align: right; }
.warstwa:hover:not(:disabled) { background: var(--podklad); }
.warstwa:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.przelacznik {
  flex: none; width: 13px; height: 13px; margin-top: 4px;
  border: 1px solid var(--ramka-mocna); border-radius: 2px;
}
.warstwa[aria-pressed="true"] .przelacznik { background: var(--teal); border-color: var(--teal); }
.warstwa .nazwa { font-size: 14px; display: block; }
.warstwa .opis { font-size: 12px; color: var(--druk-dim); display: block; }
.kolor-warstwy { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; }
.kolor-warstwy[data-kolor="granice"] { background: var(--druk-slaby); }
.kolor-warstwy[data-kolor="zdarzenia"] { background: #D06C37; }
.kolor-warstwy[data-kolor="organizacje"] { background: #2E8B9A; }

.warstwa-grupa { border-bottom: 1px solid var(--ramka); }
.warstwa-grupa:last-child { border-bottom: 0; }
.warstwa-wiersz { display: flex; align-items: stretch; }
.warstwa-wiersz .warstwa { border-bottom: 0; flex: 1 1 auto; min-width: 0; }
.rozwin-pw {
  flex: none; width: 34px; padding: 0;
  background: none; border: 0; border-left: 1px solid var(--ramka);
  color: var(--druk-dim); cursor: pointer;
}
.rozwin-pw:hover { background: var(--podklad); color: var(--druk); }
.rozwin-pw:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.rozwin-pw .strzalka {
  display: block; margin: 0 auto; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .16s ease;
}
.rozwin-pw[aria-expanded="true"] .strzalka { transform: rotate(-135deg) translate(-2px, -2px); }
[dir="rtl"] .rozwin-pw { border-left: 0; border-right: 1px solid var(--ramka); }
.podwarstwy { padding: 2px 0 8px; background: var(--podklad); }
.podwarstwa {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 14px 6px 32px; text-align: left;
  background: none; border: 0; cursor: pointer;
}
[dir="rtl"] .podwarstwa { text-align: right; padding: 6px 32px 6px 14px; }
.podwarstwa:hover { background: var(--podklad); }
.podwarstwa:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.podwarstwa .przelacznik { width: 11px; height: 11px; margin-top: 0; }
.podwarstwa[aria-pressed="true"] .przelacznik { background: var(--teal); border-color: var(--teal); }
.podwarstwa .nazwa { font-size: 12.5px; color: var(--druk-dim); }
.podwarstwa[aria-pressed="true"] .nazwa { color: var(--druk); }
.podwarstwa .pw-ksztalt { width: 12px; height: 12px; color: #D06C37; flex: none; }

/* legenda */
#skala, #legenda-kategorie, #legenda-organizacje { padding: 6px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.legenda-sekcja {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--druk-dim); margin: 8px 0 2px;
}
.stopien { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.stopien .kropka { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.stopien .n { color: var(--druk-dim); width: 10px; }
.stopien .ikona-sk { width: 15px; height: 15px; flex: none; color: #D06C37; }
.legenda-uwaga { margin: 10px 0 0; font-size: 11px; line-height: 1.45; }
.legenda-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; padding: 6px 0 4px; }
.legenda-siatka .stopien { font-size: 12px; color: var(--druk-dim); }
.legenda-siatka .stopien .ikona-sk { color: var(--druk); }
.ikona-sk { display: inline-block; vertical-align: middle; }

/* ---------- panel szczegółów ---------- */
#panel-prawy #szczegoly {
  position: relative; width: auto; max-height: none; transform: none; display: none;
  overflow-y: auto; padding: 0 0 16px;
}
#panel-prawy #szczegoly.otwarte { display: block; }
#szczegoly .naglowek { padding: 14px 16px 10px; border-bottom: 1px solid var(--panel-edge); }
#szczegoly h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.25; padding-right: 60px; }
#szczegoly .meta { font-size: 12.5px; color: var(--druk-dim); }
#szczegoly .tresc { padding: 13px 16px; font-size: 14px; }
#szczegoly .tresc p { margin: 0 0 12px; }
#szczegoly dl { margin: 0; display: grid; grid-template-columns: 92px 1fr; gap: 5px 12px; font-size: 13px; }
#szczegoly dt { color: var(--druk-dim); }
#szczegoly dd { margin: 0; }
#szczegoly .tresc h4 { margin: 0 0 4px; font-size: 13px; color: var(--akcent); }
#szczegoly .tresc > .meta { margin: 0 0 6px; }
#zamknij {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--druk-dim); font-size: 20px; line-height: 1; padding: 4px 6px; z-index: 2;
}
#zamknij:hover { color: var(--druk); }
[dir="rtl"] #zamknij { right: auto; left: 12px; }
.sz-odznaki { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#sz-obserwuj { margin-top: 8px; }
#sz-obserwuj:empty { display: none; }

.znacznik-skali {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  font-size: 12px; font-weight: 600; color: #141414;
}
.kategoria-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 2px 7px; border-radius: 2px;
  border: 1px solid var(--ramka-mocna); color: var(--druk);
}
.kategoria-chip .ikona-sk { width: 12px; height: 12px; color: #D06C37; }

#szczegoly .kontekst {
  margin: 0 0 12px; font-size: 15px; line-height: 1.5;
  color: var(--druk); border-left: 2px solid var(--s1); padding-left: 11px;
}
[dir="rtl"] #szczegoly .kontekst { border-left: 0; border-right: 2px solid var(--s1); padding-left: 0; padding-right: 11px; }

.kraje { display: flex; flex-wrap: wrap; gap: 5px; }
.kraj {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  font-size: 12px; line-height: 1.5; border: 1px solid transparent;
}
.kraj.strona { background: rgba(210,108,55,.22); border-color: rgba(210,108,55,.6); color: var(--druk); }
.kraj.obszar { background: rgba(232,200,126,.25); border-color: rgba(200,160,70,.55); color: var(--druk-dim); }

/* chipy sektorów */
.chipy { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 2px 8px 2px 6px; border-radius: 12px;
  border: 1px solid var(--ramka-mocna); background: var(--podklad);
}
.chip .ikona-sk { width: 13px; height: 13px; }

/* liczby ze źródłem */
.lb-wiersz { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--ramka); }
.lb-wiersz:last-of-type { border-bottom: 0; }
.lb-etykieta { color: var(--druk-dim); }
.lb-wartosc { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.lb-meta { grid-column: 1 / -1; font-size: 10.5px; color: var(--druk-slaby); }
.lb-meta a { color: var(--teal); }
.lb-uwaga { font-style: italic; }
.lb-uwagi { margin: 8px 0 0 !important; font-size: 11.5px; line-height: 1.45; }

/* zwierzęta */
.gatunek { padding: 7px 0; border-bottom: 1px solid var(--ramka); }
.gatunek:last-of-type { border-bottom: 0; }
.gatunek-glowa { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.gatunek-nazwa { font-size: 13.5px; font-weight: 600; }
.gatunek-lac { font-size: 12px; font-style: italic; color: var(--druk-dim); }
.gatunek-meta { font-size: 11.5px; color: var(--druk-dim); margin-top: 2px; }
.iucn {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 1px 6px; border-radius: 2px;
  color: #fff; background: var(--druk-slaby);
}
.iucn-cr { background: #B2432E; }
.iucn-en { background: #D06C37; }
.iucn-vu { background: #C9A24B; color: #141414; }
.iucn-nt { background: #7A9A3C; }
.iucn-lc { background: #4C8A5A; }
.iucn-ex, .iucn-ew { background: #222; }
.iucn-dd, .iucn-brak { background: var(--druk-slaby); }

/* organizacje przy zdarzeniu */
.org-poz {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--ramka); padding: 8px 0; color: inherit; font: inherit;
}
[dir="rtl"] .org-poz { text-align: right; }
.org-poz:last-of-type { border-bottom: 0; }
.org-poz:hover { background: var(--podklad); }
.org-glowa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-glowa .ikona-sk { width: 14px; height: 14px; flex: none; }
.org-nazwa { font-size: 13.5px; font-weight: 600; }
.org-klasa {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--druk-dim); border: 1px solid; border-radius: 2px; padding: 1px 6px;
}
.org-meta { font-size: 12px; color: var(--druk-dim); margin-top: 2px; }

/* podział administracyjny, źródła */
.podzial h4 { margin: 0 0 5px; font-size: 14px; color: var(--s3); }
.podzial p { margin: 0 0 8px; font-size: 13.5px; }
.zrodla #sz-zrodla-lista { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }

/* ---------- panel obiektu (organizacja) ---------- */
.obj-nota { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.obj-wiersz { display: flex; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.obj-etykieta { color: var(--druk-dim); flex: none; min-width: 108px; }
.obj-naglowek { margin: 12px 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.obj-lista { margin: 0; padding-left: 17px; font-size: 12.5px; }
[dir="rtl"] .obj-lista { padding-left: 0; padding-right: 17px; }
.obj-lista li { margin-bottom: 4px; }
.obj-powiazane { display: flex; flex-wrap: wrap; gap: 6px; }
.obj-odnosnik {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--podklad); border: 1px solid var(--ramka);
  border-radius: 2px; padding: 3px 9px; font-size: 12.5px; color: var(--druk); text-align: left;
}
.obj-odnosnik:hover { border-color: var(--teal); }
.obj-odnosnik .ikona-sk { width: 11px; height: 11px; flex: none; }
.obj-stan-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 10.5px; }
.obj-uwaga { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }

.osrodki { display: flex; flex-direction: column; gap: 2px; }
.osrodek-poz {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent; padding: 6px 8px; border-radius: 3px;
  color: inherit; font: inherit;
}
[dir="rtl"] .osrodek-poz { text-align: right; border-left: 0; border-right: 2px solid transparent; }
.osrodek-poz:hover { background: var(--podklad); }
.osrodek-poz.wskazany { background: var(--podklad-mocny); border-color: var(--teal); }
.osrodek-poz .ikona-sk { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.osrodek-tekst { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.osrodek-nazwa { font-size: 13px; font-weight: 600; line-height: 1.3; }
.osrodek-meta { font-size: 11px; color: var(--druk-dim); }
.osrodek-wsp { opacity: .8; }
.osrodek-zrodlo { font-size: 10.5px; flex: none; align-self: center; }

/* wsparcie */
.wsparcie { display: flex; flex-direction: column; gap: 8px; }
.wsparcie-przycisk { display: block; text-align: center; margin-top: 2px; }
.wsparcie-domena { font-size: 10.5px; color: var(--druk-slaby); text-align: center; margin-top: -4px; word-break: break-all; }
.wsparcie-zasada { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; }
.wsparcie-nas { font-size: 12px; }
.konto { border: 1px solid var(--ramka-mocna); border-radius: 3px; padding: 9px 11px; background: var(--podklad); }
.konto-naglowek { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--druk-dim); margin-bottom: 6px; }
.konto-wiersz { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin-bottom: 4px; flex-wrap: wrap; }
.konto-etykieta { color: var(--druk-dim); min-width: 68px; flex: none; }
.konto-wartosc { font-variant-numeric: tabular-nums; word-break: break-all; }
.konto-kopiuj {
  margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 2px;
  border: 1px solid var(--ramka-mocna); background: var(--panel); color: var(--druk);
}
.konto-kopiuj:hover { border-color: var(--teal); }
.konto-meta { font-size: 10.5px; color: var(--druk-slaby); margin-top: 4px; }
.konto-uwaga { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }

.glowny {
  display: inline-block; width: 100%; text-align: center; text-decoration: none;
  background: var(--akcent); color: #fff; border: 0; border-radius: 3px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; margin-top: 6px;
}
.glowny:hover { filter: brightness(1.08); }
.glowny.wtorny { background: none; color: var(--druk); border: 1px solid var(--ramka-mocna); }
.glowny.wtorny:hover { border-color: var(--teal); }

/* ---------- infografika przy znaczniku ---------- */
#infografika {
  position: fixed; top: 0; left: 0; z-index: 12;
  width: 232px; padding: 12px 13px 11px;
  background: var(--panel-pelny);
  border: 1px solid var(--panel-edge); border-radius: 4px;
  backdrop-filter: blur(6px);
  box-shadow: var(--cien);
  opacity: 0; transition: opacity .18s ease;
  pointer-events: none;
}
#infografika.widoczna { opacity: 1; }
#infografika .ig-obserwuj, #infografika a { pointer-events: auto; }
.ig-tytul { font-size: 12px; font-weight: 600; color: var(--druk); margin-bottom: 9px; line-height: 1.3; }
.ig-wiersz { margin-bottom: 8px; }
.ig-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ig-nazwa { font-size: 11.5px; color: var(--druk); }
.ig-wartosc { font-size: 12.5px; font-weight: 700; color: var(--druk); font-variant-numeric: tabular-nums; }
.ig-tor { height: 6px; margin: 4px 0 3px; background: var(--podklad-mocny); border-radius: 3px; }
.ig-slupek { height: 100%; min-width: 3px; border-radius: 0 3px 3px 0; }
.ig-podpis { font-size: 10.5px; color: var(--druk-dim); line-height: 1.35; }
.ig-osrodek { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ig-osrodek .ikona-sk { width: 13px; height: 13px; flex: none; }
.ig-skala { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ig-pusto { margin: 2px 0 6px; font-size: 11.5px; color: var(--druk-dim); line-height: 1.4; }
.ig-stopka { margin: 0; font-size: 10px; color: var(--druk-dim); opacity: .85; flex: 1; }
.ig-stopka-wiersz { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.ig-obserwuj {
  flex: none; margin-left: auto;
  background: var(--podklad); border: 1px solid var(--ramka-mocna);
  border-radius: 2px; padding: 4px 10px; font-size: 11.5px; color: var(--druk);
}
.ig-obserwuj:hover { border-color: var(--teal); }
.ig-obserwuj[aria-pressed="true"] { background: rgba(239,193,94,.2); border-color: var(--s2); }
.ig-sektory { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.ig-sektor { display: inline-flex; padding: 3px; border: 1px solid var(--ramka); border-radius: 4px; }
.ig-sektor .ikona-sk { width: 13px; height: 13px; }
.ig-gatunek .iucn { font-size: 9.5px; }

/* karta państwa */
#infografika-panstwo {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 44px; z-index: 12;
  width: 320px; max-height: 58vh; overflow-y: auto;
  padding: 12px 13px 11px;
  background: var(--panel-pelny);
  border: 1px solid var(--panel-edge); border-radius: 4px;
  backdrop-filter: blur(6px);
  box-shadow: var(--cien);
}
#infografika-panstwo .ig-tytul { display: flex; align-items: flex-start; gap: 8px; }
#igp-zamknij { margin-left: auto; background: none; border: 0; color: var(--druk-dim); font-size: 18px; line-height: 1; padding: 0 2px; }
[dir="rtl"] #igp-zamknij { margin-left: 0; margin-right: auto; }
#igp-zamknij:hover { color: var(--druk); }
.igp-pusto { margin: 2px 0 4px; font-size: 11.5px; color: var(--druk-dim); line-height: 1.4; }
.ig-fakty { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
.ig-fakt { display: flex; align-items: baseline; gap: 5px; }
.ig-fakt-n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ig-fakt-e { font-size: 10.5px; color: var(--druk-dim); }
.ig-sekcja { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--druk-dim); margin: 11px 0 6px; }
.ig-sugestie { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mk-okragla { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.mk-okragla svg { width: 58px; height: 58px; flex: none; }
.mk-tlo { color: var(--podklad-mocny); }
.mk-liczba { fill: var(--druk); font-size: 20px; font-weight: 700; font-family: var(--font); }
.mk-podpis { font-size: 11.5px; color: var(--druk-dim); line-height: 1.35; }

/* ---------- węzły ---------- */
#wezly { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
#polaczenia { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }
.polaczenie { opacity: .6; }
.wezel {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; gap: 3px;
  padding: 3px 5px; border-radius: 9px; pointer-events: auto;
  background: var(--panel-pelny);
  border: 1px solid var(--ramka-mocna);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.wezel[hidden] { display: none; }
.wezel:hover { border-color: var(--teal); }
.wezel.wyrozniony { border-color: var(--s2); box-shadow: 0 0 0 1px var(--s2); }
.wezel.przygaszony { opacity: .45; }
.wezel:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Węzeł potrzeb jest cieńszy i ma bursztynową ramkę: to inna rodzina niż
   ośrodki i ma się to zgadzać z legendą. */
.wezel[data-rodzina="potrzeby"] { border-color: rgba(212,132,42,.7); padding: 2px 4px; gap: 2px; border-radius: 7px; }
.wezel[data-rodzina="potrzeby"] .wz-ikona { width: 17px; height: 17px; }
.wz-ikona { width: 21px; height: 21px; display: block; }
.wz-reszta { font-size: 12px; color: var(--druk-dim); padding: 0 2px; }
/* Kilka takich samych piktogramów w jednym węźle: jeden znak i licznik
   w rogu, zamiast trzech identycznych znaków obok siebie. */
.wz-grupa { position: relative; display: block; }
.wz-licznik {
  position: absolute; right: -5px; top: -5px; min-width: 13px; height: 13px;
  padding: 0 3px; border-radius: 7px; font-size: 9.5px; line-height: 13px; font-weight: 700;
  text-align: center; color: var(--tlo); background: var(--druk); font-variant-numeric: tabular-nums;
}
.wz-odnoga { stroke: var(--druk-slaby); stroke-opacity: .6; stroke-width: 1; }
#wezel-lista {
  position: fixed; top: 0; left: 0; z-index: 22;
  background: var(--panel-pelny); border: 1px solid var(--panel-edge);
  border-radius: 3px; padding: 4px; min-width: 190px; max-width: 280px;
  box-shadow: var(--cien);
}
.wzl-poz {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0;
  padding: 6px 9px; font-size: 12.5px; color: var(--druk); border-radius: 2px;
}
[dir="rtl"] .wzl-poz { text-align: right; }
.wzl-poz:hover { background: var(--podklad); }
.wzl-poz .ikona-sk { width: 14px; height: 14px; flex: none; }

/* ---------- etykieta państwa ---------- */
#etykiety-warstwa { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.etykieta-kraju {
  position: absolute; top: 0; left: 0;
  font-size: 15.6px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--etykieta); white-space: nowrap; opacity: 0;
  clip-path: inset(0 100% 0 0);
  text-shadow: 0 1px 0 var(--etykieta-cien), 0 0 6px var(--etykieta-cien);
}
[dir="rtl"] .etykieta-kraju { clip-path: inset(0 0 0 100%); }
.etykieta-kraju.widoczna {
  opacity: .9; clip-path: inset(0 0 0 0); letter-spacing: .06em;
  transition: clip-path .42s cubic-bezier(.22,.61,.36,1), letter-spacing .42s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}

/* ---------- aktualności ---------- */
.karta-naglowek-stat {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 9px; border-bottom: 1px solid var(--panel-edge);
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--druk-dim);
}
.karta-naglowek-stat .odswiezone { margin-left: auto; font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .75; }
[dir="rtl"] .karta-naglowek-stat .odswiezone { margin-left: 0; margin-right: auto; }
#ak-lista { overflow-y: auto; scrollbar-width: thin; min-height: 0; }
.ak-poz { display: block; width: 100%; border-bottom: 1px solid var(--ramka); }
.ak-skrot { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; color: inherit; font: inherit; cursor: pointer; }
[dir="rtl"] .ak-skrot { text-align: right; }
.ak-skrot:hover, .ak-skrot:focus-visible { background: var(--podklad); outline: none; }
.ak-poz.wybrana > .ak-skrot { display: none; }
.ak-poz.wybrana { background: rgba(239,193,94,.12); }
.ak-rozw { padding: 9px 12px 12px; }
.aks-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aks-zwin { background: none; border: 0; color: var(--druk-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 3px; }
.aks-zwin:hover { color: var(--druk); background: var(--podklad); }
.ak-wiek { font-size: 10.5px; color: var(--s3); letter-spacing: .04em; }
.ak-tytul { font-size: 13px; line-height: 1.4; margin: 2px 0 3px; }
.ak-meta { font-size: 11.5px; color: var(--druk-dim); }
.ak-stopka { margin: 0; padding: 9px 12px; border-top: 1px solid var(--panel-edge); font-size: 10.5px; }
.ak-pusto { padding: 12px; margin: 0; }
.ak-nieswieze { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--panel-edge); border-left: 2px solid var(--s3); background: rgba(208,108,55,.10); font-size: 11px; line-height: 1.45; }
.ak-poz.obserwowana { border-left: 2px solid var(--s2); }
[dir="rtl"] .ak-poz.obserwowana { border-left: 0; border-right: 2px solid var(--s2); }
.ak-znak-obs { margin-left: 7px; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--s3); }
.aks-tytul { font-size: 14px; line-height: 1.45; margin: 4px 0 6px; }
.aks-meta { font-size: 11.5px; color: var(--druk-dim); margin-bottom: 9px; }
.aks-opis { font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
.aks-kontekst { font-size: 12.5px; line-height: 1.45; margin-bottom: 8px; border-left: 2px solid var(--s1); padding-left: 9px; color: var(--druk-dim); }
[dir="rtl"] .aks-kontekst { border-left: 0; border-right: 2px solid var(--s1); padding-left: 0; padding-right: 9px; }
.aks-akcje { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.aks-zrodlo { font-size: 11.5px; }

.szerzej {
  flex: none; background: none; border: 1px solid var(--ramka); border-radius: 2px; color: var(--druk-dim);
  font-size: 12px; line-height: 1; padding: 3px 6px;
}
.szerzej:hover { color: var(--druk); border-color: var(--teal); }
.szerzej[aria-pressed="true"] { color: var(--s3); border-color: var(--s3); }
#szczegoly .szerzej { position: absolute; top: 10px; right: 40px; z-index: 2; }
[dir="rtl"] #szczegoly .szerzej { right: auto; left: 40px; }
#panel-prawy.szeroki { width: 720px; z-index: 30; }
#sterowanie.szeroki { width: 600px; z-index: 30; }
#sterowanie.szeroki .ak-tytul { font-size: 14.5px; }
#sterowanie.szeroki .aks-tytul { font-size: 17px; }
#panel-prawy.szeroki #szczegoly dl { grid-template-columns: 130px 1fr; }
#panel-prawy.szeroki #szczegoly .tresc { font-size: 15px; }
#panel-prawy.szeroki #szczegoly .kontekst { font-size: 16.5px; }

/* ---------- stopka ---------- */
footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 10px 22px; font-size: 11.5px; color: var(--druk-dim);
  background: linear-gradient(0deg, var(--tlo), transparent);
  pointer-events: none;
}
footer a { color: var(--teal); pointer-events: auto; }
footer .alarm { color: var(--s3); }

/* ---------- pasek wersji testowej ---------- */
#pasek-testowy {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 22px; font-size: 12.5px;
  background: #FFF3D6; border-bottom: 1px solid rgba(200,150,50,.5); color: #4A3410;
}
#pasek-testowy[hidden] { display: none; }
html[data-theme="dark"] #pasek-testowy { background: #3A2A12; color: #E8D9B8; }
#pasek-testowy .znak { background: var(--s1); color: #221703; font-weight: 700; border-radius: 2px; padding: 1px 8px; font-size: 11.5px; }
#pasek-testowy .uwaga { flex: 1 1 240px; }
html[data-test] header { top: var(--pasek-wys, 34px); }
html[data-test] body.strona .pasek { margin-top: var(--pasek-wys, 34px); }
@media (min-width: 821px) {
  html[data-test] #sterowanie, html[data-test] #panel-prawy {
    top: calc(var(--pasek-wys, 34px) + 72px);
    max-height: calc(100vh - var(--pasek-wys, 34px) - 110px);
  }
}

/* ---------- kafelki (telefon) ---------- */
#kafelki-przelacz {
  position: fixed; z-index: 24; right: 12px; bottom: 12px;
  font: inherit; font-size: 12px; background: var(--panel-pelny); color: var(--druk);
  border: 1px solid var(--ramka-mocna); border-radius: 18px; padding: 8px 15px; cursor: pointer;
  box-shadow: var(--cien);
}
#kafelki-przelacz[aria-pressed="true"] { border-color: var(--s3); color: var(--s3); }

/* ---------- podstrony ---------- */
body.strona { overflow: auto; background: var(--tlo); min-height: 100%; }
html:has(body.strona) { height: auto; overflow: auto; }
body.strona:not(.gotowe) main { opacity: 0; }
body.strona main { transition: opacity .25s ease; }
.pasek {
  position: static; display: flex; align-items: center; gap: 18px;
  padding: 16px 22px; background: none; pointer-events: auto;
  border-bottom: 1px solid var(--panel-edge);
}
.pasek .logo { font-weight: 700; letter-spacing: .18em; color: var(--druk); text-decoration: none; }
.pasek .powrot { color: var(--teal); text-decoration: none; font-size: 13.5px; }
.pasek .wybor-jezyka { margin-left: auto; }
[dir="rtl"] .pasek .wybor-jezyka { margin-left: 0; margin-right: auto; }
.pasek .motyw { pointer-events: auto; }
.nawigacja-dok { display: flex; gap: 16px; margin-left: 4px; }
.nawigacja-dok a { color: var(--druk-dim); font-size: 13px; text-decoration: none; }
.nawigacja-dok a:hover { color: var(--teal); }
.szeroka { width: 100%; max-width: 860px; margin: 0 auto; padding: 44px 20px 70px; }
.szeroka h1 { margin: 0 0 8px; font-size: 27px; font-weight: 700; }
.prowadzenie { margin: 0 0 26px; color: var(--druk-dim); font-size: 14.5px; }
.dokument section { margin: 0 0 26px; }
.dokument h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--druk); padding-bottom: 7px; border-bottom: 1px solid var(--panel-edge); }
.dokument h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--druk-dim); }
.dokument p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.dokument ul, .dokument ol { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.6; }
[dir="rtl"] .dokument ul, [dir="rtl"] .dokument ol { padding-left: 0; padding-right: 20px; }
.dokument li { margin-bottom: 7px; }
.zasada-nadrzedna {
  font-size: 17px !important; font-weight: 600; color: var(--akcent);
  border-left: 3px solid var(--akcent); padding: 6px 0 6px 14px; margin: 0 0 14px !important;
}
[dir="rtl"] .zasada-nadrzedna { border-left: 0; border-right: 3px solid var(--akcent); padding: 6px 14px 6px 0; }
.dokument .ograniczenia { border: 1px solid rgba(208,108,55,.4); border-radius: 3px; background: rgba(208,108,55,.06); padding: 16px 18px; }
.dokument .ograniczenia h2 { border-bottom-color: rgba(208,108,55,.4); color: var(--s3); }
.klauzula { margin-top: 22px !important; padding-top: 12px; border-top: 1px solid var(--panel-edge); }
.drobne { margin: 20px 0 0; font-size: 12.5px; color: var(--druk-dim); }
.kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 22px; }
.krok { border: 1px solid var(--panel-edge); border-radius: 4px; padding: 16px 18px; background: var(--podklad); }
.krok .numer { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: var(--akcent); color: #fff; text-align: center; line-height: 26px; font-weight: 700; margin-bottom: 8px; }
.krok h3 { margin: 0 0 6px; font-size: 15px; }
.krok p { margin: 0; font-size: 13.5px; }
.wsparcie-serwis { border: 1px solid rgba(46,139,154,.45); border-radius: 4px; background: rgba(46,139,154,.07); padding: 18px 20px; margin: 22px 0; }
.wsparcie-serwis h2 { border: 0; margin: 0 0 8px; color: var(--teal); }
.wsparcie-serwis .glowny { width: auto; display: inline-block; margin-right: 8px; }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  header { padding: 12px 14px; flex-wrap: wrap; row-gap: 6px; align-items: center; }
  header h1 { font-size: 17px; letter-spacing: .12em; }
  header .podtytul { display: none; }
  header .nawigacja { gap: 12px; }
  header select { padding: 3px 6px; font-size: 12px; }
  header .wybor-jezyka { margin-left: auto; }
  #sterowanie { display: none; }
  #panel-prawy {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: auto; max-height: 62vh; padding: 0 10px 10px; gap: 8px; overflow-y: auto;
  }
  [dir="rtl"] #panel-prawy { left: 0; right: 0; }
  #infografika { display: none; }
  #infografika-panstwo { left: 10px; right: 10px; width: auto; transform: none; bottom: 10px; max-height: 42vh; }
  #panel-prawy.szeroki, #sterowanie.szeroki { width: auto; }
  #szczegoly .szerzej { display: none; }
  #ak-lista { max-height: 30vh; }
  footer { display: none; }
  #pasek-testowy { padding: 6px 12px; gap: 8px; }
  #pasek-testowy .uwaga { display: none; }

  body.kafelki #sterowanie, body.kafelki #panel-prawy {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-content: flex-end;
    top: auto; height: auto; max-height: none; overflow: visible; padding: 0 10px 52px; pointer-events: none;
  }
  body.kafelki #panel-prawy .karta { pointer-events: auto; flex: 0 0 auto; min-height: 0; padding: 0; margin: 0; background: var(--panel-pelny); border-radius: 14px; }
  body.kafelki #panel-prawy .karta > h2, body.kafelki #panel-prawy .karta-naglowek { margin: 0; padding: 7px 13px; font-size: 11.5px; white-space: nowrap; cursor: pointer; }
  body.kafelki #panel-prawy .karta:not(.otwarta) > *:not(h2):not(.karta-naglowek) { display: none; }
  body.kafelki #panel-prawy .karta.otwarta { flex: 1 1 100%; padding: 0 12px 12px; max-height: 52vh; overflow-y: auto; }
  body.kafelki #panel-prawy .karta.otwarta > h2, body.kafelki #panel-prawy .karta.otwarta > .karta-naglowek { white-space: normal; padding: 9px 1px 7px; font-size: 12px; }
  body.kafelki #panel-prawy #szczegoly.otwarte { max-height: 44vh; }
  body.kafelki footer { display: none; }
}
@media (max-width: 700px) {
  .pasek { gap: 12px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .etykieta-kraju.widoczna { clip-path: none; letter-spacing: .06em; }
}

/* ---------- marka: GLOBURNS / Pomoc ---------- */
header h1 { display: flex; align-items: baseline; gap: 0; }
header h1 .marka { color: inherit; text-decoration: none; pointer-events: auto; }
.marka-warstwa, .logo-warstwa {
  font-weight: 600; letter-spacing: .12em; color: var(--akcent);
}
.marka-warstwa::before, .logo-warstwa::before { content: "/"; color: var(--druk-slaby); margin: 0 .45em; font-weight: 400; }
.pasek .logo-warstwa { text-decoration: none; margin-left: -12px; }
.nav-wesprzyj {
  color: #fff !important; background: var(--akcent); border-radius: 3px;
  padding: 3px 10px; font-weight: 600;
}
.nav-wesprzyj:hover { filter: brightness(1.08); }

/* ---------- moduł Wesprzyj ---------- */
.wes { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 18px; max-width: 520px; }
.wes-rzad { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.wes-przelacznik { display: inline-flex; border: 1px solid var(--ramka-mocna); border-radius: 4px; overflow: hidden; }
.wes-przelacznik button { background: none; border: 0; padding: 6px 14px; font-size: 13.5px; color: var(--druk); }
.wes-przelacznik button + button { border-left: 1px solid var(--ramka-mocna); }
.wes-przelacznik button[aria-checked="true"] { background: var(--teal); color: #fff; }
.wes-waluta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--druk-dim); }
.wes-waluta select, .wes-pole input {
  font: inherit; font-size: 14px; color: var(--druk); background: var(--papier);
  border: 1px solid var(--ramka-mocna); border-radius: 3px; padding: 6px 8px;
}
.wes-kwoty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wes-kwota {
  padding: 14px 8px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--papier); color: var(--druk); border: 1px solid var(--ramka-mocna); border-radius: 4px;
}
.wes-kwota:hover { border-color: var(--teal); }
.wes-kwota[aria-checked="true"] { border: 2px solid var(--teal); background: var(--podklad-mocny); padding: 13px 7px; }
.wes-kwota:focus-visible, .wes-przelacznik button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.wes-inna { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--druk-dim); }
.wes-pole { display: flex; align-items: center; gap: 8px; }
.wes-pole input { width: 160px; font-variant-numeric: tabular-nums; }
.wes-blad { margin: 0 !important; font-size: 12.5px; color: var(--s4); }
.wes-przycisk { width: 100%; margin-top: 2px; }
.wes-przycisk:disabled { opacity: .5; cursor: not-allowed; }
.wes-wynik { margin: 0 !important; padding: 9px 12px; border-left: 3px solid var(--teal); background: var(--podklad); font-size: 13.5px; }
.wsparcie-serwis h3 { margin: 18px 0 6px; font-size: 15px; }
@media (max-width: 420px) {
  .wes-kwota { font-size: 16px; padding: 12px 4px; }
}

/* ---------- udostępnianie ---------- */
#sz-obserwuj { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#sz-obserwuj .ig-obserwuj { margin-left: 0; }
.udost-przycisk {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--podklad); border: 1px solid var(--ramka-mocna);
  border-radius: 2px; padding: 4px 10px; font-size: 11.5px; color: var(--druk); line-height: 1.2;
}
.udost-przycisk:hover, .udost-przycisk[aria-expanded="true"] { border-color: var(--teal); }
.udost-przycisk:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.udost-ikona { width: 13px; height: 13px; flex: none; }
.udost-naglowek { pointer-events: auto; display: inline-flex; }
.udost-naglowek .udost-przycisk { background: transparent; }
.lb-akcje { display: flex; justify-content: flex-end; margin: 6px 0 2px; }

.udost-okno {
  position: fixed; top: 0; left: 0; z-index: 40; width: 320px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--tlo); border: 1px solid var(--panel-edge); border-radius: 4px;
  box-shadow: var(--cien); padding: 12px 14px 10px; color: var(--druk);
}
.udost-okno[hidden] { display: none; }
.udost-glowa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.udost-tytul { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--druk-dim); }
.udost-zamknij { background: none; border: 0; font-size: 18px; line-height: 1; color: var(--druk-dim); padding: 0 2px; }
.udost-zamknij:hover { color: var(--druk); }
.udost-obiekt { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.udost-tekst {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px;
  font: inherit; font-size: 12.5px; line-height: 1.45; color: var(--druk);
  background: var(--podklad); border: 1px solid var(--ramka); border-radius: 2px; padding: 6px 8px;
}
.udost-kanaly { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 9px 0 7px; }
.udost-kanal {
  display: block; text-align: center; text-decoration: none; font-size: 12.5px; color: var(--druk);
  background: var(--podklad); border: 1px solid var(--ramka); border-radius: 2px; padding: 6px 8px;
}
.udost-kanal:hover { border-color: var(--teal); }
.udost-kanal:focus-visible, .udost-akcja:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.udost-systemowe { grid-column: 1 / -1; background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.udost-narzedzia { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.udost-akcja {
  font-size: 12px; color: var(--druk); background: none; border: 1px dashed var(--ramka-mocna);
  border-radius: 2px; padding: 5px 8px;
}
.udost-akcja:hover { border-style: solid; border-color: var(--teal); }
.udost-akcja.ok { border-style: solid; border-color: var(--teal); color: var(--teal); }
.udost-karta { width: 100%; margin-top: 7px; font-weight: 600; border-style: solid; }
.udost-uwaga { margin: 6px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--druk-dim); }
@media (max-width: 700px) {
  .udost-naglowek .udost-przycisk span { display: none; }
}

/* Wersja publiczna bez operatora płatności: bez przycisku w nagłówku. */
html[data-bez-platnosci] .nav-wesprzyj { display: none; }

/* Tablica zaufania (ranking.html). Link w nawigacji widać tylko tam, gdzie
   build dał atrybut data-ranking (wersja testowa albo ranking odkryty). */
html:not([data-ranking]) .nav-ranking { display: none; }

/* Globus historii (history.globurns.com). Link widać tylko tam, gdzie build dał
   atrybut data-history (wersja testowa albo History opublikowany). */
html:not([data-history]) .nav-history { display: none; }
/* Pomoc nie ma jeszcze kont, więc nie zna poziomu użytkownika. Jeśli History
   wymaga poziomu wyższego niż publiczny, link zostaje ukryty do czasu wspólnych kont. */
html[data-history]:not([data-history="public"]) .nav-history { display: none; }
.ranking .rk-test { border: 1px solid rgba(200,150,50,.5); background: rgba(224,153,63,.1); border-radius: 3px; padding: 8px 12px; font-size: 13px; }
.rk-przewijaj { overflow-x: auto; }
.rk-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rk-tabela th, .rk-tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--panel-edge); vertical-align: middle; }
[dir="rtl"] .rk-tabela th, [dir="rtl"] .rk-tabela td { text-align: right; }
.rk-tabela th { font-weight: 600; color: var(--druk-dim); white-space: nowrap; }
.rk-tabela .rk-liczba { text-align: right; font-variant-numeric: tabular-nums; }
.rk-tabela td:first-child { color: var(--druk-dim); width: 2em; }
.rk-tabela a { color: var(--druk); }
.rk-pasek { display: inline-block; width: 60px; height: 6px; background: var(--podklad-mocny, rgba(0,0,0,.08)); vertical-align: middle; border-radius: 3px; overflow: hidden; }
.rk-pasek span { display: block; height: 100%; background: var(--s2); }
.rk-brak { color: var(--druk-dim); font-style: italic; white-space: nowrap; }
.rk-ile { font-weight: 400; color: var(--druk-dim); font-size: 14px; }
.rk-tabela td:nth-child(n+6) { white-space: nowrap; }

/* Strona "In development" (warstwa w przygotowaniu). */
.w-przygotowaniu .dev-znak { display: inline-block; margin: 0 0 12px; padding: 2px 10px; border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--s1, #EFC15E); color: #221703; }
.w-przygotowaniu .dev-powrot { display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 3px; background: var(--akcent); color: #fff; text-decoration: none; font-weight: 600; }