:root{
  /* Skala wyglądu (Paweł 08.11.2026: podobne elementy opisane zmiennymi): odstępy, zaokrąglenia, pola formularza.
     Kolory pól wyliczane z kolorów motywu — każdy motyw działa bez osobnych poprawek. */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --radius-s:6px;--radius-m:8px;--radius-l:14px;
  --fld-size:14px;--fld-size-sm:13px;--fld-size-xs:12px;--fld-size-lg:15px;
  --fld-pad:7px 10px;--fld-pad-sm:5px 8px;--fld-pad-xs:2px 5px;--fld-pad-lg:10px 12px;
  --fld-radius:var(--radius-m);--fld-bg:var(--panel);--fld-ink:var(--ink);
  --fld-line:color-mix(in srgb,var(--ink) 45%,var(--line));
  --fld-line-hover:color-mix(in srgb,var(--ink) 70%,var(--line));   /* recenzja 0592676 (P2 059): bez surowego akcentu */
  --fld-focus:color-mix(in srgb,var(--accent-text) 55%,var(--ink));   /* czytelny w jasnych i ciemnych motywach */
  --fld-ring:color-mix(in srgb,var(--accent) 22%,transparent);
  --bg:#f6f7f9;--panel:#fff;--ink:#1d2330;--muted:#6b7280;--line:#e5e7eb;
  --accent:#B61207;--accent-text:#B61207;--accent-ink:#fff;--soft:#F8E7E6;--note-bg:#fff6cc;--note-line:#e6cf6a;--problem:#b42318;--problem-bg:#fde8e7;--quiet:#eef0f3;--quiet-ink:#4b5563;
  /* dymki: my = mięta, Allegro = pomarańcz, kupujący = jasnoszary */
  --me-bg:#dff5ec;--me-line:#a8e0c9;--allegro-bg:#ffe9d6;--allegro-line:#ffb27a;--buyer-bg:#f1f2f4;--buyer-line:#e2e4e8
}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){
  --bg:#121417;--panel:#1b1e23;--ink:#e8eaed;--muted:#9aa1ab;--line:#2b2f36;--soft:#2a2019;--problem:#ff8a80;--problem-bg:#3a1d1b;--quiet:#262a31;--quiet-ink:#c3c8d0;
  --me-bg:#173329;--me-line:#26573f;--allegro-bg:#3a2516;--allegro-line:#7a4520;--buyer-bg:#23262c;--buyer-line:#30343b}}
html[data-theme=dark]{
  --bg:#121417;--panel:#1b1e23;--ink:#e8eaed;--muted:#9aa1ab;--line:#2b2f36;--soft:#2a2019;--problem:#ff8a80;--problem-bg:#3a1d1b;--quiet:#262a31;--quiet-ink:#c3c8d0;
  --me-bg:#173329;--me-line:#26573f;--allegro-bg:#3a2516;--allegro-line:#7a4520;--buyer-bg:#23262c;--buyer-line:#30343b}
*{box-sizing:border-box}html,body{margin:0}
/* Jeden wygląd pól (Paweł 08.11.2026): każde pole tekstowe, liczba, data, wybór z listy i obszar tekstu w programie.
   :where() = zerowa waga — reguły ekranów zmieniają tylko rozmiar i szerokość, motywy mogą nadpisać kolory. */
:where(input:not([type=checkbox],[type=radio],[type=file],[type=color],[type=range],[type=hidden],[type=submit],[type=button],[type=reset],[type=image]),select,textarea){
  font:inherit;font-size:var(--fld-size);line-height:1.35;padding:var(--fld-pad);border:1px solid var(--fld-line);border-radius:var(--fld-radius);
  background:var(--fld-bg);color:var(--fld-ink);max-width:100%;min-width:0;transition:border-color .12s,box-shadow .12s}
:where(input:not([type=checkbox],[type=radio],[type=file],[type=color],[type=range],[type=hidden],[type=submit],[type=button],[type=reset],[type=image]),select,textarea):hover{border-color:var(--fld-line-hover)}
:where(input:not([type=checkbox],[type=radio],[type=file],[type=color],[type=range],[type=hidden],[type=submit],[type=button],[type=reset],[type=image]),select,textarea):focus-visible{outline:none;border-color:var(--fld-focus);box-shadow:0 0 0 3px var(--fld-ring)}
:where(input,select,textarea):disabled{opacity:.6;cursor:not-allowed}
:where(select){cursor:pointer}
:where(input,textarea)::placeholder{color:var(--muted);opacity:1}
@media (prefers-reduced-motion:reduce){:where(input,select,textarea){transition:none}}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}.muted{color:var(--muted)}.small{font-size:12px}.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-size:18px;letter-spacing:.2px}.brand b{color:var(--accent)}
.modules{display:flex;gap:4px}.modules a{padding:6px 10px;border-radius:8px;color:var(--muted);font-weight:600}.modules a.on{background:var(--soft);color:var(--ink)}
.badge-demo{margin-left:auto;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12px;padding:2px 8px;border-radius:999px}
.home{padding:24px 16px;max-width:960px;margin:0 auto;width:100%}.home h1{margin:0 0 4px;font-size:22px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}
.tile{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.tile:hover{border-color:var(--accent)}.tile-name{font-weight:700}
.layout{flex:1;display:grid;grid-template-columns:var(--folders-w,170px) var(--list-w,320px) 1fr 300px;min-height:0;position:relative}
/* pasek modułu nad wszystkim */
.subnav{display:flex;gap:4px;align-items:center;padding:6px 16px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
.subnav a{padding:5px 10px;border-radius:8px;color:var(--muted);font-weight:600;white-space:nowrap}
.subnav a.on,
.subnav a[aria-current="page"]{background:var(--soft);color:var(--ink)}
.subnav a.connect{margin-left:auto;border:1px solid var(--accent);color:var(--accent-text)}
/* foldery w pionie — jak zakładki arkusza, tylko z boku */
.folders{display:flex;flex-direction:column;gap:2px;padding:10px 0 10px 8px;background:var(--bg);border-right:1px solid var(--line);overflow:auto}
.folders a{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px;border-radius:8px 0 0 8px;color:var(--muted);font-weight:600;border-left:3px solid transparent;white-space:nowrap}
.folders a:hover{color:var(--ink)}
.folders a.on{background:var(--panel);color:var(--ink);border-left-color:var(--accent);margin-right:-1px}
.page{flex:1;overflow:auto;min-width:0}
/* skrzynka na całą wysokość okna: lista, rozmowa i panel zamówienia przewijają się osobno */
@media (min-width:761px){body.full{height:100vh;overflow:hidden}body.full .layout>*{overflow:auto;min-height:0}}
.list{border-right:1px solid var(--line);background:var(--panel);overflow:auto}
.filters{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line)}
.filters a{padding:6px 10px;border-radius:8px;color:var(--muted);font-weight:600}.filters a.on{background:var(--soft);color:var(--ink)}
.count{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 7px;font-size:12px;margin-left:4px}
.threads{list-style:none;margin:0;padding:0}
.thread{display:block;padding:12px 14px;border-bottom:1px solid var(--line)}
.thread:hover{background:var(--bg)}.thread.active{background:var(--soft);box-shadow:inset 3px 0 var(--accent)}
.row1{display:flex;justify-content:space-between;gap:8px}.row1 time{color:var(--muted);font-size:12px}
.thread.unread .who,.thread.unread .subject{font-weight:700}
.subject{display:block;margin:2px 0}.meta{color:var(--muted);font-size:13px}
.kind{font-size:12px;font-weight:600}.kind.problem{color:var(--problem);background:var(--problem-bg);padding:1px 6px;border-radius:6px}
.empty,.placeholder{padding:24px;color:var(--muted)}
.detail{padding:20px 24px;overflow:auto;min-width:0}
.back{display:none;color:var(--muted);margin-bottom:8px}
.thread-head h1{margin:0 0 4px;font-size:20px}
.messages{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;flex-direction:column;max-width:80%}
.msg.seller{align-self:flex-end;align-items:flex-end}
.bubble{padding:10px 12px;border-radius:12px;white-space:pre-wrap;border:1px solid}
.msg.buyer .bubble{background:var(--buyer-bg);border-color:var(--buyer-line);color:var(--buyer-ink,var(--ink))}
.msg.seller .bubble{background:var(--me-bg);border-color:var(--me-line);color:var(--me-ink,var(--ink))}
.msg .bubble a{color:inherit;text-decoration:underline}
.msg.allegro .bubble,.msg.marketplace .bubble{background:var(--allegro-bg);border-color:var(--allegro-line)}
.msg.allegro time,.msg.marketplace time{color:#c2410c;font-weight:600}
.msg time{color:var(--muted);font-size:12px;margin-top:3px}
.reply{display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0;background:var(--bg);padding-top:8px}
.reply label{font-weight:600}
.reply textarea{font-size:var(--fld-size-lg);padding:var(--fld-pad-lg);resize:vertical}
.reply button{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer}
.order{border-left:1px solid var(--line);background:var(--panel);padding:16px;overflow:auto}
.order h2{font-size:15px;margin:0 0 10px}
.order dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 12px;font-size:13px}.order dt{color:var(--muted)}.order dd{margin:0}
.items{list-style:none;padding:0;margin:0 0 12px;font-size:13px;border-top:1px solid var(--line)}
.items li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}.items .total{font-weight:700}
.btn-secondary{display:inline-block;border:1px solid var(--accent);color:var(--accent-text);background:var(--panel);border-radius:10px;padding:8px 12px;font-weight:700;font:inherit;font-weight:700;cursor:pointer}
.btn-secondary:hover{background:var(--soft)}.btn-secondary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn-secondary:disabled{opacity:.6;cursor:not-allowed}
.foot{padding:6px 16px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);background:var(--panel)}
@media (max-width:1100px){.layout{grid-template-columns:var(--folders-w,175px) var(--list-w,280px) 1fr}.order{grid-column:3;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:760px){
  .layout{grid-template-columns:1fr}.order{grid-column:1}
  .layout{align-content:start}
  .folders{flex-direction:row;overflow-x:auto;padding:6px 8px;border-right:0;border-bottom:1px solid var(--line)}
  .folders a{border-radius:8px;border-left:0}.folders a.on{margin-right:0}
  .layout.has-active .list,.layout.has-active .folders{display:none}
  .layout:not(.has-active) .detail{display:none}
  .back{display:inline-block}.detail{padding:14px 16px}.msg{max-width:92%}
  .modules a{padding:6px}
}
/* --- etap 2: statusy, przypisanie, kategorie, licznik, szablony, notatki --- */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:center}
.pill{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted)}
.st-new{color:#1d4ed8;border-color:#bfd0fb;background:#eef3ff}.st-in_progress{color:#7a5b00;border-color:#f0d78a;background:#fff8e1}
.st-waiting{color:#5b21b6;border-color:#d8c8fb;background:#f4efff}.st-closed{color:var(--muted)}
.wait-ok{color:#166534;border-color:#bfe5cc;background:#ecfdf3}.wait-warn{color:#8a5a00;border-color:#f3d28a;background:#fff7e0}
/* Paweł 06.11.2026: „Pilne” w kolorze licznika powiadomień; drugi kolor (--important) dla innych ważnych, np. „czeka 6 dni”. */
.wait-alarm{color:var(--important-ink);border-color:var(--important-bg);background:var(--important-bg)}
.cat{color:var(--ink)}.who-small{font-size:11px;color:var(--muted);margin-left:auto}
.thread.closed{opacity:.6}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .st-new,html:not([data-theme=light]) .st-in_progress,html:not([data-theme=light]) .st-waiting,html:not([data-theme=light]) .wait-ok,html:not([data-theme=light]) .wait-warn{background:var(--bg)}}
html[data-theme=dark] .st-new,html[data-theme=dark] .st-in_progress,html[data-theme=dark] .st-waiting,html[data-theme=dark] .wait-ok,html[data-theme=dark] .wait-warn{background:var(--bg)}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.inline{display:inline-flex;align-items:center;gap:6px}
.inline label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.inline select{font-size:var(--fld-size-sm);padding:var(--fld-pad-xs)}
.templates{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--accent)}
.mt{margin-top:18px!important}
.notes,.history{list-style:none;padding:0;margin:6px 0;font-size:13px;display:flex;flex-direction:column;gap:8px}


.notes time,.history time{color:var(--muted);font-size:11px}
.note-form{display:flex;flex-direction:column;gap:6px}
.note-form textarea{font-size:var(--fld-size-sm);padding:var(--fld-pad)}
.note-form button{align-self:flex-end;font:inherit;font-size:13px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:6px 10px;cursor:pointer}
/* --- obsada kanałów, zastępstwa, bezpiecznik --- */
.alert{background:#fff4e5;border-bottom:1px solid #f5c27a;color:#7a4a00;padding:10px 16px;font-size:14px}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .alert{background:#3a2a12;color:#ffd59a;border-color:#7a5a20}}
html[data-theme=dark] .alert{background:#3a2a12;color:#ffd59a;border-color:#7a5a20}
.covering{color:#9a3412;border-color:#fdba8c;background:#fff1e6}
.team-link{margin-left:auto}
.team h1{font-size:20px;margin:0 0 4px}.team h2{font-size:15px;margin:16px 0 8px}
.grid{border-collapse:collapse;width:100%;max-width:720px;font-size:14px}
.grid td,.grid th{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left}
.grid th{color:var(--muted);font-weight:600;font-size:12px}
/* --- ostrzeżenia, podpisy, pilne, spam, ustawienia --- */
.warn-box{background:#fff4e5;border:1px solid #f5c27a;color:#7a4a00;border-radius:10px;padding:10px 12px;font-size:13px}
.warn-box ul{margin:6px 0;padding-left:18px}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .warn-box{background:#3a2a12;color:#ffd59a;border-color:#7a5a20}}
html[data-theme=dark] .warn-box{background:#3a2a12;color:#ffd59a;border-color:#7a5a20}
.check{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:400}
.sig-preview{margin:0;font:inherit;font-size:12px;color:var(--muted);white-space:pre-wrap;border-left:3px solid var(--line);padding-left:8px}
.urgent{color:var(--notif-ink);background:var(--notif-bg);border-color:var(--notif-bg);font-weight:800}
.chip-on{border-color:#b42318;color:#b42318}
.bl-status{color:var(--ink)}
.settings h1{font-size:20px;margin:0 0 4px}.settings h2{font-size:16px}.settings h3{font-size:14px}
.stack{display:flex;flex-direction:column;gap:10px;max-width:720px}
.stack label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.stack label.check{flex-direction:row;font-weight:400}
.stack input,.stack textarea,.stack select{font-size:var(--fld-size);padding:var(--fld-pad)}
.stack fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.stack legend{font-size:13px;font-weight:700;padding:0 4px}
.days,.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px}
.btn{align-self:flex-start;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer;font:inherit}
.grid tr.off>td{opacity:.55}.grid tr.off>td:has(.integration-logo){opacity:1}.actions{display:flex;flex-wrap:wrap;gap:4px}
.team-link{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.user-switch{margin-left:auto}.user-switch select{font-size:var(--fld-size-sm);padding:var(--fld-pad-xs)}
.user-switch + .badge-demo{margin-left:0}
.file{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.file input{font:inherit;font-size:13px}
.atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.att{font-size:12px;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:3px 8px}
.att:hover{border-color:var(--accent)}
/* --- klient nowy/powracający, blokada autoodpowiedzi --- */
.cust{font-size:12px}.cust-new{color:#1d4ed8}.cust-old{color:#166534}
.cust-new-pill{color:#1d4ed8;border-color:#bfd0fb;background:#eef3ff}
.cust-old-pill{color:#166534;border-color:#bfe5cc;background:#ecfdf3}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .cust-new-pill,html:not([data-theme=light]) .cust-old-pill{background:var(--bg)}}
html[data-theme=dark] .cust-new-pill,html[data-theme=dark] .cust-old-pill{background:var(--bg)}
.ok-box{background:#ecfdf3;border:1px solid #bfe5cc;color:#166534;border-radius:10px;padding:10px 12px;font-size:13px}
/* Komunikaty sukcesu dopasowane do KAŻDEGO motywu (Paweł, 01.11.2026): kolor liczony z tła panelu i tekstu motywu,
   więc działa w jasnym, niebieskim, ciemnym, granatowym i w Motywach Premium bez osobnych wartości. */
.ok-box{background:color-mix(in srgb,#22c55e 13%,var(--panel));border-color:color-mix(in srgb,#22c55e 38%,var(--panel));
  color:color-mix(in srgb,#15803d 55%,var(--ink))}
.flash{margin:10px 0 14px;max-width:760px;display:flex;gap:8px;align-items:flex-start}
.flash::before{content:"✓";font-weight:700}
.flash.warn-box::before{content:"!"}
.home .grid{max-width:100%}
/* --- notatki zespołu na górze rozmowy --- */





.note-form .row{justify-content:space-between}
.notes-pill{color:#7a5b00;border-color:#f0d78a;background:#fff8e1}
/* --- awatary --- */
.avatar{border-radius:50%;object-fit:cover;vertical-align:middle;display:inline-block}
.avatar-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--soft);color:var(--accent-text);font-weight:700;font-size:11px;vertical-align:middle}
.me-link{display:inline-flex}
.profile-card{display:flex;gap:16px;align-items:center;margin-top:12px}
.profile-card .avatar-initials{font-size:36px}
.who-small{display:inline-flex;align-items:center;gap:4px}
.readonly-bar{background:#eef3ff;border-bottom:1px solid #bfd0fb;color:#1d3a8a;padding:8px 16px;font-size:13px}
.readonly-bar a{text-decoration:underline}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .readonly-bar{background:#16213d;color:#c7d6ff;border-color:#2b3f73}}
html[data-theme=dark] .readonly-bar{background:#16213d;color:#c7d6ff;border-color:#2b3f73}
.grid td.pre{white-space:pre-wrap;max-width:420px}
.templates{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.reply .templates .chip{align-self:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:600;font-size:13px}
.reply .templates .chip:hover{border-color:var(--accent-text);color:var(--accent-text)}
.templates .group{margin-left:4px}.templates .group:first-child{margin-left:0}
.offer-link{display:inline-flex;vertical-align:-2px;margin-left:4px;color:var(--accent-text);padding:2px}.offer-link:hover{color:var(--ink)}
/* --- grafiki (paczki ChatGPT 31.10.2026) --- */
.ui-icon{display:inline-flex;flex:none;line-height:0}.ui-icon img{display:block}
.subnav a{display:inline-flex;align-items:center;gap:6px}
.folders a .fname{flex:1}.folders a{justify-content:flex-start}
.ch-icon{vertical-align:-4px;border-radius:4px}
.flag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--ink)}.flag img{border-radius:2px;display:block}
.meta.channel{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px}
.thread-head .channel{display:inline-flex;align-items:center;gap:4px}
.readonly-bar,.alert{display:flex;gap:8px;align-items:flex-start}
.bar-link{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-weight:700;text-decoration:underline}
.order h2,.team-notes h2,.reply label[for="text"],.label-ico{display:flex;align-items:center;gap:6px}
.readonly-note{display:flex;align-items:center;gap:6px}
.att{display:inline-flex;align-items:center;gap:4px}
.placeholder{display:flex;align-items:center;gap:8px}
.empty{text-align:center}.illus{width:200px;max-width:70%;height:auto;object-fit:contain;display:block;margin:8px auto}
.foot{display:flex;align-items:center;gap:8px;margin-top:auto}  /* stopka zawsze na dole okna (Paweł 02.11.2026) */.foot-logo{border-radius:4px}
/* ustawienia: menu z lewej, podsekcja z prawej */
.settings-shell{display:grid;grid-template-columns:minmax(13rem,16rem) minmax(0,1fr);min-height:100%}   /* bez sztywnej szerokości — dłuższe nazwy w innych językach */
.settings-nav{display:flex;flex-direction:column;gap:2px;padding:14px 0 14px 10px;background:var(--bg);border-right:1px solid var(--line)}
.settings-group{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
.settings-group:first-child{padding-top:2px}
.settings-nav a{padding:7px 10px;border-radius:8px 0 0 8px;color:var(--muted);font-weight:600;border-left:3px solid transparent}
.settings-nav a:hover{color:var(--ink)}.settings-nav a.on{background:var(--panel);color:var(--ink);border-left-color:var(--accent);margin-right:-1px}
.settings-body{background:var(--panel);min-width:0}
.sources td{vertical-align:middle}
@media (max-width:760px){.settings-shell{grid-template-columns:1fr}.settings-nav{flex-direction:row;flex-wrap:wrap;padding:8px;border-right:0;border-bottom:1px solid var(--line)}.settings-group{width:100%;padding:6px 4px 2px}.settings-nav a{border-radius:8px;border-left:0}.settings-nav a.on{margin-right:0}}
.btn-ico{display:inline-flex;align-items:center;gap:6px}.home h1 .ch-icon{vertical-align:-5px}
.pln{display:block;font-weight:500;color:var(--muted);font-size:12px;text-align:right}
/* Paweł 08.11.2026: nagłówki grup menu ustawień („Źródła danych”…) jako zwykły mały napis, bez ciemnego paska
   i przerwy między menu (było bez zamówienia). */
.mono-tile{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-weight:800;font-size:12px;color:var(--ink)}
.sources .pill{white-space:nowrap}

/* motyw wybrany przez użytkownika (Ustawienia → Wygląd); bez wyboru — jak w systemie */
html[data-theme=dark]{color-scheme:dark}html[data-theme=light]{color-scheme:light}
.ui-icon .ic-d{display:none}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .ui-icon .ic-l{display:none}html:not([data-theme=light]) .ui-icon .ic-d{display:block}}
html[data-theme=dark] .ui-icon .ic-l{display:none}html[data-theme=dark] .ui-icon .ic-d{display:block}

/* notatki zespołu — wyraźnie oddzielone od rozmowy z klientem (ciemny pasek jak grupy ustawień) */
.team-notes{margin:14px 0 6px;border:1px solid #d6c27a;border-radius:12px;background:var(--panel);overflow:hidden}
.team-notes h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:8px 12px;background:#27272A;color:#F4F4F5;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.team-notes h2 .muted{color:#A1A1AA;text-transform:none;letter-spacing:0;font-weight:500}
.team-notes h2 .ui-icon .ic-l{display:none}.team-notes h2 .ui-icon .ic-d{display:block}
.team-notes .notes{padding:10px 12px 0;margin:0}.team-notes .note-form{padding:10px 12px 12px}
.note{background:var(--note-bg);border:1px solid var(--note-line);border-left:5px solid #c99a06;border-radius:8px;padding:9px 12px;white-space:pre-wrap;color:var(--note-ink,#1d2330);font-size:14px;line-height:1.45}
.note a,.note .muted{color:inherit}
.note-customer{background:#efe7ff;border-color:#c9b6f5;border-left-color:#7c5cd6;color:#1d2330}
.notes time{display:flex;align-items:center;gap:4px;margin-top:3px}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .team-notes{border-color:#6b5a1e}html:not([data-theme=light]) .note{background:#3a3214;border-color:#6b5a1e;border-left-color:#e0b21c;color:#f3ead0}html:not([data-theme=light]) .note-customer{background:#2b2342;border-color:#4b3d73;border-left-color:#9b7cf0;color:#e9e2ff}}
html[data-theme=dark] .team-notes{border-color:#6b5a1e}html[data-theme=dark] .note{background:#3a3214;border-color:#6b5a1e;border-left-color:#e0b21c;color:#f3ead0}html[data-theme=dark] .note-customer{background:#2b2342;border-color:#4b3d73;border-left-color:#9b7cf0;color:#e9e2ff}
/* panel zamówienia: duży kwadrat kanału (ok. 2 × 2 cm) */
.order-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.order-head .ch-icon{width:76px;height:76px;border-radius:14px;flex:none}
.order-head h2{margin:0}
/* login kupującego: kopiuje i otwiera BaseLinkera */
.login-copy{font:inherit;font-weight:700;border:0;background:none;color:inherit;padding:0;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.login-copy:hover{color:var(--accent-text)}
.toast{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);background:#27272A;color:#F4F4F5;padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:50}
.empty .ui-icon img{width:56px;height:56px;margin:12px auto 4px;opacity:.8}
.reply{position:static}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .notes-pill{background:#3a3214;color:#f3ead0;border-color:#6b5a1e}}
html[data-theme=dark] .notes-pill{background:#3a3214;color:#f3ead0;border-color:#6b5a1e}
.link-btn{font:inherit;border:0;background:none;padding:0;color:var(--accent-text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.note-dialog{border:1px solid var(--line);border-radius:14px;padding:16px 18px;max-width:520px;width:calc(100% - 32px);background:var(--panel);color:var(--ink)}
.note-dialog::backdrop{background:rgba(0,0,0,.45)}
.note-dialog h3{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:15px}
.note-dialog form{display:flex;justify-content:flex-end;margin:0}
/* --- TebeaCALC --- */
main.page.calc{display:grid;grid-template-columns:360px minmax(0,1fr);gap:0;align-items:start}
.calc-form{display:flex;flex-direction:column;gap:10px;padding:20px;border-right:1px solid var(--line);background:var(--panel);min-height:100%}
.calc-form h1{font-size:20px;margin:0 0 4px}
.calc-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.calc-form input,.calc-form select,.settings input,.settings select{font-size:var(--fld-size);padding:var(--fld-pad)}
.calc-form .two{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.calc-out{padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:12px;color:var(--muted);font-weight:600}.kpi b{font-size:24px}.kpi small{color:var(--muted)}
.kpis.kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi-good{border-left:5px solid #16a34a}.kpi-bad{border-left:5px solid #dc2626}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.card h2{font-size:15px;margin:0 0 8px}.card h3{font-size:13px;margin:12px 0 6px}
.card .grid{max-width:none}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.grid tr.total td{font-weight:800;border-top:2px solid var(--ink)}
.methods tr.sel td{background:var(--soft);font-weight:700}.neg{color:var(--problem)}
.subnav-soon{padding:5px 10px}
.stack.wide{max-width:none}.fee-row{align-items:flex-end;gap:10px}
.table-scroll{overflow-x:auto}.smart-edit input{width:72px}.smart-edit td,.smart-edit th{white-space:nowrap}
@media (max-width:1000px){main.page.calc{grid-template-columns:1fr}.calc-form{border-right:0;border-bottom:1px solid var(--line)}.calc-grid,.kpis{grid-template-columns:1fr}.kpis.kpis-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.calc-form label.check{flex-direction:row;align-items:center;font-weight:500}
.calc-form input,.calc-form select{width:100%;min-width:0;box-sizing:border-box}.calc-form .two label{min-width:0}
.translation{display:block;margin:8px -12px -10px;padding:6px 12px 10px;border-top:1px dashed var(--line);font-size:14px;
  background:color-mix(in srgb, currentColor 7%, transparent);border-radius:0 0 12px 12px}
.lang-tag{display:block;font-size:11px;font-weight:600;opacity:.75;margin-bottom:3px}
.lang-tag .flag{margin-right:2px}
.translate-form{display:flex;align-items:center;gap:10px;margin:10px 0 0;flex-wrap:wrap}
.sources .pill.wrap{white-space:normal}
/* kafelki modułów z grafiką (paczka TebeaDESK-moduly-v1) */
.tile-art{flex-direction:row;align-items:center;gap:14px}
.tile-art img{width:88px;height:88px;flex:none;object-fit:contain}
.tile-text{display:flex;flex-direction:column;gap:4px}
.tile:focus-visible,.modules a:focus-visible,.subnav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modules a{display:inline-flex;align-items:center;gap:6px}
.fees-head{font-size:13px;margin:12px 0 4px}
/* pasek górny: użytkownik po prawej */
.user-area{margin-left:auto;display:flex;align-items:center;gap:10px}
.user-area .user-switch,.user-area .badge-demo{margin-left:0}
.foot{flex-wrap:wrap}.foot-user{margin-left:auto}
/* pulpit wg wizualizacji ChatGPT (TebeaDESK-moduly-v1/PODGLAD) */
.home-v2{max-width:1100px;padding-top:28px}
.eyebrow{color:var(--accent-text);font-weight:800;font-size:12px;letter-spacing:.12em;margin:0 0 6px}
.home-v2 h1{font-size:30px;margin:0 0 6px}
.tiles-v2{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-top:20px}
.tiles-v2 .tile{padding:22px;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tiles-v2 .tile:hover{border-color:var(--accent);box-shadow:0 4px 18px rgba(0,0,0,.08)}
.tiles-v2 .tile-name{font-size:17px}
.tile-tag{align-self:flex-start;margin-top:6px;font-size:12px;font-weight:600;color:var(--accent-text);background:var(--soft);border-radius:8px;padding:3px 8px}
.tile-icon{display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;border:4px solid var(--accent);flex:none}
.tile-icon .ui-icon img{width:44px;height:44px}
@media (max-width:760px){.tiles-v2{grid-template-columns:1fr}.home-v2 h1{font-size:24px}}
.color-row{display:flex;align-items:center;gap:10px}.color-row input[type=color]{width:46px;height:32px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}
/* telefon: górny pasek mieści się w ekranie (menu przewijane poziomo, użytkownik w drugim wierszu) */
@media (max-width:760px){
  .topbar{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .topbar .modules{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .topbar .modules a{white-space:nowrap}
  .user-area{gap:6px}.user-area .user-switch select{max-width:150px}
  /* EKRAN-MOBILE-HEADER (audyt 06.11.2026): blok osoby się kurczy (wielokropek), Wyloguj zawsze widoczne */
  .user-area{flex:1 1 0;min-width:0;justify-content:flex-end}
  .user-area .me-box{min-width:0;flex:0 1 auto;overflow:hidden}
  .user-area .me,.user-area .me-today{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .user-area>:not(.me-box){flex:0 0 auto}
  body{overflow-x:hidden}
}
.add-account label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}.add-account input{padding:var(--fld-pad-sm)}.add-account{align-items:flex-end;gap:8px}
/* motyw „Granat” — ciemny granat w stylu edytorów kodu (VS Code). Działa jak ciemny (data-theme=dark)
   z własną paletą; pomarańcz Allegro i czerwienie ostrzeżeń bez zmian. */
html[data-theme=dark][data-variant=navy]{
  --bg:#0D1B2A;--panel:#112338;--ink:#D7E2F0;--muted:#8FA3BF;--line:#1F3A5A;--problem:#ff8a80;--problem-bg:#3a1d26;
  --me-bg:#123A3A;--me-line:#1F5A55;--buyer-bg:#16304D;--buyer-line:#24476E;color-scheme:dark}
html[data-theme=dark][data-variant=navy] .readonly-bar{background:#132B4D;color:#c7d6ff;border-color:#2b4f80}
/* dzwonek powiadomień */
.bell{display:inline-flex;align-items:center;gap:2px;color:var(--muted);padding:4px;border-radius:8px}
.bell:hover,.bell.has{color:var(--ink)}.bell .count{margin-left:0}
/* kategorie komunikatów */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px}
.tag-off{text-decoration:line-through;color:var(--muted)}
/* motyw „Niebieski” — jasny, z niebieskimi bokami jak w Slacku: górny pasek, pasek modułu, foldery
   i menu ustawień niebieskie, część główna (lista, rozmowa, formularze) biała. */
html[data-theme=light][data-variant=blue]{--bg:#EDF2F7;--line:#D2DDE9;--muted:#50637A;--side:#2C5A7D;--side-2:#24506F;--side-ink:#FFFFFF;--side-muted:#D3E3F0;--side-hover:rgba(255,255,255,.12);--side-on:rgba(255,255,255,.15)}
html[data-side] .topbar{background:var(--side-2);border-bottom-color:var(--side-2);color:var(--side-ink)}
html[data-side] .brand,html[data-side] .brand b{color:var(--side-ink)}
html[data-side] .modules a,html[data-side] .bell{color:var(--side-muted)}
html[data-side] .modules a:hover,html[data-side] .bell:hover,html[data-side] .bell.has{color:var(--side-ink);background:var(--side-hover)}
html[data-side] .modules a.on{background:var(--side-on);color:var(--side-ink)}
html[data-side] .user-area .me,html[data-side] .user-area{color:var(--side-ink)}
html[data-side] .subnav{background:var(--side);border-bottom-color:var(--side)}
html[data-side] .subnav a{color:var(--side-muted)}
html[data-side] .subnav a:hover{color:var(--side-ink);background:var(--side-hover)}
html[data-side] .subnav a.on,
html[data-side] .subnav a[aria-current="page"]{background:var(--side-on);color:var(--side-ink)}
html[data-side] .subnav a.connect{border-color:var(--side-ink);color:var(--side-ink)}
html[data-side] .folders,html[data-side] .settings-nav{background:var(--side);border-right-color:var(--side)}
html[data-side] .folders a,html[data-side] .settings-nav a{color:var(--side-muted)}
html[data-side] .folders a:hover,html[data-side] .settings-nav a:hover{color:var(--side-ink);background:var(--side-hover)}
html[data-side] .folders a.on,html[data-side] .settings-nav a.on{background:var(--panel);color:var(--ink);border-left-color:var(--accent)}
/* ikony na niebieskim tle — jasne warianty; na białym zaznaczeniu — zwykłe */
html[data-side] :is(.topbar,.subnav) .ui-icon .ic-l,html[data-side] .folders a:not(.on) .ui-icon .ic-l{display:none}
html[data-side] :is(.topbar,.subnav) .ui-icon .ic-d,html[data-side] .folders a:not(.on) .ui-icon .ic-d{display:block}
.avatar-row{flex-wrap:wrap;gap:12px}.avatar-row input[type=file]{max-width:340px}
.avatar.av-16{width:16px;height:16px;font-size:9px}.avatar.av-28{width:28px;height:28px;font-size:12px}
.avatar.av-40{width:40px;height:40px;font-size:17px}.avatar.av-96{width:96px;height:96px;font-size:40px}
.avatar-row,.avatar-row .btn{font-size:15px}
.page>.settings-shell{min-height:100%}main.page{display:flex;flex-direction:column}main.page>.settings-shell{flex:1}
.stack label.color-row{flex-direction:row;align-items:center;font-weight:400;font-size:14px}
.row .btn{font-size:15px}
/* losowy komunikat (DeepSeek) — wąski pasek pod górnym menu */
.daily-msg{display:flex;align-items:center;gap:10px;padding:7px 16px;background:var(--soft);border-bottom:1px solid var(--line);font-size:14px}
.daily-cat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap}
.daily-text{flex:1;min-width:0}
.daily-close{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.daily-close:hover{color:var(--ink)}
/* kolory kategorii komunikatów — stałe w każdym motywie (jasne tło, ciemny tekst; kontrast ≥ 4,5:1) */
.daily-msg[class*=cat-]{color:#1d2330;border-left:6px solid var(--cat-line);background:var(--cat-bg)}
.daily-msg[class*=cat-] .daily-cat{color:var(--cat-ink)}.daily-msg[class*=cat-] .daily-close{color:#4b5563}
.cat-suchary{--cat-bg:#DCF5E3;--cat-line:#2E9D57;--cat-ink:#1B6B3A}
.cat-ciekawostki{--cat-bg:#DCEBFB;--cat-line:#2F74C0;--cat-ink:#1D4F8A}
.cat-cos_milego{--cat-bg:#FCE3EE;--cat-line:#D2477F;--cat-ink:#9A2458}
.cat-motywacja{--cat-bg:#FFEBD6;--cat-line:#E07A1F;--cat-ink:#93470A}
.cat-historia{--cat-bg:#EFE5D6;--cat-line:#9C7445;--cat-ink:#6B4A22}
.cat-nauka{--cat-bg:#D8F3F3;--cat-line:#1F9A9A;--cat-ink:#126666}
.cat-jezyk{--cat-bg:#EAE2FA;--cat-line:#7C5CC9;--cat-ink:#55389E}
.cat-porady{--cat-bg:#E6E9EE;--cat-line:#5B6575;--cat-ink:#3A4250}
.cat-historia_europa{--cat-bg:#FDF3C8;--cat-line:#C9A20A;--cat-ink:#7A6000}
.cat-gpw{--cat-bg:#E0F0D2;--cat-line:#5E8F2E;--cat-ink:#3F6519}
.cat-dot{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--cat-line);margin-right:6px;vertical-align:-1px}
/* nadawca e-mail o nieznanej roli (Allegro: USER) — jak kupujący, ale przerywana ramka */
.msg.email .bubble{background:var(--buyer-bg);border:1px dashed var(--muted)}
/* wybór kont widocznych w skrzynce (pod folderami) */
.account-view{display:flex;flex-direction:column;gap:4px;margin:14px 8px 0 4px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.account-view-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.account-view .check{display:flex;gap:6px;align-items:center;color:inherit;white-space:nowrap}
html[data-side] .account-view{border-top-color:rgba(255,255,255,.25);color:var(--side-ink)}
html[data-side] .account-view-title{color:var(--side-muted)}
.hidden-accounts{margin:8px;display:block}
@media (max-width:760px){.account-view{flex-direction:row;flex-wrap:wrap;margin:6px 0 0;border-top:0}}
/* notatki zespołu jako zwijany panel */
details.team-notes>summary{list-style:none;cursor:pointer}
details.team-notes>summary::-webkit-details-marker{display:none}
details.team-notes>summary h2::after{content:"▾";margin-left:auto;color:var(--muted);font-size:14px}
details.team-notes:not([open])>summary h2::after{content:"▸"}
details.team-notes>summary h2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.att-off{opacity:.7;cursor:default}.att-off:hover{border-color:var(--line)}
/* granica folderów i listy wątków — przeciąganie (zapis dla osoby), podwójne kliknięcie = domyślne */
.col-resize{position:absolute;top:0;bottom:0;left:calc(var(--folders-w,170px) - 4px);width:8px;cursor:col-resize;z-index:5;touch-action:none}
.col-resize:hover,.col-resize.dragging{background:linear-gradient(90deg,transparent 3px,var(--accent) 3px,var(--accent) 5px,transparent 5px)}
@media (max-width:1100px){.col-resize{left:calc(var(--folders-w,175px) - 4px)}}
@media (max-width:760px){.col-resize{display:none}}
body.resizing{user-select:none;cursor:col-resize}

/* pod nazwą użytkownika: początek dzisiejszej pracy */
.me-box{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.me-today{font-size:11px;opacity:.75;white-space:nowrap}
/* wyszukiwarka wątków nad listą */
.thread-search{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}
.thread-search input[type=search]{flex:1;min-width:0;padding:var(--fld-pad-sm)}
/* Notatki zespołu: listwa nad odpowiedzią + szuflada (01.11.2026) */
:root{--notes-on:#1e7a4c;--notes-on-ink:#fff;--notes-on-soft:#e3f4ea}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--notes-on:#2f9e66;--notes-on-soft:#173326}}
html[data-theme=dark]{--notes-on:#2f9e66;--notes-on-soft:#173326}
.notes-bar{display:flex;align-items:center;gap:10px;margin:14px 0 6px;padding:6px 6px 6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:0}
.notes-bar.has-notes{border-color:var(--notes-on);background:var(--notes-on-soft)}
.notes-count{display:inline-flex;align-items:center;gap:6px;flex:none;font:inherit;font-size:13px;font-weight:700;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--muted)}
.has-notes .notes-count{background:var(--notes-on);border-color:var(--notes-on);color:var(--notes-on-ink);cursor:pointer}
.has-notes .notes-count .ui-icon .ic-l{display:none}.has-notes .notes-count .ui-icon .ic-d{display:block}
.notes-peek{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;font:inherit;font-size:13px;text-align:left;background:none;border:0;padding:4px 2px;color:var(--ink);cursor:pointer}
.notes-peek.empty{color:var(--muted);cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peek-text{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:6em}
.peek-by{flex:0 1 auto;max-width:35%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:12px}
.notes-add{flex:none;font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border-radius:8px;border:1px dashed var(--muted);background:transparent;color:var(--ink);cursor:pointer}
.notes-add:hover,.notes-peek:hover .peek-text{color:var(--accent-text)}
.notes-bar button:focus-visible,.drawer-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.notes-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(420px,100vw);height:100vh;max-height:none;padding:0;border:0;border-left:1px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:-12px 0 32px rgba(0,0,0,.18);z-index:50;flex-direction:column}
.notes-drawer[open]{display:flex}
.notes-drawer.is-open{animation:drawer-in .16s ease-out}
@keyframes drawer-in{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.notes-drawer.is-open{animation:none}}
.drawer-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.drawer-head h2{flex:1;display:flex;align-items:center;gap:6px;margin:0;font-size:16px}
.drawer-head .count{background:var(--notes-on);color:var(--notes-on-ink);border-radius:999px;font-size:12px;padding:1px 8px}
.drawer-close{font:inherit;font-size:22px;line-height:1;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.drawer-hint{margin:8px 14px 0}
.notes-drawer .notes{flex:1;overflow:auto;list-style:none;margin:0;padding:10px 14px;display:flex;flex-direction:column;gap:10px}
.notes-drawer .notes time{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;color:var(--muted)}
.drawer-empty{flex:1;margin:0;padding:18px 14px}
.notes-drawer .note-form{display:flex;flex-direction:column;gap:6px;padding:12px 14px 16px;border-top:1px solid var(--line);background:var(--bg)}
.notes-drawer .note-form textarea{width:100%;padding:var(--fld-pad);resize:vertical}
.note-scope{display:flex;flex-wrap:wrap;gap:4px 14px;border:0;margin:0;padding:0}.note-scope legend{padding:0;margin-bottom:2px}
.notes-drawer .note-form .btn{align-self:flex-end}
@media (max-width:760px){.notes-bar{flex-wrap:wrap}.notes-peek{order:3;flex-basis:100%}.notes-peek.empty{display:none}}
.section-gap{margin-top:32px}
.sources + .muted.small,.sources + .warn-box,.sources ~ form.add-account{margin-top:14px}
/* ikony integracji (własne piktogramy, kolor kafelka per integracja) */
.int-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;flex:none;font-weight:800;background:var(--int-bg,#eef0f3);color:var(--int-ink,#3b4252)}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .int-icon{background:color-mix(in srgb,var(--int-ink) 22%,#1b1e23);color:color-mix(in srgb,var(--int-ink) 55%,#fff)}}
html[data-theme=dark] .int-icon{background:color-mix(in srgb,var(--int-ink) 22%,#1b1e23);color:color-mix(in srgb,var(--int-ink) 55%,#fff)}
.int-meta{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.check-now{margin-top:12px}
.notion-link{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:8px}
.notion-link input{flex:1;min-width:220px;padding:var(--fld-pad-sm)}
.add-account select{padding:var(--fld-pad-sm)}
/* nagłówek wątku zawsze widoczny (status, opiekun, pilne, spam, kategoria) — także w długich rozmowach */
.detail>.thread-head{position:sticky;top:-20px;z-index:6;margin:-20px -24px 0;padding:16px 24px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
/* telefon: przewija się cała strona, nie .detail — nagłówek przyklejony do okna (recenzja R07) */
@media (max-width:760px){.detail{overflow:visible}.detail>.thread-head{top:0;margin:0 -16px;padding:10px 16px 8px}}
.notes-bar a{text-decoration:none}
.note-actions{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:12px}
.note-actions summary{cursor:pointer;color:var(--muted);list-style:none}.note-actions summary::-webkit-details-marker{display:none}
.note-actions summary:hover,.note-actions summary:focus-visible{color:var(--accent-text)}
.note-actions details[open]{flex-basis:100%}
.note-edit-form,.note-delete-form{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.note-delete-form{flex-direction:row;align-items:center;flex-wrap:wrap}
.note-edit-form textarea{width:100%;padding:var(--fld-pad-sm)}
.note-edit-form .chip{align-self:flex-end}
.chip.danger{border-color:var(--problem);color:var(--problem)}
/* jaskrawy licznik powiadomień przy kopercie (granat: turkus; pozostałe motywy — własny jaskrawy kolor) */
/* WA02: ciemny napis na jaskrawym różu — biały dawał 3,4:1 (jasny) i 3,1:1 (ciemny) */
:root{--notif-bg:#ff3d71;--notif-ink:#2a0010;--important-bg:#f59e0b;--important-ink:#2a1600}
html[data-variant=blue]{--important-bg:#ff7a45;--important-ink:#2a0d00}
html[data-theme=dark]{--notif-bg:#ff4f8b;--notif-ink:#2a0010}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--notif-bg:#ff4f8b;--notif-ink:#2a0010}}
html[data-variant=navy]{--notif-bg:#22e5d4;--notif-ink:#062a3a}
html[data-variant=blue]{--notif-bg:#ffd400;--notif-ink:#1b1f3b}
.bell{position:relative}
.bell .count{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--notif-bg);color:var(--notif-ink);font-size:11px;font-weight:800;line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--panel),0 0 10px color-mix(in srgb,var(--notif-bg) 70%,transparent)}
.channel-title{display:flex;align-items:center;gap:10px}
.channels td .chip{margin:2px 0}
.channels .chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.channel-connect{align-items:flex-start;max-width:560px}
.channel-connect label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;width:100%}
.channel-connect input{padding:var(--fld-pad-sm)}
.sig-label{display:flex;align-items:center;gap:8px;font-weight:600}
.stack .sig-label{flex-direction:row;justify-content:flex-start;align-self:flex-start;text-align:left}
.integration-logo{display:inline-flex;flex:none;line-height:0}
/* telefon: wiersze integracji i kanałów jako karta (logo | nazwa, pod spodem stan i przyciski) */
@media (max-width:760px){
  .grid.sources tr{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--line)}
  .grid.sources td{display:block;border:0;padding:0;min-width:0}
  .grid.sources td:nth-child(n+3){grid-column:2}
}
.channel-logo{text-align:center}.channel-logo .mirakl-tag{display:block;width:max-content;margin:4px auto 0;font-size:10px;padding:1px 6px}
.channel-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
/* lista powiadomień: „nowe” w kolorach licznika przy kopercie (każdy motyw) */
.notif-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.notif{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.notif:not(.unread) .notif-text{color:var(--muted)}
.notif-text{font:inherit;text-align:left;background:none;border:0;padding:0;color:var(--ink);cursor:pointer}
.notif-text:hover,.notif-text:focus-visible{text-decoration:underline}
.notif-new{display:inline-block;background:var(--notif-bg);color:var(--notif-ink);font-weight:800;font-size:11px;border-radius:999px;padding:1px 8px;margin-right:4px}
.notif-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){.notif{grid-template-columns:1fr}.notif-actions{justify-content:flex-start}}

/* Podpisy osobiste: pionowe zakładki kanałów z logo (TebeaRESPONDER → Podpisy) */
.sig-tabs{display:grid;grid-template-columns:minmax(170px,220px) 1fr;gap:16px;align-items:start}
.sig-tablist{display:flex;flex-direction:column;gap:4px}
.sig-tab{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:1px solid transparent;color:inherit;text-decoration:none}
.sig-tab:hover{background:var(--hover,rgba(0,0,0,.05))}
.sig-tab.active{border-color:var(--accent);background:var(--accent-soft,rgba(0,0,0,.06));font-weight:600}
.sig-tab-logo{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:32px}
.sig-tab-logo .mirakl-tag{font-size:9px;padding:0 4px}
.sig-panel .sig-preview{margin:4px 0 0;white-space:pre-wrap}
.sig-panel-accounts{margin-top:28px;padding-top:16px;border-top:1px solid var(--line,rgba(0,0,0,.12))}
@media (max-width:700px){.sig-tabs{grid-template-columns:1fr}.sig-tablist{flex-direction:row;overflow-x:auto}}

/* Linki w wiadomościach klientów i strona pośrednia */
.bubble .ext-link{word-break:break-all;text-decoration:underline}
.link-check{max-width:760px}
.link-check .link-url{white-space:pre-wrap;word-break:break-all;padding:10px;border-radius:8px;background:var(--buyer,#F1F2F4)}
.link-check .link-host{font-size:1.1em}
.link-reports td{vertical-align:top}
.link-reports tr.highlight td{background:var(--notif-bg,#FFF3B0);color:var(--notif-ink,inherit)}
.link-reports td.row{display:flex;gap:6px;flex-wrap:wrap}
.pill.ok{background:#E6F6EC;color:#166534;border-color:#BFE5CC}
/* --- Motywy Premium — motywy marek (Paweł, 01.11.2026) — palety ze stron marek; jasne, z kolorowymi bokami jak „Niebieski”.
   Kolor główny, dymki i notatki — domyślne marki z preferences.BRAND_THEMES (każdy może zmienić). */
/* Elizabeth Ettiene (ettiene.pl): bordo, beże, ciemna zieleń */
html[data-variant=ettiene]{--bg:#F3ECE1;--panel:#FFFFFF;--ink:#242420;--muted:#57544E;--line:#D8C9B5;
  --side:#63283B;--side-2:#4F1F2F;--side-ink:#FFFFFF;--side-muted:#EBD9DE;--side-hover:rgba(255,255,255,.10);
  --side-on:rgba(255,255,255,.20);--notif-bg:#F4EDE1;--notif-ink:#4F1F2F}
html[data-variant=ettiene] .topbar{box-shadow:inset 0 -1px 0 #8A4A5E}
/* Bad Surfer (badsurfer.eu): wakacyjny zachód słońca — indygo, fiolet, koral */
html[data-variant=badsurfer]{--bg:#F1EFF8;--panel:#FFFFFF;--ink:#1F1B33;--muted:#57516F;--line:#D3CDE6;
  --side:#453A94;--side-2:#3A3080;--side-ink:#FFFFFF;--side-muted:#FFFFFF;--side-hover:rgba(0,0,0,.12);
  --side-on:rgba(0,0,0,.18);--notif-bg:#FFD23F;--notif-ink:#2A1F5C}
html[data-variant=badsurfer] .topbar{background:linear-gradient(90deg,#3A3080 0%,#5340A3 55%,#7758B9 100%)}
/* HøyBerg (hoyberg.pl): północny granat, śnieg, czerwień jak przycisk „Odkryj markę” */
html[data-variant=hoyberg]{--bg:#0E1830;--panel:#172744;--ink:#E7EDF6;--muted:#A6B4CA;--line:#2B3F63;
  --quiet:#1F3152;--quiet-ink:#C9D4E5;--problem:#ff8a80;--problem-bg:#3B1A26;color-scheme:dark;
  --me-bg:#1F3D63;--me-line:#2E5585;--buyer-bg:#1C2D4C;--buyer-line:#2B4268;--note-bg:#3A3320;--note-line:#6B5A1E;
  --side:#1D2D4D;--side-2:#141F36;--side-ink:#FFFFFF;--side-muted:#C5D0E2;--side-hover:rgba(255,255,255,.10);
  --side-on:rgba(255,255,255,.18);--notif-bg:#DC1F38;--notif-ink:#FFFFFF}
html[data-variant=hoyberg] .topbar{box-shadow:inset 0 -3px 0 #DC1F38}
/* wybór motywu marki — trzy karty obok siebie z miniaturą motywu */
.brand-themes{border:0;padding:0;margin:8px 0 0}
.brand-themes legend{font-weight:700;margin-bottom:8px}
.brand-theme-row{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:12px}
.brand-theme{position:relative;display:flex;flex-direction:column;border:2px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--panel)}
.brand-theme input{position:absolute;opacity:0;pointer-events:none}
.brand-theme:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--soft)}
.brand-theme:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.brand-theme-bar{height:22px}
.brand-theme-body{display:flex;gap:6px;padding:10px;min-height:34px}
.brand-theme-body i{width:28px;height:14px;border-radius:7px}
.brand-theme-name{padding:0 10px 10px;font-weight:700}
.brand-theme-ettiene .brand-theme-bar{background:#63283B}.brand-theme-ettiene .brand-theme-body{background:#F6F1E9}
.brand-theme-ettiene i:nth-child(1){background:#63283B}.brand-theme-ettiene i:nth-child(2){background:#DCE8E0;border:1px solid #17322D}.brand-theme-ettiene i:nth-child(3){background:#F3E2C4}
.brand-theme-badsurfer .brand-theme-bar{background:linear-gradient(90deg,#3A3080,#5340A3 55%,#7758B9)}.brand-theme-badsurfer .brand-theme-body{background:#F5F4FA}
.brand-theme-badsurfer i:nth-child(1){background:#6A4FB0}.brand-theme-badsurfer i:nth-child(2){background:#E4DDFA;border:1px solid #7758B9}.brand-theme-badsurfer i:nth-child(3){background:#FFE7A3}
.brand-theme-hoyberg .brand-theme-bar{background:#1D2D4D;box-shadow:inset 0 -3px 0 #DC1F38}.brand-theme-hoyberg .brand-theme-body{background:#0E1830}
.brand-theme-hoyberg i:nth-child(1){background:#C81B32}.brand-theme-hoyberg i:nth-child(2){background:#1F3D63;border:1px solid #2E5585}.brand-theme-hoyberg i:nth-child(3){background:#172744;border:1px solid #2B3F63}
.brand-theme-name{color:var(--ink)}
@media (max-width:600px){.brand-theme-row{grid-template-columns:1fr}}
/* Ettiene: kolor główny = kolor boków, więc liczniki i znacznik DEMO na bordo — w beżu marki */
html[data-variant=ettiene] .folders a:not(.on) .count,html[data-variant=ettiene] .badge-demo{background:#F4EDE1;color:#4F1F2F}
/* Bad Surfer: zaznaczona rozmowa w fiolecie marki, nie w czerwieni koloru głównego (Paweł 01.11.2026) */
html[data-variant=badsurfer] .thread.active{background:#ECE8FA;box-shadow:inset 3px 0 #7758B9}
.indent{margin-left:26px;display:flex;flex-direction:column;gap:4px}
/* Role i uprawnienia */
.table-scroll{overflow-x:auto}
.role-matrix th[scope=row]{font-weight:500;text-align:left}
.role-matrix td{text-align:center}
.role-matrix .role-fn{border-left:3px solid var(--line);padding-left:12px}
.role-matrix .role-group th{text-align:left;padding:10px 10px 8px;font-size:14px;color:var(--ink);
  background:color-mix(in srgb,var(--accent) 7%,var(--panel));border-top:2px solid var(--line)}
.role-group-title{display:inline-flex;align-items:center;gap:8px}
.role-matrix .role-group-new th{background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-top-color:var(--accent)}
.role-new{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.role-fixed.on{color:var(--ink)}.role-fixed.off{color:var(--muted)}
.inbox-summary{margin:6px 0 10px;padding-left:18px}.inbox-topics{max-width:520px}
.msg-format-note{margin:4px 0 0;font-size:12px;color:var(--muted)}
/* „!” przy TebeaRESPONDER — nowe wiadomości od ostatniego wejścia (kolory licznika koperty) */
.mod-new{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:var(--notif-bg);color:var(--notif-ink);font-size:12px;font-weight:800;line-height:1}
.mod-new[hidden]{display:none}

/* Produkty zamówienia z kanału (BaseLinker) */
.order-items { list-style: none; margin: .25rem 0 .5rem; padding: 0; }
.order-items li { padding: .3rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.order-items li:last-child { border-bottom: 0; }
.small-head { font-size: .9rem; margin-bottom: .25rem; }

.warn-text{color:var(--problem)}
.nowrap{white-space:nowrap}

/* Ocena kupującego (Allegro, tylko odczyt) */
.rating-box{margin:8px 0;padding:8px 10px;border-radius:10px;border:1px solid var(--line)}
.rating-box p{margin:4px 0 0}
.rating-neg{border-color:var(--problem);background:var(--problem-bg)}

/* TebeaBOOST */
.commerce{padding:20px 28px;max-width:1200px}
.commerce ul{padding-left:20px}
.promo-offers td{vertical-align:middle}
.offer-cell{display:flex;gap:10px;align-items:center;min-width:280px}
.offer-thumb{width:56px;height:56px;object-fit:contain;border-radius:8px;background:var(--panel);border:1px solid var(--line);flex:none}
.offer-thumb-empty{display:inline-block}
.offer-meta{display:flex;flex-direction:column;gap:2px}
.offer-name{font-weight:600}

/* TebeaRADAR / TebeaPROMO — grafiki modułów (pakiet ChatGPT, 03-INTEGRACJA-GRAFIK) */
.rp-module-art{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.rp-module-art img{display:block;max-width:100%}
.tile-art .rp-module-art{width:88px;height:88px}
.modules .rp-module-art{width:20px;height:20px;margin-right:6px}
.cap-table td:first-child{white-space:nowrap}
.cap{display:inline-block;white-space:nowrap;padding:1px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.cap-ok{background:color-mix(in srgb,var(--ok, #2e7d32) 14%,var(--panel));color:var(--ink)}
.cap-no{background:color-mix(in srgb,var(--warn, #b26a00) 14%,var(--panel));color:var(--ink)}
.commerce h1 .rp-module-art{width:28px;height:28px;vertical-align:-4px;margin-right:6px}

/* TebeaPROMO — kampanie (wiersze z paskiem czasu) i oferty (narzędzia, edytowalna cena, zaznaczanie) */
.promo-page{max-width:1280px}
.promo-page h1 .ch-icon{vertical-align:-6px;margin-right:4px}
.pc-head p{max-width:820px}
.pc-filters{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;margin:16px 0;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pc-filters fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pc-filters legend{font-size:12px;color:var(--muted);margin-bottom:4px;float:left;width:100%}
.pc-filters label.chip{display:inline-flex;align-items:center;gap:5px}
.pc-filters label.chip input{position:absolute;opacity:0;width:1px;height:1px}
.pc-filters label.chip:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.chip.on{border-color:var(--accent);color:var(--accent-text);font-weight:600}
.pc-filter-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.pc-section{margin-top:22px}
.pc-section h2{font-size:17px;margin:0 0 8px}
.pc-row{display:grid;grid-template-columns:150px minmax(200px,1fr) 250px 160px;gap:16px;align-items:center;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:8px}
.pc-row.pc-urgent{border-color:var(--accent)}
.pc-market{display:flex;gap:8px;align-items:center}
.pc-market>span{display:flex;flex-direction:column;gap:2px}
.pc-name{font-size:15px;margin:0 0 2px}
.pc-main p{margin:0}
.pc-time p{margin:2px 0}
.pc-tl{display:block;max-width:100%}
.pc-tl-base{fill:var(--line)}
.pc-tl-pub{fill:color-mix(in srgb,var(--accent) 28%,var(--panel))}
.pc-tl-app{fill:var(--accent)}
.pc-tl-now{fill:var(--ink)}
.pc-key{display:inline-block;width:10px;height:8px;border-radius:2px;margin-right:6px}
.pc-key-app{background:var(--accent)}
.pc-key-pub{background:color-mix(in srgb,var(--accent) 28%,var(--panel))}
.pc-act{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.pc-act p{margin:0}
.pc-count{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.po-head h1{margin-bottom:4px}
.po-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;color:var(--muted);font-size:13px;margin:0 0 12px}
.po-tools{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);margin-bottom:12px}
.po-cond{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.po-cond label{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.po-cond input,.po-cond select,.po-price input,.po-jump input{font-size:var(--fld-size-sm);padding:var(--fld-pad-sm);background:var(--bg)}
.po-cond input:focus,.po-cond select:focus,.po-price input:focus,.po-jump input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.po-bulk{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:8px 12px;
  margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.po-bulk .btn:disabled{opacity:.45;cursor:default}
.po-table th{white-space:nowrap}
.po-table .num{text-align:right;font-variant-numeric:tabular-nums}
.po-check{width:28px;text-align:center}
.po-check input{width:16px;height:16px;accent-color:var(--accent)}
.po-price{display:inline-flex;align-items:center;gap:4px}
.po-price input{width:84px;text-align:right;font-weight:700;background:var(--panel)}
.po-price input.po-bad{border-color:var(--problem);color:var(--problem)}
.po-in-draft td{background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.po-pill{margin-top:3px;align-self:flex-start;border-color:var(--accent);color:var(--accent-text)}
.po-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:110px}
.po-btn{padding:6px 14px;font-size:13px}
.po-link{font-size:12px;color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.po-pages{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:14px 0}
.po-page-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.po-jump label{font-size:13px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
@media (max-width:900px){.pc-row{grid-template-columns:1fr}.pc-act{align-items:flex-start;text-align:left}}
.po-max{display:block;margin-top:3px}
.po-table td{vertical-align:middle}

/* RESPONDER: „tylko ten” przy koncie (Paweł 01.11.2026) */
.acc-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.acc-row .ch-icon{vertical-align:-3px}
.acc-only{font:inherit;font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid transparent;background:none;
  color:inherit;opacity:.0;cursor:pointer;white-space:nowrap}
.acc-row:hover .acc-only,.acc-only:focus-visible{opacity:.85;border-color:currentColor}
@media (hover:none){.acc-only{opacity:.7;border-color:currentColor}}

/* Pozytywna ocena w notatkach (Paweł 01.11.2026): w listwie tylko znacznik, treść w szufladzie notatek */
.notes-rating{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--notes-on) 45%,var(--line));color:var(--ink);
  background:color-mix(in srgb,var(--notes-on) 10%,var(--panel))}
.note-rating{border-left:3px solid var(--notes-on);margin:0 0 10px}

/* Statystyki (przebudowa 01.11.2026): podsumowanie miesiąca, spis sekcji, logo kanałów, paski „w terminie” */
.stats-page{max-width:1180px}
.st-head h1{margin-bottom:2px}
.st-toc{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.st-toc a{font-size:13px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.st-toc a:hover{border-color:var(--accent)}
.st-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:16px 0 4px;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;background:var(--line)}
.st-summary>div{background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.st-summary .st-warn .st-num{color:var(--problem)}
.st-num{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.st-table .num{text-align:right;font-variant-numeric:tabular-nums}
.st-table th{white-space:nowrap}
.st-ch{display:inline-flex;align-items:center;gap:8px}
.st-ch .ch-icon{flex:none}
.st-pct{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.st-bar-bg{fill:var(--line)}
.st-bar{fill:var(--notes-on)}
.st-bar-low{fill:var(--problem)}
.st-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.st-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px}
.st-card h4{margin:0 0 6px;display:flex;align-items:center;gap:6px;font-size:14px}
.st-card p{margin:0 0 8px}
.st-metrics{list-style:none;margin:0;padding:0;font-size:12px}
.st-metrics li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-top:1px solid var(--line)}
.st-ratings{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.st-rating{border:1px solid var(--line);border-left:3px solid var(--problem);border-radius:10px;background:var(--panel);padding:10px 12px}
.st-rating header{display:flex;justify-content:space-between;gap:8px;align-items:center}
.st-rating p{margin:6px 0 0}
.st-comment{color:var(--ink)}
.st-chip{display:inline-flex;align-items:center;gap:4px;margin:0 8px 2px 0;white-space:nowrap}
@media (max-width:760px){.st-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.acc-row .check{min-width:0;overflow:hidden;text-overflow:ellipsis}
.acc-row .acc-only{flex:none;padding:0 6px}

/* „Zapisano.” po zapisie — w całej aplikacji (kolory motywu: zielony akcent notatek + panel) */
.toast-saved{position:fixed;top:72px;right:20px;z-index:50;margin:0;padding:10px 16px;border-radius:10px;font-weight:600;
  font-size:14px;color:var(--ink);background:color-mix(in srgb,var(--notes-on) 16%,var(--panel));
  border:1px solid color-mix(in srgb,var(--notes-on) 55%,var(--line));box-shadow:0 6px 20px rgba(0,0,0,.18);
  animation:toast-out 0.4s ease 4s forwards}
@keyframes toast-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.toast-saved{animation:none}}

.po-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 12px}
.po-tabs a{padding:8px 14px;font-weight:600;font-size:14px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.po-tabs a.on,.po-tabs a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.po-cut-low{color:var(--notes-on)}
.po-status{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}

.pr-form{max-width:760px}
.pr-form fieldset{border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px 14px}
.pr-form legend{font-size:12px;color:var(--muted);padding:0 4px}

/* Źródła danych — karty kanałów (01.11.2026) */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:8px}
.ch-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel)}
.ch-card.off{border-style:dashed}
.ch-card header{display:flex;gap:10px;align-items:center}
.ch-card .channel-logo{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.ch-name{display:flex;flex-direction:column;gap:2px}
.ch-state{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1}
.ch-state .pill{white-space:normal}
.ch-card footer{display:flex;gap:6px}

.calc-fees{border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.calc-fees legend{font-size:12px;color:var(--muted);padding:0 4px}

/* TebeaCALC — ta sama marża na innych kanałach (01.11.2026) */
.cc-ch{display:inline-flex;align-items:center;gap:8px}
.cc-ch .flag{margin-left:2px}
.cc-table td{vertical-align:middle}
.cc-api{font-size:11px}
.cc-diff{font-weight:700}
.cc-up{color:var(--problem)}
.cc-down{color:var(--positive-text)}
.cc-vat{display:flex;flex-wrap:wrap;gap:8px 16px}
.cc-vat label{display:inline-flex;align-items:center;gap:6px}
.stack .cc-edit input:not([type=checkbox]),.stack .cc-edit select{padding:5px 7px;min-width:0;width:5em}
.stack .cc-edit input.cc-w-name{width:9em}.stack .cc-edit input.cc-w-note{width:11em}.stack .cc-edit select{width:auto}
.cc-edit td{padding:4px 6px;white-space:nowrap}
.stack .cc-vat label{flex-direction:row;align-items:center;font-weight:500}
.stack .cc-vat input{width:4em;padding:5px 7px}
.cc-edit .cc-new td{background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.stack.cc-form{max-width:none}
.grid.cc-edit,.grid.cc-table{max-width:none}

/* TebeaOFFICE — urlopy i obecność (01.11.2026) */
.of-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:16px;align-items:start}
@media (max-width:900px){.of-top{grid-template-columns:1fr}}
.of-balance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.of-balance>div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.of-balance>div:first-child{grid-column:1 / -1;border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.of-big{font-size:40px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)}
.of-mid{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.of-form{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.of-form h2{margin:0;font-size:16px}
.of-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.of-form input,.of-form select,.of-decide input{font-size:var(--fld-size);padding:var(--fld-pad)}
.of-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.of-status{font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.of-st-pending{background:var(--notif-bg);color:var(--notif-ink);border-color:transparent}
.of-st-approved{background:color-mix(in srgb,#16a34a 16%,var(--panel));color:var(--ink)}
.of-st-rejected{background:var(--problem-bg);color:var(--problem)}
.of-st-cancelled{color:var(--muted)}
.of-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin-top:10px}
.of-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.of-card header{display:flex;justify-content:space-between;gap:8px;align-items:center}
.of-card p{margin:0}
.of-decide{display:flex;gap:6px;flex-wrap:wrap}.of-decide input{flex:1;min-width:140px}
.of-cal-nav{display:flex;align-items:center;gap:10px;margin:6px 0}
.of-cal-nav b{min-width:150px;text-align:center;text-transform:capitalize}
.of-cal{border-collapse:separate;border-spacing:2px;font-size:12px}
.of-cal th{font-weight:600;color:var(--muted);padding:2px}
.of-cal thead th{min-width:26px;text-align:center}
.of-cal thead th span{display:block;color:var(--ink);font-size:13px}
.of-cal thead th small{display:block;font-size:10px}
.of-cal thead th.of-today span{color:var(--accent);font-weight:800}
.of-cal .of-name{position:sticky;left:0;z-index:1;background:var(--bg);text-align:left;white-space:nowrap;padding-right:10px;color:var(--ink)}
.of-cell{height:26px;min-width:26px;border-radius:6px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);text-align:center;vertical-align:middle;font-size:10px;font-variant-numeric:tabular-nums}
.of-cal .of-off,.of-sw.of-off{background:color-mix(in srgb,var(--line) 80%,var(--bg));box-shadow:none}
.of-cal thead th.of-off{background:none;opacity:.55}
.of-abs,.of-sw.of-abs{background:var(--accent)!important}
.of-away,.of-sw.of-away{background:#64748b!important}
.of-trip,.of-sw.of-trip{background:#0d9488!important}
.of-top-single{grid-template-columns:minmax(280px,480px)}
.of-pend,.of-sw.of-pend{background:repeating-linear-gradient(135deg,var(--accent) 0 4px,color-mix(in srgb,var(--accent) 35%,var(--panel)) 4px 8px)!important}
.of-in,.of-sw.of-in{background:color-mix(in srgb,#16a34a 22%,var(--panel));color:var(--ink)}
.of-miss,.of-sw.of-miss{background:var(--problem-bg);color:var(--problem);font-weight:800}
.of-marked,.of-sw.of-marked{background:var(--notif-bg)}
.of-fut{opacity:.4}
.of-x{border:0;background:none;color:var(--notif-ink);font:inherit;font-weight:800;cursor:pointer;padding:0;width:100%;height:100%}
.of-legend{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;color:var(--muted)}
.of-sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;margin-right:2px}
.of-list td{vertical-align:top}
.of-miss-list{display:flex;flex-direction:column;gap:8px;max-width:900px}
.of-miss-person{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:8px 12px}
.of-miss-person summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.of-bulk{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.of-days{display:flex;flex-wrap:wrap;gap:6px}
.of-day{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px}
.of-day small{color:var(--muted)}
.of-bulk select{font-size:var(--fld-size);padding:var(--fld-pad-sm)}
/* 6 modułów w pasku (01.11.2026): nazwy w jednej linii; przy wąskim oknie pasek przewija się w poziomie */
/* Moduły w pasku: gdy się nie mieszczą (więcej modułów, dłuższe nazwy w innym języku) — drugi wiersz zamiast ucięcia */
.modules{min-width:0;flex:1 1 auto;flex-wrap:wrap;row-gap:2px}.modules a{white-space:nowrap}
@media (max-width:1440px) and (min-width:761px){.modules a{padding:6px 7px;gap:5px}.topbar{gap:10px}}
.of-duty,.of-sw.of-duty{background:#16a34a!important;color:#fff;font-weight:800}
.of-free,.of-sw.of-free{background:color-mix(in srgb,#16a34a 30%,var(--panel))!important;color:var(--ink);font-weight:800}
.of-declare{max-width:720px}
.of-duty-table select{font-size:var(--fld-size);padding:var(--fld-pad-sm);min-width:200px}
.of-form label.of-day{flex-direction:row;font-weight:500;font-size:13px}

/* Ustawienia → użytkownik: karta osoby (02.11.2026) */
.us-head{display:flex;gap:14px;align-items:center;margin:6px 0 14px}
.us-head h2{margin:0;font-size:22px}
.us-id{display:flex;flex-direction:column;gap:4px}
.us-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.us-dept{--dept:var(--accent);background:color-mix(in srgb,var(--dept) 18%,var(--panel));color:var(--ink);border-color:color-mix(in srgb,var(--dept) 45%,transparent)}
.us-nodept{--dept:#8a8f98;color:var(--ink);background:color-mix(in srgb,var(--dept) 18%,var(--panel));border-color:color-mix(in srgb,var(--dept) 45%,transparent)}
.pill.us-nodept::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dept);margin-right:5px;vertical-align:1px}
.co-dept-fixed{flex:1;align-self:center;padding:0 .5em}
.us-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1000px){.us-grid{grid-template-columns:1fr}}
.us-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px}
.us-card h3{margin:0 0 10px;font-size:15px}
.us-card .stack{max-width:none}
.us-mods{display:flex;flex-direction:column;gap:6px}
.us-chips,.us-radios{display:flex;flex-wrap:wrap;gap:6px}
.us-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;cursor:pointer}
.us-chip:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.stack label.us-chip{flex-direction:row;font-weight:500}
.us-bulk{margin:8px 0 4px}.us-bulk summary{cursor:pointer;font-size:13px;font-weight:600}
.us-bulk textarea{font-size:var(--fld-size);padding:var(--fld-pad);max-width:520px}
.avatar.av-56{width:56px;height:56px;font-size:24px}
.grid.us-table{max-width:1100px}
.us-table td{vertical-align:middle}
.us-name{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.us-table .actions{display:flex;gap:6px;flex-wrap:nowrap}
/* TebeaRADAR — oferty i alerty (02.11.2026) */
.rd-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0}
.rd-table td{vertical-align:middle}
.rd-diff{font-weight:700;font-variant-numeric:tabular-nums}.rd-down{color:var(--problem)}.rd-up{color:var(--positive-text)}
.rd-own td{background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.rd-nav{margin:6px 0 10px;padding-left:0}
.grid.rd-table,.grid.cap-table{max-width:1100px}.rd-table td:first-child{min-width:220px}
.co-form h4{margin:10px 0 0;font-size:13px}
.co-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.co-dept{flex-direction:row!important;align-items:center;gap:8px}
.co-dept input{flex:1}
.co-dept input.co-color{flex:0 0 34px;width:34px;height:30px;padding:2px;border-radius:8px;cursor:pointer}
.co-krs{align-items:flex-end;gap:8px;margin-bottom:8px}
.co-new{display:flex;flex-direction:column;gap:6px}

/* Karta osoby — zatrudnienie i urlop (02.11.2026) */
.us-emp fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.us-emp legend{font-weight:600;font-size:13px;margin-bottom:4px}
.us-emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.us-emp-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.of-open{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:10px 14px;margin:10px 0;background:var(--panel)}
.of-open h3{margin:0 0 4px;font-size:15px}.of-open ul{margin:6px 0 0;padding-left:18px}
/* Komunikat: kto dziś odpisuje (zastępstwa, 02.11.2026) */
.sub-notice{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:10px 16px 0;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.sub-notice p{margin:3px 0;font-size:14px}.sub-notice-body>b{font-size:15px}
@media (max-width:700px){.sub-notice{flex-direction:column;align-items:stretch}}
.sub-notice-preview{border:1px solid var(--line);border-radius:10px;padding:8px 14px;background:var(--panel)}
.sub-notice-preview p{margin:4px 0}
.of-sub-day{align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.of-sub-substitute td:nth-child(2),.of-sub-duty td:nth-child(2){color:var(--accent)}
.of-sub-nobody td:nth-child(2){color:var(--problem)}
.of-queue .of-q-row{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,118px);gap:6px;align-items:center}
.of-queue select{width:100%;min-width:0;font-size:var(--fld-size-sm);padding:var(--fld-pad-xs)}
.of-q-n{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
/* TebeaOFFICE — pulpit (02.11.2026) */
.of-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:10px 0 4px}
.of-tile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);text-decoration:none}
.of-tile:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.of-tile b{font-size:20px;font-variant-numeric:tabular-nums}.of-tile span{font-size:12px;color:var(--muted)}
.of-cal td.of-late,.of-late-sw{color:#c2410c;font-weight:800}
.of-late-sw{font-size:11px;padding:0 4px}
.of-free-col{min-width:170px}.of-free-in{display:flex;align-items:center;gap:6px;white-space:nowrap}
.of-free-in input{font-size:var(--fld-size-xs);padding:var(--fld-pad-xs);border-radius:var(--radius-s)}
/* TebeaCALC — porządek formularza (02.11.2026) */
.calc-form .calc-sec{border:0;border-top:1px solid var(--line);margin:0;padding:10px 0 0;display:flex;flex-direction:column;gap:8px;min-width:0}
.calc-form .calc-sec legend{font-size:12px;font-weight:700;color:var(--muted);padding:0 6px 0 0}
.calc-form input[type=checkbox]{width:auto}
.calc-form .calc-fee{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;font-weight:500}
.calc-form .calc-fee small{color:var(--muted);font-weight:400;white-space:nowrap}
.calc-sku{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.calc-lookup{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid color-mix(in srgb,#16a34a 40%,var(--line));border-radius:10px;background:color-mix(in srgb,#16a34a 7%,var(--panel))}
.calc-lookup-warn{border-color:color-mix(in srgb,#d97706 50%,var(--line));background:color-mix(in srgb,#d97706 8%,var(--panel))}
.calc-lookup ul{margin:2px 0 0;padding-left:16px}.calc-lookup p{margin:0}

/* Mój profil → Moje integracje (02.11.2026): jedna szeroka karta na integrację — logo, opis, stan, kroki */
main.profile{max-width:860px}
.profile-jump{display:flex;gap:12px;margin-top:4px}
.mi{margin-top:28px}
.mi-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mi-top h2{margin:0}
.mi-lead{margin:4px 0 12px;max-width:68ch}
.mi-list{display:flex;flex-direction:column;gap:10px}
.mi-card{padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;
  background:var(--panel)}
.mi-card.todo{border-left-color:#e0a100}
.mi-card:not(.todo):not(.planned){border-left-color:#2e9d5b}
.mi-card.planned{border-style:dashed;border-left-style:dashed}
.mi-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.mi-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.mi-name h3{margin:0;font-size:16px}
.mi-state{display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:300px;text-align:right}
.mi-state .int-meta{margin-top:0}
.mi-steps{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.mi-steps > li > b{display:block;margin-bottom:2px}
.mi-steps .notion-account p{margin:2px 0}
.mi-note{margin:10px 0 0;max-width:68ch}
@media (max-width:640px){
  .mi-head{grid-template-columns:auto 1fr}
  .mi-state{grid-column:1 / -1;align-items:flex-start;text-align:left;max-width:none}
}
/* Karta osoby w Użytkownikach — podsumowanie jej integracji osobistych (tylko odczyt) */
.us-integrations{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.us-integrations li{display:grid;grid-template-columns:auto 6.5em 1fr;gap:8px;align-items:center}
.mi-steps .notion-link label{flex-basis:100%}
.us-integrations li .pill{justify-self:start}
/* Błąd zapisu (app/errors.py) i potwierdzenie przy przycisku formularza (app.js) */
.toast-error{background:color-mix(in srgb,#d33 18%,var(--panel));border-color:color-mix(in srgb,#d33 60%,var(--line));
  animation:none;max-width:min(520px,calc(100vw - 40px))}
.save-inline{display:inline-flex;align-items:center;gap:4px;margin-left:10px;padding:3px 10px;border-radius:999px;font-size:13px;
  font-weight:600;background:color-mix(in srgb,var(--notes-on) 18%,var(--panel));border:1px solid color-mix(in srgb,var(--notes-on) 55%,var(--line));color:var(--ink)}
.save-inline.err{background:color-mix(in srgb,#d33 16%,var(--panel));border-color:color-mix(in srgb,#d33 60%,var(--line))}
.error-page main{max-width:640px;margin:40px auto;padding:0 16px}

/* === Czytelność i zakładki (Paweł 02.11.2026: „na jasnym motywie wszystko jest nieczytelne”, „dymki zgodnie z motywem”) ===
   --pick: kolor zaznaczenia (wybrane pigułki, zakładki) — osobny od czerwieni przycisków, dobrany do motywu. */
[hidden]{display:none !important}
:root{--bg:#eceff3;--line:#cfd6df;--muted:#4b5563;--ink:#111827;--pick:#1f5bd1;--pick-ink:#fff}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--pick:#7aa7ff;--pick-ink:#0b1220}}
html[data-theme=dark]{--pick:#7aa7ff;--pick-ink:#0b1220}
html[data-theme=dark][data-variant=navy]{--pick:#35d0c3;--pick-ink:#062a3a}
html[data-variant=blue]{--pick:#2C5A7D}
html[data-variant=ettiene]{--pick:#17322D}
html[data-variant=badsurfer]{--pick:#453A94}
html[data-variant=hoyberg]{--pick:#8DB8F2;--pick-ink:#0E1830}
.pill{font-size:12px;color:color-mix(in srgb,var(--ink) 82%,var(--panel));background:color-mix(in srgb,var(--ink) 6%,var(--panel));
  border-color:color-mix(in srgb,var(--ink) 16%,var(--panel))}
.us-chip{border-color:color-mix(in srgb,var(--ink) 18%,var(--panel))}
.us-chip:has(input:checked){border-color:var(--pick);background:color-mix(in srgb,var(--pick) 13%,var(--panel));color:var(--ink)}
.us-chip input,.check input,input[type=checkbox],input[type=radio]{accent-color:var(--pick)}
.us-tags .pill:first-child{border-color:var(--pick);color:var(--pick);background:color-mix(in srgb,var(--pick) 10%,var(--panel))}
.info-box{margin:6px 0;padding:8px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--pick) 45%,var(--line));
  background:color-mix(in srgb,var(--pick) 9%,var(--panel));color:var(--ink)}
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 14px}
.tabs a{padding:9px 14px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;
  border-radius:8px 8px 0 0}
.tabs a:hover{color:var(--ink);background:color-mix(in srgb,var(--pick) 6%,transparent)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--pick)}
.tabs a:focus-visible{outline:2px solid var(--pick);outline-offset:2px}
.tabs + [data-tab-panel].mt,.tabs ~ [data-tab-panel].mt{margin-top:0}
.of-duty-hours{display:flex;align-items:center;gap:2px;margin-top:4px;font-size:12px;color:var(--muted)}
.of-duty-hours input{font-size:var(--fld-size-xs);padding:var(--fld-pad-xs);border-radius:var(--radius-s);width:auto}
/* Godziny pracy (Ustawienia → Godziny pracy, karta osoby) */
.wh-lead{max-width:80ch}
.wh-table{width:auto}
.wh-table td,.wh-table th{padding:4px 12px 4px 0;vertical-align:middle}
.wh-table input[type=time]{width:auto;padding:4px 6px;font:inherit;font-size:14px}
.wh-table tr.wh-own td:first-child{font-weight:700}
.stack label.wh-grace{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:500;flex-wrap:wrap}
.stack label.wh-grace input{width:4.5em;text-align:right}
.wh-dept{border-top:1px solid var(--line);padding:8px 0}
.wh-dept summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wh-dept form{margin-top:8px}
.wh-people{margin:6px 0 0;padding-left:18px}
.wh-people li{margin:4px 0}
.cap-left{caption-side:top;text-align:left;padding:4px 0 8px}
/* TebeaCALC — składniki obliczenia pod kanałem */
.cc-toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.cc-toggle::after{content:"▸";font-size:11px;color:var(--muted);transition:transform .15s}
.cc-toggle[aria-expanded=true]::after{transform:rotate(90deg)}
.cc-toggle:hover b{text-decoration:underline}
.cc-toggle:focus-visible{outline:2px solid var(--pick);outline-offset:2px;border-radius:4px}
.cc-parts-row td{background:color-mix(in srgb,var(--pick) 5%,var(--panel));padding:6px 12px 12px 40px}
.cc-tree{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid color-mix(in srgb,var(--pick) 40%,var(--line));max-width:620px}
.cc-tree li{display:flex;justify-content:space-between;gap:16px;padding:3px 0 3px 10px;font-size:13px;position:relative}
.cc-tree li::before{content:"";position:absolute;left:-14px;top:50%;width:12px;border-top:1px solid color-mix(in srgb,var(--pick) 40%,var(--line))}
.cc-tree li.sum{font-weight:600;border-top:1px dashed var(--line)}
.cc-tree li.total{font-size:14px}
.cc-tree b{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.cc-toggle::after{transition:none}}
.calc-cod-note{margin:-4px 0 6px 24px}
/* Dane firmy na zakładkach */
.co-panel{max-width:960px}
.co-addr{border-top:1px solid var(--line);padding:10px 0}
.co-addr summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.co-addr .co-addr-form{margin-top:10px}
.co-addr-del{margin-top:6px}
.co-countries .us-chip{padding:3px 8px}
.int-grid .ch-name .small{line-height:1.35}
.settings-nav a .muted{color:inherit;opacity:.75}
.us-perm{font-size:11px;font-weight:500;color:var(--muted);margin-left:8px}
.us-who{margin:-6px 0 8px}
/* Dział w kolorze działu (lista osób, karta osoby, godziny) — silniejsze niż ogólny wygląd pigułek */
.pill.us-dept{background:color-mix(in srgb,var(--dept) 22%,var(--panel));border-color:color-mix(in srgb,var(--dept) 60%,transparent);
  color:var(--ink);font-weight:600}
.pill.us-dept::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dept);margin-right:5px;vertical-align:1px}
.us-search input{min-width:260px;padding:var(--fld-pad-sm)}
.us-inactive summary{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.td-icon{display:inline-block;vertical-align:-.18em;flex:none;fill:none;color:inherit;overflow:visible}
.td-module-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--accent-text,var(--ink));background:var(--soft,var(--panel));border:1px solid var(--line);border-radius:12px;width:64px;height:64px}
.td-module-icon .td-icon{width:36px;height:36px}
.td-logo{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:none;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;line-height:0}
.td-logo img{display:block;max-width:100%;object-fit:contain}
.td-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.td-channel-logo{background:#fff;border:1px solid var(--line);border-radius:5px;object-fit:contain}
@media (forced-colors:active){.td-icon{color:CanvasText}.td-module-icon{color:ButtonText;background:ButtonFace;border-color:ButtonText}.td-logo{forced-color-adjust:none}}
/* Paweł 02.11.2026: dymek „Zapisano.” na dole ekranu (główny komunikat jest przy przycisku — app.js) */
.toast-saved{top:auto;right:auto;bottom:28px;left:50%;transform:translateX(-50%);font-size:15px;padding:12px 20px}
.toast-error{animation:none}
.save-inline{font-size:14px;padding:4px 12px}
/* Status konta (lista osób): aktywne — zielony, nieaktywne — czerwony, nieobecny — bursztyn (Paweł 02.11.2026) */
:root{--st-on:#1e8a4c;--st-off:#c62828;--st-away:#b26a00}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--st-on:#3ccf7e;--st-off:#ff6b6b;--st-away:#ffb547}}
html[data-theme=dark]{--st-on:#3ccf7e;--st-off:#ff6b6b;--st-away:#ffb547}
.pill.st-on,.pill.st-off,.pill.st-away{font-weight:700;color:var(--ink)}
.pill.st-on{background:color-mix(in srgb,var(--st-on) 20%,var(--panel));border-color:color-mix(in srgb,var(--st-on) 65%,transparent)}
.pill.st-off{background:color-mix(in srgb,var(--st-off) 18%,var(--panel));border-color:color-mix(in srgb,var(--st-off) 65%,transparent)}
.pill.st-away{background:color-mix(in srgb,var(--st-away) 18%,var(--panel));border-color:color-mix(in srgb,var(--st-away) 65%,transparent)}
.pill.st-on::before,.pill.st-off::before,.pill.st-away::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
.pill.st-on::before{background:var(--st-on)}.pill.st-off::before{background:var(--st-off)}.pill.st-away::before{background:var(--st-away)}
.chip-flag{border-radius:2px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent)}
/* Dane firmy: tagi po lewej, formularz po prawej; priorytet adresów; osoby w działach */
.co-split{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;align-items:start}
.co-tags{position:sticky;top:12px;max-height:calc(100vh - 40px);overflow:auto}
.co-taglist{margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.co-tag{border-top:1px solid var(--line);padding-top:6px}
.co-tag dt{font-size:13px}.co-tag dt code{font-size:12px;color:var(--pick)}
.co-tag dd{margin:2px 0 0;font-size:13px;word-break:break-word}
.co-priority ol{margin:6px 0 6px 18px;padding:0}
.co-dept-count{text-decoration:underline;text-underline-offset:2px}
.co-people{border-top:1px solid var(--line);padding:8px 0}
.co-people summary{cursor:pointer;display:flex;gap:8px;align-items:center}
@media (max-width:900px){.co-split{grid-template-columns:1fr}.co-tags{position:static;max-height:none}}
/* Moje integracje v2 — kafelki z krokami (Paweł 02.11.2026) */
.mi2-count{font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--pick) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--pick) 40%,var(--line))}
.mi2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:stretch}
.mi2-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  border-top:4px solid var(--st-away)}
.mi2-card.mi2-ok{border-top-color:var(--st-on)}
.mi2-card.mi2-error{border-top-color:var(--st-off)}
.mi2-card.mi2-planned,.mi2-card.mi2-demo{border-top-color:var(--line);border-style:dashed;border-top-style:solid}
.mi2-head{display:flex;gap:12px;align-items:center}
.mi2-logo{flex:none}
.mi2-title{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.mi2-title h3{margin:0;font-size:17px}
.mi2-state{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
.mi2-state::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:currentColor}
.mi2-on{color:var(--st-on);border-color:color-mix(in srgb,var(--st-on) 50%,transparent)}
.mi2-todo{color:var(--st-away);border-color:color-mix(in srgb,var(--st-away) 50%,transparent)}
.mi2-err{color:var(--st-off);border-color:color-mix(in srgb,var(--st-off) 50%,transparent)}
.mi2-soon{color:var(--muted)}
.mi2-what{margin:0;font-size:13px;color:var(--muted)}
.mi2-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mi2-step{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.mi2-step b{font-size:14px}
.mi2-step p{margin:4px 0 0}
.mi2-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.mi2-step.done .mi2-check{background:var(--st-on);border-color:var(--st-on);color:#fff}
.mi2-step.done > div > b{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.mi2-step .notion-link{margin-top:6px}
.mi2-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;color:var(--muted)}

/* Brak uprawnień: „Poproś o dostęp” + podświetlony wiersz w Role i uprawnienia (link z prośby) */
.access-bar{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:60;max-width:min(560px,calc(100% - 32px));
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:0 8px 24px rgb(0 0 0/.25)}
.access-req{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.access-req-to{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.role-row:has(th:target) > *{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
.role-row th:target{outline:2px solid var(--accent);outline-offset:-2px;scroll-margin-top:120px}

/* Logowanie (ADR 001) — strona bez paska modułów */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg)}
.auth-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 24px}
.auth-card h1{font-size:1.35rem;margin:.2em 0 .8em}
.auth-brand{font-size:1.2rem;margin:0}.auth-brand b{color:var(--accent)}
.auth-key{display:inline-block;font-size:1.05rem;letter-spacing:.05em;padding:4px 8px;word-break:break-all}
.auth-codes{columns:2;padding-left:1.2em}.auth-steps li{margin:.4em 0}
/* Paweł 05.11.2026: komunikaty na karcie logowania/rejestracji w kolorach programu (nie pomarańcz/zieleń z innej
   palety) — tło panelu z odrobiną akcentu, wyraźny pasek z lewej; błąd z paskiem w kolorze ostrzeżenia. */
.auth-card .warn-box,.auth-card .ok-box{background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--ink);
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px}
.auth-card .warn-box[role=alert]{border-left-color:var(--danger,#c62828);
  background:color-mix(in srgb,var(--danger,#c62828) 6%,var(--panel))}
.auth-card .tight{margin:0}.auth-card .tight-top{margin:.5em 0 0}
.auth-card .entered{margin:.4em 0 0;padding:0;list-style:none;font-size:13px}
.auth-card .entered b{font-variant-numeric:tabular-nums;letter-spacing:.03em}
.auth-card .field-hint{display:block;min-height:1.2em;font-size:12px;color:var(--muted);margin-top:3px}
.auth-card .field-hint.bad{color:var(--danger,#c62828)}.auth-card .field-hint.good{color:var(--accent)}
.auth-card .btn-back{display:inline-block;margin-top:4px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;
  color:var(--ink);text-decoration:none;background:var(--panel)}
.auth-card .btn-back:hover,.auth-card .btn-back:focus-visible{border-color:var(--accent)}
/* Logowanie: „Wyloguj” w pasku i przyciski karty osoby */
.logout-form{margin:0}
.btn-link{background:none;border:0;padding:4px 6px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;text-decoration:underline}
.btn-link:hover,.btn-link:focus-visible{color:var(--ink)}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* Filtr kanałów (Kanały i VAT) */
.cc-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px 0 4px}
.cc-filter label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.cc-filter select{font-size:var(--fld-size);padding:var(--fld-pad-sm)}
.cc-edit tr[hidden]{display:none}
.stack .cc-filter{margin:0 0 4px}
.stack .cc-filter label{flex-direction:row;align-items:center;font-weight:500;gap:8px}
.stack .cc-filter select{width:auto}
.stack .cc-edit select.cc-basis{display:block;margin-top:4px;font-size:12px}
/* Paweł 02.11.2026: czerwone „dymki” (aktywny moduł, aktywna zakładka, etykiety kafelków) zastąpione spokojnym,
   neutralnym wyróżnieniem — kolor marki tylko jako akcent (ikona aktywnej pozycji), nie tło. */
.modules a.on,.subnav a.on,.subnav a[aria-current="page"]{background:var(--quiet);color:var(--ink)}
.modules a.on svg,.subnav a.on svg,.subnav a[aria-current="page"] svg{color:var(--accent)}
.modules a:hover:not(.on),.subnav a:hover:not(.on){background:var(--quiet);color:var(--ink)}
.tile-tag{color:var(--quiet-ink);background:var(--quiet);font-weight:500;border-radius:999px;padding:2px 10px}
html[data-side] .modules a.on,html[data-side] .subnav a.on,html[data-side] .subnav a[aria-current="page"]{background:var(--side-on);color:var(--side-ink)}
html[data-side] .modules a.on svg,html[data-side] .subnav a.on svg,html[data-side] .subnav a[aria-current="page"] svg{color:inherit}

/* Pulpit modułu (02.11.2026) — siatka bez sztywnych szerokości (teksty w innych językach bywają dłuższe) */
:is(.module-dash,.rsp-dash) .dash-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:12px;margin-top:12px}
:is(.module-dash,.rsp-dash) .dash-stat{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
:is(.module-dash,.rsp-dash) .dash-stat b{font-size:1.6rem}
:is(.module-dash,.rsp-dash) .dash-links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
/* wybór języka na stronach logowania (02.11.2026) */
.auth-lang{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:-4px 0 8px}
.auth-lang .chip.on{font-weight:600}
.auth-lang .chip{display:inline-flex;align-items:center;gap:6px}
.auth-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.auth-cta .btn-secondary{font-size:1.05em;padding:10px 18px;text-decoration:none}
/* onboarding (02.11.2026) */
.onboarding .ob-steps{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:12px 0}
.onboarding .ob-steps li{display:flex;gap:6px;align-items:center}
.onboarding .ob-steps li.on a{font-weight:700}
/* Mój profil w zakładkach (03.11.2026) */
.pf{max-width:980px}
.pf-head{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
.pf-head h1{margin:0;font-size:24px}
.pf-head p{margin:2px 0 0}
.pf-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.pf-avatar{display:flex;gap:16px;align-items:flex-start}
.pf-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0 0 10px}
.pf-facts dt{color:var(--muted);font-size:13px}.pf-facts dd{margin:0}
.pf-colors{display:grid;gap:10px}
.pf-colors .color-row{display:flex;align-items:center;gap:10px}
.pf-colors input[type=color]{width:44px;height:32px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
@media (max-width:760px){.pf-cols{grid-template-columns:1fr}.pf-avatar{flex-direction:column}}
/* Wybór motywu — miniatury programu */
.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:8px 0 4px}
.tp-group{margin:18px 0 4px;font-size:15px}
.tp-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:8px;border:2px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}
.tp-card input{position:absolute;opacity:0;pointer-events:none}
.tp-card:hover{border-color:var(--muted)}
.tp-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.tp-card:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.tp-name{font-weight:700;font-size:14px;color:var(--ink);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tp-now{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px}
.tp-mini{display:grid;grid-template-columns:22% 1fr;grid-template-rows:14px 1fr;height:84px;border-radius:7px;overflow:hidden;
  border:1px solid var(--t-line,#d9dde3);background:var(--t-body,#f6f7f9)}
.tp-top{grid-column:1/3;background:var(--t-top,#fff);border-bottom:1px solid var(--t-line,#e5e7eb);display:flex;align-items:center;padding-left:5px}
.tp-top i{width:22px;height:5px;border-radius:3px;background:var(--t-acc,#B61207)}
.tp-side{background:var(--t-side,#fff);border-right:1px solid var(--t-line,#e5e7eb)}
.tp-body{position:relative;display:flex;flex-direction:column;gap:5px;padding:7px}
.tp-body i{display:block;height:10px;border-radius:6px}
.tp-buyer{width:62%;background:var(--t-buyer,#f1f2f4);border:1px solid var(--t-line,#e5e7eb)}
.tp-me{width:55%;align-self:flex-end;background:var(--t-me,#dff5ec)}
.tp-btn{width:34%;align-self:flex-end;margin-top:auto;background:var(--t-acc,#B61207)}
.tp-system .tp-mini{background:linear-gradient(135deg,#f6f7f9 50%,#121417 50%)}
.tp-system .tp-top{background:linear-gradient(90deg,#fff 50%,#1b1e23 50%)}
.tp-system .tp-side{--t-side:#fff}
.tp-light{--t-body:#F3F8F7;--t-top:#182A44;--t-side:#182A44;--t-line:#D6E5E4;--t-me:#DFF1EF;--t-acc:#0B7880}
.tp-stone{--t-body:#F3F0EA;--t-top:#3D3933;--t-side:#3D3933;--t-line:#DED7CC;--t-buyer:#F7F3EB;--t-me:#EEE5D5;--t-acc:#65513C}
.tp-blue{--t-body:#EDF2F7;--t-top:#2C5A7D;--t-side:#2C5A7D;--t-line:#24506F;--t-me:#DCEBFA;--t-acc:#1F6FB2}
.tp-dark{--t-body:#121417;--t-top:#1b1e23;--t-side:#1b1e23;--t-line:#2b2f36;--t-buyer:#23262c;--t-me:#173329}
.tp-navy{--t-body:#0D1B2A;--t-top:#112338;--t-side:#112338;--t-line:#1F3A5A;--t-buyer:#16304D;--t-me:#123A3A}
.tp-ettiene{--t-body:#F6F1E9;--t-top:#63283B;--t-side:#63283B;--t-line:#E9DED0;--t-buyer:#fff;--t-me:#DCE8E0;--t-acc:#63283B}
.tp-badsurfer{--t-body:#F1EFF8;--t-top:#453A94;--t-side:#453A94;--t-line:#D3CDE6;--t-buyer:#fff;--t-me:#E4DDFA;--t-acc:#6A4FB0}
.tp-badsurfer .tp-top{background:linear-gradient(90deg,#3A3080,#5340A3 55%,#7758B9)}
.tp-hoyberg{--t-body:#0E1830;--t-top:#141F36;--t-side:#1D2D4D;--t-line:#2B3F63;--t-buyer:#1C2D4C;--t-me:#1F3D63;--t-acc:#D03D51}
.tp-ettiene .tp-top i,.tp-stone .tp-top i,.tp-hoyberg .tp-top i,.tp-badsurfer .tp-top i,.tp-blue .tp-top i{background:#fff}
@media (prefers-reduced-motion:no-preference){.tp-card{transition:border-color .15s,box-shadow .15s}}

/* WA02 (audyt 03.11.2026): tekst „na plus” czytelny także na ciemnych panelach (≥4,5:1) */
:root{--positive-text:#15803d}
html[data-theme=dark]{--positive-text:#4ade80}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--positive-text:#4ade80}}
/* WA05 (audyt 03.11.2026): zwarte ostrzeżenie o ciszy kont i mały nagłówek rozmowy na telefonie */
.silence-sum{display:block}
.silence-sum summary{display:flex;gap:8px;align-items:flex-start;cursor:pointer;list-style:none}
.silence-sum summary::-webkit-details-marker{display:none}
.silence-sum ul{margin:8px 0 4px 26px;padding:0}.silence-sum li{margin:2px 0}.silence-sum p{margin:4px 0 0 26px}
.th-more>summary{display:none}
@media (max-width:760px){
  .thread-head h1{font-size:17px;line-height:1.3}
  .thread-head .meta{font-size:12px;margin:2px 0 4px}
  .th-more>summary{display:block;cursor:pointer;font-size:13px;font-weight:700;color:var(--accent-text);padding:2px 0}
  .detail>.thread-head:has(.th-more[open]){position:static}
}

.home-company{margin:-6px 0 14px;font-weight:700;color:var(--muted)}
.dm-action{border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:8px 0}.dm-action textarea{width:100%;font:inherit}
/* Menu modułów po lewej (Paweł 03.11.2026: „za mało widoczne u pracownika — niżej, np. jako menu po lewej”).
   Od 1024 px moduły są stałą kolumną po lewej; węższe okna i telefon — pasek u góry jak dotąd. */
@media (min-width:1024px){
  :root{--rail:212px}
  body{padding-left:var(--rail)}
  .topbar{min-height:56px}
  .topbar .brand{position:fixed;left:0;top:0;width:var(--rail);height:56px;display:flex;align-items:center;padding:0 18px;
    background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);z-index:31}
  .topbar .modules{position:fixed;left:0;top:56px;bottom:0;width:var(--rail);flex-direction:column;flex-wrap:nowrap;gap:2px;
    padding:12px 10px;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;z-index:30}
  .topbar .modules a{padding:9px 12px;gap:10px;white-space:normal;line-height:1.25;font-size:14.5px}
  .topbar .modules a.on{box-shadow:inset 3px 0 0 var(--accent)}
  html[data-side] .topbar .brand,html[data-side] .topbar .modules{background:var(--side-2);border-color:var(--side-2)}
}
.bn-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}.bn-head h1{margin:0}
/* Awatar nigdy nie jest ściskany w wierszu flex (Paweł 03.11.2026: „rozciągnięty”) */
.avatar{flex:none;aspect-ratio:1/1}
.pf-stack{display:grid;gap:16px}
.pf-avatar form{min-width:0;flex:1}.pf-avatar input[type=file]{max-width:100%}
/* Wyszukiwarka kafelków (Integracje firmy, Kanały sprzedaży) */
.card-search{position:relative;max-width:420px;margin:12px 0 4px}
.card-search input{width:100%;padding:9px 12px 9px 36px}
.card-search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex}
.ch-card[hidden],[data-search-group][hidden]{display:none}
/* Personalizacja (Paweł 03.11.2026 11:12: „za duże i mało czytelne”) — zwarte karty: motyw na całą szerokość,
   pod nim kolory i komunikaty obok siebie. */
.pf-lang{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pf-lang h2{font-size:17px;margin:0 0 10px}
.pz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:start}
.pz .us-card h2{font-size:17px;margin:0}
.pz-theme,.pz-look,.pz-msgs{grid-column:1/-1}
.pz-look-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.pz-look-grid h3{font-size:15px;margin:0 0 6px}
.pz-look-colors{border-left:1px solid var(--line);padding-left:20px}
@media (max-width:760px){.pz-look-grid{grid-template-columns:minmax(0,1fr)}.pz-look-colors{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}}
.pz-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}
.pz-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.pz .tp-group{margin:6px 0 2px;font-size:13px;color:var(--muted);font-weight:600}
.tp-compact{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin:4px 0 8px}
.tp-compact .tp-card{padding:6px;gap:6px;border-width:2px;border-radius:10px}
.tp-compact .tp-mini{height:50px;grid-template-rows:9px 1fr}
.tp-compact .tp-body{padding:4px;gap:3px}.tp-compact .tp-body i{height:6px}
.tp-compact .tp-top i{width:14px;height:3px}
.tp-compact .tp-name{font-size:13px}
.pz-swatches{display:grid;gap:6px}
.pz-swatch{display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:8px;cursor:pointer}
.pz-swatch:hover{background:var(--quiet)}
.pz-swatch input[type=color]{width:34px;height:26px;padding:1px;border:1px solid var(--line);border-radius:6px;background:var(--panel);flex:none}
.pz .cat-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px}
@media (max-width:860px){.pz{grid-template-columns:1fr}}
/* Kolumna folderów RESPONDER: długie nazwy kont i wykluczeń zawijają się zamiast poziomego paska (Paweł 03.11.2026) */
.account-view{min-width:0}
.account-view .check{white-space:normal;align-items:flex-start;overflow-wrap:anywhere;min-width:0}
.account-view .check input{margin-top:2px;flex:none}
.acc-row{display:flex;align-items:flex-start;gap:4px;min-width:0}
@media (min-width:761px){.folders{overflow-x:hidden}}
.more-threads{display:flex;justify-content:center;padding:10px}

/* Paweł 03.11.2026: ikona wylogowania obok napisu */
/* Przyciski paska górnego (Paweł 08.11.2026): Wyloguj — obwiedziony, z ikoną włącznika; Kontakt — kolorowy, w kolorze
   akcentu motywu. Kolory z currentColor/--accent, więc działają na jasnym pasku i na pasku bocznym motywów. */
.logout-btn{display:inline-flex;align-items:center;gap:var(--space-1);font:inherit;font-size:13px;font-weight:600;line-height:1;
  padding:7px 12px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;background:transparent;
  color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
.logout-btn:hover,.logout-btn:focus-visible{border-color:currentColor;background:color-mix(in srgb,currentColor 8%,transparent)}
.logout-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.logout-btn .td-icon{flex:none}
/* Paweł 03.11.2026: wyszukiwarki zawsze widoczne (ramka, tło, ikona), po kliknięciu wyraźna zmiana */
/* Wyszukiwarka (Paweł 08.11.2026): widoczna także bez kursora — grubsza ramka niż zwykłe pole, reszta z jednego wyglądu pól. */
input[type=search],.card-search input,.us-search input,.thread-search input,.channel-search input,.snip-search input{border-width:1.5px}
.card-search .card-search-ic{color:color-mix(in srgb,var(--ink) 60%,var(--muted))}

/* Rejestr narzędzi: „Do wypowiedzenia” na górze, wyraźnie oddzielone */
.tr-cancel{border:2px solid var(--danger,#c62828);border-radius:12px;padding:12px 16px;background:color-mix(in srgb,var(--danger,#c62828) 8%,var(--panel))}
.tr-cancel h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:18px;color:var(--danger,#c62828)}
.tr-cancel-row{padding:6px 0;border-top:1px solid color-mix(in srgb,var(--danger,#c62828) 25%,var(--line))}

/* Rejestr: narzędzie raz na liście, rozwijane; wyróżnienie, gdy ktoś z przypisanych odszedł */
.tr-tool>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;cursor:pointer;list-style:none}
.tr-tool>summary::-webkit-details-marker{display:none}
.tr-tool>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .12s;margin-right:4px}
.tr-tool[open]>summary::before{transform:rotate(45deg)}
.tr-tool>summary h3{margin:0;font-size:16px}
.tr-gone{border-left:4px solid var(--danger,#c62828)}
@media (prefers-reduced-motion:reduce){.tr-tool>summary::before{transition:none}}

/* Karta osoby: data końca współpracy widoczna po zaznaczeniu pola */
.us-end{display:grid;gap:4px}
.us-end:not(:has(input[type=checkbox]:checked)) .us-end-date{display:none}

/* Zakładki wewnątrz ustawień modułu (np. TebeaCALC) */
.subnav-inner{position:static;margin:0 0 8px;background:transparent;border-bottom:1px solid var(--line)}

/* Dane dostępowe integracji w kafelku */
.cred-box{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.cred-box>summary{cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px}
.cred-box form{margin-top:8px}
/* Kalkulator: kanały bez podłączonego konta (Paweł 03.11.2026 — kanały z integracji) */
.cc-table .cc-sep th{text-align:left;font-weight:600;padding-top:14px;border-top:2px solid var(--line)}
.cc-table .cc-nolink td{opacity:.78}

/* Paweł 03.11.2026: „Wyloguj” i podpis logowania czytelne na kolorowym górnym pasku (Niebieski, motywy marek) */
html[data-side] .topbar .logout-btn,html[data-side] .topbar .user-area .muted,html[data-side] .topbar .user-area small{color:var(--side-muted)}
html[data-side] .topbar .logout-btn:hover,html[data-side] .topbar .logout-btn:focus-visible{color:var(--side-ink)}
/* HøyBerg jako ciemny granat: zaznaczona pozycja menu na tle karty, wyraźne pola formularzy */
html[data-variant=hoyberg]{--fld-bg:#0F1C36;--fld-line:#6C86B0}   /* pola: zmienne */
html[data-variant=hoyberg] .role-matrix .role-group th{background:#1F3354}
/* Kontrast (recenzja e59c49b): wybrana pozycja na kolorowym pasku ma też znacznik, nie tylko odcień */
html[data-side] .subnav a.on, nie tylko odcień */
html[data-side] .subnav a[aria-current="page"],html[data-side] .modules a.on{box-shadow:inset 0 -2px 0 var(--side-ink)}
/* Paweł 04.11.2026: znacznik wersji ALFA/TEST na górnym pasku */
.badge-env{background:#FFD23F;color:#1b1f3b}
/* O01 (uwagi Oliwii 04.11.2026): wybór wklejek — przycisk „Wklejki” i „#” w polu odpowiedzi. Panel otwiera się NAD
   kursorem/polem (pole odpowiedzi jest przy dolnej krawędzi). Szerokości bez sztywnych wartości zależnych od tekstu. */
.snip-wrap{position:relative;display:flex;flex-direction:column}
.reply .templates .snip-open{border-color:var(--accent-text);color:var(--accent-text)}
.snip-panel{position:absolute;left:0;right:0;bottom:100%;z-index:30;margin-bottom:4px;display:flex;flex-direction:column;gap:6px;
  max-width:min(100%,36rem);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px}
.snip-panel[hidden]{display:none}
.snip-panel.at-caret{right:auto;width:min(100%,32rem)}
.snip-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.snip-search{flex:1 1 12rem;min-width:0;font-weight:400}
.snip-search input{width:100%;padding:var(--fld-pad-sm);background:var(--bg)}
.snip-scope{display:flex;flex-wrap:wrap;gap:4px}
.reply .snip-panel button{align-self:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;font-weight:600;font-size:13px}
.reply .snip-panel button[aria-pressed=true]{background:var(--soft);border-color:var(--accent-text);color:var(--ink)}
.reply .snip-panel .snip-close{border:0;font-size:20px;line-height:1;padding:2px 8px;margin-left:auto}
.snip-hint{margin:0}
.snip-list{list-style:none;margin:0;padding:0;max-height:min(40vh,22rem);overflow:auto;display:flex;flex-direction:column;gap:2px}
.snip-opt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:6px 8px;border-radius:8px;cursor:pointer;border:2px solid transparent}
.snip-opt[hidden]{display:none}
.snip-opt:hover{background:var(--quiet)}
.snip-opt.active,.snip-opt[aria-selected=true]{background:var(--soft);border-color:var(--accent-text)}
.snip-name{font-weight:600;overflow-wrap:anywhere}
.snip-peek{flex-basis:100%;overflow-wrap:anywhere;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.snip-empty,.snip-none{margin:4px 0}.snip-empty a,.snip-foot a{color:var(--accent-text);text-decoration:underline}
.snip-foot{margin:0}
.snip-open:focus-visible,.snip-panel button:focus-visible,.snip-search input:focus-visible,.snip-panel a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){.snip-panel,.snip-panel.at-caret{left:0!important;right:0;width:auto;max-width:none}.snip-list{max-height:45vh}}
/* /konto po zalogowaniu (wspólny pasek górny): strony konta jak w programie — treść w kolumnie do czytania */
main.page.konto-page{display:block;padding:20px 24px 40px;max-width:920px}
main.page.konto-page h1{margin-top:4px}
@media (max-width:760px){main.page.konto-page{padding:14px 16px 32px}}

/* Responder /konto (audyt U1, U2): odstęp treści od menu, karty bez punktorów, tabele .tbl jak .grid */
main.page > .stats-page, main.page > h1:first-child{margin-top:4px}
ul.stack{list-style:none;padding-left:0}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th,table.tbl td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.tbl thead th{font-weight:600;color:var(--muted);font-size:.9em}
/* Długie nazwy folderów (np. „Nieprzeczytane”, inne języki): nazwa się skraca, licznik zawsze widoczny */
.folders a .fname{min-width:0;overflow:hidden;text-overflow:ellipsis}
.folders a .count{flex-shrink:0}
.pre-wrap{white-space:pre-wrap}
/* Biuro w /konto (audyt B12): treść z marginesem jak section.detail — nie przylega do menu bocznego */
main.page.biuro-page{display:block;padding:20px 24px 40px;min-width:0}
@media (max-width:760px){main.page.biuro-page{padding:14px 16px 32px}}
/* Centrum Ustawień /konto (audyt S1) */
.settings-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:8px 0 16px}
.settings-tiles .tile{padding:14px 16px}
.konto-settings-nav{flex-wrap:wrap;margin:0 0 12px;border-radius:10px}
/* Integracje /konto pogrupowane (audyt S8) */
.int-group{margin:12px 0}.int-group h3{margin:14px 0 6px}
details.int-card{display:block;margin:6px 0}
.role-group th{text-align:left;padding-top:14px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line)}
/* /konto/kanaly: karty kanałów z wyszukiwarką (audyt S9) */
.channel-cards{list-style:none;margin:8px 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.channel-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 8px;text-decoration:none;color:inherit;height:100%}
.channel-card:hover,.channel-card:focus-visible{border-color:var(--accent)}
.channel-card .pill,.channel-card .small{grid-column:1/-1;justify-self:start}
.channel-search{display:flex;flex-direction:column;gap:4px;max-width:360px;margin-top:10px}
.channel-search input{padding:var(--fld-pad)}
/* TebeaPROMO → Decyzje cenowe (D04.1): tabela decyzji na pełną szerokość; formularze w środku jak zwykle */
.stack.decision-sec{max-width:none}
.decision-sec .table-scroll{max-width:100%}
.decision-sec .pill{white-space:nowrap;display:inline-block;margin:1px 0}

/* Kod QR logowania dwuetapowego — zawsze czarno-biały na białym polu (aparat telefonu), niezależnie od motywu */
.qr-box { display: block; width: max-content; margin: .5rem 0; padding: .5rem; background: #fff; border-radius: 8px; }
.qr-box svg { display: block; }

/* Audyt V02 (05.11.2026): boczne menu Ustawień także w /konto — strona ustawień jako .settings-shell w .page */
.konto-page .settings-shell.konto-settings{margin:-8px -8px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.konto-page .settings-shell.konto-settings > .settings-body{padding:16px 20px;min-width:0}
/* Audyt V12: wspólny wrapper tabel — przewija się sama tabela, nie cała strona */
.table-wrap{max-width:100%;overflow-x:auto;min-width:0}
.table-wrap > table{min-width:100%}
/* V04: macierz ról — nagłówek i kolumna opisu widoczne przy przewijaniu (lokalny scroll tabeli) */
.role-matrix-wrap{max-height:75vh;overflow:auto}
.role-matrix-wrap .role-matrix thead th{position:sticky;top:0;background:var(--panel);z-index:2}
.role-matrix-wrap .role-matrix th[scope=row]{position:sticky;left:0;background:var(--panel);z-index:1;min-width:220px}

/* Jasny Tebea R2 (Paweł 05.11.2026; AUDYT-PARZYSTOSCI-WIZUALNEJ-SAAS 03-SPECYFIKACJA + 09-KOREKTA): granatowa
   nawigacja #182A44, białe panele na tle mgły morskiej #F3F8F7, akcent morski #0B7880 (z THEME_COLORS — kolor główny
   osoby z /konto/styl.css ma pierwszeństwo, więc --accent NIE jest tu ustawiany), znacznik wybranej pozycji #57C7C4.
   Tylko data-variant=jasny — Niebieski i Premium (też data-theme=light) bez zmian. */
html[data-theme=light][data-variant=jasny]{--bg:#F3F8F7;--panel:#FFFFFF;--ink:#192A40;--muted:#607083;--line:#D6E5E4;
  --quiet:#EAF2F1;--quiet-ink:#3E5266;--side:#182A44;--side-2:#13223A;--side-ink:#FFFFFF;--side-muted:#C9D6E3;
  --side-hover:rgba(255,255,255,.10);--side-on:#22395C;--pick:#0B7880;--notif-bg:#57C7C4;--notif-ink:#0E2236}
html[data-variant=jasny] .modules a.on,html[data-variant=jasny] .subnav a.on,
html[data-variant=jasny] .subnav a[aria-current="page"]{box-shadow:inset 3px 0 #57C7C4}
html[data-variant=jasny] .settings-nav a.on,html[data-variant=jasny] .folders a.on{border-left-color:#0B7880}
html[data-variant=jasny] .avatar-initials{background:#DFF1EF;color:#086B73}
html[data-variant=jasny] .us-card,html[data-variant=jasny] .tile{border-radius:8px}
html[data-variant=jasny]{--fld-radius:5px;--fld-line:#718C8A}   /* pola: zmienne (Paweł 08.11.2026 — ciemniejsza ramka, ten sam odcień; dawniej #C9DAD9) */
html[data-variant=jasny] :is(input,select,textarea,button,a):focus-visible{outline:2px solid #0B7880;outline-offset:2px}
html[data-variant=jasny] .role-matrix .role-group th{background:#E6F3F2}

/* Piaskowiec (Paweł 06.11.2026; MOTYW-9-PROPOZYCJE/01-WYBOR-PAWLA-PIASKOWIEC, piaskowiec-wybor.json): ciepłe papierowe
   powierzchnie, grafitowo-brązowa nawigacja, taupe w zwykłych czynnościach. Akcent, dymki i notatka z THEME_COLORS
   (/konto/styl.css — własne kolory osoby mają pierwszeństwo), więc --accent nie jest tu ustawiany. Czerwień tylko dla
   błędów/usuwania. Tylko data-variant=stone — Granat, HøyBerg i pozostałe motywy bez zmian. */
html[data-theme=light][data-variant=stone]{--bg:#F3F0EA;--panel:#FFFEFA;--ink:#332F29;--muted:#6A6257;--line:#DED7CC;
  --soft:#F6F2EA;--quiet:#EFE6D6;--quiet-ink:#4F473D;--problem:#A34336;--problem-bg:#FAEDE8;--positive-text:#45613C;
  --note-bg:#F4E6C8;--note-line:#D9C391;--danger:#A34336;--me-bg:#EEE5D5;--me-line:#D8C9B0;
  --buyer-bg:#F7F3EB;--buyer-line:#E3DACB;
  --side:#3D3933;--side-2:#34302B;--side-ink:#F9F5ED;--side-muted:#CCC3B5;--side-hover:rgba(249,245,237,.10);
  --side-on:#61584C;--pick:#65513C;--notif-bg:#F4E6C8;--notif-ink:#3D3933}
html[data-variant=stone] .modules a.on,html[data-variant=stone] .subnav a.on,
html[data-variant=stone] .subnav a[aria-current="page"]{background:#61584C;color:#FFFFFF}
html[data-variant=stone] .settings-nav a.on,html[data-variant=stone] .folders a.on{border-left-color:#65513C}
html[data-variant=stone] .avatar-initials{background:#EFE6D6;color:#4F3F2E}
html[data-variant=stone]{--fld-line:#958779;--fld-bg:#FFFEFA}   /* pola: zmienne */
html[data-variant=stone] :is(input,select,textarea,button,a):focus-visible{outline:2px solid #65513C;outline-offset:2px}
html[data-variant=stone] .role-matrix .role-group th{background:#EFE6D6}
html[data-variant=stone]{--note-ink:#645021}
html[data-variant=stone] .note{border-left-color:#B08A3E}
html[data-variant=stone] .ok-box{background:#EDF0E2;border-color:#C9D2B5;color:#2F4329}
html[data-variant=stone] .warn-box{background:#F9EDCF;border-color:#E3C98B;color:#5A3F12}
html[data-variant=stone] .warn-box[role=alert]{background:#FAEDE8;border-color:#E5BDB5;color:#7F2F25}

/* V08 + Paweł 05.11.2026: licznik „wypełniono X/Y” przy grupach danych firmy i na zakładce */
.fill-count{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--quiet);color:var(--quiet-ink);white-space:nowrap}
.fill-count.done{background:color-mix(in srgb,var(--positive-text) 14%,var(--panel));color:var(--positive-text)}
.co-krs-row{margin-bottom:10px}
/* V08: pola w karcie danych firmy nie wychodzą poza kartę (fieldset ma domyślnie min-width:min-content) */
.co-split > *{min-width:0}
.co-split fieldset{min-width:0;max-width:100%}
.co-split input,.co-split select{max-width:100%}
/* Parzystość: strony ustawień z menu bocznym (dwa paski obok siebie, jak dawne Ustawienia) korzystają z szerokości
   ekranu; zwykłe strony /konto zostają w czytelnej kolumnie 920 px. */
main.page.konto-page:has(.settings-shell.konto-settings){max-width:1320px}

/* V09: karty integracji w siatce; formularz po rozwinięciu „Zmień dane dostępowe / Podłącz” */
.int-grid .ch-card.int-card{margin:0}
.int-card .ch-state{flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center}
.int-card .int-meta{flex-basis:100%}
.int-card .int-form > summary{list-style:none;cursor:pointer;display:inline-flex}
.int-card .int-form > summary::-webkit-details-marker{display:none}
.int-card .int-form[open] > summary{margin-bottom:8px}

/* V10: grafik dyżurów w /konto jak dawniej — wybór osoby, godziny i dzień wolny w zwartych, rozdzielonych kontrolkach */
.of-duty-table td{vertical-align:top}
.of-duty-table label.of-free-in{flex-direction:row;font-weight:500}
.of-duty-table .of-duty-hours input[type=time]{min-width:0}

/* V11: karta osoby — dane w parach, wskazana osoba wyróżniona po przejściu z karty */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0}
.kv dt{color:var(--muted);font-size:13px}.kv dd{margin:0;font-weight:600}
.hash-target{outline:2px solid var(--pick,var(--accent));outline-offset:2px}

/* Pulpit /konto jak dawny pulpit: trzy kolumny kafelków, „Pierwsze kroki” u góry jako pasek postępu */
main.page.konto-page:has(.konto-home){max-width:1140px}
.konto-home{padding-top:8px}
.konto-home .tiles-v2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.first-steps-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:10px 0 6px;
  border-left:4px solid var(--accent)}
.first-steps-bar h2{margin:0 0 2px;font-size:17px}.first-steps-bar p{margin:0 0 6px}
.first-steps-bar .fs-text{flex:1 1 320px;min-width:0}
/* Paweł 08.11.2026: przycisk symetrycznie — na środku wysokości paska, z tym samym odstępem od krawędzi co tekst
   (.btn ma domyślnie align-self:flex-start, które przyklejało go do góry). */
.first-steps-bar{padding:var(--space-4) var(--space-5);align-items:center}
.first-steps-bar>.btn{align-self:center;flex:none}
@media (max-width:640px){.first-steps-bar>.btn{flex:1 1 100%;text-align:center}}
.fs-progress{width:100%;max-width:360px;height:8px;accent-color:var(--accent)}

/* Dane firmy jak dawniej: krótkie pola obok siebie (Nazwa | skrócona; NIP | REGON | KRS; kod | miasto | kraj) */
.co-split fieldset.stack{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 12px;align-items:end}
.co-split .co-panel > h3{margin:0 0 8px}
.co-krs{align-items:end;gap:8px;margin-bottom:10px}

/* Paweł 06.11.2026: podsumowanie „Wypełniono X z Y części” na stronach ustawień */
.fill-summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px;border-left:4px solid var(--accent)}
.fill-summary .fs-progress{flex:1 1 200px}

/* Kanały sprzedaży (Paweł 06.11.2026 — „jak dawniej”): częstotliwość jako zwykły formularz, karty min. 290 px */
/* form#pobieranie: od 08.11.2026 zwykły formularz .stack w karcie (ui.card) — bez własnego układu. */
.channel-cards.ch-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.planned-channels > summary{cursor:pointer;font-weight:600}
.notif-all{margin:10px 0 4px}.konto-page .notif-list{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 14px;max-width:960px}
.konto-page .notif-list .notif:last-child{border-bottom:0}.notif-open{margin:0}
.us-card.is-focus{outline:2px solid var(--accent,#b91c1c);outline-offset:2px}  /* osoba z karty osoby (EKRAN-OSOBA-KONTEKST) */
.feedback-link{display:inline-flex;align-items:center;gap:var(--space-1);font-size:13px;font-weight:600;line-height:1;padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:999px;text-decoration:none;white-space:nowrap;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:inherit;transition:background-color .12s}  /* „Kontakt” (dawniej „Zgłoś”): przezroczyste tło w kolorze akcentu, napis w kolorze paska (Paweł 08.11.2026 22:09) */
.feedback-link svg{color:var(--accent-text)}
.feedback-link:hover{background:color-mix(in srgb,var(--accent) 28%,transparent)}
.feedback-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html[data-side] .topbar .feedback-link,html[data-side] .topbar .feedback-link:hover{color:inherit}
html[data-side] .topbar .feedback-link svg{color:inherit}
html[data-side] .topbar .feedback-link:focus-visible{outline-color:var(--side-ink)}
@media (prefers-reduced-motion:reduce){.logout-btn,.feedback-link{transition:none}}
@media (max-width:760px){.feedback-link span{display:none}}

/* Motyw „Niebieski” dopracowany (Paweł 07.11.2026, propozycja ChatGPT MOTYW-NIEBIESKI-2026-11-07, MANUAL-BLUE-THEME):
   chłodne tło, białe pasek i zakładki, akcent #0E7285 zamiast czerwieni, niebieski bok; czerwień tylko dla błędów.
   Na końcu pliku — po wcześniejszych definicjach blue (349, 489, 493, 1000) i --pick; tylko ten motyw. */
html[data-theme=light][data-variant=blue]{
  --bg:#F3F7F9;
  --panel:#FFFFFF;
  --ink:#1B3446;
  --muted:#546B78;
  --line:#D2DEE4;
  --accent:#0E7285;
  --accent-text:#0B6274;
  --accent-ink:#FFFFFF;
  --soft:#E5F2F5;
  --pick:#0E7285;
  --pick-ink:#FFFFFF;
  --side:#21566D;
  --side-2:#1A485D;
  --side-ink:#FFFFFF;
  --side-muted:#DCECF2;
  --side-hover:rgba(255,255,255,.10);
  --side-on:rgba(255,255,255,.15);
  --field-line:#6F8F9E;
  /* Kolory znaczeniowe są odrębne od akcentu motywu. */
  --problem:#B42318;
  --problem-bg:#FDECEB;
  --important-bg:#FFF0D5;
  --important-ink:#805000;
  --notif-bg:#0E7285;
  --notif-ink:#FFFFFF;
}
html[data-theme=light][data-variant=blue] .topbar{
  background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line);
}
html[data-theme=light][data-variant=blue] .topbar .user-area,
html[data-theme=light][data-variant=blue] .topbar .user-area .me,
html[data-theme=light][data-variant=blue] .topbar .bell{color:var(--muted)}
html[data-theme=light][data-variant=blue] .topbar .bell:hover,
html[data-theme=light][data-variant=blue] .topbar .bell.has{background:var(--soft);color:var(--accent-text)}
/* Marka i moduły na białym pasku tylko poniżej 1024 px; od 1024 px moduły są niebieską kolumną po lewej (html[data-side])
   — tam zostają kolory boku (jasny tekst na #1A485D), inaczej ciemny tekst na ciemnym tle. */
@media (max-width:1023px){
  html[data-theme=light][data-variant=blue] .brand,
  html[data-theme=light][data-variant=blue] .brand b{color:var(--ink)}
  html[data-theme=light][data-variant=blue] .topbar .modules a{color:var(--muted)}
  html[data-theme=light][data-variant=blue] .topbar .modules a:hover,
  html[data-theme=light][data-variant=blue] .topbar .modules a.on{background:var(--soft);color:var(--accent-text)}
}
html[data-theme=light][data-variant=blue] .subnav{
  background:var(--panel);border-bottom:1px solid var(--line);
}
html[data-theme=light][data-variant=blue] .subnav a{color:var(--muted)}
html[data-theme=light][data-variant=blue] .subnav a:hover,
html[data-theme=light][data-variant=blue] .subnav a.on,
html[data-theme=light][data-variant=blue] .subnav a[aria-current=page]{
  background:var(--soft);color:var(--accent-text);
}
html[data-theme=light][data-variant=blue] .subnav a.connect{
  border-color:var(--accent);color:var(--accent-text);
}
html[data-theme=light][data-variant=blue] .avatar-initials{
  background:var(--soft);color:var(--accent-text);
}
html[data-theme=light][data-variant=blue] .role-matrix .role-group th{
  background:var(--soft);color:var(--ink);
}
html[data-theme=light][data-variant=blue] .role-matrix .role-group-new th{
  background:var(--soft);border-top-color:var(--accent);
}
html[data-theme=light][data-variant=blue]{--fld-line:var(--field-line)}   /* pola: zmienne */
html[data-theme=light][data-variant=blue] :is(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--pick);outline-offset:3px;
}
html[data-theme=light][data-variant=blue] .foot{
  background:var(--panel);color:var(--muted);border-top-color:var(--line);
}
html[data-theme=light][data-variant=blue] .topbar .logout-btn,
html[data-theme=light][data-variant=blue] .topbar .user-area .muted,
html[data-theme=light][data-variant=blue] .topbar .user-area small,
html[data-theme=light][data-variant=blue] .topbar .me-today{color:var(--muted)}   /* biały pasek — nie jasny tekst boku */
html[data-theme=light][data-variant=blue] .topbar .logout-btn:hover,
html[data-theme=light][data-variant=blue] .topbar .logout-btn:focus-visible{color:var(--accent-text)}

/* EKRAN-RSP-NAWIGACJA: ustawienia TebeaRESPONDER — menu sekcji po lewej, jedna sekcja naraz (bez JS — wszystko). */
.rsp-settings-nav p{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rsp-settings-nav a.chip.on{background:var(--soft,rgba(0,0,0,.06));border-color:var(--accent);color:var(--accent-text);font-weight:700}
@media (min-width:1024px){
  .rsp-settings{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:24px;align-items:start}
  .rsp-settings-nav{position:sticky;top:72px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel)}
  .rsp-settings-nav p{flex-direction:column;align-items:stretch;gap:4px;margin-bottom:12px}
  .rsp-settings-nav p b{margin-bottom:2px}
  .rsp-settings-nav a.chip{display:block;border-radius:8px;text-align:left;white-space:normal}
}
.rsp-settings-body.tabbed>.rsp-sec>h2:first-child{margin-top:0}

/* Okienko powitalne z wyborem motywu (Paweł 07.11.2026) — nad stroną, przewijane w środku na małych ekranach. */
.fl-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; background: rgba(0, 0, 0, .3); overflow-y: auto; }   /* jaśniej — widać podgląd motywu */
.fl-dialog { width: min(760px, 100%); margin: 0; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.fl-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
body:has(.fl-backdrop) { overflow: hidden; }

/* Wybór jednej z kilku opcji jako równe kafelki (Paweł 07.11.2026, „Zgłoś”) — szerokość z siatki, nie z tekstu. */
.choice-grid { border: 0; padding: 0; margin: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.choice-grid > legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.stack .choice-grid label.choice-tile, .choice-tile { display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line, rgba(127,127,127,.35)); border-radius: 10px; cursor: pointer;
  font-weight: 400; height: 100%; box-sizing: border-box; }
.choice-tile input { margin-top: 3px; flex: none; }
.choice-tile span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-tile:has(input:checked) { border-color: var(--accent, #c0392b); box-shadow: inset 0 0 0 1px var(--accent, #c0392b); }

/* Role i uprawnienia (Paweł 07.11.2026): kafelki skoku do modułu i podgrupy wewnątrz segmentu modułu. */
.role-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 8px; margin: 12px 0; }
.role-tile { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); color: var(--ink); text-decoration: none; min-width: 0; }
.role-tile span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.role-tile:hover, .role-tile:focus-visible { border-color: var(--accent); }
.role-matrix .role-sub th { text-align: left; padding: 8px 10px 4px 34px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: transparent; }
.role-matrix tr[id^="seg-"] { scroll-margin-top: 80px; }

/* Osoby odpowiedzialne za moduły (Paweł 07.11.2026) — siatka pól, szerokość z siatki (dłuższe nazwy w innych językach). */
.owner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 10px 16px; }
.owner-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.owner-grid select { width: 100%; }

/* Pierwsze kroki: numer kroku i pasek postępu (Paweł 08.11.2026) */
div.fs-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 14px; }  /* tylko wiersz na stronie Pierwsze kroki — nie pasek <progress> na Pulpicie */
.fs-bar { flex: 1 1 200px; height: 10px; border: 0; border-radius: 999px; background: var(--soft); overflow: hidden;
  accent-color: var(--accent); appearance: none; }
.fs-bar::-webkit-progress-bar { background: var(--soft); border-radius: 999px; }
.fs-bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.fs-bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.fs-steps { list-style: none; padding-left: 0; }
.fs-num { font-size: .8em; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-text); }
.fs-done .fs-num::after, .fs-skipped .fs-num::after { content: " ✓"; }

/* Role: przełącznik całego modułu w nagłówku segmentu (Paweł 08.11.2026) */
.role-module th, .role-module td { background: var(--soft); }
.role-switch { position: relative; display: inline-flex; cursor: pointer; }
.role-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.role-switch-ui { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
.role-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.role-switch input:checked + .role-switch-ui { background: var(--accent); }
.role-switch input:checked + .role-switch-ui::after { transform: translateX(14px); }
.role-switch input:focus-visible + .role-switch-ui { outline: 3px solid var(--accent); outline-offset: 2px; }
.role-dim { opacity: .35; pointer-events: none; }

/* Biuro (Paweł 08.11.2026): drugi pasek pozycji wybranej grupy (Kadry / Czas pracy / Sprzęt i narzędzia) — roboczo. */
.subnav-2{padding-top:4px;padding-bottom:4px;background:transparent}
.subnav-2 a{font-weight:500}
/* Paweł 08.11.2026: wyróżnienie w polu odpowiedzi — treść podstawiona za tag i znacznik braku danych ⟦…⟧.
   Kolory to zmienne motywu (okno WYGLĄD ustawi je dla każdego motywu). */
:root{--tag-filled-bg:rgba(46,160,90,.28);--tag-missing-bg:rgba(220,90,40,.35)}
html[data-theme=dark]{--tag-filled-bg:rgba(60,207,126,.30);--tag-missing-bg:rgba(255,120,80,.38)}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--tag-filled-bg:rgba(60,207,126,.30);--tag-missing-bg:rgba(255,120,80,.38)}}
.reply-hl-wrap{position:relative}
.reply-hl{position:absolute;margin:0;white-space:pre-wrap;overflow-wrap:break-word;overflow:hidden;color:transparent;
  pointer-events:none;border-style:solid;border-color:transparent;z-index:0}
.reply-hl mark{color:transparent;border-radius:3px;padding:0}
.reply-hl mark.tag-filled{background:var(--tag-filled-bg)}
.reply-hl mark.tag-missing{background:var(--tag-missing-bg)}
textarea.reply-hl-area{position:relative;z-index:1;background:transparent !important}
.snip-tag{border-radius:3px;padding:0 2px;background:var(--tag-filled-bg)}
.snip-tag.missing{background:var(--tag-missing-bg)}
.snip-new-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.snip-new-grid{grid-template-columns:1fr}}
.snip-preview{white-space:pre-wrap;min-height:4em}
/* PROMO (Paweł 08.11.2026): koszty i marża na liście ofert — roboczo (okno WYGLĄD dopracuje). */
.po-costs{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin:var(--space-2) 0}
.po-table td.po-loss{color:var(--st-off);font-weight:700}

/* ===== Wspólne elementy (okno WYGLĄD, Paweł 08.11.2026) — makra w app/templates/_ui.html, opis w docs/wyglad-tebeadesk.md ===== */
/* Kafelek połączenia (integracja, kanał, program) — wzór „Mój profil → Moje integracje”. Pasek u góry w kolorze stanu. */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-4);align-items:stretch;
  list-style:none;margin:var(--space-2) 0 0;padding:0}
.tile-grid>li{display:flex;min-width:0}.tile-grid>li>.tile-card{flex:1}
.tile-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:var(--space-4);border:1px solid var(--line);
  border-top:4px solid var(--st-away);border-radius:var(--radius-l);background:var(--panel)}
.tile-card.tc-on{border-top-color:var(--st-on)}
.tile-card.tc-err{border-top-color:var(--st-off)}
.tile-card.tc-soon{border-style:dashed;border-top:4px solid var(--line)}
.tile-card[hidden]{display:none}
.tc-head{display:flex;gap:var(--space-3);align-items:center;min-width:0}
.tc-logo{flex:none;display:flex;line-height:0}
.tc-logo img,.tc-logo svg{width:40px;height:40px}
.tc-title{display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-start;min-width:0}
.tc-title h3{margin:0;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.tc-state{font-size:12px;font-weight:700;line-height:1.3;padding:2px 9px;border-radius:999px;color:var(--st-away);
  border:1px solid color-mix(in srgb,var(--st-away) 50%,transparent)}
.tc-state::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:currentColor}
.tc-on .tc-state{color:var(--st-on);border-color:color-mix(in srgb,var(--st-on) 50%,transparent)}
.tc-err .tc-state{color:var(--st-off);border-color:color-mix(in srgb,var(--st-off) 50%,transparent)}
.tc-soon .tc-state{color:var(--muted);border-color:var(--line)}
.tc-what{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.tc-meta{margin:0;font-size:12px;color:var(--muted)}
.tc-meta.ok{color:var(--st-on)}.tc-meta.warn{color:var(--st-off)}
.tc-foot,.tile-card>.int-form{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.tile-card>.int-form{display:block}
.tile-card.stack{max-width:none}
/* Lista z wyszukiwarką: grupy (np. Aktywni / Nieaktywni) z licznikiem, komunikat „nic nie pasuje”. */
.list-block{margin-top:var(--space-2)}
.list-group{margin-top:var(--space-5)}
.list-group-title{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);font-size:17px}
summary.list-group-title{cursor:pointer;font-weight:700}
.count-pill{display:inline-flex;align-items:center;min-width:24px;justify-content:center;padding:1px 8px;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--muted);background:var(--quiet);border:1px solid var(--line)}
.list-empty{margin:var(--space-3) 0;color:var(--muted)}
.card-search{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.card-search input{flex:1 1 240px}
.card-search-clear{flex:none}
/* Tabela listy: znaczniki (dział, stan, termin) w jednej linii — łamanie „Bez | działu” było nieczytelne; za szeroka
   tabela przewija się w .table-wrap. */
.tbl .pill{white-space:nowrap}
.us-table .actions .chip{white-space:nowrap}
/* Wyszukiwarka w wierszu filtrów (np. Domeny: szukaj + stan + archiwum) — nie zwęża się poniżej czytelnej szerokości. */
.row>.card-search{flex:1 1 280px;margin:0}
/* Ekran w kartach (ui.card): siatka kart sekcji; szeroka karta na cały wiersz; wiersze-rozwijanki w karcie. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:var(--space-4);align-items:start;margin-top:var(--space-3)}
.card-grid>.card-wide{grid-column:1/-1}
.ui-card{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;padding:var(--space-4) var(--space-5);border-radius:var(--radius-l)}
.ui-card-title{margin:0;font-size:17px}
.ui-card>.stack,.ui-card form.stack{max-width:none}
.card-subgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--space-3)}
.card-sub{border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--space-3);background:var(--bg)}
.card-sub h3{margin:0 0 var(--space-2);font-size:14px}.card-sub ul{margin:0;padding-left:18px}
.card-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}
.card-row{border-top:1px solid var(--line);padding:var(--space-2) var(--space-3);background:var(--panel)}
.card-row:first-child{border-top:0}
.card-row>summary{cursor:pointer;font-weight:600;padding:var(--space-1) 0}
.card-row[open]>summary{margin-bottom:var(--space-2)}
.card-row[hidden]{display:none}
/* Krótkie wartości (liczba, godzina, data) nie rozciągają się na całą szerokość formularza — szerokość z treści. */
.stack label>input:is([type=number],[inputmode=numeric],[inputmode=decimal],[type=time],[type=date]){align-self:flex-start;width:auto;min-width:8ch}
/* Lista pól wyboru (np. święta wolne) w kolumnach, gdy jest miejsce. */
.ui-card fieldset:has(>label.check:nth-of-type(6)){display:block;columns:3 240px;column-gap:var(--space-5)}   /* kolejność w dół kolumn (np. daty świąt) */
.ui-card fieldset:has(>label.check:nth-of-type(6))>label.check{break-inside:avoid;margin-bottom:var(--space-1)}
/* Kilka krótkich pól obok siebie (np. częstotliwość per kanał) — kolumny z siatki, etykieta nad polem. */
.field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:var(--space-3);align-items:end}
.field-grid>label{display:flex;flex-direction:column;gap:var(--space-1);font-size:13px;font-weight:600}
.field-grid>label>input{align-self:flex-start;width:auto;min-width:8ch}
/* Ustawienia modułu (ui.settings_layout): menu sekcji po lewej jak w Ustawieniach firmy, w ramce strony modułu. */
.mod-settings{min-height:0;margin-top:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:var(--panel)}
.mod-settings>.settings-body{padding:var(--space-4) var(--space-5) var(--space-5);min-width:0}
.mod-settings>.settings-nav a{overflow-wrap:anywhere}
.settings-body>h2:first-child,.settings-body.tabbed>.rsp-sec>h2:first-child{margin-top:0}
@media (min-width:761px){.mod-settings>.settings-nav{align-self:stretch}}
/* Kafelek kanału sprzedaży (Paweł 08.11.2026 22:09): logo marki w rozmiarze, w jakim je przygotowano (bez dodatkowej
   ramki i marginesu, które je pomniejszały) — 56 px, wyraźnie większe od piktogramów integracji. */
.tc-channel .tc-logo img,.tc-channel .tc-logo svg{width:56px;height:56px;object-fit:contain}
/* Karta pozycji listy z treścią (np. wklejki): nagłówek z nazwą i znacznikami, treść, akcje na dole — siatka kart
   o równej wysokości w rzędzie. Wspólny wzór dla list, w których pozycja ma więcej niż jeden wiersz treści. */
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:var(--space-3);list-style:none;margin:var(--space-3) 0 0;padding:0;align-items:stretch}
.item-card{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--space-3) var(--space-4);border:1px solid var(--line);
  border-radius:var(--radius-l);background:var(--panel)}
.item-card[hidden]{display:none}
.item-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2)}
.item-head b{font-size:15px}
.item-card>p{margin:0}
.item-card .pre-wrap{max-height:12em;overflow:auto;padding:var(--space-2);border-radius:var(--radius-m);background:var(--bg)}
.item-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--line)}
.item-foot details{flex-basis:100%}
.item-grid>.list-empty{grid-column:1/-1}
.item-foot>form{display:inline-flex;margin:0}
.item-foot>details{order:3}
.card-grid>form{grid-column:1/-1}   /* pojedynczy formularz-akcja między kartami (np. archiwizacja domeny) — w pełnym wierszu */
/* Podpis w polu odpowiedzi (Paweł 08.11.2026): przygaszone tło i cienka linia u dołu — warstwa .reply-hl pod polem. */
:root{--sig-bg:color-mix(in srgb,var(--muted) 16%,transparent);--sig-line:color-mix(in srgb,var(--muted) 55%,transparent)}
.reply-hl mark.reply-sig{background:var(--sig-bg);box-shadow:inset 0 -1px 0 var(--sig-line);border-radius:3px}
.item-head .pill{white-space:nowrap}   /* liczniki (np. „użyta 1 234 567 razy”) w jednej linii; nagłówek łamie się między znacznikami */
/* Foldery: pełne nazwy (dłuższe w innych językach) łamią się zamiast „Nieprzec…”. */
.folders a,.folders a .fname{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;hyphens:manual}
.folders a{font-size:14px;gap:4px;padding-right:8px}
.folders a .count{align-self:center}
/* Ustawienia → Przegląd: kafelki sekcji wyraźniejsze (Paweł 08.11.2026) — ikona w kolorowym polu, mocniejsza ramka,
   przy najechaniu ramka w kolorze akcentu i lekki cień. */
.settings-tiles{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--space-3)}
.settings-tiles .set-tile{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-3);
  padding:var(--space-4);border:1px solid color-mix(in srgb,var(--ink) 18%,var(--line));border-radius:var(--radius-l);
  transition:border-color .12s,box-shadow .12s}
.settings-tiles .set-tile:hover,.settings-tiles .set-tile:focus-visible{border-color:var(--accent);box-shadow:0 4px 16px color-mix(in srgb,var(--ink) 10%,transparent)}
.settings-tiles .set-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.set-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-m);
  background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent-text)}
.settings-tiles .tile-name{font-size:15px}
@media (prefers-reduced-motion:reduce){.settings-tiles .set-tile{transition:none}}
/* Obsada kont (TebeaRESPONDER → Ustawienia): każde konto w karcie; kolejność — numer i strzałki ↑↓ obok. */
fieldset.obs-card{border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-3) var(--space-4) var(--space-4);
  background:var(--panel);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
fieldset.obs-card>legend{font-size:15px;font-weight:700;padding:0 var(--space-1)}
.obs-order{display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap}
.obs-order input[type=number]{width:calc(3ch + 34px);min-width:0}
.obs-move{padding:2px 8px;line-height:1.2}
.obs-table td{vertical-align:middle}
fieldset.obs-receive{display:block;columns:3 200px;column-gap:var(--space-5)}
fieldset.obs-receive>label.check{break-inside:avoid;margin-bottom:var(--space-1)}
.obs-table td:first-child{white-space:nowrap;font-weight:600}
fieldset.obs-card>label>select{align-self:flex-start;max-width:100%;min-width:min(18rem,100%)}
/* Pierwsze kroki (WYGLĄD 08.11.2026): karta kroku — znak stanu, treść, akcje; wyraźny pasek postępu. */
.fs-steps{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-3) 0}
.fs-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius-l);background:var(--panel)}
.fs-card.fs-done{border-left-color:var(--st-on)}.fs-card.fs-skipped{border-left-color:var(--line)}
.fs-mark{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;font-weight:700;
  background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent-text)}
.fs-done .fs-mark{background:color-mix(in srgb,var(--st-on) 16%,var(--panel));color:var(--st-on)}
.fs-skipped .fs-mark{background:var(--quiet);color:var(--muted)}
.fs-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.fs-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2)}
.fs-actions form{margin:0}
.fs-done .fs-body b,.fs-skipped .fs-body b{color:var(--muted)}
@media (max-width:640px){.fs-card{grid-template-columns:auto minmax(0,1fr)}.fs-actions{grid-column:1/-1;justify-content:flex-start}}
.fs-bar{background:color-mix(in srgb,var(--ink) 10%,var(--panel));border:0}
.fs-bar::-webkit-progress-bar{background:color-mix(in srgb,var(--ink) 10%,var(--panel))}
/* Pusty ekran z działaniem (np. CALC → Opłaty rzeczywiste bez kont): komunikat + przycisk, co zrobić. */
.empty-state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin:var(--space-3) 0;max-width:40rem}
.empty-state p{margin:0}
.cap-more{margin-top:var(--space-1)}.cap-more>summary{cursor:pointer;color:var(--muted);font-size:12px}
.fs-card{border-left-color:var(--line)}.fs-card.fs-next{border-left-color:var(--accent);box-shadow:0 2px 12px color-mix(in srgb,var(--ink) 8%,transparent)}.fs-card.fs-done{border-left-color:var(--st-on)}

/* ===== Uwagi Pawła 08.11.2026 22:09 (WYGLĄD) ===== */
/* Kolory alarmowe — te same we wszystkich motywach, bo „Pilne” i długie czekanie muszą krzyczeć także w ciemnych.
   Biały na #DC2626 = 4,8:1; ciemny brąz na bursztynie = 9:1. */
:root{--alert-bg:#DC2626;--alert-ink:#FFFFFF;--caution-bg:#F59E0B;--caution-ink:#2A1600;--good-bg:#15803D;--good-ink:#FFFFFF}
html .pill.urgent{background:var(--alert-bg);border-color:var(--alert-bg);color:var(--alert-ink);font-weight:800}
html .pill.wait-warn{background:var(--caution-bg);border-color:var(--caution-bg);color:var(--caution-ink);font-weight:700}
html .pill.wait-alarm{background:var(--alert-bg);border-color:var(--alert-bg);color:var(--alert-ink);font-weight:700}

/* TebeaRESPONDER → Wiadomości: listwa notatek i pole odpowiedzi zawsze przy dolnej krawędzi kolumny, także przy
   krótkiej historii (kolumna wiadomości = kolumna flex; przy długiej historii pole jest na końcu, jak dotąd). */
.layout .detail:has(>.reply){display:flex;flex-direction:column}
.layout .detail:has(>.reply)>*{flex-shrink:0}
.layout .detail:has(>.reply)>.notes-bar{margin-top:auto}
/* Pozytywna ocena kupującego — zielone tło (listwa notatek i szuflada) */
.notes-rating{background:var(--good-bg);border-color:var(--good-bg);color:var(--good-ink);text-decoration:none}
.notes-rating:hover{filter:brightness(1.1)}
.note-rating{border-left-color:var(--good-bg);background:color-mix(in srgb,var(--good-bg) 12%,var(--panel))}
/* Zamknięcie szuflady notatek: „×” na środku kwadratowego przycisku (był to link w linii — znak uciekał w górę) */
.drawer-close{display:inline-grid;place-items:center;flex:none;padding:0;text-decoration:none}
.drawer-close:hover{border-color:var(--accent);color:var(--accent-text)}
/* Załączniki odpowiedzi: wyraźne pole wyboru i lista dodanych plików jak karty */
.reply label.file{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);
  border:1.5px dashed var(--fld-line);border-radius:var(--fld-radius);background:var(--fld-bg);color:var(--ink)}
.reply label.file:hover,.reply label.file:focus-within{border-color:var(--fld-focus)}
.reply label.file input{flex:1 1 14rem;min-width:0}
.att-chosen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.att-chosen li{padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-left:4px solid var(--good-bg);
  border-radius:var(--radius-m);background:color-mix(in srgb,var(--good-bg) 9%,var(--panel));color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.att-chosen li.warn-text{border-left-color:var(--alert-bg);background:color-mix(in srgb,var(--alert-bg) 9%,var(--panel))}

/* Ustawienia: grupy menu (Organizacja, Źródła danych, Dla całej firmy, Moje konto…) wyraźnie rozdzielone */
.settings-nav .settings-group{color:var(--ink);font-size:12px;margin-top:var(--space-2);padding:var(--space-3) 10px var(--space-1);
  border-top:1px solid var(--line);display:flex;align-items:center;gap:var(--space-2)}
.settings-nav .settings-group::before{content:"";width:4px;height:12px;border-radius:2px;background:var(--accent);flex:none}
.settings-nav .settings-group:first-child{margin-top:0;border-top:0;padding-top:2px}
html[data-side] .settings-nav .settings-group{color:var(--side-ink);border-top-color:color-mix(in srgb,var(--side-ink) 18%,transparent)}
@media (max-width:760px){.settings-nav .settings-group{width:100%;padding:var(--space-2) 4px 2px}}
/* Ustawienia → Przegląd: kafelek z ikoną w pełnym kolorze akcentu i strzałką „wejdź” — widać, że to przyciski */
.settings-tiles .set-tile{grid-template-columns:auto minmax(0,1fr) auto;background:color-mix(in srgb,var(--ink) 3%,var(--panel))}
.settings-tiles .set-tile::after{content:"›";align-self:center;font-size:22px;line-height:1;color:var(--muted);transition:transform .12s}
.settings-tiles .set-tile:hover::after{color:var(--accent-text);transform:translateX(2px)}
.set-ico{background:var(--accent);color:var(--accent-ink)}
.set-ico img{filter:brightness(0) invert(1)}
@media (prefers-reduced-motion:reduce){.settings-tiles .set-tile::after{transition:none}}
/* „wypełniono X/Y”: niepełne — bursztyn, pełne — zieleń */
.fill-count{background:var(--caution-bg);color:var(--caution-ink);font-weight:700}
.fill-count.done{background:var(--good-bg);color:var(--good-ink)}

/* Logowanie i rejestracja: języki równo w jednym rzędzie (gdy się zmieszczą), karta z akcentem marki */
.auth-card{max-width:480px;border-top:4px solid var(--accent);box-shadow:0 10px 32px color-mix(in srgb,var(--ink) 10%,transparent)}
.auth-brand{font-size:1.5rem;text-align:center;margin:0 0 var(--space-3)}
.auth-lang{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(5rem,100%),1fr));gap:var(--space-1);margin:0 0 var(--space-4)}
.auth-lang .chip{justify-content:center;gap:5px;padding:5px 6px;font-size:12px;min-width:0;white-space:nowrap}
.auth-lang .chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--ink)}
.auth-card .stack>button.btn,.auth-card form>button.btn{width:100%;justify-content:center}
.auth-cta{background:var(--bg)}
.fill-count.fill-info{background:var(--quiet);color:var(--quiet-ink);font-weight:600}   /* sama liczba (np. osób), nie stan wypełnienia */
/* Mój profil → Profil: wybór języka programu tak jak na logowaniu — równe kafelki w rzędzie */
.pf-lang .us-radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(7rem,100%),1fr));gap:var(--space-1)}
.pf-lang .us-radios .us-chip{justify-content:center;white-space:nowrap}

/* Role i uprawnienia (Paweł 08.11.2026 23:21): wiersz „cały moduł” — nazwa modułu i znacznik w jednym, równym
   układzie (znacznik nie łamie się w połowie); przełączniki włączone na zielono — kolor ze zmiennej, motyw może
   podać własny (--switch-on). Przełącznik zawsze na środku kolumny, jak ✓/— w pozostałych wierszach. */
:root{--switch-on:var(--good-bg)}
.role-mod-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--space-2)}
.role-mod-tag{font-size:11px;font-weight:600;line-height:1.4;padding:1px 8px;border-radius:999px;white-space:nowrap;
  color:var(--muted);border:1px solid var(--line);background:var(--panel)}
.role-module td{text-align:center;vertical-align:middle}
.role-switch{vertical-align:middle}
.role-switch input:checked + .role-switch-ui{background:var(--switch-on)}
.role-switch input:focus-visible + .role-switch-ui{outline-color:var(--switch-on)}
.role-switch input:checked + .role-switch-ui::after{background:#fff}
.role-mod-tag{margin-left:auto}   /* „cały moduł” przy prawej krawędzi kolumny, tuż przed kolumną SuperAdmina (Paweł 08.11.2026 23:23) */
/* Wiersz „cały moduł”: podświetlenie przez cały wiersz, także w przyklejonej kolumnie z nazwą modułu (Paweł 23:23) */
.role-matrix-wrap .role-matrix .role-module th[scope=row]{background:var(--soft)}