/* Panel zadań (ipt-eqdko1). Wygląd według wzoru właściciela „Tablica Tygodnia” (25.10, log taska): krój zaokrąglony
   Figtree, nagłówki pogrubione, sekcje = jasnoszare zaokrąglone panele, zadania = białe karty z kółkiem i ikonami,
   „+ Dodaj zadanie” jako link, segmenty zamiast czarnych przycisków, szczegóły z etykietami wersalikami, akcent morski,
   żadnych czarnych wypełnień poza tekstem. Wąski IBM Plex Sans Condensed tylko w gęstych liczbach (linia limitów, kafle
   Moc). Progi z Oczekiwań: 360/390/430 px bez przewijania w bok, cele dotyku >= 44 px, tekst >= 13 px, pola 16 px.
   BEZ pionowych pasków akcentu. Kroje lokalnie (OFL 1.1: vendor/fonts/LICENSE, LICENSE-figtree). */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(vendor/fonts/figtree-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(vendor/fonts/figtree-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(vendor/fonts/figtree-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(vendor/fonts/figtree-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(vendor/fonts/figtree-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(vendor/fonts/figtree-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(vendor/fonts/figtree-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(vendor/fonts/figtree-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(vendor/fonts/ibm-plex-sans-condensed-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(vendor/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(vendor/fonts/ibm-plex-sans-condensed-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(vendor/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root {
  --ground: #F3F4F6; --surface: #fff; --panel: #F1F2F4; --ink: #1C2128; --ink-2: #2B323A; --muted: #6A7280; --line: #DFE2E6;
  --line-soft: #EAECEF; --card-line: #E4E6EA; --seg-bg: #ECEEF1; --shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --accent: #12707F; --accent-soft: #DDF0F3; --accent-line: #A9D5DC; --bad: #B3261E; --bad-soft: #FBE9E7; --good: #1B7A4B;
  --good-soft: #E3F3EA; --warn: #8A5200; --warn-soft: #FCF0DC; --hold: #5B3CC4; --hold-soft: #EEE9FB; --series: #2A6FDB;
  --series-soft: #DCE8FA; --on-ink: #fff; --sample: #A9B5C0;
  --body: "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;
  --cond: "IBM Plex Sans Condensed", "Figtree", "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --ground: #12181F; --surface: #1A222B; --panel: #141B22; --ink: #E8EDF2; --ink-2: #D2D9E0; --muted: #9AA6B2; --line: #2E3946;
    --line-soft: #26303B; --card-line: #2B3541; --seg-bg: #222C36; --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --accent: #5FC2D2; --accent-soft: #15333A; --accent-line: #2E6670; --bad: #FF8A80; --bad-soft: #3A1D1B; --good: #6FD39E;
    --good-soft: #163325; --warn: #F2B566; --warn-soft: #362812; --hold: #B5A1FF; --hold-soft: #282140; --series: #6EA1F0;
    --series-soft: #1C2B44; --on-ink: #0F1419; color-scheme: dark;
  }
}
:root[data-motyw="ciemny"] {
  --ground: #12181F; --surface: #1A222B; --panel: #141B22; --ink: #E8EDF2; --ink-2: #D2D9E0; --muted: #9AA6B2; --line: #2E3946;
  --line-soft: #26303B; --card-line: #2B3541; --seg-bg: #222C36; --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --accent: #5FC2D2; --accent-soft: #15333A; --accent-line: #2E6670; --bad: #FF8A80; --bad-soft: #3A1D1B; --good: #6FD39E;
  --good-soft: #163325; --warn: #F2B566; --warn-soft: #362812; --hold: #B5A1FF; --hold-soft: #282140; --series: #6EA1F0;
  --series-soft: #1C2B44; --on-ink: #0F1419; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--body); font-size: 15px; line-height: 1.45; background: var(--surface); color: var(--ink);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent-line); outline: 2px solid var(--accent-soft); outline-offset: 0; }
[hidden] { display: none !important; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.cond { font-family: var(--cond); font-weight: 600; }

/* ---------- nagłówek: tytuł pogrubiony, firmy jako segment (szara pigułka, wybrana biała uniesiona, liczniki w pigułkach) ---------- */
.glowa { display: flex; align-items: center; gap: 10px 16px; padding: 12px 24px; background: var(--surface); flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }
.firmy { display: flex; gap: 2px; min-width: 0; background: var(--seg-bg); border-radius: 12px; padding: 4px; }
.firma { font-weight: 600; font-size: 14px; color: var(--muted); background: transparent; border: 0; border-radius: 9px;
  padding: 6px 12px; min-height: 34px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.firma:hover { color: var(--ink); }
.firma.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.firma .ile, .seg button .ile, .zakladki .ile { font-weight: 600; font-size: 13px; line-height: 1; padding: 3px 7px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; }
.plakietki { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.btn { font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 14px; min-height: 36px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:hover { border-color: var(--muted); }
.btn.primary { color: var(--accent); border-color: var(--accent-line); }
.btn.primary:hover { background: var(--accent-soft); }
.btn.dobrze { color: var(--good); border-color: var(--good); }
.btn.dobrze:hover { background: var(--good-soft); }
.btn.przyjmuje { min-width: 7.2em; }                                     /* „Przyjmuję” / „Na pewno?” bez skoku szerokości */
/* „Zakończ” / „Na pewno?” bez skoku szerokości (ipt-hw9ypm D11): szerokość = dłuższy z napisów w każdym kroju (ukryta druga
   linia o zerowej wysokości), więc pole akcji stoi w tym samym miejscu w obu stanach */
.btn.zakoncz { flex-direction: column; gap: 0; }
.btn.zakoncz::after { content: 'Na pewno?'; height: 0; overflow: hidden; visibility: hidden; }
.btn.usun { color: var(--bad); }
.btn.quiet { border-color: transparent; color: var(--muted); background: transparent; }
.btn.quiet:hover { color: var(--ink); border-color: var(--line); }
.btn:disabled { opacity: .55; cursor: default; }
.glowa .btn, .glowa .ikona-btn { border-color: transparent; background: transparent; }
.glowa .btn:hover, .glowa .ikona-btn:hover { border-color: var(--line); }
.btn b.licznik { font-weight: 600; font-size: 13px; background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 2px 7px; }
.ikona-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ikona-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-konta { position: fixed; right: 24px; top: 56px; z-index: 40; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px; box-shadow: 0 10px 28px rgba(16, 24, 40, .16); min-width: 220px; }
.menu-konta button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: 9px; min-height: 40px; }
.menu-konta button:hover { background: var(--ground); }
.mk-kto { padding: 8px 12px; color: var(--muted); font-size: 13px; }
/* zakładki widoków na pulpicie = segment (szara pigułka, wybrany biały uniesiony), przyklejony u góry */
/* pasek u góry pulpitu przyklejony przy przewijaniu: zakładki widoków + limity Claude (uwaga 25.10 pkt 30: zawsze widoczne) */
.pasek-gorny { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding: 8px 24px 8px; background: var(--surface); }
.zakladki { display: flex; gap: 2px; min-width: 0; background: var(--seg-bg); border-radius: 12px; padding: 4px; overflow-x: auto;
  scrollbar-width: none; flex: 0 1 auto; }
.glowa-limity { margin-left: auto; flex: 1 1 340px; max-width: 560px; display: flex; gap: 14px; align-items: flex-start;
  color: var(--ink); text-decoration: none; min-height: 36px; padding-top: 2px; }
.glowa-limity:empty { display: none; }
.zakladki::-webkit-scrollbar { display: none; }
.zakladki button { padding: 7px 14px; color: var(--muted); font-weight: 600; white-space: nowrap; border: 0; background: transparent;
  border-radius: 9px; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.zakladki button:hover { color: var(--ink); }
.zakladki button.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.widok { max-width: 1480px; margin: 0 auto; padding: 12px 24px 48px; }
.widok > section + section { margin-top: 14px; }
.dolny { display: none; }

/* ---------- pasek wskaźników (Moc): białe zaokrąglone kafle ---------- */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.strip > .seg-w { padding: 12px 16px 0; display: flex; flex-direction: column; min-width: 0; text-align: left; background: var(--surface);
  border: 1px solid var(--card-line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; font: inherit; color: inherit; }
.strip button.seg-w { cursor: pointer; } .strip button.seg-w:hover { border-color: var(--line); }
.strip .k { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .v { font-family: var(--cond); font-weight: 600; font-size: 28px; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.strip .v.warn { color: var(--warn); } .strip .v.bad { color: var(--bad); } .strip .v.hold { color: var(--hold); }
.strip .s { font-size: 13px; color: var(--muted); margin-bottom: 10px; line-height: 1.3; }
.strip .kv { display: flex; flex-direction: column; min-width: 0; }
.strip .m { margin: auto -16px 0; padding: 7px 16px 8px; background: var(--accent-soft); font-size: 13px; font-weight: 600; color: var(--accent);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; min-width: 0; overflow: hidden; }
.strip .m .ml { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .m b { font-family: var(--cond); font-size: 18px; font-weight: 600; color: var(--ink); white-space: nowrap; flex: none; }
.strip .m.zle { background: var(--bad-soft); color: var(--bad); }
.pasek { height: 6px; border-radius: 3px; background: var(--series-soft); overflow: hidden; margin: 2px 0 8px; }
.pasek i { display: block; height: 100%; background: var(--series); border-radius: 3px; }
.pasek i.warn { background: var(--warn); } .pasek i.bad { background: var(--bad); }

/* ---------- sekcje, panele, tabele ---------- */
.grid { display: grid; gap: 14px; align-items: start; }
.g-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.g-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { background: var(--surface); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 16px; min-width: 0; box-shadow: var(--shadow); }
section.sek { margin-top: 18px; scroll-margin-top: 56px; }
section.sek:first-child { margin-top: 0; }
h2 { font-weight: 700; font-size: 20px; margin: 0 0 4px; }
h2 .h2meta { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 8px; }
h3 { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.lead { color: var(--muted); margin: 0 0 10px; max-width: 860px; }
.note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.sum { display: none; }
table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tab th { font-weight: 600; color: var(--muted); text-align: right; font-size: 13px; padding: 5px 8px; border-bottom: 1px solid var(--line); }
table.tab td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tab th:first-child, table.tab td:first-child { text-align: left; padding-left: 0; white-space: normal; overflow-wrap: anywhere; }
table.tab tr:last-child td { border-bottom: 0; }
table.tab td small { color: var(--muted); font-size: 13px; display: block; }
table.tab td.liczba { font-family: var(--cond); font-weight: 500; }
table.tab tr.pod td { color: var(--muted); }
table.tab tr.pod td:first-child { padding-left: 16px; }
.tag { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 8px; white-space: nowrap; background: var(--ground); color: var(--ink); }
.tag.bad { background: var(--bad-soft); color: var(--bad); } .tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.good { background: var(--good-soft); color: var(--good); } .tag.new { background: var(--accent-soft); color: var(--accent); }
.tag.hold { background: var(--hold-soft); color: var(--hold); }
.odznaka { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 8px; background: var(--accent); color: var(--on-ink); white-space: nowrap; line-height: 1.2; }
/* segment: szara pigułka, wybrany element biały uniesiony */
.seg { display: flex; flex-wrap: wrap; gap: 2px; background: var(--seg-bg); border-radius: 12px; padding: 4px; }
.seg button { font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 6px 14px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.naglowek-panelu { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.naglowek-panelu h3 { margin: 0; }
.pusto { color: var(--muted); font-size: 14px; padding: 10px 2px; }
.blad { color: var(--bad); } .mute { color: var(--muted); }
.rozwin { border: 0; background: none; color: var(--accent); padding: 0 4px; font-size: 13px; min-height: 24px; }

/* Wymaga uwagi */
.alerts { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--card-line); border-radius: 14px; box-shadow: var(--shadow); }
.alerts li { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 16px;
  border-top: 1px solid var(--line-soft); }
.alerts li:first-child { border-top: 0; }
.alerts li b { font-weight: 700; }
.alerts .why { color: var(--muted); }
.alerts li.empty { display: block; color: var(--muted); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ---------- Start: linia limitów, Do Ciebie, sekcje jako jasnoszare panele ---------- */
.limity-linia { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 0; border-radius: 14px;
  padding: 9px 14px; margin-bottom: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.ll-pol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ll-tekst { font-family: var(--cond); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-tekst .kr { display: none; }
@media (max-width: 380px) { .ll-tekst { font-size: 13px; } .ll-tekst .dl { display: none; } .ll-tekst .kr { display: inline; } }
.krotko .ll-tekst { font-size: 13px; } .krotko .ll-tekst .dl { display: none; } .krotko .ll-tekst .kr { display: inline; }
.ll-tekst b { font-weight: 600; } .ll-tekst b.warn { color: var(--warn); } .ll-tekst b.bad, .ll-koniec { color: var(--bad); }
.ll-kredyty { color: var(--warn); }
.ll-pasek { height: 4px; border-radius: 2px; background: var(--series-soft); overflow: hidden; }
.ll-pasek i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.ll-pasek i.warn { background: var(--warn); } .ll-pasek i.bad { background: var(--bad); }
.g-start { column-count: 3; column-gap: 14px; }
.g-start > .blok { break-inside: avoid; margin: 0 0 14px; }
.g-start .t-wiersz .dane-teraz { margin-left: 0; justify-content: flex-start; text-align: left; }   /* wąska kolumna */
@media (max-width: 1300px) { .g-start { column-count: 2; } }
.blok { background: var(--panel); border: 1.5px solid transparent; border-radius: 16px; padding: 14px 14px 10px; min-width: 0; }
.blok.aktywny { border-color: var(--accent); }
.blok-glowa { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; min-height: 30px; }
.blok-glowa h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex: none; }
/* po prawej: liczba pozycji albo — w Teraz z jednym zadaniem — faza, firma, % i czas do końca (łamią się po kropkach) */
.prawa { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; color: var(--muted); font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; }
.dane-teraz { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 5px; font-size: 14px; font-weight: 500;
  color: var(--ink-2); text-align: right; line-height: 1.35; min-width: 0; }
.dane-teraz > * { white-space: nowrap; }
.dane-teraz > :first-child { white-space: normal; overflow-wrap: anywhere; min-width: 0; }  /* długa faza zadania w Teraz łamie się w karcie (uwaga 29.10) */
.dane-teraz > :not(:last-child)::after { content: " \00B7"; color: var(--muted); }
.dane-teraz .dt-proc, .stan-linia .dt-proc { font-weight: 700; color: var(--ink); }
.dane-teraz .eta.przeciaga { color: var(--warn); font-weight: 600; }
a.link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
a.link:hover { text-decoration: underline; }
a.link.wiecej { display: inline-block; margin-top: 8px; }
/* „+ Dodaj zadanie”: szary link na końcu listy, rozwija pole szybkiego wpisu */
.dodaj { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; color: var(--muted); font-size: 15px;
  font-weight: 500; padding: 10px 6px; min-height: 44px; text-align: left; border-radius: 10px; }
.dodaj:hover { color: var(--ink); background: rgba(0, 0, 0, .03); }
a.dodaj { text-decoration: none; margin-top: 2px; }
/* link obok tytułu sekcji (Zarządzaj kolejką, Wszystkie) i plusik w linii nagłówka Poczekalni */
/* liczba tuż przy nazwie sekcji (uwaga 25.10 pkt 36) i ikony akcji w linii nagłówka bez napisów i bez kółek (pkt 34, 35, 37) */
.ile-sek { color: var(--muted); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.ile-sek:empty { display: none; }
.ikona-akcja { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: center;
  border: 0; border-radius: 8px; background: none; padding: 0; color: var(--muted); }
@media (hover: hover) { .ikona-akcja:hover { color: var(--ink); background: var(--seg-bg); } }   /* dotyk: bez „przyklejonego” tła */
.ikona-akcja[aria-expanded="true"] { color: var(--accent); }
.ikona-akcja svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* edycja wpisu wprost w szczegółach (pkt 38): nazwa jak nagłówek, ramka dopiero przy najechaniu i pisaniu */
/* pole nazwy wygląda jak pole do pisania (ramka jak w innych polach) — przegląd Rambo 25.10; od ipt-826ps4 to samo pole dla
   nazwy taska i wpisu: wielowierszowe, rośnie z treścią, bez fokusu najwyżej 3 linie (pełna nazwa przy pisaniu) */
.szcz-tytul-pole { display: block; width: 100%; min-width: 0; font-size: 18px; font-weight: 700; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; line-height: 1.3; resize: none; overflow: hidden; }
.szcz-tytul-pole:not(:focus):not(.zmiana) { max-height: calc(3.9em + 14px); }   /* z niezapisaną zmianą bez zwijania: przycisk pod
   polem zostaje pod kursorem przy kliknięciu (code review TESTING) */
.szcz-tytul-pole:hover { border-color: var(--muted); }
/* nazwa dłuższa niż 3 linie bez fokusu: podgląd nad polem z wielokropkiem (te same kroje; dopełnienie = pole + ramka na
   zewnętrznym bloku, line-clamp na wewnętrznym — przycięcie line-clamp działa na krawędzi dopełnienia, więc z dopełnieniem
   w tym samym bloku czwarta linia wystawała), tekst pola przezroczysty — kliknięcie trafia w pole pod spodem
   (pointer-events: none) i stawia kursor tam, gdzie kliknięto */
.szcz-tytul-wrap { position: relative; min-width: 0; }
.szcz-tytul-podglad { display: none; position: absolute; inset: 0; pointer-events: none; padding: 7px 11px; font-size: 18px; font-weight: 700;
  line-height: 1.3; color: var(--ink); }
.szcz-tytul-podglad > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap;
  overflow-wrap: break-word; }
.szcz-tytul-wrap.uciete > .szcz-tytul-pole:not(:focus):not(.zmiana) { color: transparent; }
.szcz-tytul-wrap.uciete > .szcz-tytul-pole:not(:focus):not(.zmiana) + .szcz-tytul-podglad { display: block; }
.szcz-nazwa { min-width: 0; }
.opis-edycja { width: 100%; min-height: 96px; resize: vertical; border-radius: 12px; padding: 10px 12px; font-size: 15px; line-height: 1.45; }
.edycja-akcje { margin-top: 8px; }
.dodaj .strz { font-size: 18px; line-height: 1; }
.dodaj-box { margin-top: 2px; }
.szybki { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.szybki textarea { flex: 1 1 200px; min-width: 0; padding: 8px 12px; min-height: 40px; font-size: 15px; line-height: 1.35;
  resize: none; overflow-y: auto; }
.pasek-uwagi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 10px 14px; margin-bottom: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.pasek-uwagi:hover { border-color: var(--line); }
.pasek-uwagi .strzalka { margin-left: auto; font-size: 20px; color: var(--muted); line-height: 1; }
.plak.warn b { color: var(--warn); } .plak.hold b { color: var(--hold); }
.plak b { font-weight: 700; margin-left: 4px; }
.plak.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }   /* otwarte „Do mnie” (uwaga 25.10 pkt 47) */

/* ---------- zadanie = biała karta z kółkiem i ikonami (wzór Tablica Tygodnia) ---------- */
/* karta bez kółka (uwaga 25.10 pkt 23): tytuł i ikony w pierwszym wierszu, reszta pod spodem na całą szerokość;
   gęściej (pkt 27): mniejsze odstępy w karcie i między kartami */
.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; box-shadow: var(--shadow); padding: 9px 12px;
  margin: 6px 0 0; cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
/* :where — reguła ogólna bez wagi, żeby tytuł (.t / .t-wiersz) stał w pierwszej kolumnie obok ikon, a nie pod nimi */
.card > :where(:not(.ikony)) { grid-column: 1 / 3; }
.card > .t, .card > .t-wiersz { grid-column: 1; }
.card > .ikony { margin-left: 10px; }
.t-wiersz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.t-wiersz .t { flex: 1 1 220px; min-width: 0; }
.t-wiersz .dane-teraz { margin-left: auto; font-size: 13px; }
/* kolejność przeciąganiem wprost na liście (uwaga 25.10 pkt 48; Poczekalnia — ipt-fuo7px): przytrzymanie bez zaznaczania
   tekstu i menu dotyku */
.kolejka-lista > .card.ciagnij, .poczekalnia-lista > .card.ciagnij { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (hover: hover) { .kolejka-lista > .card.ciagnij, .poczekalnia-lista > .card.ciagnij { cursor: grab; } }
.card.ciagnie { position: relative; z-index: 20; border-color: var(--accent); box-shadow: 0 14px 32px rgba(16, 24, 40, .24); cursor: grabbing; }
.card.w-drodze { opacity: .45; }                           /* upuszczona w Kolejce, do odświeżenia tablicy */
/* karta Poczekalni nad Kolejką (ipt-fuo7px D7): linia miejsca z „N. miejsce” nad kartą (z-index wyżej, karta jest pod linią)
   i ramka sekcji celu — pozioma linia i obramowanie całej sekcji, bez pionowych pasków */
.wstaw-znacznik { position: fixed; height: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; z-index: 25; }
.wstaw-znacznik b { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600;
  line-height: 1; color: var(--on-ink); background: var(--accent); padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
#blok-kolejka.cel-upuszczenia { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html.ciagniecie, html.ciagniecie * { -webkit-user-select: none; user-select: none; cursor: grabbing; }
.card.wstrzymana .t { color: var(--muted); }
/* Zrobione: Akcept i Cofnij przy każdej pozycji (uwaga 25.10 pkt 51) — przyciski obok karty, na telefonie pod nią */
.z-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 6px; }
.z-wiersz > .card { margin: 0; }
.z-akcje { display: flex; gap: 6px; }
.z-akcje .btn { min-height: 36px; padding: 4px 12px; white-space: nowrap; }
/* Archiwum (ipt-hw9ypm, test ręczny TESTING): Przywróć i Cofnij w jednej szerokości (dłuższy napis jako ukryta linia o zerowej
   wysokości, jak .btn.zakoncz) — wiersze z różnymi przyciskami nie rozjeżdżają prawej krawędzi kart */
.arch-akcje .btn { flex-direction: column; gap: 0; }
.arch-akcje .btn::after { content: 'Przywróć'; height: 0; overflow: hidden; visibility: hidden; }
@media (hover: hover) { .card:hover { border-color: var(--line); } }
.card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card .t { font-weight: 400; color: var(--ink); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; padding-top: 1px; }
.card.menu { display: flex; align-items: center; }
.ikony { grid-column: 2; grid-row: 1; display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600;
  padding-top: 3px; white-space: nowrap; }
.ik { display: inline-flex; align-items: center; gap: 3px; }
.ik svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.meta { display: flex; gap: 4px 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; line-height: 1.3; color: var(--muted); align-items: center; }
.card .meta .tag { font-weight: 600; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }  /* długa faza zadania Rambo łamie się w karcie (uwaga 28.10) */
.meta .tag:not(.bad):not(.warn):not(.good):not(.new):not(.hold) { background: none; padding: 0; color: var(--muted); font-weight: 500; }
.meta .eta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.meta .eta.przeciaga { color: var(--warn); font-weight: 600; }
.suma-kolejki { white-space: nowrap; font-variant-numeric: tabular-nums; }   /* suma czasów Kolejki przy strzałkach (pkt 54) */
.prog { height: 5px; border-radius: 3px; background: var(--line-soft); margin-top: 8px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.unread { background: var(--accent); color: var(--on-ink); border-radius: 9px; padding: 1px 7px; font-size: 13px; font-weight: 700; }
/* zadanie na pulpicie w modalu nad widokiem (uwaga 25.10 pkt 32) */
.modal-tlo { position: fixed; inset: 0; z-index: 45; background: rgba(16, 24, 40, .38); display: flex; align-items: flex-start;
  justify-content: center; padding: 20px 16px; }
.szczegoly.modal { position: relative; top: auto; width: min(780px, 100%); max-height: calc(100vh - 160px); overflow-y: auto;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .28); outline: none; }
html.modal-otwarty, html.modal-otwarty body { overflow: hidden; }
:root[data-motyw="ciemny"] .modal-tlo { background: rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .modal-tlo { background: rgba(0, 0, 0, .6); } }
@media (min-width: 601px) { #start-limity, #start-uwaga { display: none; } }   /* pulpit: limity w pasku, „Do Ciebie” w nagłówku (pkt 30-31) */
.card .nr { font-weight: 700; color: var(--ink); }
.ostatni { margin-top: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ostatni .kiedy, .zdarzenia .kiedy { font-weight: 600; color: var(--ink-2); }

/* ---------- szczegóły: nagłówek z kółkiem i X, segment Szczegóły / Rozmowa, etykiety wersalikami ---------- */
.szczegoly { background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px; padding: 14px 16px; position: sticky; top: 64px;
  max-height: calc(100vh - 80px); overflow-y: auto; min-width: 0; box-shadow: var(--shadow); }
/* nagłówek i segment przyklejone u góry przewijanych szczegółów (jak we wzorze) */
.szcz-gora { position: sticky; top: -14px; z-index: 3; background: var(--surface); margin: -14px -16px 10px; padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line-soft); }
.szcz-glowa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 8px; }
.szcz-glowa h3 { font-size: 18px; font-weight: 700; margin: 0; overflow-wrap: anywhere; line-height: 1.3; }
.szcz-tytul { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.szcz-tytul.pelny { display: block; -webkit-line-clamp: unset; }
.szcz-x { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 20px; line-height: 1;
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.szcz-x:hover { border-color: var(--muted); }
.szcz-x svg, .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.szcz-x svg { width: 18px; height: 18px; }
.zakladki-szcz { margin: 0; }
.szczegoly.upusc { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dwa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn.szeroki { width: 100%; margin-top: 8px; }
.dwa .btn { width: 100%; }
.zal-dowody { margin: 12px 0 2px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pole { margin: 0 0 12px; }
.etykieta { display: block; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.stan-linia { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; }
/* plakietka dłuższa niż linia (faza zadania Rambo bywa zdaniem: 91 znaków na żywej bazie 28.10) łamie się w kolumnie Stanu,
   zamiast wychodzić na sąsiednie pola i poza ekran (ipt-826ps4, code review TESTING); krótkie plakietki bez zmian */
.szczegoly .stan-linia .tag { white-space: normal; overflow-wrap: anywhere; }
.dodano { color: var(--muted); font-size: 13px; margin: 18px 0 2px; }
/* rundy Do poprawki w szczegółach (ipt-9hqlx5): od najnowszej, otwarta na tle ostrzeżenia — bez pionowych pasków akcentu */
.rundy { display: flex; flex-direction: column; gap: 6px; }
.runda { padding: 7px 10px; border-radius: 10px; background: var(--ground); min-width: 0; }
.runda.otwarta { background: var(--warn-soft); }
.runda-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--muted); }
.runda-glowa b { color: var(--ink); font-weight: 700; }
.runda-tresc { margin-top: 3px; font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* szczegóły gęściej (ipt-826ps4, uwaga właściciela 26.10): pary pól w jednej linii — [STAN | akcja stanu], [FIRMA |
   ZAŁĄCZNIKI] — i zawijanie, gdy się nie mieszczą; przyciski w linii zwarte (telefon: 44 px w regule poniżej) */
.pola-linia { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: flex-start; margin: 0 0 12px; }
.pola-linia > .pole { margin: 0; min-width: 0; flex: 0 1 auto; }
.pola-linia > .pole:first-child { flex: 1 1 120px; }
.pola-linia > .pole.firma-pole { flex-basis: 240px; }
.pola-linia > .pole.pole-pelne { flex: 1 1 100%; }                     /* Do poprawki: formularz na całą linię */
.pola-linia .szcz-akcje .btn { flex: 0 0 auto; min-height: 32px; padding: 4px 14px; }
.pola-linia .firma-wybor select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.zal-dodaj { display: flex; align-items: center; gap: 10px; }
.zal-ile { margin-left: 6px; letter-spacing: 0; }
.zal-pusto { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* lista plików pod linią Firma | Załączniki: jeden wiersz na plik — nazwa (rdzeń z wielokropkiem, rozszerzenie zawsze
   widoczne), rozmiar · data, Pobierz, Usuń; kolumny akcji równe w każdym wierszu */
.zal-lista { margin: -4px 0 12px; }
.zal-lista .zal-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 5px 0;
  border-top: 1px solid var(--line-soft); font-size: 14px; overflow-wrap: normal; }   /* waga nad starym .plik-wiersz */
.zal-nazwa { display: flex; align-items: baseline; gap: 14px; min-width: 0; color: var(--accent); text-decoration: none; font-weight: 500; }
a.zal-nazwa:hover .zal-nn { text-decoration: underline; }
span.zal-nazwa { color: var(--ink-2); }
.zal-nn { display: flex; min-width: 0; }
.zal-nn .n1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.zal-nn .n2 { flex: none; white-space: nowrap; }
.zal-meta { color: var(--muted); white-space: nowrap; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; margin-left: auto; }
.zal-nazwa .tag { flex: none; }
.zal-akcje { display: flex; gap: 6px; }
.zal-akcje .btn { min-height: 30px; padding: 3px 10px; font-size: 13px; text-decoration: none; }
.zal-akcje .btn.zal-usun { min-width: 5.8em; color: var(--bad); }     /* „Na pewno?” bez przesuwania kolumn */
.plik-wiersz.film > .zal-wiersz { border-top: 0; padding-bottom: 0; }
/* kolejność na pulpicie w jednym rzędzie: Wyżej, Niżej, miejsce w kolejce, Wstrzymaj, Cofnij do Poczekalni */
.kol-linia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kol-linia .dwa { display: flex; gap: 8px; }
.kol-linia .dwa .btn { width: auto; }
.kol-linia .btn { min-height: 32px; padding: 4px 14px; }
.kol-linia .note { margin: 0 8px; }
.kol-linia .szcz-akcje .btn { flex: 0 0 auto; }
/* stopka: „Dodano … · klucz · typ” i „Usuń zadanie” w jednej linii */
.szcz-stopka { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 14px; }
.szcz-stopka .dodano { margin: 0; }
.szcz-stopka .btn.usun { min-height: 32px; }
.firma-wybor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.firma-wybor select { flex: 1 1 200px; min-width: 0; padding: 8px 32px 8px 12px; min-height: 40px; appearance: none; -webkit-appearance: none;
  /* własny wygląd: WebKit (Safari) przy natywnym wyglądzie ignoruje min-height — strzałka z samego CSS */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.szcz-akcje { justify-content: flex-start; margin: 0; }
.szcz-akcje .btn { flex: 1 1 140px; }
.szcz-tresc { min-width: 0; }
.prog.duzy { height: 8px; margin: 0 0 10px; }
table.tab.etapy tr.biezacy td { font-weight: 700; color: var(--accent); }
table.tab.etapy td { padding-top: 4px; padding-bottom: 4px; }
.zdarzenia { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.zdarzenia li { padding: 6px 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.sekcja-docu h4 { margin: 12px 0 2px; font-size: 14px; color: var(--ink-2); font-weight: 700; }
.sekcja-docu:first-child h4 { margin-top: 0; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.opis-pole { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; max-height: 360px; overflow-y: auto; }
/* Historia z Poczekalni (ipt-2fgv73 D5): pozycje przejęte przez kartę (task albo karta Rambo) w ramce z własnym przewijaniem jak
   Opis — tytuł, „wpis <autor> · <data> · <klucz>”, opis, rozmowa tylko do odczytu (wiadomości bez reakcji) i pliki z Pobierz;
   odsyłacz nad rozmową karty, notka „Przejęte przez kartę” i zwinięty „Pierwotny wpis” zadania z zamiany. Kolory wyłącznie
   z tokenów (oba motywy), bez pionowych pasków akcentu. */
.hp-ramka { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; max-height: 480px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; }
.szczegoly.modal .hp-ramka { max-height: max(360px, calc(var(--modal-h, 732px) - 200px)); }
.hp-poz { min-width: 0; }
.hp-poz + .hp-poz { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.hp-tytul { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.hp-meta { color: var(--muted); font-size: 13px; margin: 1px 0 6px; overflow-wrap: anywhere; }
.hp-opis { margin: 0 0 4px; }
.hp-sek { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 10px 0 6px; }
.hp-rozmowa { display: flex; flex-direction: column; gap: 8px; }
.hp-pliki { margin: 0; }
.hp-pliki > .pusto, .hp-rozmowa > .pusto { padding: 2px 0; }
.hp-odsylacz { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--ground);
  color: var(--accent); padding: 8px 12px; margin: 0 0 10px; font-size: 14px; font-weight: 600; min-height: 40px; overflow-wrap: anywhere; }
.szczegoly.modal.z-rozmowa > .hp-odsylacz { flex: none; margin: 10px 0 8px; }
.hp-przejete { margin: 0 0 10px; }
.hp-przejete a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
details.pierwotny { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
details.pierwotny > summary { cursor: pointer; padding: 8px 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
details.pierwotny > summary b { color: var(--ink); }
.pierwotny-tresc { padding: 0 0 10px; }
.pierwotny-tytul { font-weight: 700; margin: 0 0 6px; }
.poprawka { display: grid; gap: 8px; width: 100%; }
.poprawka textarea, .poprawka input { width: 100%; padding: 9px 12px; font-size: 15px; }
.co-zrobic { display: block; margin-top: 4px; font-size: 13px; }
.rozmowa-podglad { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rozmowa .czat-uwaga { padding: 8px 0 0; }
.plik-wiersz { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft);
  font-size: 14px; overflow-wrap: anywhere; }
.zal-lista > .plik-wiersz:first-child, .zal-dowody + .plik-wiersz { border-top: 0; }
.plik-wiersz.film { flex-direction: column; align-items: stretch; }
.plik-wiersz video { width: 100%; max-height: 50vh; background: #000; border-radius: 10px; }
/* Wyniki pracy w zadaniu (ipt-bpour1 D10): karty według rodzaju w siatce — film na całą szerokość (pulpit do 420 px
   wysokości), reszta auto-fill od 200 px na pulpicie i 2 kolumny na telefonie; podgląd w pudełku o stałych proporcjach
   (obraz, pierwsza strona PDF i dokumentu — object-fit contain), ikona rodzaju, gdy podglądu nie ma; pod podglądem nazwa
   (rdzeń z wielokropkiem, rozszerzenie zawsze), „rozmiar · data · źródło”, opis Rambo i Pobierz / Udostępnij. Kolory
   wyłącznie z tokenów (oba motywy), bez pionowych pasków. */
.wyn-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.wyn-karta { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--card-line); border-radius: 12px;
  background: var(--surface); overflow: hidden; }
.wyn-karta.wyn-film { grid-column: 1 / -1; }
.wyn-wideo { background: #000; }
.wyn-wideo video { display: block; width: 100%; max-height: 420px; background: #000; }
/* pudełko o stałych proporcjach: obraz w środku pozycjonowany absolutnie — pionowy kadr nie rozpycha karty (overflow ucina
   minimalną wysokość z treści) */
.wyn-pudelko { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3;
  overflow: hidden; padding: 0; border: 0; border-bottom: 1px solid var(--line-soft); background: var(--ground); color: var(--muted);
  cursor: zoom-in; text-decoration: none; }
a.wyn-pudelko { cursor: pointer; }
.wyn-pudelko.bez { cursor: default; }
.wyn-pudelko img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.wyn-ikona { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wyn-ikona svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wyn-ext { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.wyn-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px 10px; }
.wyn-nazwa { font-weight: 600; color: var(--ink); }
.wyn-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wyn-opis { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.wyn-wpis { font-size: 13px; align-self: flex-start; }
/* ipt-2fgv73 (code review TESTING): „z wpisu” to przycisk przewijający do Historii z Poczekalni — wygląd dotychczasowego linku */
button.wyn-wpis { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--accent); text-decoration: underline;
  cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.wyn-akcje { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wyn-akcje .btn { flex: 1 1 auto; min-height: 36px; padding: 4px 10px; text-decoration: none; }
.wyn-pobierz { color: var(--accent); }
.btn.teraz { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.btn.wyn-udost:disabled, .btn.zal-udost:disabled { cursor: progress; opacity: .8; }     /* tylko Udostępnij w toku — globalne .btn:disabled bez zmian */
.wyn-reszta { margin-top: 8px; }
.btn.quiet.wyn-rozwin { padding-left: 0; color: var(--accent); }
.wyn-lista { margin: 4px 0 4px; }
.zal-akcje .btn.zal-udost { min-width: 6.2em; }
@media (hover: hover) { .wyn-pudelko:not(.bez):hover { background: var(--seg-bg); } }
/* szczegóły na pulpicie (modal; ipt-826ps4 runda poprawki 1, uwaga właściciela 27.10): linia główna [STAN | FIRMA |
   ZAŁĄCZNIKI | akcja stanu] w jednym rzędzie — Stan, Firma i Załączniki od lewej, akcja przy prawej krawędzi (najwyżej
   320 px), kontrolki 34 px. Stan (co najmniej 120 px) bierze szerokość swojej treści, a gdy rząd się nie mieści, zawija
   plakietki zamiast spychać pola do drugiego rzędu (podstawa 0, wzrost do max-content; propozycja agenta ma cztery
   plakietki). Kolumna Firmy szerokości listy (do 260 px) — „Zapisz firmę” i „Anuluj” zawijają się pod listą, rząd nie
   przesuwa akcji; formularz Do poprawki = cały nowy rząd. Pod linią pasek postępu, szacunek i notka odmowy zgody, opis do
   dolnej krawędzi pierwszego ekranu (--modal-h z WIDOKI.zadanie, nigdy mniej niż 360 px), pliki i dowody pod opisem, fazy
   Przebiegu jako plakietki. Telefon (.szczegoly.pelne) bez zmian. */
.szczegoly.modal .pola-linia.glowna { row-gap: 8px; }
.szczegoly.modal .pola-linia.glowna > .pole { flex: 0 1 auto; }
/* min-width na polu Stanu (nie tylko na .stan-linia): przy podstawie 0 łamanie rzędu liczyło Stan jako 0 px i w wąskim
   oknie (601–760 px) Stan ściskał się do kilku px, a plakietki nachodziły na Firmę — teraz akcja przechodzi do drugiego
   rzędu (code review TESTING) */
.szczegoly.modal .pola-linia.glowna > .pole:first-child { flex: 1 1 0; min-width: 120px; max-width: max-content; }
.szczegoly.modal .pola-linia.glowna .stan-linia { min-width: 120px; }
.szczegoly.modal .pola-linia.glowna > .firma-pole { width: min-content; max-width: 260px; }
.szczegoly.modal .pola-linia.glowna .firma-wybor select { flex: 0 1 auto; width: auto; max-width: 100%; min-height: 34px; padding-top: 5px;
  padding-bottom: 5px; }
.szczegoly.modal .pola-linia.glowna > .zal-pole { flex: none; }
.szczegoly.modal .pola-linia.glowna > .akcja-pole { margin-left: auto; max-width: 320px; }
.szczegoly.modal .pola-linia.glowna > .akcja-pole.pole-pelne { flex: 1 1 100%; max-width: none; margin-left: 0; }
.szczegoly.modal .pola-linia.glowna .btn { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
.szczegoly.modal .pola-linia.glowna .zal-pusto { display: none; }
.szczegoly.modal .pod-linia { margin: -2px 0 12px; }
.szczegoly.modal .pod-linia .prog.duzy { margin: 0 0 6px; }
.szczegoly.modal .pod-linia .note { display: block; margin: 0; }                 /* notka odmowy zgody to span */
.szczegoly.modal .pod-linia .note + .note { margin-top: 4px; }
/* --opis-max: zmierzone w wysokoscOpisu() od górnej krawędzi pola (nad opisem bywają rundy Do poprawki, pasek i szacunek,
   nazwa w 3 liniach) — pole kończy się w pierwszym ekranie modalu; zapas z --modal-h, gdy pomiaru jeszcze nie ma */
.szczegoly.modal .opis-pole { max-height: var(--opis-max, max(360px, calc(var(--modal-h, 732px) - 252px))); }
.szczegoly.modal .pliki-pole .zal-lista, .szczegoly.modal .dowody-pole .zal-lista { margin: 0; }
.szczegoly.modal table.tab.etapy, .szczegoly.modal table.tab.etapy tbody { display: block; }
.szczegoly.modal table.tab.etapy tbody { display: flex; flex-wrap: wrap; gap: 6px; }
.szczegoly.modal table.tab.etapy tr { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 9px;
  background: var(--ground); }
.szczegoly.modal table.tab.etapy td { padding: 0; border: 0; font-size: 13px; }
.szczegoly.modal table.tab.etapy td.liczba { color: var(--muted); }
.szczegoly.modal table.tab.etapy tr.biezacy { background: var(--accent-soft); }
.szczegoly.modal table.tab.etapy tr.biezacy td { color: var(--accent); }
.szczegoly.modal table.tab.etapy tr.przyszly { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.szczegoly.modal table.tab.etapy tr.przyszly td { color: var(--muted); }
.szczegoly.modal table.tab.etapy tr.przyszly td.liczba { display: none; }
.wykres-info { font-size: 13px; color: var(--muted); min-height: 1.4em; margin-top: 4px; }
.wykres-info b { color: var(--ink); }
.log-wlasciciele button.jeden { background: var(--surface); border-color: var(--accent-line); color: var(--accent); text-align: center; }

/* ---------- Stałe zadania: drzewo agentów firmy, karta agenta, automaty, Dostępy ---------- */
.stale-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.drzewa { display: grid; gap: 14px; min-width: 0; }
.drzewo { min-width: 0; background: var(--panel); border-radius: 16px; padding: 12px 12px 10px; }
.card.agent.wc1 { margin-left: 18px; width: calc(100% - 18px); }
.card.agent.wc2 { margin-left: 36px; width: calc(100% - 36px); }
.raport { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.ocena { margin: 6px 0 0 12px; padding: 8px 12px; background: var(--panel); border-radius: 10px; }
.cron-karta { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.cron-karta .btn { justify-self: start; }
.procesy { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.procesy li { padding: 6px 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
table.tab.dostepy td { white-space: normal; text-align: left; }
table.tab.dostepy th { text-align: left; }

/* ---------- rozmowa z Rambo i rozmowa w tasku: szeroki panel boczny / nakładka na cały ekran telefonu ---------- */
.czat { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(760px, 56vw); max-width: 100vw; background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: -10px 0 28px rgba(16, 24, 40, .14); display: flex; flex-direction: column; }
.czat-glowa { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line-soft); }
.czat-tyt { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.czat-tyt b { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czat-tyt span { font-size: 13px; }
.czat-lista { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain;
  background: var(--panel); }
.wiad { background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; padding: 9px 12px; min-width: 0; box-shadow: var(--shadow); }
.wiad.wlasciciel { background: var(--accent-soft); border-color: transparent; box-shadow: none; }
.wiad.system { background: transparent; border-style: dashed; color: var(--muted); font-size: 13px; box-shadow: none; }
/* ipt-hmucei: wybór rozmówcy (segment jak firmy) pod nagłówkiem okna rozmowy, separator przekierowanej rozmowy pozycji
   (wyśrodkowany wpis systemowy), wiadomości z wątku poprzedniego bota przygaszone, bot obok wyboru firmy — bez pasków akcentu */
.czat-rozmowcy { margin: 8px 12px 0 16px; }
.czat-rozmowcy button { flex: 1 1 0; }
.wiad.system.przekierowanie { text-align: center; font-weight: 600; }
.wiad.historia { opacity: .72; }
.firma-bot { color: var(--muted); white-space: nowrap; }
.wiad.czeka { border-style: dashed; border-color: var(--muted); }
.wiad-glowa { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; margin-bottom: 2px; }
.wiad-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.wiad-pliki { margin: 4px 0 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }   /* długa nazwa pliku w podglądzie łamie się (390) */
.wiad-ostatnia { margin: 6px 0 0 12px; padding: 6px 10px; border-radius: 8px; background: var(--line-soft, #f1f3f5); font-size: 13.5px; }
.wiad-ostatnia .wiad-tekst { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.wiad-ostatnia.nowa { background: var(--accent-soft, #e8f0fe); }
.wiad-watek { border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; padding: 4px 0 0; display: inline-flex; gap: 6px; align-items: center; }
.wiad.klik { cursor: pointer; }
.wiad.klik:hover { border-color: var(--line); }
/* reakcje kciuk w górę i serce przy odpowiedziach Rambo (ipt-nlxw0n D13, wzór Tablica Tygodnia): biała pigułka z cienką jasną
   ramką jak przyciski panelu, ikony liniowe; „moja” = jasnomorskie tło, ramka akcentu, ikona wypełniona (serce czerwone);
   telefon: cel dotyku 52 × 44 px z widoczną pigułką 30 px (::before) */
.wiad-reakcje { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wiad-ostatnia .wiad-reakcje { margin-top: 4px; }
.reakcja { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; min-width: 40px; padding: 0 9px;
  border: 1px solid var(--card-line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px;
  font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.reakcja svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.reakcja.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.reakcja.on svg { fill: currentColor; }
.reakcja.r-serce.on svg { color: var(--bad); }
.reakcja:disabled { cursor: progress; }
@media (hover: hover) { .reakcja:not(.on):not(:disabled):hover { border-color: var(--line); color: var(--ink); } }
.czat-pisze { padding: 2px 16px 6px; font-size: 13px; color: var(--muted); }
/* edytor jak w Slacku (uwaga 25.10 pkt 55): ramka na całą szerokość, pole rosnące z tekstem, pod nim pasek z plikiem i wysyłką */
.czat-forma { padding: 8px 12px 10px; border-top: 1px solid var(--line-soft); }
.czat-edytor { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.czat-edytor:focus-within { border-color: var(--accent); }
.czat-edytor textarea { display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 12px 12px 0 0; outline: none;
  background: transparent; resize: none; padding: 10px 12px 4px; font-size: 15px; line-height: 1.4; min-height: 44px; max-height: 40vh; }
.czat-pasek { display: flex; align-items: center; gap: 6px; padding: 2px 6px 6px; }
.czat-skrot { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czat-ik { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.czat-ik svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .czat-ik:not(:disabled):hover { color: var(--ink); background: var(--seg-bg); } }
.czat-ik.czat-wyslij { margin-left: auto; background: var(--accent); color: var(--surface); }
.czat-ik.czat-wyslij:disabled { background: var(--seg-bg); color: var(--muted); cursor: default; }
.czat-uwaga { margin: 0; padding: 0 14px 10px; font-size: 13px; color: var(--muted); }
html.czat-otwarty, html.czat-otwarty body { overflow: hidden; }
/* obrazy w rozmowie (ipt-pcsesa): zasobnik załączników nad polem (kafelek 196×66, na telefonie 210×66, przewija się w bok
   w sobie), podświetlenie edytora przy przeciąganiu pliku, miniatura w wiadomości o stałym rozmiarze, szara plakietka stanu
   i powód osobną linią (.tag ma nowrap), okno podglądu na ciemnym tle w obu motywach. Bez pionowych pasków. */
.czat-zas { display: flex; gap: 8px; overflow-x: auto; padding: 8px 8px 2px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.czat-zas[hidden] { display: none; }
.zas-kafel { position: relative; flex: none; display: flex; align-items: center; gap: 8px; width: 196px; height: 66px; padding: 4px 36px 4px 4px;
  box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.zas-kafel.wysyla { opacity: .72; }
.zas-kafel.blad { border-color: var(--bad); }
.zas-min { flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--ground);
  display: inline-flex; align-items: center; justify-content: center; cursor: zoom-in; }
.zas-min img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zas-ikona { cursor: default; color: var(--muted); }
.zas-ikona svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zas-opis { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.3; }
.zas-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 500; }
.zas-r { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zas-kafel.blad .zas-r { color: var(--bad); }
.zas-x { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.zas-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) { .zas-x:hover { color: var(--ink); background: var(--seg-bg); } .wiad-obraz:hover { border-color: var(--accent-line); } }
.czat.upusc .czat-edytor { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wiad-obrazy { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.wiad-obraz-k { display: inline-flex; flex-direction: column; gap: 3px; max-width: 240px; min-width: 0; }
.wiad-obraz { display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--card-line); border-radius: 10px;
  background: var(--ground); overflow: hidden; cursor: zoom-in; box-sizing: border-box; }
.wiad-obraz img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.wiad-obraz-p { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiad-powod { margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.podglad { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; background: rgba(8, 12, 16, .94); color: #E8EDF2; }
.podglad-gora { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  padding-top: calc(8px + env(safe-area-inset-top)); font-size: 14px; }
.podglad-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.podglad-r { flex: none; color: #9AA6B2; font-variant-numeric: tabular-nums; }
.podglad-pobierz { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px; color: #fff; text-decoration: none; font-weight: 600; }
.podglad-x { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.podglad-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) { .podglad-x:hover, .podglad-pobierz:hover { background: rgba(255, 255, 255, .18); } }
.podglad :focus-visible { outline-color: #8FD6E2; }
.podglad-scena { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.podglad-obraz { position: relative; flex: none; }
.podglad-obraz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.podglad-oryg { opacity: 0; transition: opacity .15s; }
.podglad-obraz.gotowy .podglad-oryg { opacity: 1; }
.podglad-obraz.gotowy .podglad-min { visibility: hidden; }
.podglad-blad { display: none; position: absolute; left: 0; right: 0; bottom: -28px; text-align: center; font-size: 13px; color: #C7D0D9; }
.podglad-obraz.blad .podglad-blad { display: block; }
/* rozmowa zadania w modalu szczegółów na pulpicie (ipt-826ps4, uwaga właściciela 26.10): zakładka Rozmowa = cała rozmowa
   w modalu — lista przewijana w sobie, edytor przy dolnej krawędzi modalu, bez drugiego okna obok; bez nagłówka okna (nazwa
   i X są w nagłówku modalu). Modal w tej zakładce ma stałą wysokość (do limitu z WIDOKI.zadanie). */
.szczegoly.modal.z-rozmowa { height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.szczegoly.modal.z-rozmowa > .szcz-gora { position: static; flex: none; margin-bottom: 0; }
.rozmowa-modal { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 -16px; }
.rozmowa-modal > .pusto { margin: 16px; }
.czat.w-modalu { position: static; z-index: auto; width: auto; max-width: none; flex: 1; min-height: 0; border-left: 0; box-shadow: none;
  background: transparent; }
.czat.w-modalu .czat-glowa { display: none; }
.czat.w-modalu .czat-lista { padding: 12px 16px; }
.czat.w-modalu .czat-forma { padding: 8px 16px 6px; }
.czat.w-modalu .czat-uwaga { padding: 0 16px 10px; }

/* ---------- logowanie odciskiem palca (ipt-y6n54v): jeden duży przycisk, link od admina, „to nie ja”, okno potwierdzenia ---------- */
.logowanie { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--panel); }
.log-karta { background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px; padding: 22px; width: 100%; max-width: 420px; box-shadow: var(--shadow); }
.log-karta h1 { font-weight: 700; margin: 0 0 6px; font-size: 24px; }
.log-opis { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.log-blad { color: var(--bad); font-size: 13px; margin: 10px 0 0; min-height: 1em; }
.pk-duzy { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 18px;
  border: 0; border-radius: 14px; background: var(--accent); color: var(--on-ink); font-size: 18px; font-weight: 700; }
.pk-duzy:hover:not(:disabled) { filter: brightness(1.08); }
.pk-duzy:disabled { opacity: .6; cursor: progress; }
.pk-ikona { display: inline-flex; flex: none; }
.pk-ikona svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pk-wskazowki { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.pk-wskazowki b { color: var(--ink-2); font-weight: 600; }
.pk-mala { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
/* wskazówka aplikacji z ekranu początkowego iPhone'a (ipt-va2vl5 D13) — tło jak pole, bez pionowego paska */
.pk-ios { padding: 10px 12px; border-radius: 12px; background: var(--panel); color: var(--ink-2); }
.pk-adres { display: block; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 12px; font-weight: 600; font-size: 15px;
  text-decoration: none; text-align: center; overflow-wrap: anywhere; min-height: 44px; }
.pk-tytul { font-size: 19px; font-weight: 700; margin: 4px 0 10px; }
.pk-opis-sesji { display: grid; gap: 6px; background: var(--panel); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.pk-wiersz { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; font-size: 14px; align-items: baseline; }
.pk-wiersz span { color: var(--muted); font-size: 13px; } .pk-wiersz b { font-weight: 600; overflow-wrap: anywhere; }
.btn.pk-blokuj { width: 100%; min-height: 52px; font-size: 16px; border-color: var(--bad); }
.btn.pk-blokuj:hover { background: var(--bad-soft); }
.pk-tlo { align-items: center; z-index: 70; }
.pk-okno { background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px; padding: 20px; width: min(420px, 100%);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .28); }
.pk-okno h2 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.pk-okno-akcje { display: flex; justify-content: flex-end; margin-top: 8px; }
.pk-okno-akcje .btn { min-height: 44px; }
html.pk-okno-otwarte, html.pk-okno-otwarte body { overflow: hidden; }
.baner-pk { display: flex; align-items: center; gap: 12px; margin: 10px 24px 0; padding: 10px 14px; border-radius: 12px;
  background: var(--warn-soft); color: var(--ink); font-size: 14px; line-height: 1.4; }
.baner-pk .pk-ikona { color: var(--warn); }
.baner-pk .pk-ikona svg { width: 24px; height: 24px; }
.pk-h { margin: 16px 0 4px; }
.blok .pk-h:first-of-type { margin-top: 6px; }
.pk-lista { display: grid; gap: 0; }
.card.pk-karta { cursor: default; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.card.pk-karta .t { -webkit-line-clamp: 3; font-weight: 600; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card.pk-karta.biezacy { border-color: var(--accent-line); }
.pk-pola { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.pk-pola i { font-style: normal; color: var(--muted); margin-right: 6px; }
.pk-pola span { overflow-wrap: anywhere; }
.card.pk-karta .acts { justify-content: flex-start; margin-top: 2px; }
.btn.pk-usun { min-height: 36px; padding: 4px 10px; color: var(--bad); }
.pk-dodaj { justify-content: flex-start; margin: 10px 0 2px; }
.pk-dodaj .btn { min-height: 40px; }
.pk-atrybucja { color: var(--muted); font-size: 13px; margin: 14px 0 4px; }
@media (max-width: 600px) { .pk-atrybucja a { display: inline-flex; align-items: center; min-height: 44px; } }   /* link licencji DB-IP = cel dotyku */

/* ---------- Moc Claude ---------- */
.wykres { width: 100%; height: 300px; }
.prognoza p { margin: 0 0 6px; }
.rekomendacja { background: var(--warn-soft); color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-top: 6px; }
/* width: max-content — bez niej szerokość dopasowana do treści kończy się na połowie ekranu (left: 50%): długi komunikat na
   telefonie miał 195 px i 7 linii i zasłaniał pole z tekstem (ipt-pcsesa TESTING); 720 px = dotychczasowa szerokość na 1440 */
.komunikat { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--surface);
  padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 60; width: max-content; max-width: min(720px, calc(100vw - 32px));
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.komunikat.widoczny { opacity: 1; }

@media (max-width: 980px) { .g-2, .g-32, .g-half { grid-template-columns: minmax(0, 1fr); } .g-start { column-count: 1; } }
@media (max-width: 1100px) { .stale-uklad { grid-template-columns: minmax(0, 1fr); } }

/* ---------- telefon: zwinięte sekcje z liczbami w nagłówku, dolny pasek ---------- */
@media (max-width: 600px) {
  body { font-size: 15px; line-height: 1.4; }
  .glowa { padding: 8px 12px; gap: 8px; }
  .logo { font-size: 19px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* licznik dwucyfrowy przy „Rozmowa” nie może zepchnąć przycisków do drugiej linii */
  .plakietki { gap: 2px; flex: 0 0 auto; }
  #plak-czat { padding: 6px 8px; gap: 4px; }
  .firmy { order: 4; width: 100%; }
  .firma { min-height: 44px; padding: 6px 4px; font-size: 14px; flex: 1 1 auto; min-width: 44px; overflow: hidden; text-overflow: ellipsis; }
  .firma .ile { display: none; }
  .btn, .ikona-btn { min-height: 44px; min-width: 44px; font-size: 15px; }
  .ikona-btn { width: 44px; height: 44px; }
  .pasek-gorny { display: none; }
  .plak { display: none; }
  .widok { padding: 6px 12px calc(80px + env(safe-area-inset-bottom)); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
  .strip > .seg-w { padding: 8px 12px 0; min-height: 44px; border-radius: 12px; }
  .strip .k { font-size: 13px; } .strip .v { font-size: 22px; margin: 0; }
  .strip .s { font-size: 13px; margin-bottom: 6px; }
  .strip .m { margin: auto -12px 0; padding: 5px 12px 6px; font-size: 13px; } .strip .m b { font-size: 15px; }
  .strip > .seg-w.szeroki { grid-column: 1 / -1; }
  .strip > .seg-w.szeroki .kv { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; }
  .strip > .seg-w.szeroki .pasek { margin-top: 0; }
  .blok { padding: 12px 10px 6px; border-radius: 14px; }
  /* czcionki kart na telefonie o 30% mniejsze (uwaga 25.10 pkt 26: 16 -> 11,2 px tytuł, 13 -> 9,1 px wiersz stanu)
     i gęsta lista (pkt 27); cała karta zostaje celem dotyku >= 44 px */
  .card { padding: 6px 10px; min-height: 44px; margin-top: 5px; border-radius: 10px; }
  .t-wiersz .dane-teraz { margin-left: 0; justify-content: flex-start; text-align: left; }
  .card .t { font-size: 11.2px; line-height: 1.35; }
  .card .meta, .card .ostatni, .card .ikony, .card .dane-teraz, .card .meta .tag, .card .nr { font-size: 9.1px; }
  .card .meta { margin-top: 3px; gap: 2px 6px; }
  .card .ostatni { margin-top: 3px; }
  .card .ik svg { width: 11px; height: 11px; }
  .card .ikony { gap: 7px; padding-top: 1px; }
  .card .prog { height: 3px; margin-top: 5px; }
  .card .meta .tag.bad, .card .meta .tag.warn, .card .meta .tag.good, .card .meta .tag.new, .card .meta .tag.hold { padding: 1px 5px; border-radius: 6px; }
  .ikona-akcja { width: 44px; height: 44px; margin: -8px -6px -8px 0; }
  .ikona-akcja svg { width: 22px; height: 22px; }
  .opis-edycja { font-size: 16px; }
  .szcz-tytul-pole { min-height: 44px; }
  .blok-glowa a.link { margin: -12px 0; display: inline-flex; align-items: center; min-height: 44px; }
  .blok-glowa h2 { font-size: 18px; }
  .szybki textarea { flex: 1 1 100%; min-height: 44px; font-size: 16px; }      /* cały tekst widać (pkt 45) */
  html.pisze .dolny { display: none; }                                          /* przy pisaniu pasek nie zasłania pola */
  .wiecej-menu .card .t { font-size: 15px; }    /* pozycje menu Więcej to nawigacja, nie karty zadań (-30% dotyczy zadań) */
  .wiecej-menu .card .meta { font-size: 13px; }
  /* Dostępy na telefonie jako karty (uwaga 25.10 pkt 52): narzędzie pogrubione, pod spodem pola z etykietami */
  table.tab.dostepy, table.tab.dostepy tbody { display: block; width: 100%; }
  table.tab.dostepy thead { display: none; }
  table.tab.dostepy tr { display: block; background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px;
    box-shadow: var(--shadow); padding: 9px 12px; margin: 6px 0 0; }
  table.tab.dostepy td { display: block; padding: 1px 0; border: 0; font-size: 13px; line-height: 1.4; }
  table.tab.dostepy td:empty { display: none; }
  table.tab.dostepy td:first-child { font-weight: 700; font-size: 15px; color: var(--ink); padding-bottom: 3px; }
  table.tab.dostepy td:first-child small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
  table.tab.dostepy td[data-etykieta]::before { content: attr(data-etykieta) ': '; color: var(--muted); font-weight: 600; }
  .z-wiersz { gap: 6px; }
  .z-akcje .btn { min-height: 44px; padding: 4px 10px; font-size: 14px; }
  html.pisze .widok { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .szybki .btn { min-width: 72px; }
  .g-start > .blok { margin-bottom: 10px; }
  .szczegoly.pelne { position: static; max-height: none; overflow: visible; border: 0; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }
  .szczegoly.pelne .szcz-gora { top: 0; margin: -6px -12px 10px; padding: 8px 12px 8px; }
  .szcz-x { width: 44px; height: 44px; }
  .firma-wybor select { min-height: 44px; font-size: 16px; }
  .poprawka textarea, .poprawka input { font-size: 16px; }
  .czat { inset: 0; width: auto; border-left: 0; box-shadow: none; z-index: 90; }
  .komunikat { z-index: 95; }       /* nad nakładką rozmowy — odmowa reakcji i błąd wysyłki były pod nią niewidoczne (ipt-nlxw0n) */
  .pk-tlo { z-index: 96; }          /* okno odcisku palca z rozmowy (wstrzymana sesja, wgranie pliku) też nad nakładką (ipt-nlxw0n) */
  .podglad { z-index: 92; }         /* podgląd obrazu nad nakładką rozmowy, pod komunikatem i oknem odcisku (ipt-pcsesa) */
  .czat-zas { padding: 8px 10px 2px; }
  .zas-kafel { width: 210px; padding-right: 44px; }
  .zas-x { top: 0; right: 0; width: 44px; height: 44px; }
  .czat.vv { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100%); }
  .czat-forma { padding: 0; border-top: 0; }                       /* edytor od krawędzi do krawędzi (pkt 55) */
  .czat-edytor { border-radius: 0; border-width: 1px 0 0; }
  .czat-edytor textarea { font-size: 16px; padding: 12px 16px 4px; border-radius: 0; }
  .czat-pasek { padding: 2px 10px 8px; }
  .czat-ik { width: 44px; height: 44px; }
  .czat-uwaga { padding: 0 16px 10px; }
  .czat-forma .btn, .czat-glowa .btn, .czat-glowa .ikona-btn { min-height: 44px; min-width: 44px; }
  .czat-rozmowcy button { min-height: 44px; }                     /* wybór rozmówcy = cel dotyku (ipt-hmucei) */
  .wiad-watek { min-height: 44px; }
  .wiad-pliki li { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; }
  .wiad-reakcje { gap: 2px; margin: 2px 0 -8px -8px; }
  .reakcja { position: relative; height: 44px; min-width: 52px; padding: 0 12px; border: 0; background: transparent; }
  .reakcja::before { content: ''; position: absolute; inset: 7px 4px; border: 1px solid var(--card-line); border-radius: 10px;
    background: var(--surface); }
  .reakcja.on { background: transparent; }
  .reakcja.on::before { background: var(--accent-soft); border-color: var(--accent-line); }
  .reakcja > * { position: relative; }
  /* szczegóły na telefonie (ipt-826ps4): przyciski w liniach pól 44 px; wiersz pliku = nazwa i „rozmiar · data” w dwóch
     liniach jednego celu dotyku, Pobierz i Usuń 44 px po prawej; kolejność jak dotąd (dwa rzędy przycisków) */
  .pola-linia { column-gap: 16px; }                         /* Stan + dwa przyciski Decyzji mieszczą się w 366 px */
  .pola-linia .szcz-akcje .btn, .zal-akcje .btn, .szcz-stopka .btn.usun, .kol-linia .btn { min-height: 44px; }
  /* Historia z Poczekalni i Pierwotny wpis na telefonie (ipt-2fgv73): cele dotyku 44 px, ramka historii z własnym przewijaniem */
  .hp-ramka { max-height: 60vh; }
  .hp-odsylacz { min-height: 44px; }
  .hp-przejete a { display: inline-flex; align-items: center; min-height: 44px; }
  details.pierwotny > summary { min-height: 44px; padding: 12px 0; }
  button.wyn-wpis { min-height: 44px; }
  .pola-linia .firma-wybor select { min-height: 44px; }
  .zal-pusto { display: none; }
  /* Wyniki na telefonie (ipt-bpour1 D10): 2 kolumny, film na całą szerokość, przyciski 44 px jeden pod drugim w wąskiej karcie */
  .wyn-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wyn-wideo video { max-height: 70vh; }
  .wyn-karta:not(.wyn-film) .wyn-akcje { flex-direction: column; }
  .wyn-akcje .btn, .wyn-rozwin { min-height: 44px; }
  .zal-lista .zal-wiersz { column-gap: 8px; padding: 2px 0; }
  .zal-wiersz .zal-nazwa { flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; min-height: 48px; }
  .zal-meta { margin-left: 0; }
  .zal-nazwa .tag { align-self: flex-start; }
  .kol-linia { display: block; }
  .kol-linia .dwa { display: grid; }
  .kol-linia .dwa .btn { width: 100%; }
  .kol-linia .note { margin: 8px 0 0; }
  .kol-linia .szcz-akcje .btn { flex: 1 1 140px; }
  .card.agent.wc1 { margin-left: 10px; width: calc(100% - 10px); }
  .card.agent.wc2 { margin-left: 20px; width: calc(100% - 20px); }
  .wiad-pliki a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; overflow-wrap: anywhere; }
  a.link { display: inline-flex; align-items: center; min-height: 44px; }
  .panel { padding: 10px 12px; border-radius: 12px; }
  .grid { gap: 10px; }
  section.sek { margin-top: 8px; }
  section.sek > h2, section.sek > .lead { display: none; }
  section.sek.zwiniety > *:not(.sum) { display: none; }
  .sum { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1.5px solid transparent;
    border-radius: 14px; padding: 9px 12px 10px; min-height: 44px; }
  section.sek:not(.zwiniety) > .sum { border-color: var(--accent); background: var(--surface); margin-bottom: 8px; position: sticky; top: 0; z-index: 4; }
  .sum-t { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 16px; margin-bottom: 2px; }
  .chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 3px 3px 0; opacity: .6; }
  section.sek:not(.zwiniety) .chev { transform: rotate(-135deg); margin-bottom: -3px; }
  .sum-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
  .mm { display: block; min-width: 0; }
  .mm.wide { grid-column: 1 / -1; }
  .mm i { display: block; font-style: normal; font-size: 13px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mm b { display: block; font-family: var(--cond); font-weight: 600; font-size: 16px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mm b.txt { font-family: var(--body); font-size: 13px; font-weight: 600; }
  .alerts li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 12px; }
  .acts { justify-content: flex-start; }
  table.tab th { font-size: 13px; padding: 3px 4px; white-space: normal; line-height: 1.15; vertical-align: bottom; }
  table.tab td { padding: 6px 4px; font-size: 13px; }
  .wykres { height: 230px; }
  .seg button { min-height: 44px; padding: 6px 10px; font-size: 15px; }
  .rozwin { min-height: 44px; min-width: 44px; }
  .tag { font-size: 13px; }
  .meta { font-size: 13px; }
  .note { font-size: 13px; }
  .menu-konta { top: 60px; right: 12px; }
  .menu-konta button { min-height: 44px; }
  .baner-pk { margin: 8px 12px 0; font-size: 13px; }
  .btn.pk-usun, .pk-dodaj .btn { min-height: 44px; }
  .pk-wiersz { grid-template-columns: 6.5em minmax(0, 1fr); }
  input, textarea, select { font-size: 16px; }
  .dolny { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line-soft);
    z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
  .dolny button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px 8px;
    font-size: 13px; color: var(--muted); border: 0; background: none; min-height: 56px; min-width: 44px; font-weight: 600; }
  .dolny button.on { color: var(--accent); }
  /* etykieta w jednej linii, licznik „Do mnie” jako plakietka na ikonie (uwaga 25.10 pkt 42) */
  .dolny .et { white-space: nowrap; line-height: 16px; }
  /* ikony liniowe 24 px jednego stylu; plakietka „Do mnie” mała, w prawym górnym rogu ikony, obok kształtu (pkt 53) */
  .dolny b { position: relative; display: block; width: 24px; height: 24px; margin: 0 auto 2px; }
  .dolny b svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }
  .dolny b .unread { position: absolute; top: -6px; left: calc(100% - 3px); min-width: 15px; padding: 0 4px; border-radius: 8px;
    font-size: 10px; line-height: 15px; text-align: center; }
  .pl-dl { display: none; }
}

/* ---------- aplikacja na telefonie (ipt-va2vl5 D12): bezpieczne strefy ekranu (wcięcia iPhone'a, pasek gestów) ----------
   W poziomie: obecny odstęp albo wcięcie ekranu, gdy większe (telefon obrócony, wcięcie z boku); w przeglądarce na pulpicie
   env() = 0, więc nic się nie zmienia. Na dole: ostatni element nakładki rozmowy to zdanie o bramce (.czat-uwaga), nie edytor
   — wcięcie tam, poza pisaniem (przy klawiaturze pole i tak stoi nad nią); komunikat nad paskiem gestów. Góra bez wcięcia
   (styl paska stanu iOS default = treść pod paskiem stanu). */
.glowa, .pasek-gorny, .widok { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
@media (max-width: 600px) {
  .glowa, .widok { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .dolny { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  html:not(.pisze) .czat:not(.w-modalu) .czat-uwaga { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .komunikat { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- Raporty (ipt-dsbkgb D7, D9, D13): plakietka nowych na zakładce, filtr rodzaju, karty od najnowszej z obrazami,
   karta wskazana z rozmowy, linia-odsyłacz w rozmowie. Wyróżnienia tłem i ramką całego elementu — bez pionowych pasków. ---------- */
.zakladki .unread { font-size: 12px; line-height: 1.35; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.raporty-filtr { display: inline-flex; max-width: 100%; margin: 4px 0 8px; }
.raporty-filtr button { flex: 0 1 auto; }
.raporty-wskazany { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin: 0 0 8px; font-size: 14px; }
.raporty-lista { display: grid; gap: 8px; max-width: 1000px; }         /* czytelna długość linii; dwa obrazy po 420 px obok siebie */
.raport-karta { background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 10px 14px; min-width: 0; scroll-margin-top: 80px; }
.raport-karta:focus { outline: none; }
.raport-karta.wskazana { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.raport-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--muted); }
.raport-glowa .raport-rodzaj { background: var(--seg-bg); color: var(--ink-2); }
.raport-kiedy { font-variant-numeric: tabular-nums; white-space: nowrap; }
.raport-agent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px; }
.raport-agent .mute { font-size: 13px; }
.raport-tekst { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.raport-obrazy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.raport-obraz { flex: 0 1 420px; max-width: 420px; min-width: 0; padding: 0; border: 1px solid var(--card-line); border-radius: 10px;
  background: var(--ground); overflow: hidden; cursor: zoom-in; }
.raport-obraz img { display: block; width: 100%; height: auto; }
@media (hover: hover) { .raport-obraz:hover { border-color: var(--accent-line); } }
.raport-obraz-blad { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.raport-akcje { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.raport-akcje .btn { min-height: 32px; padding: 4px 10px; color: var(--accent); text-decoration: none; }
.raporty-starsze { margin-top: 10px; }
/* linia-odsyłacz zamiast treści raportu w rozmowie: jedna linia (tekst z wielokropkiem, „w Raportach ›” zawsze widoczne) */
.wiad.raporty { background: transparent; border: 1px dashed var(--line); box-shadow: none; padding: 0; }
.wiad.raporty > .wiad-ostatnia { margin: 0 12px 4px 24px; }
.wiad.raporty > .wiad-watek { padding: 0 12px 6px; }
.linia-raportow { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 36px; padding: 6px 12px; border: 0;
  background: none; color: var(--muted); font-size: 13px; text-align: left; border-radius: 12px; }
.linia-raportow svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.linia-raportow .lr-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linia-raportow .lr-cel { flex: none; color: var(--accent); font-weight: 600; white-space: nowrap; }
@media (hover: hover) { .linia-raportow:hover .lr-t { color: var(--ink); } }
@media (max-width: 600px) {
  .raporty-filtr { display: flex; }
  .raporty-filtr button { flex: 1 1 auto; }
  .raport-karta { padding: 9px 12px; scroll-margin-top: 12px; }
  .raport-obraz { flex: 1 1 100%; max-width: none; }
  .raport-akcje .btn { min-height: 44px; }
  .raporty-wskazany a.link { min-height: 44px; }
  .linia-raportow { min-height: 44px; }
}

/* ---------- Agenci (ipt-60j6hk): schemat poziomami, puste miejsca, braki, karta z kontrolą (bez pionowych pasków akcentu) ---------- */
.schemat { display: grid; gap: 8px; min-width: 0; background: var(--panel); border-radius: 16px; padding: 12px; }
.schemat-glowa { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.schemat-glowa h3 { margin: 0; font-size: 17px; }
.poziom { min-width: 0; }
.poziom-tyt { margin: 4px 0 2px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  display: flex; gap: 6px; align-items: baseline; }
.poziom-tyt .ile { font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 1px 7px;
  text-transform: none; letter-spacing: 0; }
.poziom-karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 8px; min-width: 0; }
.card.agent.sch { min-height: 44px; }
.card.agent.puste { border-style: dashed; box-shadow: none; background: transparent; cursor: default; }
.card.agent.puste .t, .card.agent.puste .meta { color: var(--muted); }
.card.agent.puste.brak .t { color: var(--bad); }
.puste-lista { margin: 6px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.puste-lista b { color: var(--ink-2); font-weight: 600; }
.agent-karta .szcz-glowa { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.kafle-w { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 10px; }
.kafel-w { background: var(--panel); border-radius: 12px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.kafel-w i { font-style: normal; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.kafel-w b { font-size: 20px; font-family: var(--cond); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kafel-w small { font-size: 13px; color: var(--muted); }
.kafel-w small.lepiej { color: var(--good); } .kafel-w small.gorzej { color: var(--bad); }
.kontrola { display: grid; gap: 10px; margin: 6px 0 12px; padding: 12px; border: 1px solid var(--card-line); border-radius: 12px; }
.pole-k { display: grid; gap: 4px; min-width: 0; }
.pole-k > i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.pole-k input, .pole-k select { min-height: 40px; font-size: 15px; padding: 0 10px; width: 100%; }
/* wybór harmonogramu jak wybór firmy: WebKit (Safari) przy natywnym wyglądzie ignoruje min-height (zmierzone: 24 px) */
.pole-k select { padding-right: 32px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.pole-k small { font-size: 13px; color: var(--muted); }
.k-wiersz { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kontrola .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.blad-kontroli { margin: 0; color: var(--bad); font-size: 14px; }
/* ipt-gdo4mb D22: sekcja „Terminal” karty agenta — dopiski do promptu i długie znaczniki stanu okna */
.pole-k textarea { width: 100%; min-height: 88px; padding: 8px 10px; font-size: 15px; line-height: 1.4; resize: vertical; }
#agent-terminal { display: grid; gap: 6px; }
#agent-terminal .tag { white-space: normal; overflow-wrap: anywhere; }
#agent-terminal .tag.kolor-okna { padding: 2px 8px; font-weight: 600; }      /* tło i tekst z koloru okna (styl z danych) */
#agent-terminal .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.agent-karta p.zatrzymany { margin: 4px 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: 14px; }
.dostep-w { margin-top: 4px; }
.link-dostepy { display: inline-block; margin-top: 6px; font-size: 14px; }
.propozycja-w, .przebieg-w, .zmiana-w { padding: 8px 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.propozycja-w > a { font-weight: 600; }
.zmiana-w { display: grid; gap: 2px; font-size: 14px; }
.zmiana-w .kiedy { font-size: 13px; color: var(--muted); }
.raport .zrodla a { overflow-wrap: anywhere; }
.zrodla-prop { display: grid; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 800px) { .poziom-karty { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .schemat { padding: 10px 8px; border-radius: 14px; }
  .schemat-glowa h3 { font-size: 16px; }
  .pole-k input, .pole-k select { min-height: 44px; font-size: 16px; }
  .pole-k textarea { font-size: 16px; }
  .link-dostepy, .propozycja-w > a, .raport .zrodla a, .zrodla-prop a { display: inline-flex; align-items: center; min-height: 44px; }
  .kafel-w b { font-size: 18px; }
}
.braki-dostepow { margin: 0 0 10px; display: grid; gap: 6px; }
.braki-dostepow h4 { margin: 0; font-size: 14px; }
.brak-dostepu { overflow-wrap: anywhere; }
.agenci-wpisu a { overflow-wrap: anywhere; }
@media (max-width: 600px) { .brak-dostepu a, .agenci-wpisu a { display: inline-flex; align-items: center; min-height: 44px; } }
.r-tresc { display: grid; gap: 4px; }
.r-naglowek { font-weight: 700; font-size: 14px; color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; }

/* ---------- Sprawy BOK (ipt-aq8w4d D17): liczniki, filtry, lista, karta sprawy, sekcje AUTO / rekompensaty / wzory / test — bez pionowych
   pasków akcentu (kierunek maila = tło i podpis, nie krawędź) ---------- */
.bok-uklad { grid-template-columns: minmax(0, 1fr) 520px; }
@media (max-width: 1300px) { .bok-uklad { grid-template-columns: minmax(0, 1fr) 440px; } }
@media (max-width: 1100px) { .bok-uklad { grid-template-columns: minmax(0, 1fr); } }
.bok-kafle { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 1500px) { .bok-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bok-kafel { border: 1px solid transparent; text-align: left; font: inherit; color: inherit; min-height: 44px; }
button.bok-kafel { cursor: pointer; }
button.bok-kafel.on { border-color: var(--accent-line); background: var(--accent-soft); }
@media (hover: hover) { button.bok-kafel:not(.on):hover { border-color: var(--line); } }
.bok-kafel b.zle { color: var(--bad); } .bok-kafel b.uwaga { color: var(--warn); }
.bok-filtry { display: grid; gap: 8px; margin: 0 0 10px; min-width: 0; }
.bok-filtry .seg button { min-height: 40px; }
.bok-sprawy { display: grid; gap: 8px; min-width: 0; }
.card.sprawa-w { width: 100%; text-align: left; font: inherit; color: inherit; display: grid; gap: 2px; }
.card.sprawa-w .t { overflow-wrap: anywhere; }
.card.sprawa-w.on { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }
.bok-przyklad { margin: 0 0 8px; }
ol.bok-instrukcja { margin: 8px 0 14px; padding-left: 22px; display: grid; gap: 6px; overflow-wrap: anywhere; }
.auto-lista, .warianty, .wzory { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; min-width: 0; }
.auto-w .acts, .wzor-w .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
[id^="blok-bok"] .btn, .bok-karta .btn { white-space: normal; text-align: center; }
ul.warunki { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
ul.warunki li { display: flex; gap: 6px; align-items: baseline; overflow-wrap: anywhere; min-width: 0; }
ul.warunki li b { flex: none; width: 1.2em; text-align: center; }
ul.warunki li.ok b { color: var(--good); } ul.warunki li.nie b { color: var(--bad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bok-rek { display: grid; gap: 10px; }
.wariant-w .kafle-w { margin: 6px 0; }
.wzor-w .pre { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--panel); }
.mail-w { padding: 10px 12px; border-radius: 12px; background: var(--panel); margin: 6px 0; display: grid; gap: 4px; overflow-wrap: anywhere; min-width: 0; }
.mail-w.bok { background: var(--accent-soft); }
.mail-w .t { font-weight: 600; }
.szkic-w { display: grid; gap: 6px; min-width: 0; }
.szkic-tresc { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--card-line); }
.sedzia { display: grid; gap: 2px; }
ul.warunki-rek { margin: 4px 0; padding-left: 18px; font-size: 14px; color: var(--muted); display: grid; gap: 2px; overflow-wrap: anywhere; }
.ocena-szkicu textarea, .rek-w input { width: 100%; font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-sizing: border-box; }
.bok-wejscie { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.grupa-obszarow { margin: 2px 0 6px; min-width: 0; }
.grupa-tyt { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.link-bok { font-size: 14px; font-weight: 600; }
@media (max-width: 600px) {
  .bok-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bok-filtry .seg button { min-height: 44px; }
  .link-bok { display: inline-flex; align-items: center; min-height: 44px; }
  .ocena-szkicu textarea, .rek-w input, #bok-budzet { font-size: 16px; }
  .mail-w { padding: 8px 10px; }
}

/* ---------- Rozmowa z agentem i zapytania służbowe (ipt-boj2d4 D12, D18) — okno rozmowy w trybie agenta, sekcje karty, widok Zapytania;
   wyróżnienia tłem i ramką całego elementu, bez pionowych pasków akcentu ---------- */
.czat-ag { font-size: 14px; }
.czat.agent .czat-glowa { flex-wrap: wrap; row-gap: 4px; }
.czat-rozmowy { max-height: 42vh; overflow-y: auto; display: grid; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface); overscroll-behavior: contain; }
.czat-rozmowy[hidden] { display: none; }
.ag-rozmowa { display: grid; gap: 2px; text-align: left; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; min-height: 44px; cursor: pointer; min-width: 0; }
.ag-rozmowa.on { border-color: var(--accent-line); background: var(--accent-soft); }
.ag-rozmowa .mute { font-size: 13px; overflow-wrap: anywhere; }
.ag-r-t { font-weight: 600; overflow-wrap: anywhere; }
.czat-szac { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 4px 16px 0; font-size: 13px; color: var(--muted); }
.czat-szac[hidden] { display: none; }
.czat-szac.zle { color: var(--bad); }
.ag-powod { overflow-wrap: anywhere; }
.wiad.agent-odp { background: var(--surface); }
.ag-rozw { margin: 4px 0; font-size: 14px; }
.ag-rozw > summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; padding: 4px 0; }
.ag-rozw[open] > summary { margin-bottom: 2px; }
.ag-rozw > .wiad-tekst, .ag-rozw > .ag-pole, .ag-rozw > .z-dop { padding: 6px 10px; background: var(--panel); border-radius: 8px; margin-top: 4px; }
.ag-odpowiedz { margin-top: 4px; }
.ag-prop { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
.ag-prop a { font-weight: 600; }
.ag-stopka { margin-top: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ag-pole { display: grid; gap: 2px; margin-top: 4px; min-width: 0; }
.ag-pole > b { font-size: 13px; color: var(--muted); font-weight: 600; }
.karta-tyt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.karta-tyt h3 { min-width: 0; }
.rozmowa-w { padding: 8px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 4px; justify-items: start; min-width: 0; }
.rozmowa-pocz { font-size: 14px; overflow-wrap: anywhere; }
.zapytania { display: grid; gap: 0; min-width: 0; }
.zapytanie-w { padding: 10px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 3px; overflow-wrap: anywhere; min-width: 0; }
.zapytanie-w.on { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; border-top-color: transparent; }
.zapytanie-w .meta { margin-top: 0; }
.z-para { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.z-pytanie { font-size: 15px; }
.z-dop { display: grid; gap: 2px; }
.z-ocena { margin-top: 2px; }
.zapytanie-w .acts, .blokada-w .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.z-h { margin: 10px 0 2px; font-size: 13px; color: var(--muted); }
.blokada-w { padding: 8px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 4px; overflow-wrap: anywhere; }
table.tab.z-limity td, table.tab.z-limity th { text-align: left; white-space: normal; }
#zapytania-agent { min-height: 40px; font-size: 15px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); max-width: 100%; }
/* listy wyboru zapytań jak wybór harmonogramu: WebKit (Safari) przy natywnym wyglądzie ignoruje min-height (zmierzone: 24 px) */
#zapytania-agent, .dozw-dodaj select { padding-right: 32px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.dozw-w { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.dozw-n { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.dozw-w .acts { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.dozw-dodaj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-width: 0; }
.dozw-dodaj select { min-height: 40px; font-size: 15px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); max-width: 100%; min-width: 0; flex: 1 1 200px; }
.link-zapytania { margin-left: auto; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--accent); }
@media (max-width: 600px) {
  .czat.agent .czat-tyt { flex: 1 1 calc(100% - 56px); }
  .czat.agent #czat-zamknij { order: 1; }                 /* zamknięcie w pierwszym rzędzie obok tytułu, Rozmowy i Nowa rozmowa pod nim */
  .czat.agent .czat-ag { order: 2; }
  .ag-rozw > summary { padding: 12px 0; line-height: 20px; }       /* 20 + 2 × 12 = cel dotyku 44 px */
  .ag-prop a, .zapytanie-w .meta a, .link-zapytania { display: inline-flex; align-items: center; min-height: 44px; }
  .zapytanie-w .meta a { min-width: 44px; justify-content: center; }
  #zapytania-agent, .dozw-dodaj select { min-height: 44px; font-size: 16px; }
  .zapytanie-w.on { padding: 8px 10px; }
}
/* ipt-qxmrtf: rada nadzorcza z trzema członkami (rada.js) — karta rady (członkowie z formularzem, posiedzenia, próbka, czekające,
   rady podzielone), ocena przy raporcie z blokami członków (ocena na końcu bloku, zestawienie pod nimi), pole „Ocena rady” w
   Poczekalni. Bloki rozdzielone tłem i odstępem, bez pionowych pasków akcentu. */
.czlonek-w { display: grid; gap: 6px; padding: 10px 12px; margin-top: 8px; background: var(--panel); border-radius: 12px; min-width: 0; }
.cz-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cz-pola { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cz-zuzycie { font-size: 13px; color: var(--muted); }
.czlonek-w .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cz-ost { padding: 4px 0; border-top: 1px solid var(--line-soft); }
.rada-ocena { display: grid; gap: 8px; }
.rada-ocena .cz-ocena, .ocena-rady-pole .cz-ocena { padding: 8px 10px; background: var(--surface); border-radius: 10px; min-width: 0; }
.cz-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cz-n .mute { font-size: 13px; }
.rada-podz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.rada-linia { font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.warn-t { color: var(--warn); }
.posiedzenie-w, .probka-w, .oczek-w { padding: 8px 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; min-width: 0; }
.ocena-rady-pole { display: grid; gap: 6px; min-width: 0; }
.probka-kto { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .cz-pola { grid-template-columns: minmax(0, 1fr); }
  .czlonek-w { padding: 10px; }
}