/* Advantage Nexus — arkusz stylów panelu.
 *
 * Jeden plik zamiast bloku w index.html. Wcześniej `.box`, `.head` i `.list` były
 * zdefiniowane osobno dla każdej zakładki — cztery kopie tej samej treści. Piąta
 * zakładka nie dostała ich wcale i dlatego nie miała przewijania. Tutaj wspólne
 * rzeczy są opisane RAZ, a sekcje dokładają wyłącznie to, co naprawdę różni je od
 * pozostałych.
 *
 * Układ pliku:
 *   1. Zmienne i podstawy
 *   2. Układ strony: nagłówek, zakładki, sekcje
 *   3. Komponenty wspólne: karty, listy, formularze, przyciski, tabele, komunikaty
 *   4. Widoki: pulpit, frazy, zadania, dane, domeny, użytkownicy
 *   5. Nakładki: logowanie, zmiana hasła, pomoc
 */

/* ============================================================
   1. Zmienne i podstawy
   ============================================================ */

:root {
  --bg: #0b0d11;
  --card: #151922;
  --line: #262b36;
  --txt: #e7e9ee;
  --mut: #98a0b0;
  --ok: #4ade80;
  --crit: #f87171;
  --warn: #f5d68a;
  --info: #60a5fa;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-pill: 999px;

  --f-xs: 11px;
  --f-sm: 12px;
  --f-md: 13px;
  --f-lg: 15px;
}

* { box-sizing: border-box; }

/* Ukrywanie elementów. Jedna klasa zamiast ustawiania `style.display` z kodu:
   wygląd należy do arkusza, a skrypt ma tylko mówić, w jakim stanie jest widok.
   `!important` bije reguły układu sekcji (`display: flex`), które są mocniejsze
   od zwykłej deklaracji. */
.ukryte { display: none !important; }

/* Pole widoczne wyłącznie dla menedżera haseł — musi istnieć w drzewie i mieć
   wartość, ale nie może zajmować miejsca ani przyjmować kliknięć. */
.pole-ukryte {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
  padding: 0;
  border: 0;
}

/* Wpis wycofany: widoczny, ale wyraźnie drugoplanowy. */
.wyblakle { opacity: .55; }

html, body { height: 100%; }

body {
  margin: 0;
  height: 100vh;
  /* Przewija się wnętrze list, nie całe okno — nagłówek z zakładkami zostaje
     widoczny niezależnie od długości listy. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4 { margin: 0; }

code {
  background: #11141a;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: var(--f-sm);
}

/* Pasek przewijania w ciemnym motywie — jeden wygląd w całym panelu. */
.list, .sources, .detail, .pomoc-tresc, .card-body {
  scrollbar-width: thin;
  scrollbar-color: #33394a transparent;
}
.list::-webkit-scrollbar,
.sources::-webkit-scrollbar,
.detail::-webkit-scrollbar,
.pomoc-tresc::-webkit-scrollbar,
.card-body::-webkit-scrollbar { width: 8px; }
.list::-webkit-scrollbar-thumb,
.sources::-webkit-scrollbar-thumb,
.detail::-webkit-scrollbar-thumb,
.pomoc-tresc::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb { background: #33394a; border-radius: 8px; }
.list::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   2. Układ strony
   ============================================================ */

header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

header h1 { font-size: 16px; font-weight: 600; }
header .meta, header .who { color: var(--mut); font-size: var(--f-md); }
header .who { margin-left: auto; display: flex; align-items: center; gap: 10px; }
header .ro {
  color: var(--mut);
  font-size: var(--f-xs);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--mut);
  padding: 4px 2px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 0;
}
.tab:hover { color: var(--txt); }
.tab.tab-active { color: var(--txt); border-bottom-color: var(--info); }

/* Wybór domeny w pasku nagłówka. Jedno miejsce dla całego panelu: wcześniej każda
   zakładka miała własny selektor i pięć niezależnych ustawień. */
.hdr-domena { display: flex; align-items: center; gap: 6px; }
.hdr-domena > span {
  color: var(--mut);
  font-size: var(--f-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hdr-domena select { font-size: var(--f-sm); padding: 4px 8px; }

/* Pulpit: dwie kolumny. */
.wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  padding: 16px 20px;
}
.col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

/* Sekcje pełnoekranowe. Jedna reguła dla WSZYSTKICH — nowa zakładka dostaje
   układ i przewijanie automatycznie, bez dopisywania czegokolwiek. */
#admin, #sites, #data, #keywords, #tasks, #negatives, #index {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px;
}
#admin.show, #sites.show, #data.show, #keywords.show, #tasks.show, #negatives.show, #index.show { display: flex; }

/* ============================================================
   3. Komponenty wspólne
   ============================================================ */

/* Karta pulpitu. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.card.grow { flex: 1 1 auto; }
/* Karta o stałej wysokości — nie rozpycha kolumny, przewija się w środku. */
.card.fixed { flex: 0 0 auto; max-height: 30vh; }
.card h2 {
  flex: 0 0 auto;
  font-size: var(--f-md);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mut);
  margin-bottom: 10px;
}
.card-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding-right: 6px; }

/* Kontener sekcji pełnoekranowej. */
.box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Sekcja przewija się jako całość. Bez tego treść stojąca NAD listą (w Indeksacji
     to kafle pięciu wyszukiwarek) rozpychała pudełko i wychodziła poza ekran bez
     żadnego paska: `body` ma `overflow: hidden`, a przewijała się tylko `.list`. */
  overflow-y: auto;
}

/* Indeksacja to jedyna sekcja, w której lista jest dodatkiem, a nie treścią główną
   — kafle i przewodnik po wyszukiwarkach zajmują większość wysokości. Lista rośnie
   tu naturalnie i przewija się razem z sekcją, zamiast kurczyć się do zera. */
#index .list { flex: 0 0 auto; overflow: visible; }

.head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.head h3 { font-size: var(--f-lg); }
.head .meta { color: var(--mut); font-size: var(--f-sm); }
.head .close { margin-left: auto; }

/* Lista w sekcji — to ona przewija, nie cała strona. */
.list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Formularz dodawania pod listą. */
.add { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; }
.add h4 {
  margin-bottom: 10px;
  font-size: var(--f-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mut);
}
.add .fields { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.add .fields label { display: flex; flex-direction: column; gap: 3px; font-size: var(--f-xs); color: var(--mut); }
.add .fields label.wide { flex: 1 1 280px; min-width: 280px; }
.add .btns { display: flex; gap: 8px; align-items: flex-end; }
.add .chk { flex-direction: row; align-items: center; gap: 6px; color: var(--txt); }
.chk-drobna { color: var(--mut); font-size: var(--f-sm); }
.add .chk input { width: auto; }

/* Pola formularzy — jeden wygląd wszędzie. */
input, select, textarea {
  background: #11141a;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--txt);
  font: inherit;
  font-size: var(--f-sm);
  padding: 6px 10px;
}
input:focus, select:focus, textarea:focus { border-color: var(--mut); outline: none; }
textarea { min-height: 58px; resize: vertical; }
input[readonly] { color: var(--mut); border-style: dashed; }
.add input, .add select { width: 150px; }
.add textarea { min-width: 280px; }

/* Pole wyszukiwania. W nagłówku sekcji jest wąskie, nad listą pulpitu szerokie. */
.szukaj { width: 100%; max-width: 420px; margin-bottom: 10px; }
.head .szukaj { margin: 0; max-width: 240px; }
/* Pole powodu decyzji musi pomieścić zdanie, nie dwa słowa. */
#kw-decision-reason { min-width: 260px; }

/* Przyciski. */
button {
  font: inherit;
  font-size: var(--f-md);
  border: 1px solid var(--line);
  background: #222732;
  color: var(--txt);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { border-color: var(--mut); }
.head button { font-size: var(--f-sm); padding: 6px 10px; }
button.primary { background: var(--info); border-color: var(--info); color: #08111f; font-weight: 600; }
button.btn-ok { border-color: rgba(76, 208, 125, .4); color: var(--ok); }
button.btn-no { border-color: rgba(255, 92, 92, .4); color: var(--crit); }
button.link { background: none; border: 0; color: var(--info); padding: 0; font-size: var(--f-sm); cursor: pointer; }

/* Odznaki i znaczniki stanu. */
.badge, .chip {
  border-radius: var(--r-pill);
  font-size: var(--f-xs);
  font-weight: 600;
  padding: 2px 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge.b-critical { background: #3a1d1d; color: #ffb4b4; }
.badge.b-warning { background: #3a2f16; color: var(--warn); }
.badge.b-info { background: #16263a; color: #a8cdf5; }
/* Domena przy sugestii — wyróżniona, bo w jednej kolejce leżą trzy witryny. */
.site {
  color: var(--info);
  font-size: var(--f-xs);
  border: 1px solid var(--info);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  margin-left: 6px;
  white-space: nowrap;
}
.rule { color: var(--mut); font-size: var(--f-xs); margin-left: auto; }

/* Tabele. */
table { width: 100%; border-collapse: collapse; font-size: var(--f-md); }
th {
  text-align: left;
  color: var(--mut);
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--card);
}
td { padding: 7px 8px; border-bottom: 1px solid var(--line); }

/* Komunikaty. */
.err { color: var(--crit); font-size: var(--f-sm); min-height: 16px; margin-top: 10px; }
.ok-msg { color: var(--ok); font-size: var(--f-sm); min-height: 16px; margin-top: 10px; }
.empty { color: var(--mut); font-size: var(--f-md); font-style: italic; }
.empty.err { color: var(--crit); border: 1px solid var(--crit); border-radius: var(--r-sm); padding: 10px; }
.msg { font-size: var(--f-md); padding: 4px 0; border-bottom: 1px solid var(--line); }
.msg .from { color: var(--info); font-weight: 600; }
.sub { color: var(--mut); font-size: var(--f-sm); }

/* ============================================================
   4. Widoki
   ============================================================ */

/* Krótkie wskazanie miejsca, do którego przeniosło kliknięcie z pulpitu.
   Jedna reguła dla KAŻDEGO wskazanego elementu — kolejki, karty sugestii, karty
   z pożyczoną sekcją.

   Cień rysowany do wewnątrz (`inset`), nie na zewnątrz. Zewnętrzny był przycinany
   przez `overflow` kontenera listy, więc efekt pojawiał się w kolejce, a przy
   zadaniach i frazach nie było go widać wcale — wyglądało to jak brak reguły,
   choć reguła była. */
.wskazane { animation: wskaz 1.6s ease-out; }
@keyframes wskaz {
  0%   { box-shadow: inset 0 0 0 2px var(--info); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .wskazane { animation: none; box-shadow: inset 0 0 0 2px var(--info); }
}

/* --- Pulpit: kolejka sugestii --- */
.sug { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: #11141a; margin-bottom: 10px; }
.sug .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.sug .title { font-weight: 700; }
.sug .reason { color: #c7ccd6; font-size: 14px; margin: 4px 0; }
.acts { display: flex; gap: 8px; margin-top: 8px; }

/* Dowody czyta człowiek podejmujący decyzję, nie programista — zwykły krój pisma
   i tabele zamiast zrzutu JSON-a. */
.evi {
  font-size: var(--f-sm);
  color: var(--mut);
  background: #11141a;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin-top: 6px;
}
.evi-fakty { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.evi-fakty b { color: var(--txt); font-weight: 600; }
.evi-sekcja { color: var(--txt); font-weight: 600; margin: 8px 0 4px; }
/* Szeroka tabela przewija się w swojej ramce, nie rozpycha strony. */
.evi-tab { overflow-x: auto; }
.evi-tab table { font-size: var(--f-sm); }
.evi-tab th { padding: 4px 10px 4px 0; white-space: nowrap; border-bottom: 1px solid var(--line); }
.evi-tab td { padding: 3px 10px 3px 0; border-bottom: 1px solid #1b1f28; white-space: nowrap; }
.evi-tab tr:last-child td { border-bottom: 0; }
.evi-tab th:first-child, .evi-tab td:first-child { white-space: normal; min-width: 150px; }
.evi-item { border-top: 1px solid var(--line); padding-top: 6px; }

/* --- Pulpit: co wymaga uwagi --- */
.uw-liczby { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.uw-poz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: #11141a;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
  flex: 1 1 130px;
}
.uw-poz:hover { border-color: var(--mut); }
.uw-poz b { font-size: 19px; }
.uw-poz span { color: var(--mut); font-size: var(--f-xs); line-height: 1.3; }
/* Krytyczne wyróżnione — psujący się pomiar to nie to samo co kolejka do przejrzenia. */
.uw-poz.pilne { border-color: #6b2f2f; }
.uw-poz.pilne b { color: var(--crit); }
.uw-alarm {
  border-left: 2px solid var(--crit);
  padding: 4px 0 4px 8px;
  margin-top: 6px;
  font-size: var(--f-sm);
  color: var(--mut);
  cursor: pointer;
}
.uw-alarm b { color: var(--txt); margin-right: 6px; }

/* --- Pulpit: kto ma dostęp do danych --- */
.kl-wiersz {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--f-sm);
}
.kl-wiersz:last-child { border-bottom: 0; }
.kl-nazwa { font-weight: 600; color: var(--txt); }
.kl-zakres {
  color: var(--mut);
  font-size: var(--f-xs);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}
.kl-uzycie { color: var(--mut); margin-left: auto; font-size: var(--f-xs); }
/* Klucz nigdy nieużyty: albo zapomniana konfiguracja, albo wyciek czekający na okazję. */
.kl-wiersz.zapomniany .kl-uzycie { color: var(--warn); }

/* Prawa kolumna pulpitu. */
.grid2 { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.grid2 b { color: var(--txt); }
.grid2 span { color: var(--mut); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.agent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.agent .name { font-weight: 600; }
/* Statusy agentów przychodzą z zewnętrznej usługi WIELKIMI literami. */
.d-FREE, .d-IDLE { background: var(--ok); }
.d-OFFLINE { background: #555; }
.d-BUSY, .d-WORKING { background: var(--warn); }

/* --- Frazy --- */
.kstany { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kstan {
  background: #11141a;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--mut);
  cursor: pointer;
  font-size: var(--f-sm);
  padding: 4px 12px;
}
.kstan:hover { border-color: var(--mut); }
.kstan.akt { background: #1d212b; border-color: var(--txt); color: var(--txt); }
.kstan b { color: var(--txt); font-weight: 600; margin-left: 5px; }

.kcard { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: #11141a; }
.ktop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.kphrase { font-weight: 700; }
.kstatus { color: var(--mut); font-size: var(--f-sm); text-transform: uppercase; letter-spacing: .04em; }
.kmeta, .kevidence { color: var(--mut); font-size: var(--f-sm); }
.kevidence { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.kacts { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 10px; }
.kacts button { font-size: var(--f-sm); padding: 5px 10px; background: #11141a; }
.kchart:empty { display: none; }

.kseria { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.kseria > b { font-size: var(--f-sm); }
.kseria-okres { color: var(--mut); font-size: var(--f-xs); margin-left: 8px; }
.kwykresy { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.kwykres-tyt { color: var(--mut); font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .04em; }
.kwykres svg { display: block; background: #0d1015; border: 1px solid var(--line); border-radius: var(--r-sm); }
.kwykres-liczby { color: var(--mut); font-size: var(--f-xs); margin-top: 3px; }
.kwykres-zakres { margin-left: 8px; }

/* --- Zadania --- */
/* Wskazówka „co z tym zrobić” razem z drogą do miejsca, gdzie się to robi. */
.zad-rada {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}
.zad-rada-co { color: var(--txt); font-size: var(--f-md); line-height: 1.5; }
.zad-rada-akcje { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.zad-rada-akcje button { font-size: var(--f-sm); padding: 5px 12px; }
.zad-rada-samo { color: var(--mut); font-size: var(--f-sm); flex: 1 1 260px; }

.zad { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: #11141a; }
.zad-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zad-tyt { font-weight: 700; }
.zad-meta { color: var(--mut); font-size: var(--f-sm); margin-top: 4px; }
.zad-pasek {
  background: #0d1015;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  height: 8px;
  margin: 10px 0 8px;
  overflow: hidden;
}
.zad-pasek i {
  display: block;
  height: 100%;
  background: var(--ok);
  width: var(--postep, 0%);
  transition: width .2s ease;
}
.zad-frazy { display: flex; flex-wrap: wrap; gap: 6px; }
.zad-fraza {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--f-sm);
  padding: 3px 10px;
  color: var(--mut);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.zad-fraza.zrobiona { border-color: #2f6b45; color: var(--txt); }
/* Status słowem, nie samym kolorem — zmiana decyzji ma być widoczna. */
.zad-fraza-stan { color: var(--mut); font-size: var(--f-xs); font-weight: 400; }
.zad-fraza.zrobiona .zad-fraza-stan { color: #8ae0a8; }
.zad-stan { border-radius: var(--r-pill); font-size: var(--f-xs); padding: 2px 10px; text-transform: uppercase; letter-spacing: .04em; }
.zad-stan.otwarte { background: #3a2f16; color: var(--warn); }
.zad-stan.zrobione { background: #1e3a2a; color: #8ae0a8; }

/* --- Indeksacja --- */
/* Kontenery stanu i przewodnika po wyszukiwarkach: puste nie zajmują miejsca. */
.ix-stan:empty, .ix-silniki:empty { display: none; }
.ix-silniki { margin-bottom: 4px; }
.ix-kafle { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ix-kafel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #11141a;
  padding: 10px 14px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ix-kafel span { color: var(--mut); font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .04em; }
.ix-kafel b { font-size: 20px; }
.ix-kafel i { color: var(--mut); font-size: var(--f-xs); font-style: normal; }
/* Kafel z problemem wyróżniony — zero błędów ma wyglądać inaczej niż kilkaset. */
.ix-kafel.zle { border-color: #6b2f2f; }
.ix-kafel.zle b { color: var(--crit); }

.ix-naglowek { color: var(--txt); font-weight: 600; margin: 16px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ix-ok, .ix-brak { font-size: var(--f-xs); font-weight: 400; border-radius: var(--r-pill); padding: 2px 10px; }
.ix-ok { background: #1e3a2a; color: #8ae0a8; }
.ix-brak { background: #3a2f16; color: var(--warn); }
.ix-tabela { display: flex; flex-direction: column; gap: 8px; }
.ix-silnik { border: 1px solid var(--line); border-radius: var(--r-md); background: #11141a; padding: 10px 12px; }
.ix-silnik-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ix-silnik-stan { color: var(--ok); font-size: var(--f-sm); }
.ix-silnik-zglasza { font-size: var(--f-xs); margin-left: auto; }
.ix-silnik-zglasza.tak { color: #8ae0a8; }
.ix-silnik-zglasza.nie { color: var(--mut); }
.ix-silnik-czyta { color: var(--mut); font-size: var(--f-sm); margin-top: 3px; }
.ix-silnik-rada { color: var(--txt); font-size: var(--f-sm); margin-top: 6px; line-height: 1.5; }
.ix-uczestnicy { color: var(--mut); font-size: var(--f-sm); margin: 10px 0 4px; }

/* --- Dane --- */
#data .panes { flex: 1 1 auto; display: grid; grid-template-columns: 280px 1fr; gap: 14px; min-height: 0; }
#data .sources, #data .detail { overflow-y: auto; min-height: 0; }
.srcitem { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.srcitem:hover { border-color: #3a4252; }
.srcitem.active { border-color: var(--info); }
.srcitem .name { font-weight: 600; }
.srcitem .sub { margin-top: 3px; }
#data .detail h4 { margin-bottom: 4px; font-size: var(--f-md); }
#data .detail .meta { color: var(--mut); font-size: var(--f-sm); margin-bottom: 10px; }
table.dt th { padding: 6px 8px; white-space: nowrap; }
table.dt td { padding: 6px 8px; vertical-align: top; }
pre.json {
  font-family: ui-monospace, monospace;
  font-size: var(--f-sm);
  color: #c7ccd6;
  background: #11141a;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px;
  white-space: pre-wrap;
  overflow: auto;
}

/* --- Domeny --- */
#sites tr.srow { cursor: pointer; }
#sites tr.srow:hover td { background: #1d212b; }

/* --- Użytkownicy --- */
.urow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--f-md);
  flex-wrap: wrap;
}
.urow .u-email { font-weight: 600; min-width: 170px; }
.urow .u-acts { margin-left: auto; display: flex; gap: 6px; }
/* Pole hasła pojawia się w wierszu użytkownika — zamiast okienka przeglądarki,
   które bywa zablokowane i wtedy reset hasła po cichu nie działa. */
.pw-form { display: flex; gap: 6px; flex-basis: 100%; margin-top: 8px; }
.pw-input { flex: 1; }

/* ============================================================
   5. Nakładki
   ============================================================ */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, .85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 20px;
}
.overlay.show { display: flex; }
.overlay .box {
  width: 340px;
  flex: 0 0 auto;
  border-radius: var(--r-lg);
  padding: 26px;
}
.overlay h3 { margin-bottom: 6px; }
.overlay .sub { margin: 0 0 14px; }
.overlay input { width: 100%; margin-bottom: 10px; padding: 9px 11px; }
.overlay button { width: 100%; padding: 9px; }
.overlay button.primary { background: #2a3441; border-color: #39455a; color: var(--txt); }
.overlay form { margin: 0; }

/* Pomoc jest do czytania, nie do wypełniania — stąd szerokość liczona z ekranu
   i własne przewijanie treści. Selektor musi być równie mocny co `.overlay .box`,
   inaczej tamta reguła narzuca szerokość okna logowania. */
.overlay .pomoc-box {
  width: 60vw;
  min-width: min(560px, 94vw);
  max-width: 1400px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.pomoc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pomoc-head button { width: auto; padding: 6px 14px; }
.pomoc-tresc { overflow-y: auto; margin-top: 14px; padding-right: 10px; font-size: var(--f-md); line-height: 1.6; }
.pomoc-tresc h4 { color: var(--txt); font-size: var(--f-md); margin: 20px 0 6px; }
.pomoc-tresc h4:first-child { margin-top: 0; }
.pomoc-tresc p, .pomoc-tresc ul { color: var(--mut); margin: 0 0 10px; }
.pomoc-tresc ul { padding-left: 20px; }
.pomoc-tresc li { margin-bottom: 5px; }
.pomoc-tresc b { color: var(--txt); }

/* ============================================================
   Węższe ekrany
   ============================================================ */

@media (max-width: 1100px) {
  .wrap { grid-template-columns: 1fr; }
  #data .panes { grid-template-columns: 1fr; }
  .overlay .pomoc-box { width: 92vw; }
}

/* --- Wykryte podpięcia (zakładka Domeny) --- */
/* Lista tego, co widzą nasze poświadczenia, nad formularzem profilu domeny.
   Wizualnie oddzielona od formularza, bo to nie pola do wypełnienia, tylko odczyt
   ze zewnętrznych API — z jednym przyciskiem, który przenosi wartość do formularza. */
.wykryte { border-top: 1px solid var(--line); padding: 14px 16px; }
.wykryte .head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wykryte h4 { margin: 0; font-size: 14px; }
.wykryte .meta { color: var(--mut); font-size: 12px; margin-right: auto; }
.wy-grupa { margin-bottom: 12px; }
.wy-grupa h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mut); }
.wy-blad { font-size: 12px; color: var(--mut); font-style: italic; }
.wy-poz { border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px;
  margin-bottom: 5px; font-size: 13px; }
/* Podpięte wyróżnione ramką, nie tylko etykietą: przy kilkunastu property to jedyna
   rzecz, której szuka się wzrokiem. */
.wy-poz.jest { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.wy-glowna { display: flex; align-items: baseline; gap: 8px; }
.wy-opis { color: var(--mut); font-size: 12px; margin-top: 2px; }
.wy-tak { font-size: 11px; color: var(--ok); font-weight: 600; }
.wy-moze { font-size: 11px; color: var(--mut); }

/* --- Akcje przy frazie zadania --- */
/* Zadanie zamyka się przy frazie, której dotyczy, więc przyciski siedzą w tym
   samym chipie co jej nazwa i stan. Celowo drobne: to działanie na jednej frazie,
   nie na całym zadaniu. */
.zad-akcja { margin-left: 6px; font-size: 11px; padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--line); background: transparent; color: var(--txt); cursor: pointer; }
.zad-akcja:hover { border-color: var(--info); color: var(--info); }
.zad-fraza.zrobiona .zad-akcja { display: none; }

/* --- Kafle przy wyszukiwarce i ich rozwinięcie --- */
/* Kafel jest przyciskiem, nie ozdobą: każda liczba daje się rozwinąć w dane, na
   których stoi. Dlatego wygląda na klikalny — kursor, ramka reagująca na najazd. */
.ix-kafel { text-align: left; cursor: pointer; }
.ix-kafel:hover { border-color: var(--info); }
.ix-silnik-brak { font-size: var(--f-sm); color: var(--mut); font-style: italic;
  margin: 6px 0; }
.ix-szczegol { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; background: var(--card); }
.ix-szczegol-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ix-szczegol-top b { font-size: var(--f-md); }
.ix-szczegol-top .link { margin-left: auto; }
.ix-szczegol-opis { font-size: var(--f-sm); color: var(--mut); margin-bottom: 8px; }
/* Historia bywa długa (91 dni), więc tabela przewija się w swoim pudełku zamiast
   rozpychać stronę. */
.ix-szczegol-tabela { max-height: 340px; overflow: auto; }
.ix-szczegol-tabela table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); }
.ix-szczegol-tabela th { position: sticky; top: 0; background: var(--card);
  text-align: left; color: var(--mut); font-weight: 600; padding: 5px 8px;
  border-bottom: 1px solid var(--line); }
.ix-szczegol-tabela td { padding: 4px 8px; border-bottom: 1px solid var(--line); }

/* Do czego służy dane źródło. Zakładka Dane pokazuje surowe snapshoty; ta linia
   mówi, który widok i która reguła z nich korzystają — inaczej Dane i Indeksacja
   wyglądają na dwa niezależne byty, choć czytają te same wiersze. */
.srcuse { font-size: var(--f-xs); color: var(--info); margin-top: 2px; opacity: .85; }

/* --- Sekcja pożyczona do lewej kolumny pulpitu --- */
/* Ta sama sekcja co na pełnym ekranie, więc trzeba jej tylko zdjąć własny padding
   i pozwolić wypełnić kartę: obramowanie i tytuł daje już karta gniazda. */
#pulpit-gniazdo { display: flex; flex-direction: column; min-height: 0; }
.w-pulpicie { padding: 0 !important; }
/* Wewnętrzne pudełko sekcji nie rysuje drugiej ramki w środku karty. */
.w-pulpicie > .box { border: 0; border-radius: 0; background: transparent; }
/* Nagłówek sekcji byłby powtórzeniem tytułu karty gniazda. */
.w-pulpicie > .box > .head > h3 { display: none; }
#karta-gniazda h2 { display: flex; align-items: baseline; gap: 10px; }
#karta-gniazda h2 .link { margin-left: auto; font-size: var(--f-sm); }

/* Dostęp klientów AI: rodzaj drogi i skąd bierze się uprawnienie. Dwie różne
   rzeczy — klucz zapisany w bazie i konto na liście dopuszczonych — wyglądały
   wcześniej identycznie, a liczba użyć dla OAuth nie istniała wcale. */
.kl-droga { font-size: var(--f-xs); color: var(--mut); }
.kl-uprawnienie { font-size: var(--f-xs); color: var(--mut); font-style: italic; }

/* --- Liczniki stanów: jeden komponent dla Fraz, Zadań, Antysłów i Indeksacji --- */
/* Pigułki nad listą: ile jest razem i ile w każdym stanie. Każda jest przyciskiem,
   bo liczba bez możliwości zobaczenia, co za nią stoi, tylko informuje o istnieniu
   problemu i zostawia szukanie człowiekowi. */
.liczniki { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.licznik {
  display: flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--txt);
  padding: 5px 12px; cursor: pointer; font: inherit;
}
.licznik:hover { border-color: var(--info); }
.licznik b { font-size: var(--f-lg); font-variant-numeric: tabular-nums; }
.licznik span { font-size: var(--f-xs); color: var(--mut); }
/* Wybrany stan musi być widoczny od razu: inaczej człowiek patrzy na zawężoną
   listę, nie wiedząc, że jest zawężona. */
.licznik.wybrany { border-color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.licznik.wybrany span { color: var(--txt); }