/* Portal klienta /klient (23.10.2026) – ten sam wygląd co panel (panel.css): Inter, karty, kolor firmy w --firma. */
.wrap { max-width: 1180px }
.pas-podgladu { margin-bottom: 16px; font-weight: 500 }
.siatka-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px }
.siatka-k:empty { display: none }
.raport-k, .tematy-k { display: grid; gap: 10px; align-content: start }
.raport-k h2, .tematy-k h2 { margin: 0 0 4px }
.raport-k p, .tematy-k p { margin: 0; font-size: 14.5px }
.raport-k .btn, .tematy-k .btn { background: var(--firma); justify-self: start; text-decoration: none }
.raport-k .btn:disabled { background: var(--line); color: var(--muted); opacity: 1 }
.raport-info { font-size: 13.5px !important }
.raport-info b#odliczanie { font-variant-numeric: tabular-nums; color: var(--fg) }

/* kalendarz klienta: na komputerze tytuły w dniach, na telefonie jedna linia (dłuższa = więcej publikacji) */
.kal-k { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.kk { background: var(--card); min-height: 96px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left; border: 0; font: inherit; color: inherit; min-width: 0; position: relative }
.kk:hover { background: color-mix(in srgb, var(--sel) 55%, var(--card)) }
.kk.inny { background: color-mix(in srgb, var(--bg) 70%, var(--card)); color: var(--muted) }
.kk[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--firma) }
.kk .nr { font: 600 13px var(--sans); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-variant-numeric: tabular-nums }
.kk.dzis .nr { background: var(--firma); color: #fff }
.kk .wpisy { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.kk .wpis { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; background: color-mix(in srgb, var(--firma) 9%, var(--card)); border-left: 3px solid var(--firma); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0 }
.kk .wpis svg { width: 11px; height: 11px; flex: none; color: var(--firma) }
.kk .wpis.po { opacity: .5 }
.kk .wiecej { font-size: 12px; color: var(--muted); padding: 1px 6px; font-weight: 600 }
.kk .ln, .kk .ile { display: none }
.dzien-k { margin-top: 14px }
@media (max-width: 760px) {
  .kk { min-height: 58px; padding: 5px 2px 6px; align-items: center; gap: 4px }
  .kk .wpisy { display: none }
  .kk .ln { display: block; height: 4px; width: var(--w); border-radius: 999px; background: var(--firma) }
  .kk .ln.pusta { background: transparent }
  .kk .ile { display: block; font: 700 10px/1 var(--sans); color: var(--muted) }
  .kal-pasek .legenda { display: none }
  .kafle { grid-template-columns: minmax(0, 1fr) }
}
.temat-k summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; cursor: pointer }
.temat-k summary .muted { font-weight: 400; font-size: 13.5px }
@media (max-width: 640px) { .harm-tresc { grid-template-columns: minmax(0, 1fr) } }

/* ── zakładki portalu (23.10.2026): Publikacje · Kampanie reklamowe · Zgłoszenia ── */
.zakladki-k { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: -6px 0 18px }
.zakladki-k::-webkit-scrollbar { display: none }
.zakladki-k a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font: 600 15px var(--sans); color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap }
.zakladki-k a:hover { color: var(--fg) }
.zakladki-k a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--firma) }
.licz-k { font: 700 11.5px/1 var(--sans); background: var(--zle); color: #fff; border-radius: 999px; padding: 4px 8px }

/* kampanie reklamowe */
.kampanie { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px }
.kampania { display: grid; gap: 12px; align-content: start }
.kampania.aktywna { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)) }
.kampania-glowa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px }
.kampania-glowa h3 { margin: 0 0 3px; font: 700 16.5px/1.3 var(--sans) }
.kampania-glowa .muted { font-size: 13.5px }
.budzet { display: grid; gap: 6px; font-size: 14.5px }
.pasek-b { height: 8px; border-radius: 999px; background: var(--sel); overflow: hidden }
.pasek-b i { display: block; height: 100%; background: var(--firma); border-radius: inherit }
.staty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.staty > div { background: var(--card); padding: 9px 11px; display: grid; gap: 2px }
.staty span { font: 600 11.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.staty b { font: 700 15.5px var(--sans); font-variant-numeric: tabular-nums }
.zakonczone-k { margin-top: 16px }
.zakonczone-k > summary { font-size: 15px }
.zakonczone-k .kampanie { margin-top: 12px }

/* zgłoszenia z formularzy */
.zgl-pasek { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px }
.zgl-pasek input[type=search] { flex: 1 1 260px }
.zgl-pasek select { font: 600 14.5px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; max-width: 100% }
.zgl-statusy .filtr b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700 }
.zgl-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin-top: 6px }
.zgl { display: grid; gap: 10px; align-content: start }
.zgl.nowe { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); box-shadow: inset 4px 0 0 var(--warn) }
.zgl-glowa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px }
.zgl-imie { font-size: 17px }
.zgl-kiedy { font-size: 13px; margin-top: 2px }
.zgl-kontakt { display: flex; flex-wrap: wrap; gap: 8px }
.zgl-kontakt .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 14px; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
.zgl-kontakt svg { width: 16px; height: 16px; flex: none; color: var(--firma) }
.zgl-odp { margin: 0; display: grid; gap: 4px; background: var(--bg); border-radius: 10px; padding: 9px 11px; font-size: 14px }
.zgl-odp > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px }
.zgl-odp dt { color: var(--muted) }
.zgl-odp dd { margin: 0; font-weight: 600; overflow-wrap: anywhere }
.zgl-kampania { font-size: 13px }
.zgl-notatka { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 8px 14px; align-items: start; border-top: 1px solid var(--line); padding-top: 10px }
.zgl-notatka .zgl-pole { grid-column: 1 / -1 }
.zgl-notatka label { display: grid; gap: 4px; font: 600 12px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
.zgl-notatka select { font: 600 14px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px }
.zgl-notatka textarea { width: 100%; min-height: 42px; font: 400 14.5px/1.4 var(--sans); text-transform: none; letter-spacing: 0 }
.zgl-zapis { grid-column: 1 / -1; font-size: 12.5px; min-height: 16px }
.cala-k { width: 100%; margin-top: 12px }
@media (max-width: 760px) {
  .kampanie, .zgl-lista { grid-template-columns: minmax(0, 1fr) }
  .zgl-notatka { grid-template-columns: minmax(0, 1fr) }
}
.zgl-pasek input[type=search] { font: 400 15px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0 }
/* „Godziny sprzątania” przy zgłoszeniu (MKclean) */
.zgl-chipy { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end }
.zgl-godz > span { display: flex; gap: 8px; text-transform: none; letter-spacing: 0 }
.zgl-godz input { width: 110px; font: 600 16px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px }
.zgl-suma { margin: 4px 0 6px; font-weight: 500 }
.zgl-glowa { flex-wrap: wrap } .zgl-glowa > div { min-width: 0 } .zgl-chipy { justify-content: flex-start }

/* ── aplikacja „DKTE Klient” (23.10.2026, wygląd B): górny pasek w kolorze firmy, logowanie w aplikacji, dolne menu na telefonie ── */
.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.portal-k .wrap { padding-top: 20px }
.gora-k { position: sticky; top: 0; z-index: 30; background: var(--firma); color: #fff; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 1px 0 rgba(0, 0, 0, .08) }
.gora-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 60px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.marka-k { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0 }
.znak-firmy { width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--firma); display: grid; place-items: center; font: 800 13px/1 var(--sans); letter-spacing: .02em; flex: none }
.znak-firmy img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block }
.marka-t { display: grid; min-width: 0 }
.marka-t b { font: 700 16px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.marka-t small { font: 600 10.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gora-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; font: 600 14px var(--sans); padding: 8px 13px; border-radius: 999px; cursor: pointer; text-decoration: none; position: relative }
.gora-btn:hover { background: rgba(255, 255, 255, .2) }
.gora-btn .ik { width: 18px; height: 18px }
.gora-btn:focus-visible, .dolne-k a:focus-visible { outline: 3px solid var(--zloto); outline-offset: 2px }
/* logowanie (aplikacja z ekranu iPhone'a ma osobne ciasteczka – musi mieć własny formularz) */
.logowanie-k { max-width: 420px; margin: 5vh auto 0; display: grid; gap: 10px }
.logowanie-k img { border-radius: 16px }
.demo-podp { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--akcent, #2E67FB) 12%, transparent); font-size: 14px }
.demo-podp[hidden] { display: none }
.logowanie-k h1 { margin: 2px 0 6px }
.logowanie-k label { font: 600 13px var(--sans); color: var(--muted) }
.logowanie-k input { font: 400 16px var(--sans); padding: 12px 14px; border-radius: 12px; min-width: 0 } /* 16 px: iPhone nie powiększa strony przy pisaniu */
.logowanie-k .btn { background: #02377A; margin-top: 6px; padding: 13px 18px; font-size: 16px }
.logowanie-k .komunikat { color: var(--zle); font-weight: 600 }
/* karta „Dodaj do ekranu telefonu” / „Włącz powiadomienia” i zakładka „Aplikacja” */
#apka { margin-bottom: 18px }
.apka-k { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; border-left: 4px solid var(--zloto) }
.apka-ikona img { border-radius: 14px; display: block }
.apka-ikona.dzwon { width: 52px; height: 52px; border-radius: 14px; background: var(--sel); color: var(--firma); display: grid; place-items: center }
.apka-ikona.dzwon .ik-k { width: 28px; height: 28px }
.apka-tresc { display: grid; gap: 8px; min-width: 0 }
.apka-tresc h2 { margin: 0 }
.apka-tresc p { margin: 0; font-size: 14.5px }
.apka-k .btn, .apka-ust .btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center }
.apka-k .btn:not(.sec), .apka-ust .btn:not(.sec) { background: var(--firma) }
.apka-ust { margin-top: 0 }
.kroki-k { margin: 2px 0 4px; padding-left: 22px; display: grid; gap: 7px; font-size: 15px; line-height: 1.45 }
.kroki-k li::marker { font-weight: 700; color: var(--firma) }
.ik-k { width: 19px; height: 19px; vertical-align: -4px; display: inline-block; color: var(--firma) }
.maly-k { font-size: 13px; margin: 4px 0 0 }
.info.warn-k { background: var(--warn-soft); color: var(--warn); font-weight: 500 }
.apka-stan { display: flex; gap: 10px; align-items: center; font-weight: 500 }
.apka-stan .ik-k { color: var(--ok); width: 22px; height: 22px }
.przel-k { display: grid; gap: 6px; margin-bottom: 12px }
.przel-k label { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 15px; line-height: 1.3 }
.przel-k label:has(input:checked) { border-color: color-mix(in srgb, var(--firma) 45%, var(--line)); background: color-mix(in srgb, var(--firma) 5%, var(--card)) }
.przel-k input { width: 20px; height: 20px; accent-color: var(--firma); margin: 0; flex: none }
.apka-ust .komunikat { margin-top: 8px; font-weight: 600 }
/* dolne menu (telefon) i „Więcej” */
.dolne-k, .wiecej-k { display: none }
.wiecej-okno { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 40px rgba(15, 27, 45, .18); padding: 6px; display: grid; min-width: 240px }
.wiecej-okno a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: var(--fg); text-decoration: none; font: 600 15px var(--sans) }
.wiecej-okno a[aria-current="page"] { background: var(--sel); color: var(--firma) }
.wiecej-okno em { margin-left: auto; font: 700 11px/1 var(--sans); font-style: normal; background: var(--zle); color: #fff; border-radius: 999px; padding: 4px 7px }
@media (max-width: 760px) {
  .portal-k .zakladki-k { display: none }
  .portal-k .wrap { padding-top: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) }
  .gora-in { min-height: 56px }
  .gora-btn { padding: 8px 10px }
  .gora-btn span { display: none }
  .dolne-k:not([hidden]) { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(15, 27, 45, .06);
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) }
  .dolne-k a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 2px 4px; font: 600 11px/1.1 var(--sans); color: var(--muted); text-decoration: none; border-radius: 12px; min-width: 0 }
  .dolne-k a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .dolne-k a .ik { width: 24px; height: 24px }
  .dolne-k a[aria-current="page"] { color: var(--firma) }
  .dolne-k a[aria-current="page"]::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--firma) }
  .dolne-k em { position: absolute; top: 1px; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 999px; background: var(--zle); color: #fff; font: 700 10px/17px var(--sans); font-style: normal; text-align: center; padding: 0 4px }
  .wiecej-k:not([hidden]) { display: block; position: fixed; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 36 }
  .apka-k { gap: 12px }
  .apka-ikona img { width: 44px; height: 44px }
  .apka-ikona.dzwon { width: 44px; height: 44px }
  .apka-k .wiersz .btn { flex: 1 1 auto }
}
:root[data-motyw="ciemny"] .logowanie-k .btn { background: #2F63C7 }
:root[data-motyw="ciemny"] :is(.dolne-k a[aria-current="page"], .wiecej-okno a[aria-current="page"], .ik-k, .apka-ikona.dzwon) { color: color-mix(in srgb, var(--firma) 45%, #fff) }
:root[data-motyw="ciemny"] .dolne-k a[aria-current="page"]::before { background: color-mix(in srgb, var(--firma) 45%, #fff) }

/* ── wiadomości (23.10.2026): od DKTE do klienta i „Napisz do DKTE” ── */
.wiad-uklad { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start }
.napisz-k { display: grid; gap: 10px; position: sticky; top: 76px }
.napisz-k h2, .napisz-k p { margin: 0 }
.napisz-k p { font-size: 14.5px }
.kat-k { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.kat-k legend { font: 600 13px var(--sans); color: var(--muted); margin-bottom: 6px; padding: 0 }
.kat-k .tog { padding: 7px 12px; font-size: 14px; border-width: 1px }
.kat-k .tog input { width: 16px; height: 16px }
.pole-k { display: grid; gap: 5px; font: 600 13px var(--sans); color: var(--muted) }
.pole-k input, .pole-k textarea { font: 400 16px/1.4 var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0 }
.napisz-k .btn { background: var(--firma) }
.wiad-lista { display: grid; gap: 10px; min-width: 0 }
.wiad { display: grid; gap: 6px; border-left: 4px solid var(--line) }
.wiad.od-dkte { border-left-color: var(--firma) }
.wiad.od-klienta { border-left-color: var(--zloto); background: color-mix(in srgb, var(--zloto) 5%, var(--card)) }
.wiad.nowa { box-shadow: 0 0 0 2px color-mix(in srgb, var(--firma) 35%, transparent), var(--cien) }
.wiad-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px }
.wiad-kiedy { margin-left: auto; font-size: 12.5px }
.wiad h3 { margin: 0; font: 700 16px/1.3 var(--sans) }
.wiad-tresc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5 }
.wiad-odp, .wiad-stan { font-size: 12.5px }
@media (max-width: 860px) { .wiad-uklad { grid-template-columns: minmax(0, 1fr) } .napisz-k { position: static } }

/* ── raport reklamowy w aplikacji (23.10.2026): nagłówek raportu, „Z kim się połączyć”, kontakty z przyciskami ── */
.raport-glowa-k { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; border-left: 4px solid var(--firma) }
.raport-glowa-k h2 { margin: 6px 0 2px }
.raport-glowa-k p { margin: 0; font-size: 14.5px }
.raport-glowa-k .btn, .polacz .btn, .kontakt-w .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 7px }
.raport-glowa-k .btn, .polacz .btn.zadzwon, .kontakt-w .btn.zadzwon { background: var(--firma) }
.raport-glowa-k .btn .ik, .polacz .btn svg, .kontakt-w .btn svg { width: 18px; height: 18px }
.polacz-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px }
.polacz { display: grid; gap: 8px; border-left: 4px solid var(--warn); align-content: start }
.polacz-glowa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px }
.polacz-glowa b { font-size: 17px }
.polacz-akcje { gap: 8px }
.polacz .obsluz .ik { color: var(--ok) }
.kontakt-przyciski { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start }
.kontakt-przyciski .btn { padding: 9px 15px; font-size: 14.5px }
.napisz-m { position: relative; border: 0; padding: 0 }
.napisz-m > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; font-size: 14.5px; color: var(--fg) }
.napisz-m > summary::-webkit-details-marker { display: none }
.napisz-lista { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 170px; display: grid; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 27, 45, .16); padding: 6px }
.napisz-lista a { padding: 10px 12px; border-radius: 8px; color: var(--fg); text-decoration: none; font: 600 15px var(--sans) }
.napisz-lista a:hover { background: var(--sel) }
.kontakty-lista { padding: 4px 16px; display: grid }
.kontakt-w { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--line) }
.kontakt-w:first-child { border-top: 0 }
.kontakt-dane { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 3px 8px; min-width: 0 }
.kontakt-dane > span:not(.chip) { grid-column: 1 / -1; overflow-wrap: anywhere }
.wnioski-k { margin-top: 16px }
.wnioski-k ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5 }
@media (max-width: 760px) {
  .polacz-lista { grid-template-columns: minmax(0, 1fr) }
  .kontakt-w { align-items: flex-start }
  .kontakty-lista { padding: 2px 14px }
}

/* pliki do pobrania od DKTE (23.10.2026, lib/pliki.js) */
.pliki-grupa { font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px }
.pliki-lista { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 6px }
.plik-w { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none }
.plik-w:last-child { border-bottom: 0 }
.plik-w:hover { background: var(--sel) }
.plik-w .ik { width: 20px; height: 20px; color: var(--muted) }
.plik-typ { width: 44px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--sel); color: var(--firma); font: 700 10.5px var(--sans); letter-spacing: .04em }
.plik-nazwa { min-width: 0 } .plik-nazwa b { display: block; font-weight: 600; overflow-wrap: anywhere } .plik-nazwa small { color: var(--muted); font-size: 12.5px }

/* poprawka 23.10.2026 (zgłoszenie właściciela): treść kart kontaktów nie wychodzi poza kartę, zakładki zawijają się zamiast się ucinać */
.zgl-lista > .zgl { min-width: 0; grid-template-columns: minmax(0, 1fr) }
.zgl > * { min-width: 0 }
.zgl-kontakt .btn { white-space: normal; overflow-wrap: anywhere; text-align: left; min-width: 0 }
.zgl-odp, .zgl-kampania, .zgl-kiedy { overflow-wrap: anywhere }
.zgl-glowa > div:first-child { flex: 1 1 0 }
.zgl-chipy { flex: none }
.zakladki-k { flex-wrap: wrap; overflow: visible; row-gap: 0 }
.zgl-notatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.zgl-notatka > * { min-width: 0 }
.zgl-notatka select, .zgl-godz > span > * { min-width: 0; max-width: 100% }
.zgl-godz input { width: 0; flex: 1 1 70px }
.zgl-notatka label > select { width: 100% }
.zgl-notatka { grid-template-columns: minmax(0, 1fr) }
.zgl-godz input { flex: 1 1 90px; width: auto; min-width: 70px }
.zgl-godz > span > select { flex: 0 1 auto }
/* „Z kim się połączyć”: nowe zgłoszenia z 24 godzin + Archiwum zgłoszeń (23.10.2026) */
.kontakt-dane > .chip { justify-self: start }
.polacz-tyt { font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px }
.archiwum-k { margin-top: 14px; padding: 0; overflow: hidden }
.archiwum-k > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; cursor: pointer; color: var(--fg); list-style: none }
.archiwum-k > summary::-webkit-details-marker { display: none }
.archiwum-k > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .2s ease-out }
.archiwum-k[open] > summary::after { transform: rotate(180deg) }
.archiwum-k > summary .ik { width: 20px; height: 20px; color: var(--firma) }
.archiwum-k > summary .muted { font-size: 13px; font-weight: 400 }
.archiwum-k .kontakty-lista { border-top: 1px solid var(--line) }
.archiwum-stopka { padding: 10px 16px 14px; font-size: 14px } .archiwum-stopka a { color: var(--firma); font-weight: 600; text-decoration: none }
.raport-przyciski { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.raport-przyciski .btn.sec { display: inline-flex; align-items: center; gap: 7px; text-decoration: none }
.raport-przyciski .btn .ik { width: 18px; height: 18px }

/* górny pasek: Wiadomości · Pliki · Aplikacja (23.10.2026) */
.gora-ikony { display: flex; gap: 6px; margin-left: auto }
.gora-ikony + .gora-btn { margin-left: 0 }
.gora-btn[aria-current="page"] { background: #fff; color: var(--firma); border-color: #fff }
.gora-btn em { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 999px; background: #E5484D; color: #fff; font: 700 10.5px/18px var(--sans); font-style: normal; text-align: center; padding: 0 5px; box-shadow: 0 0 0 2px var(--firma) }
@media (max-width: 760px) { .gora-ikony { gap: 4px } .gora-ikony .gora-btn { padding: 8px 9px } }
/* czcionka Plus Jakarta Sans (wybór właściciela 23.10.2026) – jak w panelu */
:root { --sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: var(--sans) }

/* „Zobacz reklamę” w karcie kampanii (23.10.2026): film w małym rozmiarze, na miejscu – bez pełnego ekranu */
.reklama-k { display: grid; justify-items: start; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.reklama-k .btn { display: inline-flex; align-items: center; gap: 7px }
.reklama-k .btn .ik { width: 18px; height: 18px }
.reklama-podglad { width: min(280px, 100%); border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line) }
.reklama-podglad video, .reklama-podglad img { display: block; width: 100%; max-height: 500px; object-fit: contain; background: #000 }
/* pas „Najważniejsze liczby” (23.10.2026): jaśniejsze tło w kolorze firmy, białe kafle – podsumowanie odcina się od list */
.pas-k { background: color-mix(in srgb, var(--firma) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--firma) 18%, var(--line)); border-radius: 20px; padding: 4px 18px 18px; margin: 22px 0 6px }
.pas-k .sekcja-tytul { margin-top: 14px }
.pas-k .kafel { background: var(--card) }
@media (max-width: 760px) { .pas-k { padding: 2px 12px 12px; border-radius: 16px } }
/* kolorowe pasy sekcji raportu (23.10.2026): kontakty – złoty odcień, liczby – kolor firmy (wyżej), kampanie – neutralny szary */
.pas-k.pas-kontakty { background: color-mix(in srgb, #B98F48 10%, var(--bg)); border-color: color-mix(in srgb, #B98F48 30%, var(--line)) }
.pas-k.pas-kampanie { background: color-mix(in srgb, #64748B 9%, var(--bg)); border-color: color-mix(in srgb, #64748B 22%, var(--line)) }
.pas-k > .sekcja-tytul:first-child { margin-top: 14px }
.pas-k .polacz, .pas-k .kampania, .pas-k .archiwum-k { background: var(--card) }

/* okres w kampaniach (23.10.2026) */
.okres-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px }
.okres-k .filtr { font-size: 13.5px; padding: 6px 12px }
.okres-k .filtr[aria-pressed="true"] { border-color: var(--firma); color: var(--firma); background: color-mix(in srgb, var(--firma) 8%, var(--card)) }
.okres-daty { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px }
.okres-daty input { font: 500 14px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px }
.okres-daty .btn { padding: 7px 14px; font-size: 14px }

/* motyw wybrany przełącznikiem (23.10.2026) – ma pierwszeństwo przed ustawieniem systemu */
:root[data-motyw="jasny"] { --bg: #F5F7FB; --card: #FFFFFF; --fg: #0F1B2D; --muted: #627089; --line: #E3E8F0; --sel: #EEF3FB; --dkte: #02377A;
  --pc: #B45309; --pc-soft: #FEF3E2; --ok: #0E7A43; --ok-soft: #E3F4EA; --warn: #B45309; --warn-soft: #FEF3E2; --zle: #C0352B; --zle-soft: #FDECEA;
  --cien: 0 1px 2px rgba(15, 27, 45, .05), 0 4px 14px rgba(15, 27, 45, .04); color-scheme: light }
:root[data-motyw="ciemny"] { --bg: #0B1220; --card: #111A2B; --fg: #E6ECF5; --muted: #93A1B5; --line: #1F2B41; --sel: #172440; --dkte: #7EA6F5;
  --pc: #F0A54A; --pc-soft: #3A2A12; --ok: #4CC38A; --ok-soft: #13301F; --warn: #E0A04A; --warn-soft: #3A2A12; --zle: #F07167; --zle-soft: #3B1715; --cien: none; color-scheme: dark }
:root[data-motyw="jasny"] .logowanie-k .btn { background: var(--firma) }
#motyw-k { padding: 8px 10px }

/* kolory kampanii przy zgłoszeniach + legenda-filtr (23.10.2026) */
.kamp-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 12px }
.kamp-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; font: 600 13px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer }
.kamp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch }
.kamp-chip b { font-variant-numeric: tabular-nums; color: var(--muted) }
.kamp-chip i, .kamp-tag i, .kamp-kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--kk); flex: none; display: inline-block }
.kamp-chip[aria-pressed="true"] { border-color: var(--kk, var(--fg)); background: color-mix(in srgb, var(--kk, var(--fg)) 12%, var(--card)); box-shadow: inset 0 0 0 1px var(--kk, var(--fg)) }
.kamp-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fg) }
.kamp-kropka { margin-right: 7px; vertical-align: 1px }
.karta.polacz[style*="--kk"] { border-left: 5px solid var(--kk) }
.zgl[style*="--kk"], .zgl.nowe[style*="--kk"] { box-shadow: inset 5px 0 0 var(--kk) }
/* „Jak czytać raport?” na czerwonym tle (23.10.2026, prośba właściciela) */
.raport-przyciski .btn.jak-czytac { background: #C0352B; color: #fff; border: 0; display: inline-flex; align-items: center; gap: 7px; text-decoration: none }
.raport-przyciski .btn.jak-czytac:hover { background: #A32A21 }

/* wyjaśnienie pod liczbą + okienko poradnika (23.10.2026) */
.staty .po-ludzku { font: 500 12.5px/1.35 var(--sans); color: var(--muted) }
.poradnik-okno { width: min(920px, 100vw - 24px); height: min(88vh, 1000px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--fg); overflow: hidden }
.poradnik-okno[open] { display: flex; flex-direction: column }
.poradnik-okno::backdrop { background: rgba(11, 18, 32, .55) }
.poradnik-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); background: var(--card) }
.poradnik-glowa b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px }
.poradnik-okno iframe { flex: 1; width: 100%; border: 0; background: var(--bg) }
@media (max-width: 600px) { .poradnik-okno { width: 100vw; height: 100dvh; border-radius: 0; border: 0 } }

/* zgłoszenie po ludzku + źródło Facebook/Instagram (23.10.2026) */
.zgl-szcz { display: grid; gap: 0; margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.zgl-szcz > div { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--card) }
.zgl-szcz > div:first-child { border-top: 0 }
.zgl-szcz > div:nth-child(-n+3) { background: color-mix(in srgb, var(--kk, var(--firma, #2E67FB)) 6%, var(--card)) }
.zgl-szcz dt { font: 600 13px var(--sans); color: var(--muted) }
.zgl-szcz dd { margin: 0; font: 600 14px var(--sans); color: var(--fg); overflow-wrap: anywhere }
.zrodlo { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--sans); color: var(--fg) }
.zrodlo .ik, .kamp-chip .ik { width: 17px; height: 17px; flex: none }
.zr-fb .ik { color: #1877F2 } .zr-ig .ik { color: #E1306C } .zr-tt .ik { color: var(--fg) }
.kamp-chip[disabled] { opacity: .55; cursor: not-allowed }
.kontakt-w .zrodlo { font-size: 12px }
@media (max-width: 520px) { .zgl-szcz > div { grid-template-columns: 1fr; gap: 0 } }
.zgl-szcz > div.odp { grid-template-columns: 1fr; gap: 2px }
.zgl-szcz > div { grid-template-columns: minmax(84px, 30%) minmax(0, 1fr) }
.kamp-techniczna { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere }

/* własne hasło: okno po haśle jednorazowym + „Twoje konto” (23.10.2026) */
.haslo-okno { width: min(440px, 100vw - 24px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--fg) }
.haslo-okno::backdrop { background: rgba(11, 18, 32, .6) }
.haslo-form { display: grid; gap: 12px; padding: 22px }
.haslo-form h2 { margin: 0; font-size: 21px } .haslo-form p { margin: 0 }
.haslo-form label { display: grid; gap: 5px; font: 600 14px var(--sans) }
.haslo-form input { font: 500 16px var(--sans); padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg) }
.haslo-form [data-haslo-info]:not(:empty) { color: var(--zle); font-weight: 600 }
.konto-k { margin-top: 16px } .konto-k h2 { margin: 0 0 6px; font-size: 18px } .konto-k p { margin: 0 0 10px }
.haslo-zapisane { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 50; box-shadow: 0 6px 24px rgba(0, 0, 0, .18) }

/* ── 24.10.2026: portal po ludzku – mniej tekstu naraz, rzeczy rozwijane, cele dotyku ≥ 44 px (klient ~65 lat, telefon) ── */
/* błąd ładowania: wyjście „Zaloguj się na inne konto” */
.inne-konto-k { display: grid; justify-items: center; gap: 12px }
.inne-konto-k p { margin: 0 }
.inne-konto-k .btn { background: var(--firma); min-height: 48px; padding: 0 22px; font-size: 16px }
/* plan publikacji (Harmonogram.kalendarz) */
.plan-tytul-k { margin-top: 22px }
#plan-klienta .hk { margin-top: 4px }
/* karta kampanii: chip rodzaju zamiast celu z Mety, przycisk do zgłoszeń tej kampanii */
.kampania[style*="--kk"] { border-top: 4px solid var(--kk) }
.kamp-meta-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 13.5px }
.kamp-rodzaj-k { background: color-mix(in srgb, var(--kk, var(--firma)) 14%, var(--card)); color: var(--fg); text-transform: none; letter-spacing: 0; font-size: 12.5px }
.do-zgl-k { justify-self: stretch; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px }
/* „Aktywne kampanie” zwinięte do jednej linijki z „Rozwiń” */
.akt-k { margin-top: 16px; padding: 0; overflow: hidden }
.akt-k > summary { list-style: none; cursor: pointer }
.akt-k > summary::-webkit-details-marker { display: none }
.akt-g { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px }
.akt-t { flex: 1; min-width: 0; display: grid; gap: 4px }
.akt-t > b { font: 700 18px/1.25 var(--sans) }
.akt-t > small { font-size: 14px; color: var(--muted) }
.akt-nazwy { display: grid; gap: 3px; margin-top: 2px }
.akt-nazwy span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); min-width: 0; overflow-wrap: anywhere }
.akt-nazwy i { width: 10px; height: 10px; border-radius: 50%; background: var(--kk, var(--firma)); flex: none }
.akt-rozwin { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: 600 14px var(--sans); color: var(--fg) }
.akt-rozwin svg, .hist-strz svg { width: 16px; height: 16px; transition: transform .2s ease-out }
.akt-ow, .akt-k[open] .akt-zw { display: none }
.akt-k[open] .akt-ow { display: inline }
.akt-k[open] .akt-rozwin svg, .hist-w[open] .hist-strz svg { transform: rotate(180deg) }
.akt-k > .kampanie { padding: 0 16px 16px }
/* „Historia kampanii”: zakończone kampanie jako krótkie wiersze, wyniki po dotknięciu */
.hist-k { display: grid; gap: 8px }
.hist-w { padding: 0; overflow: hidden; border-left: 4px solid var(--kk, var(--line)) }
.hist-w > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px }
.hist-w > summary::-webkit-details-marker { display: none }
.hist-kr { width: 12px; height: 12px; border-radius: 50%; background: var(--kk, var(--muted)); flex: none }
.hist-t { flex: 1; min-width: 0; display: grid; gap: 2px }
.hist-t b { font: 700 16px/1.3 var(--sans); overflow-wrap: anywhere }
.hist-t small { font-size: 13.5px; color: var(--muted) }
.hist-strz { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--muted); flex: none }
.hist-w > .kampania { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0 }
/* Kontakty w sekcjach per kampania (Reklamy.sekcja) – karty zgłoszeń w siatce na komputerze, jedna kolumna na telefonie */
.zgl-sekcje { display: grid; gap: 0; margin-top: 6px }
.zgl-sekcje .rk-zgl { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px }
.zgl-sekcje .rk-zgl > .zgl { min-width: 0 }
.zgl-sekcje-opis { margin: 6px 0 10px }
/* „Z kim się połączyć”: nowe pod nagłówkami kampanii */
.polacz-kamp { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font: 700 15px/1.3 var(--sans); color: var(--fg) }
.polacz-kamp i { width: 12px; height: 12px; border-radius: 50%; background: var(--kk); flex: none }
.polacz-kamp span { min-width: 0; overflow-wrap: anywhere }
.polacz-kamp b { margin-left: 2px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--sel); font: 700 12.5px/24px var(--sans); text-align: center }
/* zakładka Aplikacja: „DKTE jeszcze nie uruchomiło powiadomień” i rodzaje powiadomień zwinięte */
.push-dkte-k { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 14.5px; line-height: 1.45 }
.push-dkte-k .ik-k { width: 22px; height: 22px; flex: none; margin-top: 1px }
.rodzaje-k { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px }
.rodzaje-k > summary { min-height: 48px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600 }
.rodzaje-k[open] { padding-bottom: 12px }
@media (max-width: 760px) {
  .zgl-sekcje .rk-zgl { grid-template-columns: minmax(0, 1fr) }
  .akt-g { align-items: flex-start }
  .akt-rozwin { padding: 0 12px }
}
@media (prefers-reduced-motion: reduce) { .akt-rozwin svg, .hist-strz svg { transition: none } }

/* jasny motyw portalu – zatwierdzony przez właściciela 24.10.2026 (wzór: _dkte/portal-jasny-propozycja.html); ciemny bez zmian */
:root[data-motyw="jasny"] { --bg: #E9EEF7; --line: #CBD5E6; --muted: #4A5872; --ciemna: color-mix(in srgb, var(--firma) 72%, #0F1B2D); --cien: 0 1px 2px rgba(15, 27, 45, .06), 0 6px 16px rgba(15, 27, 45, .06) }
:root[data-motyw="jasny"]  .karta { box-shadow: var(--cien) }
:root[data-motyw="jasny"]  b, :root[data-motyw="jasny"]  strong, :root[data-motyw="jasny"]  h1, :root[data-motyw="jasny"]  h2, :root[data-motyw="jasny"]  h3, :root[data-motyw="jasny"]  .btn { font-weight: 600 }
:root[data-motyw="jasny"]  .staty { background: #B7C4DB; border-color: #B7C4DB }
:root[data-motyw="jasny"]  .staty > div { background: color-mix(in srgb, var(--firma) 6%, #fff); border-top: 3px solid var(--firma) }
:root[data-motyw="jasny"]  .staty span { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted) }
:root[data-motyw="jasny"]  .staty b { font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ciemna) }
:root[data-motyw="jasny"]  .zgl-kiedy, :root[data-motyw="jasny"]  .kamp-meta-k .muted { display: inline-block; font-weight: 600; color: var(--ciemna); background: color-mix(in srgb, var(--firma) 12%, #fff); border-radius: 999px; padding: 3px 11px }
:root[data-motyw="jasny"]  .kampania-glowa h3, :root[data-motyw="jasny"]  .karta > h2 { font-weight: 600; border-left: 4px solid var(--firma); padding-left: 9px }
:root[data-motyw="jasny"]  .zgl.nowe { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); box-shadow: inset 5px 0 0 var(--warn) }
:root[data-motyw="jasny"]  .kampania.aktywna { border: 2px solid color-mix(in srgb, var(--ok) 70%, #fff) }
:root[data-motyw="jasny"]  .btn:not(.sec):not(:disabled) { background: var(--firma); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--firma) 28%, transparent) }
:root[data-motyw="jasny"]  .btn.sec { background: #fff; color: var(--firma); border: 1.5px solid var(--firma) }
:root[data-motyw="jasny"]  .zakladki-k a[aria-current="page"] { color: var(--ciemna); font-weight: 600 }
:root[data-motyw="jasny"]  .kk .nr { font-weight: 600; color: var(--ciemna) }
:root[data-motyw="jasny"]  .kk.dzis .nr { color: #fff }
:root[data-motyw="jasny"]  .kk .wpis { background: color-mix(in srgb, var(--firma) 16%, #fff); font-weight: 500 }
:root[data-motyw="jasny"]  .kk.inny { background: #E3E9F3; color: #7A869C } :root[data-motyw="jasny"]  .kk.inny .nr { color: #7A869C }
:root[data-motyw="jasny"]  .kk.dzis { box-shadow: inset 0 0 0 2px var(--firma) }
@media (prefers-color-scheme: light) {
  :root:not([data-motyw]) { --bg: #E9EEF7; --line: #CBD5E6; --muted: #4A5872; --ciemna: color-mix(in srgb, var(--firma) 72%, #0F1B2D); --cien: 0 1px 2px rgba(15, 27, 45, .06), 0 6px 16px rgba(15, 27, 45, .06) }
  :root:not([data-motyw])  .karta { box-shadow: var(--cien) }
  :root:not([data-motyw])  b, :root:not([data-motyw])  strong, :root:not([data-motyw])  h1, :root:not([data-motyw])  h2, :root:not([data-motyw])  h3, :root:not([data-motyw])  .btn { font-weight: 600 }
  :root:not([data-motyw])  .staty { background: #B7C4DB; border-color: #B7C4DB }
  :root:not([data-motyw])  .staty > div { background: color-mix(in srgb, var(--firma) 6%, #fff); border-top: 3px solid var(--firma) }
  :root:not([data-motyw])  .staty span { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted) }
  :root:not([data-motyw])  .staty b { font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ciemna) }
  :root:not([data-motyw])  .zgl-kiedy, :root:not([data-motyw])  .kamp-meta-k .muted { display: inline-block; font-weight: 600; color: var(--ciemna); background: color-mix(in srgb, var(--firma) 12%, #fff); border-radius: 999px; padding: 3px 11px }
  :root:not([data-motyw])  .kampania-glowa h3, :root:not([data-motyw])  .karta > h2 { font-weight: 600; border-left: 4px solid var(--firma); padding-left: 9px }
  :root:not([data-motyw])  .zgl.nowe { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); box-shadow: inset 5px 0 0 var(--warn) }
  :root:not([data-motyw])  .kampania.aktywna { border: 2px solid color-mix(in srgb, var(--ok) 70%, #fff) }
  :root:not([data-motyw])  .btn:not(.sec):not(:disabled) { background: var(--firma); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--firma) 28%, transparent) }
  :root:not([data-motyw])  .btn.sec { background: #fff; color: var(--firma); border: 1.5px solid var(--firma) }
  :root:not([data-motyw])  .zakladki-k a[aria-current="page"] { color: var(--ciemna); font-weight: 600 }
  :root:not([data-motyw])  .kk .nr { font-weight: 600; color: var(--ciemna) }
  :root:not([data-motyw])  .kk.dzis .nr { color: #fff }
  :root:not([data-motyw])  .kk .wpis { background: color-mix(in srgb, var(--firma) 16%, #fff); font-weight: 500 }
  :root:not([data-motyw])  .kk.inny { background: #E3E9F3; color: #7A869C } :root:not([data-motyw])  .kk.inny .nr { color: #7A869C }
  :root:not([data-motyw])  .kk.dzis { box-shadow: inset 0 0 0 2px var(--firma) }
}

/* przyciski kontaktu: większe odstępy i wysokość (24.10.2026, uwaga właściciela) */
.polacz-akcje, .zgl-kontakt { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: 8px }
.polacz-akcje .btn, .zgl-kontakt .btn { min-height: 48px; padding-top: 11px; padding-bottom: 11px }

/* Propozycje postów (24.10.2026): duże cele dotyku (min. 56 px), pilny news czerwony */
.przeglad-wstep { font-size: 17px; margin: 4px 0 14px }
.przeglad-karta { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 14px }
.przeglad-karta h2 { font-size: 20px; line-height: 1.3; margin: 0 0 8px }
.przeglad-karta h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 4px }
.przeglad-karta p { font-size: 17px; line-height: 1.5; margin: 0 }
.przeglad-karta .przeglad-meta { font-size: 15px; color: var(--muted); margin-top: 12px }
.przeglad-karta .przeglad-meta a { color: var(--firma); font-weight: 600 }
.przeglad-karta.pilne { border: 2px solid #C0352B; background: color-mix(in srgb, #C0352B 7%, var(--card)) }
.przeglad-etyk { display: inline-block; background: #C0352B; color: #fff; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 4px 12px; margin-bottom: 8px }
.przeglad-przyc, .przeglad-forma { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px }
.przeglad-przyc[hidden], .przeglad-forma[hidden] { display: none }
.przeglad-forma p { grid-column: 1 / -1; font-weight: 700 }
.przeglad-forma .przeglad-btn.nie { grid-column: 1 / -1 }
.przeglad-btn { min-height: 56px; font: 700 18px var(--sans); border-radius: 14px; border: 2px solid var(--firma); cursor: pointer; padding: 10px 14px }
.przeglad-btn.tak { background: var(--firma); color: #fff }
.przeglad-btn.nie { background: transparent; color: var(--fg); border-color: var(--line) }
.przeglad-btn:disabled { opacity: .55 }
.przeglad-karta .przeglad-wynik { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-weight: 600 }
.przeglad-karta .przeglad-wynik.pomija { background: var(--sel); color: var(--muted) }
.przeglad-karta.zrobione { opacity: .85 }
.przeglad-karta .przeglad-info { color: #C0352B; font-weight: 600; margin-top: 8px; font-size: 15px }
.przeglad-pasek { display: block; text-decoration: none; background: #C0352B; color: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px }
.przeglad-pasek b { display: block; font-size: 17px } .przeglad-pasek span { font-size: 15px }
@media (max-width: 380px) { .przeglad-przyc, .przeglad-forma { grid-template-columns: 1fr } }

/* Raport reklamowy: podsumowanie zgłoszeń + blok godzin (24.10.2026) */
.zgl-podsum { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }
.zgl-kampanie { margin: 12px 0 }
.zgl-kampanie h3 { margin: 0 0 8px; font-size: 17px }
.zgl-kamp-lista { list-style: none; margin: 0; padding: 0 }
.zgl-kamp-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px }
.zgl-kamp-lista li:first-child { border-top: 0 }
.zgl-kamp-lista b { font-size: 18px }
.btn.zgl-duzy { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 14px 0 6px; font-size: 18px; text-align: center; text-decoration: none; box-sizing: border-box }
.zgl-godziny { margin: 12px 0 }
.zgl-godziny summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; font-size: 17px }
.godz-wykres { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; height: 120px; margin: 12px 0 4px }
.godz-s { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative }
.godz-s i { display: block; width: 100%; background: var(--firma); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85 }
.godz-s span { font-size: 11px; color: var(--muted); height: 14px; line-height: 14px }
.godz-s i { flex: 0 0 auto; max-height: calc(100% - 14px) }

/* Propozycje postów – dwa działy (24.10.2026) */
.przeglad-dzial { font-size: 22px; margin: 22px 0 6px }
.przeglad-etyk.jasny { background: var(--sel); color: var(--fg) }
.przeglad-karta .przeglad-podp, .przeglad-karta .przeglad-termin { font-size: 15px; color: var(--muted); margin-top: 10px }
.przeglad-karta .przeglad-termin { font-weight: 600; color: var(--fg) }
.przeglad-tekst { white-space: pre-wrap }
.przeglad-przyc { grid-template-columns: 1fr 1fr 1fr }
.przeglad-edycja { margin-top: 14px; display: grid; gap: 10px }
.przeglad-edycja[hidden] { display: none }
.przeglad-edycja textarea { width: 100%; box-sizing: border-box; font: 17px/1.5 var(--sans); padding: 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg) }
.przeglad-archiwum { margin: 18px 0 }
.przeglad-archiwum > summary { cursor: pointer; font-weight: 700; font-size: 17px; min-height: 48px; display: flex; align-items: center }
@media (max-width: 560px) { .przeglad-przyc { grid-template-columns: 1fr } }

.przeglad-post { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; white-space: pre-line; line-height: 1.5 }
.przeglad-grupa { margin: 14px 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--fg); padding: 0 14px }
.przeglad-grupa > summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; padding: 16px 0; list-style: none }
.przeglad-grupa > summary::-webkit-details-marker { display: none }
.przeglad-grupa > summary::after { content: '▾'; float: right }
.przeglad-grupa[open] > summary::after { content: '▴' }
.przeglad-licz { color: var(--dkte, #2E67FB); font-weight: 700 }

/* grafiki propozycji postów (1:1; karuzela przewijana w bok) */
.przeglad-grafiki { display: flex; gap: 8px; margin: 10px 0 4px; border-radius: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch }
.przeglad-grafiki img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; scroll-snap-align: center; display: block }
.przeglad-grafiki:not(.karuzela) { overflow: hidden }
@media (min-width: 700px) { .przeglad-grafiki img { flex-basis: 420px; width: 420px } .przeglad-grafiki:not(.karuzela) img { flex-basis: 420px } }

/* skala „Wpływ na firmę” (propozycje z grup) – kolory z kontrastem ≥ 4,5:1 na jasnym tle */
.ryzyko { margin: 12px 0; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--rk); background: var(--rt); color: #101426 }
.ryzyko.r1 { --rk: #1a7f4b; --rt: #e8f6ee; --rc: #1a7f4b } .ryzyko.r2 { --rk: #2e67fb; --rt: #eaf0ff; --rc: #2e67fb }
.ryzyko.r3 { --rk: #b45309; --rt: #fff3e0; --rc: #d97706 } .ryzyko.r4 { --rk: #b42318; --rt: #fdecea; --rc: #d92d20 }
.ryzyko-t { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em }
.ryzyko-skala { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 }
.ryzyko-skala i { height: 10px; border-radius: 999px; background: #fff; border: 1.5px solid var(--rk) }
.ryzyko-skala i.on { background: var(--rc) }
.ryzyko-n { margin: 0; font-weight: 700; font-size: 17px; color: var(--rk) }
.ryzyko-o { margin: 6px 0 0; font-size: 16px; line-height: 1.45 }

/* karta „Dodaj … do ekranu telefonu”: przyciski nie dotykają się (24.10.2026, zgłoszenie z telefonu) – odstęp, zawijanie, równa wysokość */
.apka-k .wiersz { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 12px }
.apka-k .wiersz .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none }

/* ciemny motyw: czytelne przyciski i teksty w Propozycjach (24.10.2026, uwaga właściciela: „edytować” słabo widoczne) */
.przeglad-btn.nie { border-color: color-mix(in srgb, var(--fg) 50%, transparent); background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg) }
:root[data-motyw="ciemny"] .przeglad-btn.tak { background: #2F63C7; border-color: #2F63C7; color: #fff }
:root[data-motyw="ciemny"] .przeglad-karta .przeglad-meta a { color: #9DBCFF }
:root[data-motyw="ciemny"] .przeglad-karta h3 { color: #B4C2D6 }

/* cztery przyciski w jednej linii, „Usuń” na czerwono (24.10.2026, uwaga właściciela) */
.przeglad-przyc.cztery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.przeglad-przyc.cztery .przeglad-btn { min-height: 48px; font-size: clamp(13px, 3.7vw, 17px); padding: 8px 4px; white-space: nowrap }
@media (max-width: 560px) { .przeglad-przyc.cztery { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
@media (max-width: 380px) { .przeglad-przyc.cztery { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.przeglad-btn.usun { background: #C0352B; border-color: #C0352B; color: #fff }

/* filtr wpływu na firmę + temat „do napisania” (25.10.2026) */
.rk-filtr { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 }
.rk-chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--fg) 40%, transparent); background: var(--card); color: var(--fg); font: 700 15px/1.2 var(--sans); cursor: pointer }
.rk-chip.r1 { border-color: #1a7f4b } .rk-chip.r2 { border-color: #2e67fb } .rk-chip.r3 { border-color: #d97706 } .rk-chip.r4 { border-color: #d92d20 }
.rk-chip.on { background: var(--fg); color: var(--card) }
.rk-chip.r1.on { background: #1a7f4b; color: #fff } .rk-chip.r2.on { background: #2e67fb; color: #fff } .rk-chip.r3.on { background: #b45309; color: #fff } .rk-chip.r4.on { background: #b42318; color: #fff }
.przeglad-karta[hidden] { display: none }
.przeglad-przyc.dwa { grid-template-columns: 1fr 1fr }
.przeglad-notka { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; border: 2px solid #d97706; background: #fff3e0; color: #101426; font-size: 16px; line-height: 1.45 }
.przeglad-baner { margin: 10px 0; padding: 14px; border-radius: 14px; border: 2px solid #2e67fb; background: #eaf0ff; color: #101426; font-size: 16px; line-height: 1.45 }
.przeglad-od-nowa { margin-top: 12px }
.przeglad-od-nowa > summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; color: var(--dkte, #2E67FB) }
.przeglad-szkic { margin-top: 10px }

/* sugestie ChatGPT „zamiast X → Y” w karcie „Wpływ na firmę” (26.10.2026) – karta .ryzyko ma własne jasne tło, więc kolory stałe (także w ciemnym motywie) */
.ryzyko-sug { margin-top: 12px; padding-top: 10px; border-top: 1.5px dashed var(--rk, #2e67fb) }
.ryzyko-st { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #101426 }
.sug-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px }
.sug { background: #fff; color: #101426; border: 1.5px solid #cfd8f5; border-radius: 12px; padding: 10px 12px }
.sug.ok { background: #f1f7f3; border-color: #1a7f4b }
.sug-t { margin: 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere }
.sug-p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: #3b4361 }
.sug-btn { margin-top: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: #2e67fb; color: #fff; font-weight: 600; font-size: 15px; font-family: inherit; cursor: pointer }
.sug-btn:disabled { opacity: .55; cursor: default }
.sug-z { margin: 8px 0 0; font-size: 15px; color: #101426 }
.sug-znaczek { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #1a7f4b; color: #fff; font-weight: 700; font-size: 14px }
.sug-link { min-height: 44px; padding: 0 6px; border: 0; background: none; color: #1B008B; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer }

/* sugestie ChatGPT pod postem, zwinięte (26.10.2026, uwaga właściciela) */
.sug-rozw { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--fg); padding: 0 14px }
.sug-rozw > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 16px; list-style: none }
.sug-rozw > summary::-webkit-details-marker { display: none }
.sug-rozw > summary::after { content: '▾'; margin-left: auto } .sug-rozw[open] > summary::after { content: '▴' }
.sug-rozw .sug-lista { margin: 0 0 12px; padding: 0; list-style: none }
.sug-rozw > .sug-z, .sug-rozw > .sug-p { color: var(--fg) } .sug-rozw > .sug-z .sug-link { color: var(--dkte, #2E67FB) }

/* Propozycje (26.10.2026, wszyscy klienci): pasek w kolorze firmy z numerem w kółku – łatwo odróżnić propozycje */
.przeglad-karta .ri-pasek { display: flex; align-items: center; gap: 14px; margin: -18px -18px 14px; padding: 14px 18px; border-radius: 16px 16px 0 0; background: var(--firma); color: #fff }
.przeglad-karta .ri-nr { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--firma); display: grid; place-items: center; font-weight: 800; font-size: 22px; line-height: 1 }
.przeglad-karta .ri-pasek-t { min-width: 0 }
.przeglad-karta .ri-pasek-etyk { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 2px }
.przeglad-karta .ri-pasek h2 { color: #fff; margin: 0; font-size: 19px }

/* Nagłówki działów propozycji (26.10.2026): wyraźny pasek z ikoną, opisem i licznikiem; otwarty dział w ramce koloru firmy */
:root { --dzial-akc: var(--firma) }
:root[data-motyw="ciemny"] { --dzial-akc: color-mix(in srgb, var(--firma) 45%, #fff) }
.przeglad-grupa > summary.dzial-sum { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-weight: 400; font-size: 1rem }
.przeglad-grupa > summary.dzial-sum::after { content: none }
.dzial-ik { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--dzial-akc) 12%, var(--card)); color: var(--dzial-akc) }
.dzial-ik .ik { width: 24px; height: 24px }
.dzial-t { flex: 1; min-width: 0 }
.dzial-t b { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.25 }
.dzial-t small { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; line-height: 1.35 }
.dzial-licz { flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; background: var(--dzial-akc); color: var(--card); font-weight: 800; font-size: 16px }
.dzial-sum::before { content: ''; order: 9; width: 10px; height: 10px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg); margin: 0 4px 4px 2px; transition: transform .2s ease-out }
.przeglad-grupa[open] > .dzial-sum::before { transform: rotate(-135deg); margin-bottom: -4px }
.przeglad-grupa[open] { border: 2px solid var(--dzial-akc); box-shadow: inset 6px 0 0 var(--dzial-akc); padding-left: 18px }
.przeglad-grupa[open] > .dzial-sum { border-bottom: 1px solid var(--line); margin-bottom: 12px }
.przeglad-grupa[open] > .dzial-sum .dzial-ik { background: var(--dzial-akc); color: var(--card) }

/* ── Wybór propozycji (27.10.2026): przyklejony licznik, „Cofnij wybór”, okno „Twój wybór”, komunikat; 20+ kart, 320 px, jasny i ciemny motyw ── */
.wybor-pasek { position: sticky; top: var(--gora-h, 56px); z-index: 25; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 2px solid var(--firma); color: var(--fg); box-shadow: 0 4px 14px rgba(15, 27, 45, .12) }
.wybor-pasek-t { margin: 0; font-size: 16px; line-height: 1.35; flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere }
.wybor-pasek-t b { font-weight: 800 }
.wybor-chipy { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px }
.wybor-chip { font-size: 13px; line-height: 1.2; padding: 3px 9px; border-radius: 999px; background: var(--sel); border: 1px solid var(--line); color: var(--fg); white-space: nowrap }
.wybor-chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; font-weight: 700 }
.wybor-btn { min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 0; background: var(--firma); color: #fff; font: 700 15px var(--sans); cursor: pointer; flex: 0 1 auto }
@media (max-width: 420px) { .wybor-pasek { padding: 8px 10px } .wybor-btn { width: 100%; min-height: 44px } .wybor-pasek-t { flex-basis: 100%; font-size: 15px } }
:root[data-motyw="ciemny"] .wybor-btn { background: #2F63C7 }
.przeglad-karta.wybrana { border: 2px solid var(--firma) }
.przeglad-karta .przeglad-wynik.wybrana { background: var(--sel); color: var(--fg) }
.wybor-plakietka { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 10px; border-radius: 999px; background: var(--ok); color: #fff; margin-right: 6px; vertical-align: 1px }
.wybor-plakietka.wybrana { background: var(--firma) }
:root[data-motyw="ciemny"] .wybor-plakietka { color: #0B1220 }
.przeglad-karta.wybor-blysk { box-shadow: 0 0 0 3px var(--firma) }
/* okno „Twój wybór” – arkusz od dołu na telefonie, wyśrodkowane okno na dużym ekranie */
.wybor-otwarte { overflow: hidden }
.wybor-okno { position: fixed; inset: 0; z-index: 90 }
.wybor-tlo { position: absolute; inset: 0; background: rgba(11, 18, 32, .6) }
.wybor-arkusz { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--card); color: var(--fg); border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .25) }
@media (min-width: 700px) { .wybor-arkusz { left: 50%; right: auto; bottom: auto; top: 50%; width: 560px; max-height: 84dvh; transform: translate(-50%, -50%); border-radius: 20px } }
.wybor-glowa { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: -16px; background: var(--card); padding: 4px 0 8px; z-index: 1 }
.wybor-glowa h2 { margin: 0; font-size: 22px }
.wybor-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--sel); color: var(--fg); font-size: 26px; line-height: 1; cursor: pointer }
.wybor-wstep { margin: 0 0 8px; font-size: 15px; color: var(--muted); line-height: 1.4 }
.wybor-wstep:empty { display: none }
.wybor-dzial h3 { margin: 14px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.wybor-dzial h3 small { text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 4px }
.wybor-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px }
.wybor-poz { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg) }
.wybor-poz img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--sel) }
.wybor-nr { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; background: var(--sel); color: var(--firma); font-weight: 800; font-size: 20px }
.wybor-tyt { font-size: 15px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.wybor-zmien { min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: 700 15px var(--sans); cursor: pointer }
@media (max-width: 360px) { .wybor-poz { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px } .wybor-poz img, .wybor-nr { width: 44px; height: 44px } .wybor-tyt { font-size: 14px } }
.wybor-zatw { width: 100%; margin-top: 2px }
.wybor-dzieki { font-size: 20px; font-weight: 800; margin: 14px 0 6px }
.wybor-notka, .wybor-pusto { color: var(--muted); font-size: 15px; margin: 0 0 14px }
.wybor-toast { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 95; max-width: 460px; margin: 0 auto; padding: 12px 16px; border-radius: 14px; background: var(--fg); color: var(--bg); font-weight: 700; font-size: 15px; text-align: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease-out, transform .25s ease-out }
.wybor-toast.on { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .wybor-toast { transition: none } }
/* 320 px: cztery przyciski karty w dwóch kolumnach (napisy „Akceptuj / Na później” się nie ucinają) */
@media (max-width: 380px) { .przeglad-przyc.cztery { grid-template-columns: repeat(2, minmax(0, 1fr)) } .przeglad-przyc.cztery .przeglad-btn { font-size: 16px; min-height: 48px } }

/* licznik wyboru wyraźniej + wolne miejsca w „Twój wybór” (26.10.2026, uwaga właściciela) */
.wybor-pasek-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px }
.wybor-duzy { font-size: 20px; font-weight: 800; color: var(--fg) }
.wybor-zost { font-size: 15px; font-weight: 700; color: var(--firma) }
:root[data-motyw="ciemny"] .wybor-zost { color: #9DBCFF }
.wybor-sloty { display: inline-flex; gap: 5px; vertical-align: middle }
.wybor-sloty i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--firma); background: transparent; box-sizing: border-box }
.wybor-sloty i.on { background: var(--firma) }
:root[data-motyw="ciemny"] .wybor-sloty i { border-color: #9DBCFF } :root[data-motyw="ciemny"] .wybor-sloty i.on { background: #9DBCFF }
.wybor-chip { font-size: 15px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 6px }
.wybor-chip .wybor-sloty i { width: 10px; height: 10px }
.wybor-poz.wolne { border: 2px dashed var(--line); background: transparent; opacity: .9 }
.wybor-poz.wolne .wybor-tyt { color: var(--muted); font-weight: 600 } .wybor-poz.wolne small { font-weight: 400 }