/* Xinje UI — schematy przepływu sygnału (inc/schematy.php). Wzór: topologia z konceptu xinje-io-system-v3-light.html
   (linie .xui-sch-f ze stroke-dasharray 7 9 i animacją stroke-dashoffset, węzły z zaokrąglonymi rogami).
   Ładowany tylko tam, gdzie jest schemat (link dopina xui_schemat przy pierwszym schemacie na stronie).
   Kolory: zmienne --xui-* motywu wtyczki (tryb ciemny: klasa body.xui-dark, przełącznik „Ciemny” w pasku); wartości po przecinku = zapas bez motywu. */
.xui-sch{margin:18px 0;padding:0;
	--xui-sch-tx:var(--xui-tx,#0b1424);--xui-sch-mu:var(--xui-mu,#44546e);--xui-sch-bg:var(--xui-bg,#fff);--xui-sch-ln:var(--xui-ln,#d3dcec)}
.xui-sch svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
.xui-sch .xui-sch-p{display:none}
.xui-sch text{font-family:inherit}

/* zdjęcie produktu w węźle (1.0.21): biała ramka (zdjęcia produktów mają białe tło także w trybie ciemnym), obraz wpisany w ramkę */
.xui-sch-fb{fill:#fff;stroke:var(--nl);stroke-width:1}
.xui-sch-fl{cursor:pointer;outline:none}
.xui-sch-fl:hover .xui-sch-fb{stroke-width:2.6;stroke:var(--lc)}
.xui-sch-fd{margin:0;padding:0}
.xui-sch-fd img.xui-sch-fi{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:0;padding:0;border:0;box-shadow:none;background:none}

/* węzły */
.xui-sch-n .xui-sch-r{fill:var(--nb);stroke:var(--nl);stroke-width:1.7;transition:stroke-width .15s}
.xui-sch-n.xui-sch-prz .xui-sch-r{stroke-dasharray:6 5;stroke-width:1.5}
.xui-sch-t{fill:var(--xui-sch-tx);font-weight:800}
.xui-sch-s{fill:var(--xui-sch-mu);font-size:11.5px}
.xui-sch-g{font-size:10.5px;font-weight:700;fill:var(--lc)}
/* cały klocek jest linkiem (1.0.22): wskaźnik ręki, wyraźne podświetlenie tła i ramki po najechaniu, obrys z klawiatury (focus-visible) */
.xui-sch-n a{cursor:pointer;outline:none}
.xui-sch-n a:hover .xui-sch-r{stroke-width:3;fill:var(--nh,var(--nb))}
.xui-sch-n a:hover .xui-sch-t{text-decoration:underline}
.xui-sch-n a:focus-visible .xui-sch-r{stroke:var(--xui-br,#0072c6);stroke-width:3.6;fill:var(--nh,var(--nb))}
.xui-sch-n a:focus-visible .xui-sch-t{text-decoration:underline}
.xui-sch-n a:active .xui-sch-r{stroke-width:3.6}
.xui-sch-fl:focus-visible .xui-sch-fb{stroke:var(--xui-br,#0072c6);stroke-width:3.2}

/* połączenia: linie z animowanym przepływem, grot, etykieta z aureolą tła */
.xui-sch-f{stroke:var(--lc);stroke-width:2.3;stroke-dasharray:7 9;animation:xui-sch-flow 1.1s linear infinite}
.xui-sch-a{fill:var(--lc)}
.xui-sch-e{fill:var(--lc);font-size:11.5px;font-weight:700;paint-order:stroke;stroke:var(--xui-sch-bg);stroke-width:5px;stroke-linejoin:round}
@keyframes xui-sch-flow{to{stroke-dashoffset:-16}}

/* paleta: tło węzła (--nb), obrys (--nl), linia (--lc) — kolory ze wzoru (jasny), ciemniejsze tła i jaśniejsze linie w trybie ciemnym */
.xui-sch-k-niebieski{--nb:#e3edff;--nh:#d2e2ff;--nl:#7da3f0;--lc:#2f5fd0}
.xui-sch-k-turkus{--nb:#dcfaf3;--nh:#c6f4ea;--nl:#34c8b1;--lc:#0d8f7d}
.xui-sch-k-niebo{--nb:#e4f4fe;--nh:#d1ecfd;--nl:#52bdf8;--lc:#0284c7}
.xui-sch-k-zielony{--nb:#e3fbeb;--nh:#cef7da;--nl:#56d985;--lc:#15803d}
.xui-sch-k-bursztyn{--nb:#fef6dd;--nh:#fdeec0;--nl:#f0b32c;--lc:#b45309}
.xui-sch-k-fiolet{--nb:#f6f0fe;--nh:#eadcfd;--nl:#bf86fa;--lc:#8b3fd1}
.xui-sch-k-roz{--nb:#fdeaf1;--nh:#fbd9e5;--nl:#f08aaa;--lc:#be1e56}
.xui-sch-k-szary{--nb:#f1f4f8;--nh:#e3e8f0;--nl:#b6c1d0;--lc:#5b6b80}
.xui-dark .xui-sch-k-niebieski{--nb:#14243f;--nh:#1d3560;--nl:#4f78c8;--lc:#7fa8ff}
.xui-dark .xui-sch-k-turkus{--nb:#0f2e2a;--nh:#16453f;--nl:#2aa896;--lc:#3ed8c3}
.xui-dark .xui-sch-k-niebo{--nb:#0f2a3d;--nh:#17415b;--nl:#3aa6dc;--lc:#4fc3f7}
.xui-dark .xui-sch-k-zielony{--nb:#0f2e1c;--nh:#17452b;--nl:#3cb866;--lc:#4ade80}
.xui-dark .xui-sch-k-bursztyn{--nb:#33280c;--nh:#4a3a12;--nl:#d19a1d;--lc:#fbbf24}
.xui-dark .xui-sch-k-fiolet{--nb:#261a38;--nh:#392752;--nl:#9a63d6;--lc:#c792ff}
.xui-dark .xui-sch-k-roz{--nb:#3a1626;--nh:#552136;--nl:#d4688c;--lc:#ff7da6}
.xui-dark .xui-sch-k-szary{--nb:#17212e;--nh:#243142;--nl:#4a5b72;--lc:#9aa8bb}

/* legenda i lista „Na schemacie” */
.xui-sch figcaption{margin-top:12px;font-size:13px;color:var(--xui-sch-mu)}
.xui-sch-leg{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 10px;padding:0;list-style:none}
.xui-sch-leg li{display:flex;align-items:center;gap:9px}
.xui-sch-leg i{width:22px;height:4px;border-radius:3px;background:var(--lc);display:inline-block}
.xui-sch-lnk{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.xui-sch-lnk b{font-weight:700;color:var(--xui-sch-tx)}
.xui-sch-lnk ul{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none}
.xui-sch-lnk li{margin:0}
.xui-sch-lnk a{font-weight:600}
.xui-sch-lnk span{color:var(--xui-sch-mu)}
.xui-sch-sek{margin:26px 0}
.xui-sch-wyn{margin-top:22px}
.xui-sch-wyn h3{margin-bottom:0}
.xui-sch-wyn-alt{margin-top:28px}

/* opcja pion: tylko układ pionowy, na każdej szerokości */
.xui-sch.xui-sch-pion .xui-sch-p{display:block}
.xui-sch-wiecej{margin:14px 0 0;text-align:center;font-weight:700}
.xui-sch-lnk a.xui-sch-lp{font-weight:400;font-family:var(--xui-mono,ui-monospace,Consolas,monospace);font-size:12.5px}

/* wąski ekran: układ pionowy (węzły jeden pod drugim), na szerokim — poziomy */
@media (max-width:760px){
	.xui-sch .xui-sch-w{display:none}
	.xui-sch .xui-sch-p{display:block}
}
/* bez animacji, gdy użytkownik ją wyłączył w systemie */
@media (prefers-reduced-motion:reduce){
	.xui-sch-f{animation:none;stroke-dasharray:none}
	.xui-sch-n .xui-sch-r{transition:none}
}