/* Powloka programu firmowego. Tokeny i elementy wspolne: radar.css (ksiega 1.3). Tu tylko to, czego Radar nie ma. */
.ukryte { position: absolute; }
.belka { gap: 24px; padding: 0 24px 0 20px; }
.belka__szukaj { flex: 1; max-width: 520px; margin-left: 12px; }
.belka__szukaj input { background: var(--bg-3); min-height: 42px; }
.podpow { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 70vh; overflow: auto; padding: 10px; border: 1px solid var(--line-d2); border-radius: 12px; background: var(--bg-2); }
.podpow .etykieta { padding: 8px 10px 4px; }
.podpow a { display: block; padding: 7px 10px; border-radius: 8px; text-decoration: none; }
.podpow a:hover, .podpow a:focus-visible { background: var(--bg-3); }
.podpow b { display: block; font: 500 14px/1.3 var(--f-body); color: var(--tx-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podpow a span { display: block; font-size: 12px; color: var(--mu-d); }


.obszar { min-width: 0; display: flex; flex-direction: column; }
.tresc-p { flex: 1; width: 100%; max-width: 1320px; padding: 28px 32px 48px; }

.glowa { margin-bottom: 18px; }
.glowa .etykieta { margin-bottom: 6px; }
.podglad { margin-bottom: 22px; }
.pig { text-decoration: none; background: none; font: 400 13.5px var(--f-body); }
.pig--akt { border-color: var(--lime); background: rgba(169, 205, 38, .22); color: var(--tx-d); box-shadow: inset 0 0 0 1px var(--lime); }
.link { padding: 0; border: 0; background: none; color: var(--lime-tx); font: inherit; text-decoration: underline; cursor: pointer; }

.bloki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; align-items: start; }
.blok { min-width: 0; scroll-margin-top: 140px; }
.blok--2 { grid-column: 1 / -1; }
.blok__glowa { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--tx-d); }
.blok__glowa h2 { font-size: 17px; }
.blok__glowa h2 a { text-decoration: none; }
.blok__glowa h2 a:hover { color: var(--lime-tx); }
.blok__glowa .zr { margin-left: auto; }
.blok__ster { display: flex; gap: 2px; margin-left: 4px; }
.blok__ster button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-d2); border-radius: 8px; background: var(--bg-2); color: var(--tx-d); cursor: pointer; }
.blok__ster button:hover:not(:disabled) { border-color: var(--lime-tx); }
.blok__ster button:disabled { opacity: .35; cursor: default; }
.blok__ster .i { width: 15px; height: 15px; }
.edycja { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 24px; padding: 14px 16px; border: 1px dashed var(--line-3); border-radius: 12px; background: var(--bg-2); }
.edycja p { margin: 0; flex-basis: 100%; }
.zr { display: inline-flex; align-items: center; gap: 5px; font: 400 11px/1 var(--f-mono); color: var(--mu-d); white-space: nowrap; }
.zr .i { width: 13px; height: 13px; }
.zr--opt { color: var(--tx-d2); }

.wiersze { margin: 0; padding: 0; list-style: none; }
.wiersz { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-d); min-width: 0; }
.wiersz > div:not(.wiersz__k) { flex: 1; min-width: 0; }
.wiersz__t { display: block; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
a.wiersz__t:hover { color: var(--lime-tx); }
.wiersz__p { display: block; margin-top: 1px; font-size: 13px; color: var(--mu-d); text-decoration: none; overflow-wrap: anywhere; }
a.wiersz__p:hover { color: var(--lime-tx); }
.wiersz__k { flex: none; text-align: right; }
.wiersz__k small, .wiersz__k .data + small { display: block; font: 400 12px/1.4 var(--f-mono); color: var(--mu-d); white-space: nowrap; }
.wiersz__k small.pilne { color: var(--pilne); }
.wiersz--h { align-items: baseline; }
.kwota { font: 600 15px/1.3 var(--f-disp); white-space: nowrap; }
.pilne, .tab .pilne { color: var(--pilne); }
.tab th.num, .tab td.num { text-align: right; white-space: nowrap; }
.ptaszek { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--line-4); cursor: pointer; transition: color .15s; }
.ptaszek:hover { color: var(--lime-tx); }
.pusty { margin: 0; padding: 16px 0; color: var(--mu-d); }
.pusty a { color: var(--tx-d); }
.fakty--blok { margin-top: 14px; }
.fakt.fakt--drugi { border-left-color: var(--line-d2); }
.fakt dd.fakt__t { font-size: 15px; font-weight: 500; }
.lejek { margin: 0; padding: 8px 0 0; list-style: none; }
.lejek li { display: grid; grid-template-columns: 96px minmax(40px, 1fr) auto 24px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-d); }
.lejek small { font: 400 12px var(--f-mono); color: var(--mu-d); text-align: right; }
.pas { display: block; height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.pas i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--lime); }

.dwie { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 48px; align-items: start; margin-top: 8px; }
.kol { min-width: 0; }
.sekcja:first-child { border-top: 1px solid var(--line-d); }
.sekcja__g { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sekcja__g h2 { margin: 0; }
.wpis { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.wpis select, .wpis input { min-height: 40px; }
.kv { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 10px; }
.kv dt { color: var(--mu-d); font-size: 13.5px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.optima h3 { margin: 16px 0 2px; }
.rozwin { margin-top: 10px; }
.rozwin summary { color: var(--lime-tx); cursor: pointer; font: 600 14px var(--f-disp); padding: 4px 0; }
.rozwin form { margin-top: 10px; align-items: end; }
.stos { display: grid; gap: 12px; justify-items: stretch; }
.stos--waska { max-width: 420px; margin-top: 20px; }
.stos .btn { justify-self: start; }
.nowe { margin-bottom: 14px; align-items: end; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 170px auto; }
.narzedzia__q { flex: 1; min-width: 220px; }
.narzedzia__q input { min-height: 38px; background: var(--bg-2); }
.narzedzia__q button { top: 3px; }
.stronicuj { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.karta-g { margin-bottom: 0; }

.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 14px; overflow-x: auto; margin-top: 20px; padding-bottom: 8px; }
.kol-k { min-width: 0; }
.kol-k h2 { font-size: 15px; }
.kol-k__s { display: block; font: 400 12px var(--f-mono); color: var(--mu-d); margin: 2px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--tx-d); }
.szansa { display: grid; gap: 3px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--line-d); border-radius: 12px; background: var(--bg-2); }
.szansa b { font: 600 14.5px/1.3 var(--f-disp); }
.szansa a, .szansa__s { font-size: 13px; color: var(--mu-d); }
.szansa__d { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.szansa__d .btn { min-height: 32px; padding: 0 10px; }
.kroki { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 8px; }
.krok { min-height: 36px; padding: 0 14px; border: 1px solid var(--line-d2); border-radius: 999px; background: none; color: var(--tx-d2); font: 500 13.5px var(--f-disp); cursor: pointer; }
.krok:hover { border-color: var(--lime-tx); }
.krok--po { background: var(--bg-3); }
.krok--akt { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.modul-p { max-width: 62ch; padding: 40px 0; }
.modul-p h1 { margin: 8px 0 14px; }
.modul-p__o { font-size: 17px; color: var(--tx-d2); }
.pokaz-konta { margin-top: 30px; padding-top: 18px; max-width: 400px; border-top: 1px solid var(--line-d); }
.pokaz-konta__lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pokaz-konta .pig { color: var(--tx-d); }

@media (max-width: 1080px) { .dwie { grid-template-columns: minmax(0, 1fr); } .bloki { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
	.tresc-p { padding: 20px 16px 36px; }
	.belka { gap: 12px; padding: 0 12px; }
	.belka__logo img { height: 34px; }
	.uzytk__nazwa { display: none; }
	.nowe, .wpis { grid-template-columns: minmax(0, 1fr); }
	.tab { display: block; overflow-x: auto; }
}

.stopka { background: var(--bg); margin-top: auto; }
.belka__szukaj { min-width: 0; }
.belka__prawa { flex: none; }
@media (max-width: 820px) {
	html, body { overflow-x: clip; }
	.belka__szukaj { margin-left: 0; }
	.belka__logo img { height: 30px; }
	.fakty { gap: 12px 20px; }
	.wiersz__k { max-width: 45%; }
	.wiersz__k small, .wiersz__k .data + small { white-space: normal; }
}
.wejscie__forma .pokaz-konta__lista { display: flex; max-width: none; margin-top: 10px; }

/* Logowanie: zdjecie koncertowe z tla pulpitu zamiast czarnego panelu */
.wejscie__marka { position: relative; isolation: isolate; overflow: hidden; background: #0F0F0F; }
.wejscie__marka::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("img/tlo-logowanie.jpg") 58% 50% / cover no-repeat; filter: grayscale(1) sepia(.18) contrast(1.1) brightness(1.18); }
.wejscie__marka::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15, 15, 15, .82) 0, rgba(15, 15, 15, .35) 38%, rgba(15, 15, 15, 0) 62%), linear-gradient(to bottom, rgba(15, 15, 15, .5) 0, rgba(15, 15, 15, 0) 28%); }

/* ===== Zakladki: wyrazne, z ikona; grubosc pisma stala (bez przeskakiwania) ===== */

/* ===== Szerokosc: ekrany wypelniaja dostepne miejsce, jednakowo na kazdej stronie ===== */
.tresc-p { max-width: none; padding: 28px clamp(20px, 2.6vw, 56px) 56px; }
.bloki { grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); }
.stos--waska { max-width: 460px; }

/* ===== Analityka ===== */
.mies { display: flex; align-items: center; gap: 8px; }
.fakty--duze { gap: 18px 44px; }
.fakty--duze .fakt dd { font-size: 24px; }
.fakty--duze .fakt dd small, .fakty--blok .fakt dd small { display: block; font: 400 12px var(--f-mono); letter-spacing: 0; color: var(--mu-d); margin-top: 2px; }
.fakt--ok { border-left-color: var(--lime-tx); }
.fakt--ok dd { color: var(--lime-tx); }
.tab--analiza td.num, .tab--analiza th.num { white-space: nowrap; }
.kol-pasek { width: 16%; min-width: 80px; }
.tab .suma td { font-weight: 600; border-top: 2px solid var(--tx-d); background: var(--bg-2); }
.trend { margin: 10px 0 0; padding: 0; list-style: none; }
.trend li { display: grid; grid-template-columns: 150px minmax(80px, 1fr) 130px 160px; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line-d); }
.trend li.akt { background: var(--bg-2); box-shadow: -10px 0 0 var(--bg-2), 10px 0 0 var(--bg-2); }
.trend a { text-decoration: none; text-transform: capitalize; }
.trend a:hover { color: var(--lime-tx); }
.trend small { font: 400 12px var(--f-mono); color: var(--mu-d); text-align: right; }
.trend .kwota { text-align: right; }
.pas--cel { position: relative; overflow: visible; height: 10px; }
.pas--cel u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tx-d); text-decoration: none; }
.cele { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; align-items: end; }
.cele .btn { justify-self: start; }

/* ===== Menu modulow: wysuwane spod przycisku „Menu” (trzy kreski -> X); ekrany zawsze na cala szerokosc ===== */
.powloka { flex: 1; display: block; min-width: 0; }
.obszar, .tresc-p { min-width: 0; }
.burger { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 13px; flex: none; border: 1px solid var(--line-d2); border-radius: 999px; background: none; color: var(--tx-d); font: 600 14.5px var(--f-disp); cursor: pointer; transition: border-color .15s, background-color .15s; }
.burger:hover { border-color: var(--lime); background: var(--bg-3); }
.burger__ikona { position: relative; width: 20px; height: 14px; flex: none; }
.burger__ikona i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s var(--ease), opacity .15s, top .22s var(--ease); }
.burger__ikona i:nth-child(1) { top: 0; }
.burger__ikona i:nth-child(2) { top: 6px; }
.burger__ikona i:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__ikona i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__ikona i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__ikona i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.burger[aria-expanded="true"] { border-color: var(--lime); }

.szyna { --bg: #0F0F0F; --bg-2: #161616; --bg-3: #1C1C1C; --line-d: #2A2A2A; --line-d2: #3A3A3A; --tx-d: #F4F4F4; --tx-d2: #D0D0D0; --mu-d: #B8B8B8; --lime-tx: #A9CD26; color-scheme: dark;
	position: fixed; z-index: 60; top: var(--belka); bottom: 0; left: 0; width: min(310px, 88vw); overflow-y: auto; padding: 18px 14px 28px; background: var(--bg); color: var(--tx-d);
	border-right: 1px solid var(--line-d2); box-shadow: 8px 0 32px rgba(0, 0, 0, .35); transform: translateX(-104%); visibility: hidden; transition: transform .22s var(--ease), visibility 0s linear .22s; }
.menu-otwarte .szyna { transform: none; visibility: visible; transition: transform .22s var(--ease), visibility 0s; }
.szyna__t { display: block; margin: 0 0 10px 12px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mu-d); }
.szyna ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.szyna a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px; border-radius: 12px; color: var(--tx-d2); font: 500 16px/1.2 var(--f-disp); text-decoration: none; transition: background-color .15s, color .15s; }
.szyna a:hover { background: var(--bg-3); color: var(--tx-d); }
.szyna a.akt { background: var(--bg-3); color: var(--tx-d); }
.szyna a.akt::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--lime); }
.szyna a.akt .i { color: var(--lime); }
.szyna .i { width: 20px; height: 20px; }
.szyna a[data-plan] span { opacity: .75; }
.szyna b { margin-left: auto; font: 400 12px var(--f-mono); color: var(--mu-d); }
.szyna a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.szyna-tlo { position: fixed; z-index: 55; inset: var(--belka) 0 0 0; background: rgba(15, 15, 15, .55); opacity: 0; pointer-events: none; transition: opacity .22s; }
.menu-otwarte .szyna-tlo { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .szyna, .szyna-tlo, .burger__ikona i { transition: none !important; } }
@media (max-width: 820px) { .burger__t { display: none; } .burger { padding: 0 13px; } }
@media (min-width: 1100px) { .belka { gap: 20px; } }

.przewija { max-width: 100%; overflow-x: auto; }
.przewija .tab { min-width: 980px; }

/* Logowanie: nazwa programu, opis i podpis nad haslem */
.wejscie__dol { display: grid; gap: 12px; }
.wejscie__nad { font: 500 12px/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--lime); }
.wejscie__opis { margin: 6px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--tx-d2); }
.wejscie__opis b { font: 600 1em var(--f-disp); color: var(--tx-d); }
.belka__logo .belka__nazwa { white-space: nowrap; }
@media (max-width: 900px) { .belka__logo .belka__nazwa { display: none; } }
@media (min-width: 901px) { .belka__logo .belka__nazwa { display: block; } }

/* Przycisk menu: same trzy kreski, bez napisu i bez obwodki (jak w B2B i poradnikach) */
.burger { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; border: 0; border-radius: 8px; background: none; }
.burger:hover { border: 0; background: none; color: var(--lime); }
.burger[aria-expanded="true"] { border: 0; color: var(--lime); }
.burger:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.burger__ikona { width: 24px; height: 16px; }
.burger__ikona i { height: 2.5px; }
.burger__ikona i:nth-child(2) { top: 6.75px; }
.burger__ikona i:nth-child(3) { top: 13.5px; }
.burger[aria-expanded="true"] .burger__ikona i:nth-child(1) { top: 6.75px; }
.burger[aria-expanded="true"] .burger__ikona i:nth-child(3) { top: 6.75px; }

/* ===== Stopka zawsze na dole okna; Start nie zostawia pasa pod spodem ===== */
.powloka { display: flex; flex-direction: column; }
.obszar { flex: 1; }
.tresc-p { flex: 1 0 auto; }

/* ===== Kanban: przeciaganie kart ===== */
.kanban { align-items: stretch; }
.kol-k { display: flex; flex-direction: column; min-height: 220px; border-radius: 14px; transition: background-color .15s, box-shadow .15s; }
.kol-k__karty { display: grid; gap: 8px; align-content: start; }
.kol-k__karty .szansa { margin: 0; }
.kol-k__pusto { margin: 10px 0 0; padding: 18px 12px; border: 1px dashed var(--line-d2); border-radius: 12px; text-align: center; font-size: 13px; color: var(--mu-d); }
.kol-k--cel { background: rgba(169, 205, 38, .13); box-shadow: inset 0 0 0 2px var(--lime); }
.szansa { cursor: grab; user-select: none; -webkit-user-select: none; transition: box-shadow .15s, opacity .15s; }
.szansa:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.szansa--chwycona { opacity: .35; }
.szansa--duch { position: fixed; z-index: 90; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); transform: rotate(1.5deg); background: var(--bg-2); }
.szansa__ster { display: flex; gap: 6px; }
.szansa__ster form { margin: 0; }
body.przeciaganie, body.przeciaganie * { cursor: grabbing !important; user-select: none; }
.glowa .mut { margin: 4px 0 0; }

/* ===== Dolna belka stanu: zawsze na samym dole okna, stale widoczna ===== */
.stopka { position: sticky; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 8px 24px; padding: 0 20px; min-height: 40px; margin-top: auto; flex-wrap: nowrap; border-top: 1px solid var(--line-d2); }
.stopka__l, .stopka__p { display: flex; align-items: center; gap: 8px 20px; min-width: 0; }
.stopka__gdzie { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; justify-content: center; font: 500 13px/1 var(--f-disp); color: var(--tx-d2); overflow: hidden; white-space: nowrap; }
.stopka__gdzie span { overflow: hidden; text-overflow: ellipsis; }
.stopka__gdzie span[aria-current] { color: var(--tx-d); }
.stopka__gdzie i { color: var(--lime); font-style: normal; }
.stopka__el { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1 var(--f-mono); color: var(--mu-d); white-space: nowrap; }
.stopka__el b { font-weight: 500; color: var(--tx-d); }
.stopka__el .i { width: 13px; height: 13px; }
.stopka__dane i { display: inline-block; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--lime); }
.stopka__dane--demo { color: var(--pilne); }
.stopka__dane--demo i { background: var(--pilne); }
.stopka .wj { font-size: 15px; margin: 0; }
@media (max-width: 1280px) { .stopka__opt { display: none; } }
@media (max-width: 1000px) { .stopka__gdzie { display: none; } .stopka { justify-content: space-between; } }
@media (max-width: 700px) { .stopka { padding: 0 12px; } .stopka__p .stopka__el { display: none; } .stopka__l .stopka__el:first-child { display: none; } }

/* ===== Menu na komputerze: panel przyklejony do lewej krawedzi okna (fixed), tresc przesuwa sie marginesem ===== */
:root { --stopka-h: 40px; --menu-szer: 290px; }
@media (min-width: 821px) {
	.powloka { display: block; }
	.szyna { position: fixed; top: var(--belka); bottom: var(--stopka-h); left: 0; z-index: 15; width: var(--menu-szer); height: auto; box-sizing: border-box; overflow-x: hidden; overflow-y: auto;
		transform: translateX(-100%); box-shadow: none; visibility: hidden; transition: transform .22s var(--ease), visibility 0s linear .22s; }
	.menu-otwarte .szyna { transform: none; visibility: visible; transition: transform .22s var(--ease), visibility 0s; }
	.szyna-tlo { display: none !important; }
	.obszar { margin-left: 0; min-height: calc(100vh - var(--belka) - var(--stopka-h)); transition: margin-left .22s var(--ease); }
	.menu-otwarte .obszar { margin-left: var(--menu-szer); }
}
@media (prefers-reduced-motion: reduce) { .obszar, .szyna { transition: none !important; } }

/* Przycisk menu: tylko trzy kreski / X, w kazdym stanie bez obwodki, ramki, tla i kółka */
.burger, .burger:hover, .burger:focus, .burger:focus-visible, .burger:active, .burger[aria-expanded="true"] { border: 0; outline: 0; box-shadow: none; background: none; border-radius: 0; -webkit-tap-highlight-color: transparent; }
.burger:hover, .burger:focus-visible, .burger[aria-expanded="true"] { color: var(--lime); }
.burger::-moz-focus-inner { border: 0; }

/* ===== Zakladki: jedna wspolna, stala szerokosc dla wszystkich (Start tez) ===== */
:root { --zak-szer: 210px; }

/* ===== Zakladki: kolejne rzedy (karta pod karta), wszystkie widoczne, jednakowa szerokosc ===== */

/* ===== Zakladki jak w przegladarce: tylko otwarte rekordy; tyle, ile sie miesci; reszta pod „+N” ===== */
:root { --zak-tlo: #C9C9C1; }
html[data-motyw="dark"] { --zak-tlo: #050505; }
.zakladki { position: sticky; top: var(--belka); z-index: 20; display: flex; align-items: flex-end; min-height: 46px; padding: 8px clamp(14px, 2vw, 40px) 0; background: var(--zak-tlo); }
.zakladki__t { align-self: center; margin: 0 14px 8px 0; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu-d); white-space: nowrap; }
.zakladki__lista { display: flex; flex: 1 1 auto; align-items: flex-end; min-width: 0; }
.zak { position: relative; display: flex; align-items: center; flex: 1 1 0; min-width: 150px; max-width: 240px; height: 38px; border-radius: 10px 10px 0 0; color: var(--mu-d); transition: background-color .15s; }
.zak:not(.akt):hover { background: rgba(255, 255, 255, .35); color: var(--tx-d); }
html[data-motyw="dark"] .zak:not(.akt):hover { background: rgba(255, 255, 255, .07); }
.zak a { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; height: 100%; padding: 0 4px 0 14px; font: 500 14.5px/1 var(--f-disp); color: inherit; text-decoration: none; }
.zak a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zak .i { width: 16px; height: 16px; flex: none; }
.zak form { margin: 0 8px 0 0; display: flex; }
.zak button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.zak button .i { width: 13px; height: 13px; }
.zak button:hover { background: rgba(0, 0, 0, .14); }
.zak:not(.akt):not(:last-child):not(:has(+ .zak.akt))::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line-3); opacity: .6; }
.zak.akt { background: var(--bg); color: var(--tx-d); box-shadow: inset 0 3px 0 var(--lime); }
.zak.akt .i { color: var(--lime-tx); }
.zak.akt::before, .zak.akt::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 10px; pointer-events: none; }
.zak.akt::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 10px, var(--bg) 10.5px); }
.zak.akt::after { right: -10px; background: radial-gradient(circle at 100% 0, transparent 10px, var(--bg) 10.5px); }
.zak--ukryta { display: none; }
.zak-wiecej { position: relative; flex: none; align-self: center; margin: 0 0 6px 12px; }
.zak-wiecej > button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 14px; border: 1px solid #0F0F0F; border-radius: 8px; background: #0F0F0F; color: #F4F4F4; font: 600 14px var(--f-disp); cursor: pointer; transition: border-color .15s; }
.zak-wiecej > button b { color: var(--lime); font-weight: 600; }
.zak-wiecej > button .i { width: 14px; height: 14px; }
.zak-wiecej > button:hover, .zak-wiecej > button[aria-expanded="true"] { border-color: var(--lime); }
html[data-motyw="dark"] .zak-wiecej > button { background: #262626; border-color: #3A3A3A; }
.zak-menu { position: absolute; z-index: 50; right: 0; top: calc(100% + 6px); width: min(320px, 86vw); max-height: 60vh; overflow-y: auto; padding: 8px; border: 1px solid #3A3A3A; border-radius: 12px; background: #0F0F0F; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.zak-menu .zak { flex: none; min-width: 0; max-width: none; height: 40px; border-radius: 8px; background: none; color: #D0D0D0; box-shadow: none; }
.zak-menu .zak:hover { background: #1C1C1C; color: #F4F4F4; }
.zak-menu .zak::after, .zak-menu .zak::before { display: none !important; }
.zak-menu .zak button:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 820px) { .zakladki__t { display: none; } .zak { min-width: 120px; } .zakladki { padding: 6px 8px 0; } }

/* ===== Zakladki: wyrazne krawedzie (ramka + odstep), bez cienkich separatorow ===== */
.zakladki__lista { gap: 4px; }
.zak { border: 1px solid rgba(0, 0, 0, .34); border-bottom: 0; background: rgba(255, 255, 255, .34); color: var(--tx-d2); }
.zak:not(.akt):hover { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .5); }
.zak:not(.akt):not(:last-child):not(:has(+ .zak.akt))::after { display: none; }
.zak.akt { background: var(--bg); border-color: rgba(0, 0, 0, .5); box-shadow: inset 0 3px 0 var(--lime), 0 -2px 8px rgba(0, 0, 0, .12); }
.zak.akt::before, .zak.akt::after { display: none; }
html[data-motyw="dark"] .zak { border-color: #3A3A3A; background: #161616; }
html[data-motyw="dark"] .zak:not(.akt):hover { background: #222; border-color: #555; }
html[data-motyw="dark"] .zak.akt { border-color: #555; box-shadow: inset 0 3px 0 var(--lime); }
.zak-menu .zak { border: 0; background: none; box-shadow: none; }
.zak-menu .zak:hover { background: #1C1C1C; }


/* ===== Wspolny wyglad wszystkich rozwijanych menu: panel z ramka, odstep 6 px, pozycje 10 x 14 px, zaokraglone ===== */
.uzytk__menu { padding: 6px; }
.uzytk__opis { padding: 10px 14px 12px; }
.uzytk__menu a, .uzytk__menu button { padding: 10px 14px; border-radius: 8px; }
.podpow { padding: 6px; }
.podpow .etykieta { padding: 8px 14px 4px; }
.podpow a { padding: 9px 14px; border-radius: 8px; }
.zak-menu { padding: 6px; }

/* Listy rozwijane (select): wlasna lista zamiast systemowej, z odstepem tekstu od krawedzi */
@supports (appearance: base-select) {
	select, ::picker(select) { appearance: base-select; }
	select::picker-icon { display: none; }
	select { align-items: center; }
	select button { align-items: center; padding: 0; }
	::picker(select) { box-sizing: border-box; min-width: max(anchor-size(width), 220px); max-height: min(360px, 60vh); margin-top: 6px; padding: 6px; border: 1px solid var(--line-d2); border-radius: 12px;
		background: var(--pole-bg); color: var(--tx-d); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
	select option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 14px; border-radius: 8px; font: 500 14.5px/1.3 var(--f-body); color: var(--tx-d); cursor: pointer; }
	select option:hover, select option:focus-visible { background: var(--bg-3); }
	select option:checked { background: rgba(169, 205, 38, .18); }
	select option::checkmark { order: 1; margin-left: auto; color: var(--lime-tx); }
}

/* ===== Poradniki ===== */
.poradniki { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; margin-top: 8px; }
.poradnik-karta { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 20px; border: 1px solid var(--line-d2); border-radius: 16px; background: var(--bg-2); transition: border-color .15s, box-shadow .15s; }
.poradnik-karta:hover { border-color: var(--lime-tx); box-shadow: 0 6px 22px rgba(0, 0, 0, .08); }
.poradnik-karta header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.poradnik-karta__kod { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--tx-d); color: var(--bg); font: 600 14px var(--f-mono); letter-spacing: .04em; }
.poradnik-karta__wers { font: 500 12px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--lime-tx); white-space: nowrap; }
.poradnik-karta h2 { font-size: 22px; line-height: 1.2; margin-top: 6px; }
.poradnik-karta h2 a { text-decoration: none; }
.poradnik-karta h2 a:hover { color: var(--lime-tx); }
.poradnik-karta__dla { margin: 0; font: 500 11px/1.3 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mu-d); }
.poradnik-karta__opis { margin: 4px 0 8px; color: var(--tx-d2); flex: 1; }
.poradnik-karta footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-d); }
.poradnik-karta footer .btn .i { width: 15px; height: 15px; }
.poradnik-karta__rozm { margin-left: auto; font-size: 12px; }