/* LAMOUR — Asystent maili. Kolory sklepu lamour.com.pl */
:root {
  --tlo: #FAF5F0;
  --karta: #FFFFFF;
  --ramka: #E6DED6;
  --tekst: #2B2B2B;
  --czern: #161615;
  --bez: #E9D0BA;
  --bez-jasny: #F4E6D8;
  --szary: #999999;
  --blad: #B94A48;
  --sukces: #4F7D5B;
  --promien: 10px;
  --pismo: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.5 var(--pismo);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------- Górny pasek ---------- */
.pasek {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
  padding: 0 24px;
  background: var(--czern);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.logo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.logo-marka { font-weight: 600; letter-spacing: .32em; font-size: 15px; }
.logo-opis { color: var(--bez); font-size: 13px; letter-spacing: .04em; }
.zakladki { display: flex; gap: 4px; height: 100%; }
.zakladki a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #cfc8c1;
  text-decoration: none;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.zakladki a:hover { color: #fff; }
.zakladki a.aktywna { color: #fff; border-bottom-color: var(--bez); }
.pasek-prawo { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.pobranie { color: #bdb6ae; font-size: 13px; white-space: nowrap; }

.konto { position: relative; }
.konto summary { list-style: none; cursor: pointer; }
.konto summary::-webkit-details-marker { display: none; }
.inicjal {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bez);
  color: var(--czern);
  font-weight: 600;
}
.konto-menu {
  position: absolute;
  right: 0; top: 42px;
  min-width: 220px;
  padding: 14px;
  background: var(--karta);
  color: var(--tekst);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  box-shadow: 0 8px 24px rgba(22, 22, 21, .12);
}
.konto-nazwa { font-weight: 600; }
.konto-email, .konto-rola { color: var(--szary); font-size: 13px; }
.konto-menu form { margin-top: 12px; }

/* ---------- Treść ---------- */
.tresc { max-width: 1400px; margin: 0 auto; padding: 28px 24px 48px; }
.naglowek { font-size: 22px; font-weight: 600; margin: 0 0 18px; color: var(--czern); }
.sekcja {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--szary);
  margin: 0 0 12px;
}
.karta {
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  padding: 20px 22px;
}

/* ---------- Formularze i przyciski ---------- */
label { display: block; font-size: 13px; color: var(--szary); margin-bottom: 14px; }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  font: inherit;
  color: var(--tekst);
  background: #fff;
  border: 1px solid var(--ramka);
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--czern); box-shadow: 0 0 0 3px var(--bez-jasny); }

.przycisk {
  display: inline-block;
  padding: 10px 18px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  background: var(--czern);
  border: 1px solid var(--czern);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.przycisk:hover { background: #333; }
.przycisk-jasny { background: #fff; color: var(--czern); border-color: var(--ramka); }
.przycisk-jasny:hover { background: var(--bez-jasny); }
.przycisk-pelny { width: 100%; }

.komunikat { padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.komunikat-blad { background: #f6e3e2; color: var(--blad); }
.komunikat-ok { background: #e5efe7; color: var(--sukces); }

/* ---------- Strony bez paska (logowanie, błąd) ---------- */
body.srodek { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.karta-waska { width: 100%; max-width: 380px; }
.logowanie-logo { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0 22px; }
.logowanie-logo .logo-marka { color: var(--czern); font-size: 20px; }
.logowanie-logo .logo-opis { color: var(--szary); }

/* ---------- Drobne ---------- */
.szary { color: var(--szary); }
.maly { font-size: 13px; }
.czerwony { color: var(--blad); }
.zielony { color: var(--sukces); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; }
.prawo { text-align: right; }
.pusto { color: var(--szary); padding: 24px 0; text-align: center; }
.przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.okruszki { margin: 0 0 8px; font-size: 13px; }
.okruszki a { color: var(--szary); text-decoration: none; }
.okruszki a:hover { color: var(--czern); }

.chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  background: var(--bez-jasny);
  color: var(--czern);
}
.chip-formularz { background: #E9D0BA; font-size: 11px; padding: 1px 7px; }
.chip-jezyk { background: #fff; border: 1px solid var(--ramka); font-weight: 600; letter-spacing: .04em; }
.status-new { background: #f3efe9; color: #6b645d; }
.status-draft { background: var(--bez); color: var(--czern); }
.status-manual { background: #f6ebd9; color: #8a5a1c; }
.status-sent { background: #e5efe7; color: var(--sukces); }
.status-spam, .status-archived { background: #f1f1f1; color: var(--szary); }

.kropka { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1.5px solid #d6d0ca; }
.kropka-1 { background: var(--blad); border-color: var(--blad); }
.kropka-2 { background: #D9A441; border-color: #D9A441; }
.kropka-3 { background: #c4beb8; border-color: #c4beb8; }

/* ---------- Kolejka ---------- */
.kolejka-naglowek { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.kolejka-naglowek .naglowek { margin: 0; }
.kolejka-naglowek .szukaj { margin-left: auto; flex: 0 1 420px; min-width: 240px; }
.szukaj input { margin: 0; }
.kolejka { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }

.filtry { padding: 16px 12px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
.grupa-filtrow + .grupa-filtrow { margin-top: 14px; }
.filtry .sekcja { margin: 0 8px 6px; }
.filtr {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  font-size: 14px; text-decoration: none; white-space: nowrap;
}
.filtr:hover { background: var(--bez-jasny); }
.filtr.aktywny { background: var(--czern); color: #fff; }
.filtr .licznik { color: var(--szary); font-variant-numeric: tabular-nums; font-size: 13px; }
.filtr.aktywny .licznik { color: var(--bez); }
.zgodnosc { margin: 8px 8px 0; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--sukces); background: #eef4ef; }
.zgodnosc.niezgodne { color: var(--blad); background: #f6e3e2; }

/* lista maili: elastyczne wiersze (grid) zamiast tabeli — nic nie wychodzi poza ekran */
.lista-maili { padding: 0; overflow: hidden; }
.lista-komunikat { margin: 12px 18px; }
.lista-naglowek {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 48px; padding: 8px 18px; border-bottom: 1px solid var(--ramka); background: #fdfbf8;
}
.lista-tytul { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--czern); }
.lista-tytul .szary { letter-spacing: 0; font-weight: 400; }
.pasek-zaznaczenia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; font-size: 13px; }
.pasek-zaznaczenia[hidden] { display: none; }
.przycisk-maly { padding: 6px 12px; font-size: 13px; }

.maile { list-style: none; margin: 0; padding: 0; }
.mail-wiersz {
  display: grid;
  grid-template-columns: 24px 10px minmax(150px, 210px) minmax(0, 1fr) minmax(170px, 230px) 112px;
  grid-template-areas: "wybor kropka nadawca temat meta status";
  gap: 4px 14px; align-items: start;
  padding: 13px 18px; border-bottom: 1px solid #f0ebe5; cursor: pointer;
  transition: background .12s;
}
.mail-wiersz.bez-wyboru { grid-template-columns: 10px minmax(150px, 210px) minmax(0, 1fr) minmax(170px, 230px) 112px; grid-template-areas: "kropka nadawca temat meta status"; }
.mail-wiersz:last-child { border-bottom: 0; }
.mail-wiersz:hover { background: #fdfaf6; }
.mail-wiersz .kol-wybor { grid-area: wybor; padding-top: 2px; }
.kol-wybor input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--czern); display: block; }
.mail-wiersz .kropka { grid-area: kropka; margin-top: 6px; }
.m-nadawca { grid-area: nadawca; min-width: 0; }
.m-nadawca strong { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-nadawca span { display: block; font-size: 12px; color: var(--szary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-temat { grid-area: temat; min-width: 0; font-size: 14px; }
.m-temat a { text-decoration: none; color: var(--tekst); }
.m-temat a:hover { text-decoration: underline; }
.nieprzeczytany .m-temat a { font-weight: 600; color: var(--czern); }
.m-temat a, .m-opis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.m-opis { font-size: 13px; color: var(--szary); margin-top: 2px; }
.m-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.m-zamowienie { font-size: 12px; color: var(--szary); white-space: nowrap; }
.m-status { grid-area: status; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.m-status time { font-size: 12px; color: var(--szary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spinacz { font-size: 12px; }

/* średnie ekrany / powiększenie przeglądarki: kategoria i numer pod tematem */
@media (max-width: 1280px) {
  .kolejka { grid-template-columns: 220px minmax(0, 1fr); }
  .mail-wiersz { grid-template-columns: 24px 10px minmax(140px, 190px) minmax(0, 1fr) 104px; grid-template-areas: "wybor kropka nadawca temat status" "wybor kropka nadawca meta status"; }
  .mail-wiersz.bez-wyboru { grid-template-columns: 10px minmax(140px, 190px) minmax(0, 1fr) 104px; grid-template-areas: "kropka nadawca temat status" "kropka nadawca meta status"; }
  .m-meta { margin-top: 2px; }
}

/* węższe okna: filtry nad listą, jako rzędy przycisków */
@media (max-width: 1100px) {
  .kolejka { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .filtry { position: static; max-height: none; overflow: visible; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
  .grupa-filtrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .grupa-filtrow + .grupa-filtrow { margin-top: 0; }
  .filtry .sekcja { margin: 0; flex: 0 0 110px; font-size: 10px; }
  .filtry-lista { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; min-width: 0; }
  .filtr { border: 1px solid var(--ramka); border-radius: 999px; padding: 4px 12px; font-size: 13px; background: #fff; }
  .filtr.aktywny { border-color: var(--czern); }
  .zgodnosc { margin: 0; flex: 0 0 auto; white-space: nowrap; }
}

/* tablet pionowo: nadawca nad tematem */
@media (max-width: 760px) {
  .mail-wiersz { grid-template-columns: 22px 10px minmax(0, 1fr) auto; grid-template-areas: "wybor kropka nadawca status" "wybor kropka temat temat" "wybor kropka meta meta"; padding: 12px 14px; gap: 3px 10px; }
  .mail-wiersz.bez-wyboru { grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "kropka nadawca status" "kropka temat temat" "kropka meta meta"; }
  .m-nadawca span { display: none; }
  .m-status { flex-direction: row-reverse; align-items: center; gap: 8px; }
  .m-temat a, .m-opis { -webkit-line-clamp: 2; }
  .lista-naglowek { padding: 8px 14px; }
  .grupa-filtrow { flex-direction: column; align-items: stretch; gap: 4px; }
  .filtry .sekcja { flex: none; }
}

/* ---------- Tabele (użytkownicy, dziennik) ---------- */
.karta-tabela { padding: 6px 0; overflow-x: auto; }
.karta-tabela > .komunikat, .karta-tabela > .maly, .karta-tabela > .pusto { margin: 10px 18px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--szary); padding: 10px; border-bottom: 1px solid var(--ramka); white-space: nowrap;
}
.tabela td { padding: 11px 10px; border-bottom: 1px solid #f0ebe5; vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela th:first-child, .tabela td:first-child { padding-left: 18px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 18px; }

/* ---------- Sprawa ---------- */
.sprawa-naglowek { margin-bottom: 18px; }
.sprawa-naglowek .naglowek { margin-bottom: 8px; }
.chipy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pewnosc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--szary); margin-left: 6px; }
.pewnosc-pasek { width: 90px; height: 6px; border-radius: 3px; background: #efe8e0; overflow: hidden; }
.pewnosc-pasek span { display: block; height: 100%; background: var(--czern); }
.sprawa { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .sprawa { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 900px) { .sprawa { grid-template-columns: minmax(0, 1fr); } }
.sprawa-lewa, .sprawa-prawa { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mail summary { list-style: none; cursor: pointer; }
.mail summary::-webkit-details-marker { display: none; }
.mail-naglowek { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.mail.biezacy { border-color: #d8c6b4; }
.mail:not([open]) { background: #fdfbf8; }
.mail-tresc { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 14px; font-size: 14px; line-height: 1.6; }
.zalaczniki { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.zalacznik {
  display: flex; flex-direction: column; gap: 4px; width: 150px; padding: 8px;
  border: 1px solid var(--ramka); border-radius: 8px; text-decoration: none; font-size: 12px;
}
.zalacznik:hover { border-color: var(--czern); }
.zalacznik img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; background: var(--tlo); }
.zalacznik-ikona { font-size: 32px; height: 100px; display: grid; place-items: center; background: var(--tlo); border-radius: 4px; }
.zalacznik-nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* karta sprawy — dodatki etapu 2 */
.streszczenie { margin: 10px 0 0; font-size: 15px; }
.blok { display: block; }
.dane-waskie { grid-template-columns: 110px minmax(0, 1fr); }
.dane.zwrot + .dane.zwrot { padding-top: 12px; border-top: 1px solid #f0ebe5; }
.pozycje { list-style: none; margin: 0 0 8px; padding: 0; }
.pozycje li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f0ebe5; font-size: 14px; }
.pozycje li:last-child { border-bottom: 0; }
.pozycje.maly li { font-size: 13px; padding: 5px 0; }
.pobierz-zamowienie { display: flex; gap: 8px; margin-top: 14px; }
.pobierz-zamowienie input { margin: 0; }
.zmiana-kategorii { display: flex; gap: 8px; }
.zmiana-kategorii select { margin: 0; width: auto; }
.akcje form { margin: 0; }
.akcje .przyciski + .przyciski { margin-top: 8px; }
button[disabled] { opacity: .6; cursor: wait; }
.komunikat-uwaga { background: #f6ebd9; color: #7a5016; }
.odpowiedz textarea { font: 14px/1.6 var(--pismo); resize: vertical; min-height: 220px; }
.adresat { margin: 4px 0 12px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.akcje-dodatkowe { padding-top: 12px; margin-top: 16px; border-top: 1px solid #f0ebe5; }
.mail.nasza { background: #fbf8f4; }

/* ---------- Szablony ---------- */
.szablony { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.szablon-glowna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.szablon-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.szablon-boczny { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.jezyki-szablonu { display: flex; gap: 3px; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.jezyki-szablonu span { padding: 0 4px; border-radius: 4px; }
.jezyki-szablonu .jest { background: #e5efe7; color: var(--sukces); }
.jezyki-szablonu .brak { background: #f6e3e2; color: var(--blad); }
.filtr.aktywny .jezyki-szablonu .jest { background: #2f3a31; color: #cfe3d3; }
.zakladki-jezykow { display: flex; gap: 4px; border-bottom: 1px solid var(--ramka); }
.zakladki-jezykow a { padding: 8px 16px; text-decoration: none; color: var(--szary); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.zakladki-jezykow a.aktywna { color: var(--czern); border-bottom-color: var(--czern); font-weight: 600; }
.szablon-glowna textarea { font: 14px/1.6 var(--pismo); resize: vertical; }
.podtytul { font-size: 13px; font-weight: 600; margin: 18px 0 8px; color: var(--czern); }
.przelaczniki { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; }
.przelacznik { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--tekst); }
.przelacznik input { width: auto; margin: 0; accent-color: var(--czern); }
.checklista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.zmienne { list-style: none; margin: 0; padding: 0; }
.zmienne li { display: flex; flex-direction: column; padding: 5px 0; border-bottom: 1px solid #f0ebe5; }
.zmienna { align-self: flex-start; background: var(--bez-jasny); border: 0; border-radius: 4px; padding: 1px 6px; cursor: pointer; color: var(--czern); }
.zmienna:hover { background: var(--bez); }
.trzy-kolumny { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.poprawka { border-top: 1px solid #f0ebe5; padding: 8px 0; font-size: 13px; }
.poprawka pre, .podglad pre { white-space: pre-wrap; font: 13px/1.5 var(--pismo); background: var(--tlo); padding: 10px; border-radius: 6px; margin: 4px 0 8px; }
.podglad-uklad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.podglad pre.draft { background: #fff; border: 1px solid var(--ramka); }

/* ---------- Ustawienia ---------- */
.siatka-ustawien { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; align-items: start; }
.dane { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; font-size: 14px; }
.dane dt { color: var(--szary); }
.dane dd { margin: 0; overflow-wrap: anywhere; }
.wynik-testu { margin-top: 10px; }
.spis-ustawien { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.spis-ustawien a { padding: 5px 12px; border: 1px solid var(--ramka); border-radius: 999px; background: #fff; text-decoration: none; font-size: 13px; }
.spis-ustawien a:hover { background: var(--bez-jasny); }
.karta-szeroka { margin: 20px 0; }
.siatka-ustawien + .karta-szeroka, .karta-szeroka + .siatka-ustawien { margin-top: 20px; }
.wiersz-konta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.wiersz-konta select { width: auto; margin: 0; }
.tabela-uzytkownikow tr.wylaczony td { color: var(--szary); }
.tabela-uzytkownikow td { vertical-align: middle; }
.tabela-uzytkownikow td:first-child { padding-left: 18px; width: auto; padding-top: 11px; }
.nowe-konto { margin-top: 16px; padding-top: 4px; border-top: 1px solid #f0ebe5; }
.wiersz-pol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.haslo-jednorazowe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.haslo-jednorazowe code { font-size: 16px; background: #fff; padding: 4px 10px; border-radius: 6px; user-select: all; }
input[type="range"] { padding: 0; accent-color: var(--czern); }
.prog-wartosc { margin: -6px 0 14px; font-size: 14px; }
.konto-link { display: block; margin-top: 10px; font-size: 13px; }
.filtr-dziennika { display: flex; gap: 8px; }
.filtr-dziennika select { width: auto; margin: 0; }
.tabela-dziennika td:first-child { white-space: nowrap; width: auto; padding-top: 11px; }
.szczegoly { margin: 0; white-space: pre-wrap; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; color: #555; max-width: 520px; }
.wiersz-blad td { background: #fdf3f2; }

/* ---------- Statystyki ---------- */
.kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kafel { display: flex; flex-direction: column; gap: 4px; }
.kafel-liczba { font-size: 28px; font-weight: 600; color: var(--czern); }
.kafel-opis { font-size: 13px; color: var(--szary); }
.wykres-wiersz { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.wykres-pasek { height: 8px; background: #f3eee8; border-radius: 4px; overflow: hidden; }
.wykres-pasek span { display: block; height: 100%; background: var(--czern); border-radius: 4px; }
.zielony-pasek span { background: var(--sukces); }
.przelacznik-okresu { display: flex; gap: 4px; }
.przelacznik-okresu a { padding: 6px 12px; border: 1px solid var(--ramka); border-radius: 999px; text-decoration: none; font-size: 13px; background: #fff; }
.przelacznik-okresu a.aktywny { background: var(--czern); color: #fff; border-color: var(--czern); }

/* ---------- Telefon ---------- */
@media (max-width: 767px) {
  .pasek { gap: 12px; padding: 0 16px; overflow-x: auto; }
  .logo-opis, .pobranie { display: none; }
  .zakladki a { padding: 0 8px; }
  .tresc { padding: 20px 16px 40px; }
  .konto-menu { position: fixed; right: 16px; top: 60px; }
  .kolejka-naglowek .szukaj { flex: 1 1 100%; min-width: 0; margin-left: 0; order: 3; }
  .sprawa { grid-template-columns: minmax(0, 1fr); }
  .siatka-ustawien { grid-template-columns: minmax(0, 1fr); }
  .szablony, .szablon-uklad, .trzy-kolumny, .podglad-uklad, .wiersz-pol { grid-template-columns: minmax(0, 1fr); }
}