/* Ten sam motyw lozy co na landingu, tyle ze kryjacy - panel potrzebuje
   nieprzezroczystych powierzchni, landing (strona.css) tych samych zmiennych w rgba.
   Stad granat zamiast zlota z alfa tam, gdzie strona.css stawia rgba(224, 196, 122, .05):
   pod tabela kont musi byc tlo, a nie przeswit. */
:root {
  --tlo: #080b12;
  --tlo-glebia: #04060b;
  --tlo-panel: #101827;
  --tlo-panel-2: #18213a;
  --kamien: #4a4130;
  --kamien-jasny: #7a6838;
  --akcent: #c9a227;
  --akcent-jasny: #e8cf92;
  --akcent2: #2c3e64;
  --akcent2-jasny: #8ea6cc;
  --akcent3: #8aa8d4;
  --grad: linear-gradient(120deg, #a8811f, #e8cf92 48%, #b8912f);
  --tekst: #efe7d7;
  --tekst-cichy: #a49a86;
  /* Barwy stanu sa NASYCONE, w przeciwienstwie do przygaszonych z landingu.
     Tam zielen i czerwien to drobny tekst, tutaj niosa stan konta, a szalwia
     i przykurzony roz obok cieplego zlota czytaly sie jak plesn i rdza.
     Sygnal ma byc sygnalem - chrom zostaje zloto-granatowy, stan jest czysty. */
  --zieleń: #34a56d;
  --czerwien: #e2564d;
  --pomarancz: #ef9c3c;
  --niebieski: #8aa8d4;
  /* Wspolne, ciemniejsze tlo pigulki stanu - JEDNO dla wszystkich stanow.
     Wczesniej tlo bralo barwe stanu (color-mix 14%), wiec zielen i czerwien
     siadaly na dwoch roznych podkladach i zaden nie mial porzadnego kontrastu.
     Teraz podklad jest staly i wglebiony wzgledem karty, a barwa niesie sam
     napis i obwodka - dzieki temu obie czytaja sie tak samo mocno. */
  --tlo-stanu: #0b1120;
  /* stan "laczy" bral --akcent3, czyli przygaszony blekit MARKI, przez co jako jedyny
     z czterech stanow wygladal na wyprany. Sygnal ma wlasny, nasycony blekit */
  --niebieski-stanu: #56a8f0;
  /* Atrament guzika "Uruchom" MUSI isc za motywem, bo zielen pod nim zmienia jasnosc:
     w nocy jest jasna (ciemny tusz), w dzien ciemna (jasny tusz). Jedna wartosc dla
     obu motywow daje w ktoryms z nich napis na granicy czytelnosci. */
  --atrament-startu: #0a2016;
  --tlo-poswiata: #0e1526;
  --tlo-pole: #060a11;
  --tlo-najazd: #1c2439;
  /* napis na zlotym tle guzika - w nocy ciemny atrament, w dzien kosc sloniowa.
     Biel na starym zlocie znika, stad ciemny domysl (to samo, co --atrament-guzika
     na landingu - obie nazwy zyja, bo .pxbtn jest wspolny dla strony i panelu) */
  --tekst-na-akcencie: #17120a;
  --atrament-guzika: #17120a;
  --naroznik: polygon(
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) 100%, 8px 100%,
    8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px));
}

/* Dzienna wersja tego samego motywu: pergamin zamiast nocy, zloto i granat zostaja,
   ale przyciemnione do kontrastu na jasnym - te same nazwy zmiennych, wiec reszta
   arkusza nie wie o zmianie. Uwaga na inwersje: --akcent-jasny jest tu CIEMNIEJSZY
   od --akcent, bo w dzien sluzy za kolor tekstu (loginy, naglowki), a nie za poswiate. */
:root[data-motyw="jasny"] {
  --tlo: #f2ead6;
  --tlo-glebia: #e6dcc2;
  --tlo-panel: #fffaf0;
  --tlo-panel-2: #faf3e2;
  --kamien: #d8c9a4;
  --kamien-jasny: #b39b63;
  --akcent: #8a6a12;
  --akcent-jasny: #6b5210;
  --akcent2: #2c3e64;
  --akcent2-jasny: #46608f;
  --akcent3: #35608f;
  --grad: linear-gradient(120deg, #8a6a12, #b8912f);
  --tekst: #241c0e;
  --tekst-cichy: #6b5f47;
  --zieleń: #1a8552;
  --czerwien: #c0392f;
  --pomarancz: #b9701a;
  --niebieski: #35608f;
  --tlo-stanu: #f0e7d0;
  --niebieski-stanu: #1d63a8;
  --atrament-startu: #f3fbf6;
  --tlo-poswiata: #fffaf0;
  --tlo-pole: #fffdf7;
  --tlo-najazd: #f0e6cd;
  --tekst-na-akcencie: #fffaf0;
  --atrament-guzika: #fffaf0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 480px at 8% -160px, rgba(201, 162, 39, .16), transparent 70%),
    radial-gradient(820px 460px at 94% -120px, rgba(44, 62, 100, .3), transparent 72%),
    radial-gradient(1200px 600px at 50% -200px, var(--tlo-poswiata) 0%, transparent 70%),
    var(--tlo);
  background-attachment: fixed;
  color: var(--tekst);
  font-family: 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
}
:root[data-motyw="jasny"] body {
  background:
    radial-gradient(900px 480px at 8% -160px, rgba(138, 106, 18, .1), transparent 70%),
    radial-gradient(820px 460px at 94% -120px, rgba(44, 62, 100, .09), transparent 72%),
    var(--tlo);
  background-attachment: fixed;
}

/* Pieczec lozy w tle: cyrkiel z wegielnica w podwojnym kregu, ten sam znak co
   .winieta na landingu. Stoi PO BOKACH, nie na srodku - tresc panelu ma
   max-width: 1180px, wiec na szerokim ekranie zostaja puste marginesy, a znak
   wstawiony centralnie i tak chowal sie za kartami. Szerokosc liczy sie z realnego
   marginesu (`min(...)`), wiec pieczec nigdy nie wchodzi pod tresc, a ponizej
   1500 px, gdzie marginesu juz nie ma, znika calkiem. */
body::before, body::after {
  content: ""; position: fixed; pointer-events: none; z-index: -1;
  top: 50%; transform: translateY(-50%);
  width: min(360px, calc((100vw - 1180px) / 2 - 32px));
  height: min(360px, calc((100vw - 1180px) / 2 - 32px));
  opacity: .07;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23c9a227' stroke-width='.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='22'/%3E%3Ccircle cx='24' cy='24' r='19.4'/%3E%3Cpath d='M15 35 24 11 33 35'/%3E%3Cpath d='M13.5 23 24 34 34.5 23'/%3E%3C/svg%3E")
      center / contain no-repeat;
}
body::before { left: 24px; }
body::after { right: 24px; }
@media (max-width: 1500px) { body::before, body::after { display: none; } }
/* na pergaminie zloto ma mniejszy kontrast niz na nocy - inaczej znak znika */
:root[data-motyw="jasny"] body::before,
:root[data-motyw="jasny"] body::after { opacity: .11; }

.ukryty { display: none !important; }
.rozpychacz { flex: 1; }

h1, h2 { font-weight: 800; letter-spacing: -.02em; margin: 0; }

.ekran-logowania {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}

.karta-logowania {
  width: 420px; padding: 36px 32px; text-align: center;
  background: linear-gradient(180deg, var(--tlo-panel-2), var(--tlo-panel));
  border: 2px solid var(--kamien);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #0008, 0 20px 60px #000a;
}
.karta-logowania h1 {
  font-size: 34px; color: var(--akcent-jasny); letter-spacing: 2px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--akcent) 50%, transparent);
}
.karta-logowania p { color: var(--tekst-cichy); line-height: 1.5; }
.herb { font-size: 46px; color: var(--akcent); }
.herb-maly { color: var(--akcent); }

/* ---------- logo: cyrkiel z wegielnica na tarczy ---------- */
/* Wisi na landingu (.marka .znak) i w panelu (.herb, .herb-maly), stad wspolne
   miejsce tutaj: strona.css laduje sie po tym pliku, panel.html juz nie.
   Klasy zostaly stare (.logo-slonce to teraz tarcza, .logo-litera to znak),
   bo siedza w czterech egzemplarzach SVG w trzech plikach. */
.herb svg { width: 58px; height: 58px; display: block; margin: 0 auto; }
.herb-maly svg { width: 25px; height: 25px; vertical-align: -6px; }
.herb svg, .herb-maly svg {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--akcent) 50%, transparent));
}
.logo-slonce { filter: saturate(1.1); }
/* stroke zostaje atrybutem w HTML-u, nie tutaj: na jednej stronie stoja dwa
   egzemplarze znaku (ekran wygasłej sesji i naglowek), kazdy z wlasnym id gradientu.
   3.6 zamiast 4.4, bo znak ma teraz dwie kreski zamiast jednej i przy grubszej
   linii zlewa sie w plame juz przy 25 px w naglowku panelu */
.logo-litera {
  fill: none; stroke-width: 3.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.przycisk-discord {
  display: inline-block; margin-top: 10px; padding: 12px 22px;
  background: #5865f2; color: #fff; text-decoration: none;
  border-radius: 6px; font-weight: 600;
}
.przycisk-discord:hover { background: #4752c4; }

.gorna {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px;
  background: linear-gradient(180deg, var(--tlo-panel-2), var(--tlo-panel));
  border-bottom: 1px solid var(--kamien);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--akcent) 28%, transparent), 0 2px 14px #0004;
  position: sticky; top: 0; z-index: 20;
  overflow: hidden;
}
/* pieczec lozy wtopiona w pasek: ten sam cyrkiel z wegielnica co .winieta na
   landingu, tylko maly i przy prawej krawedzi. Ma byc przeczuciem znaku, nie
   grafika - stad alfa .07 i maska gasnaca w lewo, zeby nie wchodzil pod guziki
   paska konta. Dekoracja czysta, wiec pseudoelement, a nie SVG w panel.html */
.gorna::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  top: -34px; right: 26px; width: 150px; height: 150px;
  opacity: .07;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23c9a227' stroke-width='.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='22'/%3E%3Ccircle cx='24' cy='24' r='19.4'/%3E%3Cpath d='M15 35 24 11 33 35'/%3E%3Cpath d='M13.5 23 24 34 34.5 23'/%3E%3C/svg%3E")
      center / contain no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
/* na pergaminie to samo zloto ma duzo mniejszy kontrast niz na nocy i przy .07
   znika calkowicie - w dzien znak potrzebuje wiecej kryscia, zeby w ogole byc */
:root[data-motyw="jasny"] .gorna::after { opacity: .16; }
.tytul {
  font-weight: 700; font-size: 20px; color: var(--akcent-jasny); letter-spacing: 1px;
  display: flex; align-items: center; gap: 8px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--akcent) 45%, transparent);
}
.pole-gorne { display: flex; flex-direction: column; font-size: 11px; color: var(--tekst-cichy); }
.pole-gorne select, .pole-gorne .wybierak { margin-top: 2px; }
.uzytkownik { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.uzytkownik img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--kamien); }

select, input[type=text], input[type=number], input[type=password], input:not([type]) {
  background: var(--tlo-pole); color: var(--tekst);
  border: 1px solid var(--kamien); border-radius: 4px;
  padding: 5px 8px; font-size: 13px; font-family: inherit;
}
/* Bez appearance: none select rysuje sie WIDZETEM SYSTEMU - bierze czcionke i
   metryki Windowsa zamiast naszych, wiec nazwa zestawu odstawala krojem od reszty
   panelu. Zdejmujemy natywna oprawe i dokladamy wlasna strzalke (zloty daszek
   w data-URI), zostawiajac miejsce na nia paddingiem z prawej. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 26px; line-height: 1.35;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23c9a227' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1 5 5 9 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 6px;
}
select:hover { border-color: color-mix(in srgb, var(--akcent) 45%, var(--kamien)); }
/* lista rozwijana rysuje sie poza strona i nie dziedziczy tla - bez tego na
   ciemnym motywie wypada bialy prostokat z czarnym tekstem */
select option { background: var(--tlo-panel); color: var(--tekst); }
select:focus, input:focus { outline: 1px solid var(--akcent); }

/* Guzik drugorzedny (Usun, Sprawdz, Zestawy) nie nosi juz kremowej bieli --tekst,
   tylko przygaszony, cieply ton: bialy napis na granacie krzyczal glosniej niz
   zloty guzik glowny i psul hierarchie paska konta. */
.przycisk {
  background: linear-gradient(180deg, var(--tlo-najazd), var(--tlo-panel));
  color: var(--tekst-cichy); border: 1px solid var(--kamien);
  border-radius: 5px; padding: 7px 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; text-decoration: none;
}
.przycisk:hover { border-color: var(--akcent); color: var(--akcent-jasny); }
.przycisk.glowny {
  background: var(--grad); border-color: transparent;
  color: var(--tekst-na-akcencie); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
    0 6px 18px color-mix(in srgb, var(--akcent) 40%, transparent);
}
.przycisk.glowny:hover {
  filter: brightness(1.1); border-color: transparent; color: var(--tekst-na-akcencie);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24),
    0 10px 26px color-mix(in srgb, var(--akcent) 55%, transparent);
}
.przycisk:disabled { opacity: .45; cursor: default; }

/* Uruchom ma kolor stanu, do ktorego prowadzi (zielony "online"), a nie zloty
   gradient marki - inaczej gubil sie wsrod pozostalych guzikow paska konta. */
/* Jedna barwa, nie dwie: gradient zielen -> blekit dawal wyprany, mietowy pasek,
   ktory obok zlota wygladal na zbutwialy. Teraz to ta sama zielen przyciemniana
   ku dolowi, czyli zwykly relief guzika. Napis ciemnym atramentem, nie biala -
   ta sama zasada, co na zlotym guziku: jasny akcent nosi ciemny tusz. Biel na
   nasyconej zieleni rozjezdzala sie z reszta panelu. */
.przycisk.glowny.start {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--zieleń) 88%, white),
    color-mix(in srgb, var(--zieleń) 88%, black));
  color: var(--atrament-startu); font-weight: 700; letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
    0 6px 18px color-mix(in srgb, var(--zieleń) 38%, transparent);
}
.przycisk.glowny.start:hover {
  color: var(--atrament-startu); filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
    0 9px 24px color-mix(in srgb, var(--zieleń) 52%, transparent);
}
/* Guzik potwierdzajacy rzecz nieodwracalna: ten sam relief co ".glowny.start",
   tylko w czerwieni. Samo ".stop" tu nie wystarcza - to obrys, ktory obok
   wypelnionego "Anuluj" wygladalby na wariant drugorzedny, czyli odwrotnie
   niz jest naprawde. */
.przycisk.grozny {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--czerwien) 82%, white),
    color-mix(in srgb, var(--czerwien) 82%, black));
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
    0 6px 18px color-mix(in srgb, var(--czerwien) 38%, transparent);
}
.przycisk.grozny:hover {
  color: #fff; border-color: transparent; filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32),
    0 9px 24px color-mix(in srgb, var(--czerwien) 52%, transparent);
}
.przycisk.stop {
  color: color-mix(in srgb, var(--czerwien) 55%, var(--tekst));
  border-color: color-mix(in srgb, var(--czerwien) 45%, transparent);
}
.przycisk.stop:hover {
  color: var(--tekst); border-color: var(--czerwien);
  background: color-mix(in srgb, var(--czerwien) 16%, transparent);
}

.pxbtn {
  position: relative; display: inline-block; overflow: hidden;
  padding: 13px 28px; font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: .04em; text-align: center; text-decoration: none; cursor: pointer;
  color: var(--atrament-guzika); background: var(--grad); border: none; font-family: inherit;
  clip-path: var(--naroznik);
  box-shadow:
    inset 0 4px 0 color-mix(in srgb, var(--akcent) 55%, white),
    inset 0 -5px 0 color-mix(in srgb, var(--akcent) 62%, black);
}
.pxbtn:hover { filter: brightness(1.09); }
.pxbtn:active { transform: translateY(2px); }
.pxbtn.maly { padding: 9px 16px; font-size: 13px; }
.pxbtn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: przeblysk 3.4s ease-in-out infinite;
}
@keyframes przeblysk {
  0% { left: -70%; }
  38%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .pxbtn::after { animation: none; }
}

/* ten sam naroznik co .pxbtn: obrys 1px odpadl, bo clip-path scinalby go na zabkach.
   Rolę krawędzi gra bevel inset, dokladnie jak w guziku glownym */
.pxbtn-ghost {
  position: relative; display: inline-block; overflow: hidden;
  padding: 11px 22px; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-decoration: none; cursor: pointer; font-family: inherit;
  color: var(--akcent-jasny); background: var(--tlo-najazd); border: none;
  clip-path: var(--naroznik);
  box-shadow:
    inset 0 3px 0 color-mix(in srgb, var(--kamien) 70%, white),
    inset 0 -4px 0 color-mix(in srgb, var(--kamien) 70%, black);
}
.pxbtn-ghost:hover { color: var(--tekst); filter: brightness(1.25); }
.pxbtn-ghost:active { transform: translateY(2px); }

.znacznik {
  font-size: 11px; padding: 3px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--zieleń) 16%, var(--tlo-panel));
  border: 1px solid color-mix(in srgb, var(--zieleń) 55%, transparent);
  color: color-mix(in srgb, var(--zieleń) 70%, var(--tekst));
}

.przelacznik-jezyka { display: flex; gap: 2px; }
/* flaga jest SVG-iem (patrz tresc.js: emoji flag nie ma glifu w Windowsie), wiec
   guzik musi ja wymierzyc sam - font-size nie ma tu juz nic do roboty */
.jezyk {
  display: inline-flex; align-items: center;
  background: none; border: 1px solid transparent; border-radius: 5px;
  padding: 4px 6px; cursor: pointer; line-height: 0;
  filter: grayscale(1) opacity(.55);
}
.jezyk svg {
  display: block; width: 20px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.jezyk:hover { filter: none; }
.jezyk.wybrany { filter: none; background: var(--tlo-najazd); border-color: var(--kamien); }

.gorna .tytul { text-decoration: none; }
.nawigacja-portalu { display: flex; gap: 4px; }
.zakladka-portalu {
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--tekst-cichy); font-family: inherit; font-size: 13px;
  padding: 7px 16px; cursor: pointer;
}
.zakladka-portalu:hover { color: var(--akcent-jasny); }
.zakladka-portalu.aktywna {
  position: relative; background: var(--tlo-najazd);
  border-color: color-mix(in srgb, var(--akcent) 55%, transparent); color: var(--akcent-jasny);
}
.zakladka-portalu.aktywna::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--grad);
}

.pasek-narzedzi {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid var(--kamien);
  background: var(--tlo-panel);
  position: sticky; top: 51px; z-index: 15;
}

.pulpit { max-width: 1180px; margin: 0 auto; padding: 22px 16px 40px; }
/* Linie siatki rysuja OBWODKI kafli, a nie tlo pojemnika przebijajace przez odstepy.
   Stara sztuczka (tlo = --kamien, gap: 2px) dzialala tylko przy pelnym wierszu: gdy
   kafle sie zawinely, wolna reszta ostatniego wiersza swiecila plama koloru obwodki.
   Przy gap: 0 sasiednie cienie nakladaja sie w jedna kreske, a puste miejsce ma juz
   zwykle tlo panelu. */
/* Baner dostepu. Kolor stanu niesie LEWA KRAWEDZ, a nie cale tlo - pelne czerwone
   tlo nad pulpitem krzyczy przy kazdym wejsciu, a to informacja, nie alarm pozarowy. */
.subskrypcja-baner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  border-left: 4px solid var(--akcent2-jasny); border-radius: 10px;
}
.subskrypcja-baner.uwaga { border-left-color: var(--akcent); }
.subskrypcja-baner.zla { border-left-color: var(--czerwien); }
.subskrypcja-baner .sub-tresc { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.subskrypcja-baner .sub-opis { color: var(--tekst-cichy); font-size: 13px; }
.subskrypcja-baner .sub-guziki { display: flex; gap: 8px; flex-wrap: wrap; }
/* Formularz zakupu ma lezec POD trescia i guzikami, na calej szerokosci - stad
   wymuszone lamanie linii w tej samej siatce flex. */
.subskrypcja-baner .sub-zakup {
  flex: 1 0 100%; display: flex; flex-direction: column; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--kamien);
}
.subskrypcja-baner .sub-zakup-opis { margin: 0; color: var(--tekst-cichy); font-size: 13px; }
/* Okres i liczba kont to dwa NIEZALEZNE wymiary cennika. Etykieta nad kazdym rzedem
   jest tu konieczna, nie ozdobna: bez niej dwa rzedy po trzy guziki wygladaja jak
   jedna lista szesciu pakietow do wyboru. */
.subskrypcja-baner .sub-wymiar { display: flex; flex-direction: column; gap: 6px; }
.subskrypcja-baner .sub-wymiar-etykieta { color: var(--tekst-cichy); font-size: 12px; }
.subskrypcja-baner .sub-cena { display: flex; align-items: baseline; gap: 4px; font-size: 18px; }
.subskrypcja-baner .sub-pakiety { display: flex; gap: 8px; flex-wrap: wrap; }
.subskrypcja-baner .sub-pakiet {
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  background: var(--tlo-pole); color: var(--tekst); border: 1px solid var(--kamien);
}
.subskrypcja-baner .sub-pakiet.wybrany { border-color: var(--akcent); color: var(--akcent-jasny); }
.subskrypcja-baner .sub-kod {
  padding: 8px 12px; border-radius: 8px; max-width: 320px;
  background: var(--tlo-pole); color: var(--tekst); border: 1px solid var(--kamien);
}
.subskrypcja-baner .sub-rzad { display: flex; gap: 8px; flex-wrap: wrap; }
.subskrypcja-baner .sub-zgoda {
  display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; cursor: pointer;
  font-size: .85rem; line-height: 1.45; max-width: 46rem; color: var(--tekst-cichy);
}
.subskrypcja-baner .sub-zgoda input { margin-top: 3px; flex: 0 0 auto; }
.subskrypcja-baner .sub-zgoda a { color: var(--akcent-jasny); }
.subskrypcja-baner .sub-rzad .przycisk[disabled] { opacity: .45; cursor: not-allowed; }

.blok-grup { margin: 18px 0 26px; }
.blok-grup-gora { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.blok-grup-gora h2 { margin: 0; }
.grupa-wiersz {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  border-radius: 10px; padding: 10px 14px; margin: 8px 0;
}
.grupa-opis { flex: 1 1 16rem; min-width: 0; }
.grupa-nazwa { font-weight: 600; color: var(--akcent-jasny); }
.grupa-guziki { display: flex; gap: 8px; flex-wrap: wrap; }
.grupa-wiersz .przycisk[disabled] { opacity: .45; cursor: not-allowed; }
.grupa-edytor {
  background: var(--tlo-panel); border: 1px solid var(--kamien-jasny);
  border-radius: 10px; padding: 14px 16px; margin: 10px 0;
}
.grupa-edytor h3 { margin: 0 0 10px; }
.grupa-pole-nazwa, .grupa-pole-zestaw {
  padding: 8px 12px; border-radius: 8px; max-width: 24rem; width: 100%;
  background: var(--tlo-pole); color: var(--tekst); border: 1px solid var(--kamien);
}
.grupa-konta { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 12px; }
.grupa-konto-wiersz {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 8px; border-radius: 8px; border: 1px solid transparent;
}
.grupa-konto-wiersz.wybrany {
  border-color: var(--kamien); background: var(--tlo-pole);
}
.grupa-konto-wiersz .grupa-konto {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: .9rem; min-width: 11rem;
}
.grupa-pole-zestaw.drobny { max-width: 16rem; padding: 4px 8px; font-size: .85rem; }

.pulpit-pasek {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0;
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  border-radius: 10px; overflow: hidden; margin-bottom: 18px;
}
/* Kafle licznikow stoja SRODKIEM, nie przy lewej krawedzi: komorki siatki sa rowne
   i szerokie, wiec dosuniete do lewej zostawialy po prawej pusta polowe i pasek
   rozjezdzal sie optycznie. Ikona z trescia jada razem jako jedna, wysrodkowana
   grupa, a etykieta i liczba lamia sie na wspolnej osi. */
.pulpit-pasek .grupa {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 20px; background: var(--tlo-panel);
  box-shadow: 0 0 0 1px var(--kamien);
}
.pulpit-pasek .grupa .glif { color: var(--akcent); opacity: .8; }
.pulpit-pasek .grupa .glif svg { width: 22px; height: 22px; stroke-width: 1.4; }
.pulpit-pasek .tresc {
  display: flex; flex-direction: column; min-width: 0;
  align-items: center; text-align: center;
}
.pulpit-pasek .etykieta {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--tekst-cichy);
}
.pulpit-pasek .wartosc {
  font-weight: 700; font-size: 23px; line-height: 1.15; color: var(--akcent-jasny);
}

/* Konto to jeden pasek: stan, login, wybor zestawu i start/stop w rzedzie.
   Szczegoly siedza w tej samej karcie, w drugim rzedzie siatki, i pokazuja sie
   dopiero po kliknieciu strzalki - stad kolumny "reszta | auto". */
.pulpit-karty { display: flex; flex-direction: column; gap: 8px; }
.karta-konta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 4px 16px;
  background: linear-gradient(180deg, var(--tlo-panel-2), var(--tlo-panel));
  border: 1px solid var(--kamien);
  border-radius: 10px; padding: 9px 14px 9px 16px;
  transition: border-color .14s, box-shadow .14s;
}
.karta-konta::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--czerwien);
}
.karta-konta.online::before {
  background: var(--zieleń);
  box-shadow: 0 0 12px color-mix(in srgb, var(--zieleń) 70%, transparent);
}
.karta-konta.laczy::before { background: var(--niebieski-stanu); }
.karta-konta.czeka::before {
  background: var(--pomarancz);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pomarancz) 70%, transparent);
}
.karta-konta:hover {
  border-color: color-mix(in srgb, var(--akcent) 40%, var(--kamien));
  box-shadow: 0 6px 20px #0006;
}
.karta-konta.rozwinieta { border-color: color-mix(in srgb, var(--akcent) 45%, var(--kamien)); }

.karta-gora { display: flex; align-items: center; gap: 10px; min-width: 0; }
.karta-gora .login {
  font-weight: 700; font-size: 16px; color: var(--akcent-jasny);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karta-zestaw {
  font-size: 11px; color: var(--tekst-cichy); padding: 2px 9px; border-radius: 999px;
  background: var(--tlo-pole); border: 1px solid var(--kamien);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}
.karta-strzalka {
  flex: none; width: 22px; height: 22px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--tekst-cichy); font-family: inherit; font-size: 17px; line-height: 1;
  transition: transform .16s, color .14s, background .14s;
}
.karta-strzalka:hover { color: var(--akcent-jasny); background: var(--tlo-najazd); }
.karta-konta.rozwinieta .karta-strzalka { transform: rotate(90deg); color: var(--akcent-jasny); }

.karta-szczegoly { display: none; }
.karta-konta.rozwinieta .karta-szczegoly {
  display: block; grid-column: 1 / -1;
  margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--kamien);
}
.karta-szczegoly > .dane { font-size: 11px; color: var(--tekst-cichy); }

/* ---------- stan konta: pigulka z pulsujacym okiem ---------- */

.stan-pigulka {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 3px 11px 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--tlo-stanu);
  border: 1px solid color-mix(in srgb, var(--barwa-stanu) 60%, transparent);
  color: var(--barwa-stanu);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.stan-pigulka.online { --barwa-stanu: var(--zieleń); }
.stan-pigulka.offline { --barwa-stanu: var(--czerwien); }
.stan-pigulka.laczy { --barwa-stanu: var(--niebieski-stanu); }
.stan-pigulka.czeka { --barwa-stanu: var(--pomarancz); }
.stan-oko {
  position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--barwa-stanu);
  box-shadow: 0 0 8px var(--barwa-stanu);
}
/* rozchodzaca sie fala zamiast migania - widac ja katem oka i nie meczy */
.stan-oko::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--barwa-stanu); opacity: 0;
}
.stan-pigulka.online .stan-oko::after { animation: fala-stanu 2.2s ease-out infinite; }
.stan-pigulka.laczy .stan-oko { animation: puls-stanu 1.2s ease-in-out infinite; }
.stan-pigulka.czeka .stan-oko { animation: puls-stanu 1.8s ease-in-out infinite; }
.stan-pigulka.offline .stan-oko { box-shadow: none; opacity: .75; }
@keyframes fala-stanu {
  0% { opacity: .7; transform: scale(.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
@media (prefers-reduced-motion: reduce) {
  .stan-oko, .stan-oko::after { animation: none !important; }
}

.karta-dane {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-bottom: 12px; background: var(--kamien);
  border: 1px solid var(--kamien); border-radius: 8px; overflow: hidden;
}
.karta-dane .wiersz {
  padding: 8px 11px; align-items: center; gap: 9px; background: var(--tlo-panel);
}
.karta-dane .wartosc { color: var(--tekst); font-variant-numeric: tabular-nums; }
.karta-dane .etykieta { flex: 1; font-size: 11px; }
.karta-dane .wiersz:last-child:nth-child(odd) { grid-column: 1 / -1; }

.glif { display: inline-flex; flex: none; color: var(--akcent); }
.glif svg {
  width: 15px; height: 15px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.glif.barwny svg { width: 18px; height: 18px; fill: initial; stroke: none; }
.pulpit-pasek .grupa .glif.barwny svg { width: 26px; height: 26px; }

@keyframes puls-stanu { 50% { opacity: .45; } }
/* Notka o czekaniu na wznowienie idzie przez cala szerokosc karty, pod paskiem -
   ma byc czytelna bez rozwijania szczegolow, bo tlumaczy, czemu konto nie pracuje. */
.karta-czekanie {
  grid-column: 1 / -1;
  margin-top: 7px; padding: 6px 10px; border-radius: 7px;
  font-size: 12px; line-height: 1.45;
  color: color-mix(in srgb, var(--pomarancz) 55%, var(--tekst));
  background: color-mix(in srgb, var(--pomarancz) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pomarancz) 35%, transparent);
}

/* Ta sama notka na czerwono: konto stoi i samo nie wstanie, bo czeka na czlowieka
   (zle haslo, blokada konta). Pomaranczowa mowi "czekaj", czerwona "zrob cos". */
.karta-czekanie.blad {
  color: color-mix(in srgb, var(--czerwien) 62%, var(--tekst));
  background: color-mix(in srgb, var(--czerwien) 12%, transparent);
  border-color: color-mix(in srgb, var(--czerwien) 38%, transparent);
}

.karta-uwagi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.uwaga-znacznik {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--czerwien);
  color: color-mix(in srgb, var(--czerwien) 45%, var(--tekst));
}
.uwaga-znacznik.spokojna { border-color: var(--kamien); color: var(--tekst-cichy); }
.karta-dol { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.karta-dol select { min-width: 130px; max-width: 190px; }
.karta-dol .dane { font-size: 11px; color: var(--tekst-cichy); }

@media (max-width: 620px) {
  .karta-konta { grid-template-columns: 1fr; }
  .karta-dol { justify-content: flex-start; flex-wrap: wrap; }
  .karta-dol select { flex: 1; }
}

.uklad { display: grid; grid-template-columns: 220px 1fr 280px; gap: 14px; padding: 14px; align-items: start; }

.bok, .prawa {
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  border-radius: 10px; padding: 12px; position: sticky; top: 116px;
}
.grupa-boczna { margin-bottom: 16px; }
.naglowek-boczny {
  position: relative; display: flex; align-items: center; gap: 8px;
  color: var(--akcent-jasny); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  border-bottom: 1px solid var(--kamien); padding-bottom: 6px; margin-bottom: 7px;
}
.naglowek-boczny::before {
  content: ""; width: 3px; height: 11px; border-radius: 2px; background: var(--grad);
}
.podpis-boczny { font-size: 11px; color: var(--tekst-cichy); line-height: 1.4; }

/* Zwijane grupy boku. Naglowek jest calym celem klikniecia, wiec musi wygladac na klikalny
   i nie moze zaznaczac sie tekstem przy szybkim otwieraniu i zamykaniu. */
.naglowek-zwijany, .naglowek-grupy { cursor: pointer; user-select: none; }
.naglowek-zwijany:hover, .naglowek-grupy:hover { color: var(--akcent); }
.zwijak { font-size: 10px; width: 9px; opacity: .8; }
.licznik-grupy {
  margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0;
  color: var(--tekst-cichy); background: var(--tlo-najazd);
  border-radius: 8px; padding: 1px 6px;
}
/* Zwinieta grupa nie ma juz pod soba listy, wiec kreska pod naglowkiem gubi sens -
   zostawiona wygladalaby jak pusta ramka. */
.naglowek-zwijany.zwiniety { border-bottom-color: transparent; margin-bottom: 0; }

/* Podgrupy w liscie ustawien: ten sam uklad co naglowek boczny, ale cichszy i wciety,
   bo stoja o poziom nizej - pod wspolnym naglowkiem "Ustawienia". */
.naglowek-grupy {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  color: var(--tekst-cichy); padding: 7px 9px 5px;
}
.naglowek-grupy:not(.zwiniety) { color: var(--akcent-jasny); }
.naglowek-grupy-nazwa { text-transform: uppercase; }

.pozycja-krainy {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; border-left: 2px solid transparent;
  transition: background .12s, border-color .12s;
}
.pozycja-krainy:hover { background: var(--tlo-najazd); }
.pozycja-krainy.wybrana {
  background: color-mix(in srgb, var(--akcent) 14%, var(--tlo-panel));
  border-color: color-mix(in srgb, var(--akcent) 45%, transparent);
  border-left-color: var(--akcent);
}
.pozycja-krainy.wybrana .nazwa > div:first-child { color: var(--akcent-jasny); }
.pozycja-krainy .nazwa { flex: 1; }
.pozycja-krainy .info { font-size: 11px; color: var(--tekst-cichy); }
.pozycja-krainy input { accent-color: var(--akcent); }

.srodek { min-width: 0; }

.pasek-celu {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  border-radius: 10px; padding: 11px 15px; margin-bottom: 12px;
}
.pasek-celu:empty { display: none; }
.pasek-celu .grupa { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tekst-cichy); }
.pasek-celu input[type=range] { width: 150px; accent-color: var(--akcent); }
.pasek-celu .wartosc { color: var(--akcent-jasny); font-weight: 600; }

.segment {
  display: inline-flex; border: 1px solid var(--kamien); border-radius: 6px;
  overflow: hidden; background: var(--tlo-pole);
}
.segment-opcja {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 5px 12px; cursor: pointer; font-family: inherit; text-align: left;
  background: none; border: none; border-right: 1px solid var(--kamien);
  color: var(--tekst-cichy);
}
.segment-opcja:last-child { border-right: none; }
.segment-opcja:hover { background: var(--tlo-najazd); color: var(--tekst); }
.segment-opcja.wlaczona {
  background: color-mix(in srgb, var(--akcent) 20%, var(--tlo-pole));
  color: var(--akcent-jasny); cursor: default;
}
.segment-tytul { font-size: 12px; font-weight: 600; }
.segment-podpis { font-size: 10px; opacity: .75; }
.przycisk.maly { padding: 4px 9px; font-size: 11px; }

.zakladki { display: flex; gap: 4px; margin-bottom: -1px; flex-wrap: wrap; }
.zakladka {
  padding: 8px 17px; cursor: pointer; font-size: 13px;
  background: var(--tlo); color: var(--tekst-cichy);
  border: 1px solid var(--kamien); border-bottom: none;
  border-radius: 7px 7px 0 0; transition: background .12s, color .12s;
}
.zakladka:hover { color: var(--tekst); background: var(--tlo-najazd); }
.zakladka.aktywna {
  position: relative; background: var(--tlo-panel-2); color: var(--akcent-jasny);
}
.zakladka.aktywna::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  border-radius: 7px 7px 0 0; background: var(--grad);
}
.zakladka.dodaj { color: var(--zieleń); }
.zakladka.wsparcie { border-style: dashed; }
.okno-ataku.wsparcie { grid-template-columns: 1fr; }
.okno-ataku.wsparcie .rzad-slotow { max-width: 420px; }
.okno-ataku.wsparcie .podpis-boczny { margin-bottom: 8px; }
.zakladka.dziedziniec { border-style: dashed; }
.okno-ataku.dziedziniec { grid-template-columns: 1fr; }
.okno-ataku.dziedziniec .rzad-slotow { grid-template-columns: repeat(4, 1fr); max-width: 560px; }
.okno-ataku.dziedziniec .podpis-boczny { margin-bottom: 8px; max-width: 560px; }
.przycisk.wlaczony {
  border-color: var(--akcent); color: var(--akcent-jasny);
  background: color-mix(in srgb, var(--akcent) 18%, var(--tlo-pole));
}
.zakladka .plakietka-powtarzania {
  margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700;
  color: var(--akcent-jasny); background: color-mix(in srgb, var(--akcent) 24%, transparent);
}
.zakladka .usun {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  min-width: 18px; text-align: center; border-radius: 4px;
  color: var(--tekst-cichy);
}
.zakladka .usun:hover { color: var(--czerwien); background: var(--tlo-najazd); }

.okno-ataku {
  background:
    linear-gradient(180deg, var(--tlo-najazd) 0%, var(--tlo-panel) 120px),
    var(--tlo-panel-2);
  border: 1px solid var(--kamien); border-radius: 0 10px 10px 10px;
  padding: 16px; display: grid; gap: 14px;
  grid-template-columns: 1fr 1.7fr 1fr;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--akcent) 12%, transparent);
}

.flanka { display: flex; flex-direction: column; gap: 8px; }
.flanka-naglowek {
  text-align: center; font-weight: 700; letter-spacing: 2px;
  color: var(--akcent); text-transform: uppercase; font-size: 11px;
  border-bottom: 1px solid var(--kamien); padding-bottom: 6px;
}
.pojemnosc-flanki { margin: -2px 0 2px; }
.pojemnosc-flanki .liczby {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11px; color: var(--tekst-cichy);
}
.pojemnosc-flanki .ile {
  font-weight: 700; font-size: 15px; color: var(--tekst); line-height: 1;
}
.pojemnosc-flanki.przepelnione .ile { color: var(--czerwien); }
.pojemnosc-flanki .chip-max {
  margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--akcent) 24%, var(--tlo-pole));
  border: 1px solid var(--akcent); color: var(--akcent-jasny);
}
.pojemnosc-flanki .pasek { margin: 4px 0 0; height: 4px; }
.pasek.z-max {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--akcent) 26%, var(--tlo-pole)) 0 5px,
    var(--tlo-pole) 5px 10px);
}

.rzad-slotow { display: grid; gap: 6px; }
.rzad-slotow.wojsko { grid-template-columns: repeat(2, 1fr); }
.rzad-slotow.wojsko.szeroki { grid-template-columns: repeat(3, 1fr); }
.rzad-slotow.maszyny { grid-template-columns: repeat(2, 1fr); }
.rzad-slotow.maszyny.szeroki { grid-template-columns: repeat(3, 1fr); }
.etykieta-rzedu { font-size: 10px; color: var(--tekst-cichy); text-transform: uppercase; letter-spacing: 1px; }

.slot {
  position: relative; min-height: 104px; padding: 8px 6px 6px;
  background: linear-gradient(180deg, var(--tlo-panel-2), var(--tlo-panel));
  border: 1px solid var(--kamien); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
  min-width: 0; overflow: hidden;
}
.slot:hover {
  border-color: var(--akcent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--akcent) 25%, transparent) inset,
    0 4px 14px #0005;
}
.slot.pusty {
  border-style: dashed; color: var(--tekst-cichy);
  align-items: center; justify-content: center; font-size: 22px;
}
.slot.pusty:hover { color: var(--akcent-jasny); }
.slot img {
  width: 100%; max-width: 46px; height: 46px; flex: none;
  object-fit: contain; object-position: center;
}
.slot img.wysoka, .picker-pozycja img.wysoka {
  object-fit: cover; object-position: top center;
}
/* break-word, nie "anywhere": tamto lamalo slowo nawet wtedy, gdy zmiescilo
   by sie w calosci w nastepnej linii ("Tarczowni / czka") */
.slot .nazwa {
  font-size: 10px; line-height: 1.15; text-align: center;
  width: 100%; max-height: 24px; overflow: hidden; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  /* zawsze dwie linie (w em, zeby zlapalo tez .drobne): bez tego slot z nazwa
     jednoliniowa podnosil swoja ilosc wyzej niz sasiad z dwuliniowa */
  min-height: 2.3em;
}
.slot .poziom {
  position: absolute; top: 3px; left: 4px; font-size: 9px; z-index: 1;
  background: color-mix(in srgb, var(--tlo-pole) 80%, transparent);
  border: 1px solid var(--kamien); border-radius: 3px; padding: 0 3px;
}
/* Sam znak jest maly, ale klikalne ma byc pole wokol niego - inaczej trzeba celowac
   w kilka pikseli. Wysokosc linii i ujemne marginesy trzymaja glif tam, gdzie byl,
   wiec powiekszenie celu nie rusza ukladu slotu. */
.slot .usun {
  position: absolute; top: 1px; right: 3px; z-index: 1;
  width: 20px; height: 20px; margin: -3px -4px 0 0;
  font-size: 13px; line-height: 20px; text-align: center;
  color: var(--tekst-cichy); border-radius: 4px;
}
.slot .usun:hover { color: var(--czerwien); background: var(--tlo-najazd); }
/* min-height trzyma wysokosc slotu, gdy pole ilosci znika przy wlaczonym max */
.slot .ilosc {
  display: flex; align-items: center; gap: 3px; width: 100%;
  justify-content: center; min-height: 21px;
}
.slot .ilosc input {
  width: 100%; max-width: 52px; min-width: 0;
  padding: 2px 4px; font-size: 12px; text-align: center;
}
.slot .znacznik-max {
  background: var(--grad); border: 1px solid transparent; color: var(--tekst-na-akcencie);
  border-radius: 3px; padding: 1px 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
}
.przelacznik {
  font-size: 10px; padding: 1px 5px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--kamien); color: var(--tekst-cichy); background: var(--tlo-pole);
  font-family: inherit;
}
.przelacznik.wlaczony {
  border-color: var(--akcent); color: var(--akcent-jasny);
  background: color-mix(in srgb, var(--akcent) 22%, var(--tlo-pole));
}
.slot .przelaczniki { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }

.podsumowanie h2 {
  position: relative; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--akcent-jasny); text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--kamien); padding-bottom: 5px; margin-bottom: 8px;
}
.podsumowanie h2::before {
  content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--grad);
}
.wiersz { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.wiersz .etykieta { color: var(--tekst-cichy); }
.pasek { height: 6px; background: var(--tlo-pole); border-radius: 3px; overflow: hidden; margin: 2px 0 8px; }
.pasek span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--zieleń), var(--akcent));
  transition: width .15s;
}
.pasek.przepelniony span {
  background: linear-gradient(90deg, var(--czerwien),
    color-mix(in srgb, var(--czerwien) 60%, var(--akcent)));
}

.ostrzezenia { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ostrzezenie {
  font-size: 12px; padding: 8px 12px; border-radius: 5px; line-height: 1.4;
  background: color-mix(in srgb, var(--akcent) 12%, var(--tlo-panel));
  border-left: 3px solid var(--akcent);
  color: color-mix(in srgb, var(--akcent) 45%, var(--tekst));
}
.ostrzezenie.zle {
  background: color-mix(in srgb, var(--czerwien) 14%, var(--tlo-panel));
  border-left-color: var(--czerwien);
  color: color-mix(in srgb, var(--czerwien) 45%, var(--tekst));
}

.modal {
  position: fixed; inset: 0; background: #000b;
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-tresc {
  width: 720px; max-width: 94vw; max-height: 86vh; overflow: auto;
  background: var(--tlo-panel); border: 2px solid var(--kamien);
  border-radius: 10px; padding: 16px;
}
.modal-tresc.waska { width: 520px; }
.modal-tresc.szeroka { width: 900px; }
.modal-gora { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.modal-gora h2 { color: var(--akcent-jasny); font-size: 18px; }
.szukajka { width: 100%; margin-bottom: 8px; }
.filtry {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 12px; color: var(--tekst-cichy);
}
.filtry select { font-size: 12px; padding: 3px 6px; }
.grupa-gorna { display: flex; align-items: center; gap: 12px; }

.wybierak {
  display: flex; align-items: center; gap: 10px; min-width: 230px; max-width: 340px;
  padding: 6px 12px; cursor: pointer; font-family: inherit; text-align: left;
  background: var(--tlo-pole); color: var(--tekst);
  border: 1px solid var(--kamien); border-radius: 6px;
}
.wybierak:hover { border-color: var(--akcent); background: var(--tlo-najazd); }
.wybierak-tresc { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wybierak-konto {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--tekst-cichy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wybierak-nazwa {
  font-size: 14px; color: var(--akcent-jasny); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wybierak-strzalka { color: var(--tekst-cichy); font-size: 11px; }

.zestawy-lista { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; }
.zestaw-wiersz {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; cursor: pointer;
  background: var(--tlo-panel-2); border: 1px solid transparent; border-radius: 6px;
}
.zestaw-wiersz:hover, .zestaw-wiersz.aktywny {
  border-color: var(--akcent); background: var(--tlo-najazd);
}
.zestaw-wiersz.biezacy .zestaw-nazwa { color: var(--akcent-jasny); }
.zestaw-konto {
  flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 10px; color: var(--tekst-cichy);
  background: var(--tlo-pole); border: 1px solid var(--kamien);
}
.zestaw-nazwa { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zestaw-meta { display: flex; align-items: center; gap: 8px; flex: none; }
.zestaw-etykieta { font-size: 11px; color: var(--tekst-cichy); }
.zestaw-wiek { font-size: 11px; color: var(--tekst-cichy); }

/* --- biblioteka zestawow: ekran startowy zakladki Sklady --- */
.biblioteka { padding: 18px 22px 40px; max-width: 1180px; margin: 0 auto; }
.biblioteka-gora {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--kamien); margin-bottom: 18px;
}
.biblioteka-gora h2 { margin: 0 0 4px; font-size: 19px; }
.biblioteka-gora .podpis-boczny { margin: 0; max-width: 620px; }
.biblioteka-akcje { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.podzakladki {
  display: flex; gap: 6px; margin: 0 0 18px;
  border-bottom: 1px solid var(--kamien);
}
.podzakladka {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--tekst-cichy); font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 14px; margin-bottom: -1px;
}
.podzakladka:hover { color: var(--akcent-jasny); }
.podzakladka.aktywna { color: var(--akcent-jasny); border-bottom-color: var(--akcent); }

.biblioteka-gracze {
  display: grid; gap: 10px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.gracz-kafel {
  display: grid; gap: 4px; text-align: left; cursor: pointer;
  grid-template-rows: auto auto auto; min-height: 82px;
  background: var(--tlo-panel); color: var(--tekst); font: inherit;
  border: 1px solid var(--kamien); border-radius: 10px; padding: 10px 12px;
}
.gracz-kafel:hover { border-color: var(--kamien-jasny); }
.gracz-kafel.wybrany { border-color: var(--akcent); background: var(--tlo-pole); }
.gracz-login { font-size: 15px; font-weight: 700; color: var(--akcent-jasny); }
.gracz-znaczniki { display: flex; gap: 6px; flex-wrap: wrap; min-height: 16px; }
.gracz-ile { font-size: 11px; color: var(--tekst-cichy); }

.biblioteka-grupa { margin-bottom: 26px; }
.biblioteka-naglowek { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.biblioteka-konto { font-size: 15px; font-weight: 700; color: var(--akcent-jasny); }
.biblioteka-ile { font-size: 11px; color: var(--tekst-cichy); margin-left: auto; }
.biblioteka-kafle {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
}
.biblioteka-pusto {
  color: var(--tekst-cichy); font-size: 13px; line-height: 1.6; max-width: 640px;
  padding: 18px; border: 1px dashed var(--kamien); border-radius: 8px;
}
/* Kafel ma staly rytm pionowy: tytul, plakietki, metryka, guzik glowny, siatka 2x2, stopka.
   Wysokosc rowna sie w rzedzie dzieki grid + align-items: stretch, a plakietki i metryka
   maja rezerwowana wysokosc, zeby kafle bez nich nie podskakiwaly do gory. */
.kafel-zestawu {
  display: grid; align-content: start; gap: 8px; padding: 13px 14px 12px;
  background: var(--tlo-panel-2); border: 1px solid var(--kamien); border-radius: 8px;
  grid-template-rows: auto auto auto auto auto 1fr;
}
.kafel-zestawu.pracuje {
  border-color: color-mix(in srgb, var(--zieleń) 45%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--zieleń) 7%, var(--tlo-panel-2)), var(--tlo-panel-2));
}
.kafel-nazwa {
  font-size: 15px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kafel-znaczki { display: flex; gap: 6px; align-items: center; min-height: 20px; flex-wrap: wrap; }
.plakietka {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 10px; color: var(--tekst-cichy);
  background: var(--tlo-pole); border: 1px solid var(--kamien);
}
.kafel-wiek { font-size: 11px; color: var(--tekst-cichy); min-height: 15px; }
.kafel-glowny { width: 100%; padding: 8px 12px; font-size: 13px; }
.kafel-akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kafel-akcje .przycisk { padding: 6px 8px; font-size: 12px; text-align: center; }
.kafel-stopka {
  display: flex; justify-content: flex-end; align-items: end;
  margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--kamien);
}
.kafel-nowy {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; cursor: pointer; min-height: 100%;
  border-style: dashed; background: transparent; color: var(--tekst);
  font-family: inherit; padding: 18px 16px;
}
.kafel-nowy:hover { border-color: var(--akcent); background: var(--tlo-najazd); }
.kafel-opis { font-size: 11px; color: var(--tekst-cichy); line-height: 1.5; max-width: 210px; }
.kafel-plus { font-size: 24px; color: var(--akcent-jasny); line-height: 1; }
.przycisk.zly { color: var(--czerwien); border-color: color-mix(in srgb, var(--czerwien) 45%, transparent); }
.przycisk.zly:hover { background: color-mix(in srgb, var(--czerwien) 14%, transparent); }

.plik-tresc {
  width: 100%; height: 54vh; margin-top: 10px; resize: vertical;
  background: var(--tlo-pole); color: var(--tekst);
  border: 1px solid var(--kamien); border-radius: 6px; padding: 10px 12px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.5;
  tab-size: 1;
}
.plik-tresc:focus { outline: 1px solid var(--akcent); }
.modal-dol-rozlozony { justify-content: space-between; align-items: center; }
.modal-dol-akcje { display: flex; gap: 8px; }
.plik-wynik {
  margin: 10px 0 0; padding: 10px 12px; max-height: 22vh; overflow: auto;
  background: var(--tlo-pole); border: 1px solid var(--kamien); border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; color: var(--tekst-cichy);
}
.plik-wynik.zly { color: var(--czerwien); border-color: color-mix(in srgb, var(--czerwien) 45%, transparent); }

.kopiowanie { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kamien); }
.kopiowanie-tytul {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--tekst-cichy); margin-bottom: 8px;
}
.kopiowanie-rzad { display: flex; gap: 8px; align-items: center; }
.kopiowanie-rzad select { flex: 1; min-width: 0; }
.kopiowanie-rzad input { flex: 1; min-width: 0; }
.kopiowanie .opis { margin: 8px 0 0; }

.znacznik.goscinne {
  background: color-mix(in srgb, var(--akcent2) 16%, var(--tlo-panel));
  border-color: color-mix(in srgb, var(--akcent2) 55%, transparent);
  color: color-mix(in srgb, var(--akcent2) 60%, var(--tekst));
}

.karta-dostep {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kamien);
}
.dostep-tytul {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--tekst-cichy); margin-bottom: 8px;
}
.dostep-lista { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.dostep-wiersz {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 7px;
  background: var(--tlo-pole); border: 1px solid var(--kamien);
}
.dostep-kto { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.dostep-rzad { display: flex; gap: 8px; }
.dostep-rzad input { flex: 1; min-width: 0; }
.karta-dostep .dane { margin-top: 8px; font-size: 11.5px; line-height: 1.45; }

/* Planowane wlaczanie/wylaczanie - ten sam ksztalt co blok dostepu, zeby karta konta
   nie rozjezdzala sie wizualnie z sekcji na sekcje. */
.karta-plan {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kamien);
}
.plan-wiersz {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  padding: 6px 10px; border-radius: 7px;
  background: var(--tlo-pole); border: 1px solid var(--kamien);
}
.plan-opis { flex: 1; min-width: 0; font-size: 13px; }
.plan-rzad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.plan-pole { flex: 1 1 170px; min-width: 0; }
.plan-zestaw { flex: 0 1 auto; min-width: 0; }
.plan-podpowiedz { margin-top: 8px; font-size: 11.5px; }
.plan-przegapiony {
  margin-bottom: 8px; padding: 6px 10px; border-radius: 7px; font-size: 12px;
  background: var(--tlo-pole); border: 1px solid var(--uwaga, var(--kamien));
  color: var(--tekst-cichy);
}
.picker-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.picker-pozycja {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; padding: 10px 6px 8px; min-width: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--tlo-panel-2), var(--tlo-panel));
  border: 1px solid var(--kamien); border-radius: 6px; cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.picker-pozycja:hover {
  border-color: var(--akcent); background: var(--tlo-najazd); transform: translateY(-1px);
}
.picker-pozycja img {
  width: 100%; max-width: 48px; height: 48px; flex: none; object-fit: contain;
}
.picker-pozycja .nazwa {
  font-size: 11px; line-height: 1.2; text-align: center; color: var(--tekst);
}

/* Serduszko ulubionej pozycji. Kafelek jest "position: relative" wylacznie po to, zeby
   mialo sie do czego przyczepic - siedzi w rogu i NIE zabiera miejsca nazwie. */
.picker-pozycja { position: relative; }
.picker-serce {
  position: absolute; top: 2px; right: 4px; z-index: 1;
  padding: 0 3px; line-height: 1; border: 0; background: none; cursor: pointer;
  font-size: 14px; color: var(--tekst-cichy);
  opacity: 0; transition: opacity .12s, color .12s, transform .12s;
}
/* Puste serce pokazuje sie dopiero po najechaniu - inaczej siatka kilkudziesieciu
   kafelkow zamienia sie w scianke ikonek. Pelne jest widoczne zawsze, bo to ono
   tlumaczy, dlaczego dana pozycja stoi na gorze listy. */
.picker-pozycja:hover .picker-serce { opacity: 1; }
.picker-pozycja.ulubiona .picker-serce { opacity: 1; color: var(--akcent-jasny); }
.picker-serce:hover { transform: scale(1.25); color: var(--akcent-jasny); }
.picker-pozycja.ulubiona { border-color: var(--akcent); }

.picker-szczegol .szczegol-gora {
  display: flex; align-items: center; gap: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--kamien); margin-bottom: 12px;
}
.picker-szczegol .szczegol-gora img { width: 72px; height: 72px; object-fit: contain; }
.picker-szczegol .szczegol-gora img.wysoka { object-fit: cover; object-position: top center; }
.picker-szczegol .nazwa { font-size: 17px; color: var(--akcent-jasny); font-weight: 700; }
.picker-szczegol .dane { font-size: 12px; color: var(--tekst-cichy); margin-top: 4px; }
.picker-szczegol .etykieta-rzedu { margin-bottom: 5px; }
.picker-szczegol .poziomy { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.picker-szczegol .poziomy .przelacznik { font-size: 12px; padding: 4px 10px; }
.picker-szczegol .szczegol-ilosc { display: flex; align-items: center; gap: 8px; }
.picker-szczegol .szczegol-ilosc input { width: 96px; text-align: center; }
.picker-szczegol .szczegol-ilosc .przelacznik { font-size: 12px; padding: 5px 12px; }
.picker-szczegol .modal-dol { justify-content: space-between; }

.pole { display: block; margin-bottom: 10px; font-size: 12px; color: var(--tekst-cichy); }
.pole select, .pole input { width: 100%; margin-top: 3px; }
.pole-ptaszek { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tekst-cichy); }
.modal-dol { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.opis { font-size: 12px; color: var(--tekst-cichy); line-height: 1.5; }
.wynik { margin-top: 10px; font-size: 12px; }
.podglad { white-space: pre-wrap; font-size: 12px; color: var(--tekst-cichy); line-height: 1.45; }
.blad { color: color-mix(in srgb, var(--czerwien) 55%, var(--tekst)); }

.dymek {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--tlo-najazd); border: 1px solid var(--akcent); color: var(--akcent-jasny);
  padding: 10px 18px; border-radius: 6px; z-index: 80; box-shadow: 0 8px 30px #000a;
  max-width: 70vw;
}
.dymek.zly {
  border-color: var(--czerwien);
  color: color-mix(in srgb, var(--czerwien) 45%, var(--tekst));
}

@media (max-width: 1100px) {
  .uklad { grid-template-columns: 1fr; }
  .bok, .prawa { position: static; }
  .okno-ataku { grid-template-columns: 1fr; }
}

.blok-kont {
  margin-top: 26px; padding: 18px 20px;
  background: var(--tlo-panel); border: 1px solid var(--kamien); border-radius: 10px;
}
.blok-kont h2 {
  font-size: 12px; color: var(--akcent); text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 6px;
}
/* Zglaszanie bledow - ten sam kafel co blok kont, zeby nie wygladalo na doklejke */
.blok-zglos {
  margin-top: 18px; padding: 18px 20px;
  background: var(--tlo-panel); border: 1px solid var(--kamien); border-radius: 10px;
}
.blok-zglos h2 {
  font-size: 12px; color: var(--akcent); text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 6px;
}
.zglos-pola { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.zglos-pola .pole-gorne { flex: 1; min-width: 220px; }
.blok-zglos textarea {
  width: 100%; resize: vertical; min-height: 76px;
  font-family: inherit; font-size: 13px; line-height: 1.45;
}
.zglos-dol {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
}

#pulpit-podpis { margin: 14px 2px 0; }
.konto-form {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.konto-form .pole-gorne { flex: 1; min-width: 180px; }

.stan-zapisu { font-size: 12px; color: var(--tekst-cichy); min-width: 150px; text-align: right; }
.stan-zapisu.wtoku { color: var(--akcent); }
.stan-zapisu.zmiana { color: var(--tekst-cichy); }
.stan-zapisu.ok { color: var(--zieleń); }
.stan-zapisu.zly { color: var(--czerwien); max-width: 420px; text-align: right; }
.stan-zapisu::before { content: "" }
.stan-zapisu.ok::before { content: "\2713\00a0"; }
.stan-zapisu.zly::before { content: "\26a0\00a0"; }

.rzad-fal { display: flex; align-items: flex-end; gap: 8px; }
.rzad-fal .zakladki { flex: 0 1 auto; }
.rzad-fal .znacznik { margin-bottom: 4px; }
.rzad-fal .przycisk { margin-bottom: 4px; }

.szablony {
  display: grid; grid-template-columns: 260px 1fr; gap: 14px;
  max-width: 1180px; margin: 0 auto; padding: 16px;
}
.szablony-bok {
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  border-radius: 8px; padding: 12px;
}
.szablony-sredek, .szablony-srodek {
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  border-radius: 8px; padding: 16px;
}
.szablony-bok .pozycja-krainy { display: flex; justify-content: space-between; gap: 8px; }
.szablony-srodek h2 {
  font-size: 13px; color: var(--akcent); text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--kamien); padding-bottom: 5px; margin: 18px 0 10px;
}
.szablon-gora { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.szablon-gora input { font-size: 15px; padding: 6px 10px; min-width: 220px; }

.miejsca { display: flex; flex-direction: column; gap: 6px; }
.miejsce {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--tlo-pole); border: 1px solid var(--kamien); border-radius: 6px;
  cursor: pointer;
}
.miejsce .nazwa { font-size: 13px; }
.miejsce > div { flex: 1; }
.miejsce.stan-rozjechane { border-color: var(--akcent); }
.miejsce.stan-brak { border-color: var(--czerwien); }
.szablony-srodek .okno-ataku { grid-template-columns: 1fr 1.4fr 1fr; }
.szablony-srodek .slot { cursor: default; min-height: 76px; }
.szablony-srodek .konto-form { align-items: flex-end; }

.grupa-ustawien { margin-top: 14px; }
.pozycja-ustawien.nieobecna { opacity: .55; }

.okno-ataku.ustawienia-w-oknie {
  display: block; border-radius: 8px; padding: 16px 18px;
}
.formularz-ustawien { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
.formularz-ustawien h2 {
  font-size: 17px; color: var(--tekst); letter-spacing: -.01em;
}

.ust-naglowek {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 16px 18px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--tlo-panel-2), var(--tlo-panel));
  border: 1px solid var(--kamien); border-bottom: none;
}
.ust-tytul { flex: 1; min-width: 0; }
.ust-tytul .ust-podpis { display: block; margin: 5px 0 0; max-width: 560px; }
.ust-naglowek-prawa { display: flex; align-items: center; gap: 11px; flex: none; }
.ust-stan {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700;
}
.ust-stan.wlaczona { color: var(--zieleń); }
.ust-stan.wylaczona { color: var(--tekst-cichy); }

.ust-notka {
  margin: 0; padding: 11px 18px; font-size: 12px; line-height: 1.5;
  color: var(--tekst-cichy);
  background: color-mix(in srgb, var(--akcent) 9%, var(--tlo-panel));
  border: 1px solid var(--kamien); border-bottom: none;
  border-left: 2px solid var(--akcent);
}

.ust-lista {
  display: flex; flex-direction: column;
  border: 1px solid var(--kamien); border-radius: 0 0 10px 10px; overflow: hidden;
}
.ustawienie {
  display: flex; align-items: center; gap: 18px; padding: 13px 18px;
  background: var(--tlo-panel);
  border-top: 1px solid var(--kamien);
  transition: background .12s;
}
.ust-lista > .ustawienie:first-child { border-top: none; }
.ustawienie:hover { background: var(--tlo-panel-2); }
.ustawienie.szerokie { flex-direction: column; align-items: stretch; gap: 10px; }
.ustawienie.zablokowane { opacity: .42; }
.ustawienie.zablokowane:hover { background: var(--tlo-panel); }

/* "min-width: 0" na obu kolumnach jest tu konieczne, a nie ozdobne: domyslne
   min-width: auto elementu flex NIE POZWALA mu zwezic sie ponizej wlasnej tresci, wiec
   dluga etykieta albo szeroka kontrolka rozpychaly wiersz i tekst wychodzil poza ramke.
   "overflow-wrap: anywhere" domyka sprawe dla pojedynczych dlugich slow (nazwy jednostek,
   sklejone liczby), ktorych nie ma gdzie zlamac. */
.ust-opis { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ust-etykieta { font-size: 13.5px; color: var(--tekst); overflow-wrap: anywhere; }
.ust-podpis {
  font-size: 11.5px; color: var(--tekst-cichy); line-height: 1.45;
  overflow-wrap: anywhere;
}
/* Bylo "flex: none", czyli kontrolka nigdy sie nie zwezala. Select rozciaga sie do
   NAJDLUZSZEJ opcji ("skoncze ksiazke na wybranym poziomie", "Arcymistrz - 1 000 000 pkt,
   oboz poz. 110"), wiec w waskiej kolumnie siatki rozpychal wiersz i tekst wychodzil poza
   ramke. Teraz wolno mu sie skurczyc, a sam select tnie nadmiar wielokropkiem. */
.ust-kontrolka { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.ust-kontrolka select {
  max-width: 100%; text-overflow: ellipsis;
}
.ustawienie.szerokie .ust-kontrolka { flex: 1; display: block; }

.pole-z-jednostka { display: flex; align-items: center; gap: 7px; }
.pole-z-jednostka input { width: 96px; text-align: right; }
.pole-z-jednostka .jednostka { font-size: 11.5px; color: var(--tekst-cichy); min-width: 34px; }
.pole-szerokie { width: 100%; }

/* suwak: <input> zostaje w srodku etykiety, wiec Tab i czytniki dzialaja normalnie */
.suwak { position: relative; display: inline-flex; cursor: pointer; flex: none; }
.suwak input { position: absolute; opacity: 0; width: 0; height: 0; }
.suwak-tor {
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--tlo-pole); border: 1px solid var(--kamien);
  transition: background .16s, border-color .16s;
}
.suwak-tor::after {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--tekst-cichy);
  transition: transform .16s, background .16s;
}
.suwak input:checked + .suwak-tor {
  background: var(--grad); border-color: transparent;
}
.suwak input:checked + .suwak-tor::after { transform: translateX(18px); background: #fff; }
.suwak input:focus-visible + .suwak-tor { outline: 2px solid var(--akcent); outline-offset: 2px; }
.suwak.zablokowany { cursor: default; }

.rzadkosci { display: flex; gap: 14px; flex-wrap: wrap; }

.kolejnosc-modulow { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.kolejnosc-rzad {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--tlo-pole); border: 1px solid var(--kamien); border-radius: 6px;
}
.kolejnosc-numer { color: var(--tekst-cichy); font-size: 12px; min-width: 16px; }
.kolejnosc-nazwa { flex: 1; font-size: 13px; }
.kolejnosc-guziki { display: flex; gap: 4px; }
.kolejnosc-guzik {
  background: var(--tlo-najazd); border: 1px solid var(--kamien); border-radius: 4px;
  color: var(--tekst); cursor: pointer; font-size: 11px; line-height: 1; padding: 4px 7px;
}
.kolejnosc-guzik:hover:not(:disabled) { border-color: var(--akcent); color: var(--akcent-jasny); }
.kolejnosc-guzik:disabled { opacity: .3; cursor: default; }
.kolejnosc-ptaszek { accent-color: var(--akcent); cursor: pointer; margin: 0; }
.kolejnosc-kreska {
  border-top: 1px solid var(--kamien); color: var(--tekst-cichy);
  font-size: 11px; margin-top: 6px; padding-top: 6px; text-transform: uppercase;
}
.kolejnosc-pusto { color: var(--tekst-cichy); font-size: 12px; font-style: italic; padding: 4px 2px; }

/* Witryna sklepu Sztormu. Kolory sa tu wpisane wprost, a nie ze zmiennych motywu, bo ten
   jeden widget ma wygladac jak okno w grze - drewno i pergamin - a nie jak reszta panelu. */
/* Pasek kolejnosci: osobna decyzja niz siatka, wiec i osobne pudlo - w kolorach panelu,
   nie sklepu, zeby bylo widac, ze to nasz dodatek, a nie kawalek okna z gry. */
.sklep-kolejka {
  width: 100%; margin-bottom: 10px; padding: 8px 10px;
  background: var(--tlo-pole); border: 1px solid var(--kamien); border-radius: 6px;
}
.sklep-kolejka-tytul {
  color: var(--tekst-cichy); font-size: 11px; letter-spacing: .3px; margin-bottom: 6px;
  text-transform: uppercase;
}
.sklep-chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.sklep-chip {
  display: flex; align-items: center; gap: 6px; padding: 3px 6px;
  background: var(--tlo-najazd); border: 1px solid var(--kamien); border-radius: 999px;
  cursor: grab; font-size: 12px;
}
.sklep-chip:hover { border-color: var(--akcent); }
.sklep-chip-niesiony { opacity: .4; }
.sklep-chip-cel { border-color: var(--akcent); box-shadow: -3px 0 0 0 var(--akcent); }
.sklep-chip-numer {
  min-width: 18px; height: 18px; box-sizing: border-box;
  background: var(--akcent); border-radius: 9px;
  color: #1b1710; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.sklep-chip-ikona { width: 20px; height: 20px; image-rendering: pixelated; }
.sklep-chip-nazwa { white-space: nowrap; }
.sklep-chip-guziki { display: flex; gap: 2px; }
.sklep-chip-guziki .kolejnosc-guzik { padding: 2px 5px; }
.sklep-chip-x:hover:not(:disabled) { border-color: var(--czerwien); color: var(--czerwien); }

/* "grid-auto-rows: 1fr" zrownuje WSZYSTKIE rzedy, nie tylko kafelki w jednym rzedzie -
   inaczej "Nieokreslony klejnot" lamie sie na dwie linie i caly jego rzad jest wyzszy
   od reszty witryny. Nazwa dostaje przez to sztywne dwie linie, zeby kafelek mial ta
   sama wysokosc niezaleznie od dlugosci nazwy. */
.sklep-siatka {
  display: grid; gap: 8px; width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  grid-auto-rows: 1fr;
}
.sklep-kafel {
  position: relative; display: grid; gap: 1px 6px; padding: 7px 8px 7px 7px;
  grid-template-columns: minmax(46px, auto) 1fr;
  grid-template-areas: "ikona nazwa" "ikona limit" "ilosc cena";
  background: repeating-linear-gradient(-45deg,
    #d5b48b 0 14px, #cfad83 14px 28px);
  border: 2px solid #4a3521; border-radius: 8px;
  color: #3b2a17; cursor: pointer; outline: none;
}
.sklep-kafel:hover { border-color: #8a6a3f; box-shadow: 0 0 0 2px rgba(212, 175, 122, .35); }
.sklep-kafel:focus-visible { box-shadow: 0 0 0 2px var(--akcent); }
.sklep-kafel-wylaczony { filter: grayscale(1); opacity: .45; }
/* Numer wisi na obramowaniu, a nie w srodku kafelka: w witrynie jest ciasno, a to jedyny
   znacznik laczacy kafelek z jego chipem na pasku kolejnosci. */
.sklep-numer {
  position: absolute; top: -7px; left: -7px; z-index: 1;
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  background: #4a3521; border: 1px solid #d5b48b; border-radius: 9px;
  color: #f2e2c6; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.sklep-ramka {
  grid-area: ikona; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; box-sizing: border-box;
  background: rgba(255, 245, 225, .25); border: 1px solid #4a3521;
}
.sklep-ikona { width: 40px; height: 40px; image-rendering: pixelated; }
.sklep-nazwa {
  grid-area: nazwa; align-self: center; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 12px; font-weight: 700; line-height: 1.15;
}
.sklep-limit { grid-area: limit; font-size: 10px; opacity: .7; }
.sklep-ilosc {
  grid-area: ilosc; margin-top: 3px; padding: 1px 3px; text-align: center;
  background: #c3a479; border: 1px solid #6b5537; border-radius: 3px;
  font-size: 11px; white-space: nowrap;
}
.sklep-cena {
  grid-area: cena; display: flex; align-items: center; gap: 3px; margin-top: 3px;
  padding: 1px 6px; background: #ecdcc0; border-radius: 4px;
}
.sklep-akwamaryn { width: 16px; height: 18px; image-rendering: pixelated; }
.sklep-kwota { color: #d2372f; font-size: 12px; font-weight: 700; }

.plan-sprzedazy { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.plan-wiersz {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: var(--tlo-pole); border: 1px solid var(--kamien); border-radius: 6px;
}
.plan-wiersz.plan-naglowek {
  background: none; border-color: transparent; padding-bottom: 0;
  font-size: 11px; letter-spacing: .4px; color: var(--tekst-cichy);
}
.plan-slot { flex: 1; min-width: 0; font-size: 13px; }
.plan-rzadkosc { width: 88px; text-align: center; }
.plan-ptaszek { width: 88px; display: flex; justify-content: center; }
.plan-akcja { width: 78px; display: flex; justify-content: flex-end; }

.zachowaj-globalne { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.zachowaj-globalna { display: flex; align-items: center; gap: 10px; }
.zachowaj-globalna .nazwa { flex: 1; font-size: 13px; }
.zachowaj-globalna input[type="number"] { width: 78px; }
.zachowaj-lista { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.zachowaj-wiersz {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--tlo-pole); border: 1px solid var(--kamien); border-radius: 6px;
}
.zachowaj-opis { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zachowaj-opis .nazwa { font-size: 13px; }
.zachowaj-opis .dane, .zachowaj-wiersz > .dane { font-size: 11px; color: var(--tekst-cichy); }
.zachowaj-wiersz input[type="number"] { width: 74px; }
.zachowaj-guziki { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.wybor-efektu {
  margin-top: 8px; border: 1px solid var(--kamien); border-radius: 8px;
  background: var(--tlo-panel-2); padding: 8px;
}
.wybor-efektu-gora { display: flex; gap: 8px; margin-bottom: 8px; }
.wybor-efektu-gora input { flex: 1; }
.wybor-efektu-lista {
  display: flex; flex-direction: column; gap: 3px; max-height: 280px; overflow-y: auto;
}
.wybor-efektu-wiersz {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--tekst); cursor: pointer;
}
.wybor-efektu-wiersz:hover { border-color: var(--akcent); background: var(--tlo-najazd); }
.wybor-efektu-wiersz .nazwa { font-size: 13px; }
.wybor-efektu-wiersz .dane { font-size: 11px; color: var(--tekst-cichy); }

.produkcja { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.produkcja-wiersz {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: var(--tlo-pole); border: 1px solid var(--kamien); border-radius: 6px;
}
.produkcja-wiersz img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.produkcja-wiersz .nazwa { flex: 1; font-size: 13px; }
.produkcja-wiersz input { width: 78px; }
.produkcja-wiersz .dane { font-size: 11px; color: var(--tekst-cichy); width: 42px; }
.produkcja > .przycisk { align-self: flex-start; }

.szablon-karty { display: flex; flex-direction: column; gap: 10px; }
.szablon-karta {
  border: 1px solid var(--kamien); border-radius: 8px; padding: 10px 12px;
  background: var(--tlo-panel-2); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.szablon-karta:hover { border-color: var(--akcent); background: var(--tlo-najazd); }
.szablon-karta-gora {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
}
.szablon-karta-gora .nazwa {
  font-weight: 700; font-size: 15px; color: var(--akcent-jasny);
}
.szablon-karta-gora .dane { font-size: 11px; color: var(--tekst-cichy); }

.szablon-mini { pointer-events: none; }
.okno-ataku.drobne { padding: 8px; gap: 8px; border-width: 1px; border-radius: 6px; }
.okno-ataku.drobne .flanka { gap: 4px; }
.okno-ataku.drobne .flanka-naglowek {
  font-size: 10px; letter-spacing: 1px; padding-bottom: 3px;
}
.okno-ataku.drobne .rzad-slotow { gap: 4px; }
.okno-ataku.drobne .slot { min-height: 58px; padding: 4px 3px 3px; gap: 2px; }
.okno-ataku.drobne .slot img { max-width: 26px; height: 26px; }
.okno-ataku.drobne .slot .nazwa { font-size: 8px; max-height: 18px; }
.okno-ataku.drobne .slot .poziom { font-size: 8px; top: 1px; left: 2px; }
.okno-ataku.drobne .slot .ilosc { font-size: 10px; }
.okno-ataku.drobne .slot .znacznik-max { font-size: 9px; padding: 0 4px; }

/* Berimond: przelaczniki krainy stoja NAD edytorem fal, w tym samym oknie. Formularz
   jest ten sam co w Ustawieniach, ale tamten styl wisi na ".okno-ataku.ustawienia-w-oknie",
   wiec tutaj w ogole nie lapal - sekcja szla bez ramki i paddingu. Do tego 12 pol w jednej
   kolumnie spychalo fale poza ekran, stad siatka zamiast listy. */
#ustawienia-berimondu { margin: 0 0 14px; }
#ustawienia-berimondu .formularz-ustawien { max-width: none; }

#ustawienia-berimondu .ust-naglowek {
  border-radius: 12px 12px 0 0; padding: 14px 16px; align-items: center;
}
#ustawienia-berimondu .ust-naglowek h2 { display: flex; align-items: center; gap: 9px; }
#ustawienia-berimondu .ust-naglowek h2::after {
  content: 'kraina 10'; font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--tekst-cichy);
  padding: 2px 7px; border-radius: 999px;
  background: var(--tlo-pole); border: 1px solid var(--kamien);
}
#ustawienia-berimondu .ust-tytul .ust-podpis { max-width: 640px; }

/* Linie siatki rysuja SAME WIERSZE, przez box-shadow rozlewajacy sie w 1px przerwe -
   a NIE tlo kontenera w kolorze ramki.
   Ta druga sztuczka jest krotsza, ale ma wade widoczna przy kazdym niepelnym ostatnim
   rzedzie (np. trzy pola na gorze, dwa na dole): pustego miejsca w siatce nic nie
   przykrywa, wiec przebija przez nie goly var(--kamien) jako blotnista plama. Tlo
   kontenera musi byc kolorem panelu - wtedy pustka zlewa sie z reszta.
   overflow: hidden przycina cienie na krawedziach, zeby nie wylazily na ramke i rogi. */
#ustawienia-berimondu .ust-lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1px; background: var(--tlo-panel);
  border: 1px solid var(--kamien); border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
#ustawienia-berimondu .ustawienie {
  border-top: none; padding: 12px 16px; gap: 14px; align-items: flex-start;
  box-shadow: 0 0 0 1px var(--kamien);
}
#ustawienia-berimondu .ust-opis { padding-top: 1px; }
#ustawienia-berimondu .ust-etykieta { font-size: 13px; font-weight: 600; }
#ustawienia-berimondu .ust-podpis { font-size: 11px; }
#ustawienia-berimondu .ust-kontrolka { align-items: flex-start; padding-top: 1px; }
#ustawienia-berimondu .ustawienie.szerokie { grid-column: 1 / -1; }
#ustawienia-berimondu .ust-notka { border-radius: 0; }

@media (max-width: 900px) {
  #ustawienia-berimondu .ust-lista { grid-template-columns: 1fr; }
}