/* Blok 21 (zloty standard 26.10): aplikacja - pasek powiadomien B21-02,
   "Ustaw polaczenia" B21-04, mikrofon B21-05, aktualizacja B21-09, /aplikacja B19-10.
   Kolory jak w makiecie: czarne zloto; jasny motyw jasny wszedzie. */
.b21,.b21-pow{--a-tlo:#09090B;--a-karta:#101014;--a-ramka:#2B2B34;--a-linia:#22222A;
  --a-tytul:#F6F3EA;--a-szary:#A9A49A;--a-zl:#E8C96A;--a-zl-r:#8A6A12;--a-zl-t:#15120A;
  --a-ok:#4ADE80;--a-zloto:linear-gradient(135deg,#FBEFC2 0%,#E8C96A 45%,#B08A24 100%)}
:root[data-theme="light"] .b21,:root[data-theme="light"] .b21-pow{--a-tlo:#F7F5F1;--a-karta:#FFFFFF;--a-ramka:#E2DDD3;--a-linia:#ECE8E0;
  --a-tytul:#15120A;--a-szary:#5F5A50;--a-zl:#9A7616;--a-zl-r:#D9C27A;--a-zl-t:#15120A;
  --a-ok:#15803D;--a-zloto:linear-gradient(135deg,#FBEFC2 0%,#E8C96A 45%,#B08A24 100%)}

/* B21-02: nasz pasek "po co" nad dolnym menu; "Wlacz" dopiero otwiera okno systemu */
.b21-pow{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h,64px) + 12px + env(safe-area-inset-bottom));z-index:1600;
  display:flex;gap:12px;padding:14px;border-radius:14px;background:var(--a-karta);border:1px solid var(--a-zl-r);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.b21-pow[hidden]{display:none}
.b21-pow-ik{flex:none;width:22px;color:var(--a-zl);padding-top:1px}
.b21-pow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.b21-pow-t b{font-size:15px;font-weight:800;color:var(--a-tytul)}
.b21-pow-t > span{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--a-szary)}
.b21-g{display:flex;gap:10px;margin-top:10px}
.b21-b{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:12px;
  font:inherit;font-size:15px;font-weight:800;cursor:pointer;background:var(--a-tlo);color:var(--a-tytul);border:1px solid var(--a-ramka);text-decoration:none}
.b21-b-zl{background:var(--a-zloto);color:var(--a-zl-t);border-color:transparent}
@media (min-width:1024px){.b21-pow{left:auto;right:24px;bottom:24px;width:420px}}

/* B21-04 i /aplikacja (B19-10) */
.b21{max-width:560px;margin:0 auto;padding:18px 16px 32px;color:var(--a-tytul)}
.b21 h1{margin:0 0 6px;font-size:26px;font-weight:800;line-height:1.2;color:var(--a-tytul)}
.b21-lead{margin:0 0 16px;font-size:15px;font-weight:600;line-height:1.45;color:var(--a-szary)}
.b21-lista{border-radius:14px;background:var(--a-karta);border:1px solid var(--a-ramka);overflow:hidden}
.b21-w{display:flex;gap:12px;align-items:flex-start;padding:14px}
.b21-w + .b21-w{border-top:1px solid var(--a-linia)}
.b21-w[hidden]{display:none}
.b21-w svg{flex:none;width:20px;height:20px;color:var(--a-szary);margin-top:1px}
.b21-w b{display:block;font-size:15px;font-weight:800;color:var(--a-tytul)}
.b21-w small{display:block;font-size:13px;font-weight:700;color:var(--a-szary)}
.b21-w[data-s="ok"] svg,.b21-w[data-s="ok"] small{color:var(--a-ok)}
.b21-w[data-s="teraz"] svg,.b21-w[data-s="teraz"] small{color:var(--a-zl)}
.b21-guzik{display:flex;width:100%;min-height:52px;margin-top:18px;align-items:center;justify-content:center;border:0;border-radius:12px;
  background:var(--a-zloto);color:var(--a-zl-t);font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.b21-guzik[hidden]{display:none}
.b21-nie{display:block;margin:10px auto 0;padding:10px 16px;background:none;border:0;font:inherit;font-size:15px;font-weight:800;color:var(--a-tytul);cursor:pointer}
.b21-nota{margin:12px 0 0;font-size:13px;font-weight:600;line-height:1.5;color:var(--a-szary)}

/* B19-10 /aplikacja */
.b21-znak{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.b21-znak > span{flex:none;width:64px;height:64px;border-radius:14px;background:#09090B;border:1px solid var(--a-zl-r);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#E8C96A}
.b21-znak b{display:block;font-size:22px;font-weight:800}
.b21-znak small{display:block;font-size:13.5px;font-weight:700;color:var(--a-szary)}
.b21-cechy{list-style:none;margin:0 0 18px;padding:0}
.b21-cechy li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15px;font-weight:600;line-height:1.4;color:var(--a-tytul)}
.b21-cechy svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--a-zl)}
.b21-sklep{display:flex;width:100%;min-height:52px;align-items:center;justify-content:center;gap:10px;border-radius:12px;background:var(--a-zloto);color:var(--a-zl-t);font-size:16px;font-weight:800;text-decoration:none}
.b21-sek{margin:26px 0 6px;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--a-szary)}
.b21-tekst{margin:0;font-size:14.5px;font-weight:600;line-height:1.5;color:var(--a-tytul)}
.b21-ramka{margin-top:22px;padding:16px;border-radius:14px;background:var(--a-karta);border:1px solid var(--a-ramka)}
.b21-ramka h2{margin:0 0 4px;font-size:17px;font-weight:800}
.b21-ramka .b21-guzik{margin-top:12px}
.b21-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* B21-09: wersja za stara - pelny ekran z jednym guzikiem */
.b21-stara{--a-tlo:#09090B;--a-karta:#101014;--a-ramka:#2B2B34;--a-tytul:#F6F3EA;--a-szary:#A9A49A;--a-zl:#E8C96A;--a-zl-r:#8A6A12;--a-zl-t:#15120A;
  --a-zloto:linear-gradient(135deg,#FBEFC2 0%,#E8C96A 45%,#B08A24 100%);
  position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--a-tlo)}
:root[data-theme="light"] .b21-stara{--a-tlo:#F7F5F1;--a-karta:#FFFFFF;--a-ramka:#E2DDD3;--a-tytul:#15120A;--a-szary:#5F5A50;--a-zl:#9A7616;--a-zl-r:#D9C27A}
.b21-stara-k{width:100%;max-width:420px;padding:24px 18px;border-radius:14px;background:var(--a-karta);border:1px solid var(--a-ramka);text-align:center}
.b21-stara-ik{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--a-zl-r);color:var(--a-zl)}
.b21-stara h2{margin:14px 0 6px;font-size:22px;font-weight:800;color:var(--a-tytul)}
.b21-stara p{margin:0;font-size:15px;font-weight:600;line-height:1.45;color:var(--a-szary)}
.b21-stara .b21-guzik{text-decoration:none}
/* V2 (01.11): "Pozniej" w oknie aktualizacji - drugi guzik w stroju portalu (promien 12, cienka ramka), nie goly .btn. */
.b21-stara .b21-pozniej{display:flex;width:100%;min-height:52px;margin-top:10px;align-items:center;justify-content:center;border-radius:12px;
  border:1px solid var(--a-ramka);background:transparent;color:var(--a-tytul);font:800 16px var(--f-display,system-ui),sans-serif;cursor:pointer}

/* STREFA KASANIA (05.11, `tools/kasanie.mjs`): palec trafia w kwadrat co najmniej
   44x44 px, choc rysunek zostaje ten sam - przezroczysta warstwa wokol guzika
   (pseudo-element) lapie dotkniecie za niego. Wiekszy od 44 nie rosnie (`min`).
   `:where()` przy `position` ma zerowa wage, wiec kazda regula ekranu z wlasnym
   `position` wygrywa. */
:where(.b21-nota > a){position:relative}
.b21-nota > a::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}