/* panel.css — portal carIMMO.
   KOLORYSTYKA MARKI — te same wartosci co carimmo.pl i strefa klienta
   (tailwind.config w index.html i templates/client_*.html):
     brand   #0F172A  — granat: topbar, naglowki, tekst, aktywna zakladka
     surface #F8FAFC  — tlo strony
     cta     #DC2626  — czerwien: glowne przyciski akcji
     cta-dark#B91C1C  — czerwien przyciemniona (hover)
   Statusy pozostaja pastelowe i czytelne: zielony=dobrze, zolty=uwaga, czerwony=zle.
   CSS w pliku (nie inline), zeby CSP moglo blokowac 'unsafe-inline'.
   Font: Inter jak na stronie, ale BEZ pobierania z sieci (CSP) — fallback systemowy. */

:root{
  --brand:#0F172A;
  --bg:#F8FAFC; --surface:#FFFFFF; --line:#E2E8F0; --line-strong:#CBD5E1;
  --ink:#0F172A; --muted:#475569; --faint:#94A3B8;
  --accent:#DC2626; --accent-hover:#B91C1C;      /* CTA marki */
  --accent-ink:#0F172A;                           /* tekst akcentowany = granat */
  --accent-soft:#EEF2F7;                          /* aktywna zakladka: jasny granat */
  --ok:#15803D; --ok-soft:#E7F4EC; --warn:#92700E; --warn-soft:#FAF3DC;
  --err:#B91C1C; --err-soft:#FBE9E9;
  --info:#1D4ED8; --info-soft:#E4ECFB;            /* ruch po stronie partnera */
  --chip:#F1F5F9; --hover:#F8FAFC;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.05);
  --r:10px;
  color-scheme: light;
}
/* CIEMNY MOTYW WYŁĄCZONY 2026-08-16 (v0.17.0).
   Powód: tła kart, kafelków, uwag i alertów są w tym arkuszu zahardkodowane na jasne
   (#fff, #FEF3C7, #FEE2E2, pastele kafelków), a ciemny motyw rozjaśniał wyłącznie zmienne
   tekstowe (--ink, --accent-ink). Efekt: jasny tekst na jasnym tle — kontrast 1,01–1,23:1
   w ~15 miejscach, w tym cały panel klienta i alerty. Zgłosił Karol (niewidoczny kafelek
   kontaktu), audyt wykazał, że to był 1 z 15 takich miejsc.
   Powrót do ciemnego motywu = najpierw tokenizacja WSZYSTKICH teł, nie samych kolorów tekstu.
   Uwaga: ten arkusz obsługuje też portal partnera — obie strefy jadą teraz na jednym motywie.
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1220; --surface:#0F172A; --line:#1E293B; --line-strong:#334155;
    --ink:#E2E8F0; --muted:#94A3B8; --faint:#64748B;
    --accent:#EF4444; --accent-hover:#DC2626;
    --accent-ink:#E2E8F0;
    --accent-soft:#1E293B;
    --ok:#4ADE80; --ok-soft:#14261C; --warn:#FBBF24; --warn-soft:#2A2210;
    --err:#F87171; --err-soft:#2A1616;
    --info:#7EA8F8; --info-soft:#182642;
    --chip:#1E293B; --hover:#162031;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.35);
  }
}
*/

*{box-sizing:border-box}
/* Tlo biale jak w strefie klienta; sekcje (pasek info, stopka) na --bg */
body{margin:0;background:var(--surface);color:var(--ink);min-height:100dvh;
  display:flex;flex-direction:column;
  font:15px/1.55 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
svg{flex:none}
button,select,input,textarea{font:inherit;color:inherit}
::placeholder{color:var(--faint)}
a{color:var(--accent-ink)}

/* --- Topbar (wzorzec: nav strefy klienta — biale tlo, rozmycie, cienka linia) --- */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* Odstepy 1:1 ze strefa klienta: wysokosc 64 px, logo + powrot po lewej (gap 10 px / 2.5) */
.topbar-in{padding:0 24px;min-height:64px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
/* Powrot na carimmo.pl — po PRAWEJ stronie paska, jak w strefie klienta */
.powrot{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;
  white-space:nowrap;transition:color .15s;margin-left:auto}
.powrot:hover{color:var(--ink)}
@media (max-width:880px){.powrot{display:none}}
/* Zakladki tuz za logo (po lewej), powrot i wyloguj dosuniete do prawej */
.topbar-in .nav{flex:0 1 auto;justify-content:flex-start}
/* Logo: 18 px, "car" cienkie, "IMMO" bardzo grube — dokladnie jak w strefie klienta */
.brand-name{font-size:18px;letter-spacing:-.025em;white-space:nowrap;line-height:1}
.brand-name .l{font-weight:300}
.brand-name .h{font-weight:900}
.brand-name small{font-weight:500;color:var(--muted);margin-left:7px;font-size:13px}
.nav{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;
  color:var(--muted);font-weight:600;font-size:14px;text-decoration:none;
  white-space:nowrap;transition:background .15s,color .15s;min-height:44px}
.nav a:hover{background:var(--hover);color:var(--ink)}
.nav a.on{background:var(--accent-soft);color:var(--accent-ink)}
/* Kto zalogowany — obok „Wyloguj”: e-mail u góry, firma pod nim (mniejsza) */
.kto{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;
  white-space:nowrap;margin-left:4px}
.kto-mail{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.kto-firma{font-size:11px;color:var(--faint)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
@media (max-width:880px){.kto{display:none}}
.who{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;white-space:nowrap}
.who .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.logout{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
  border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);
  color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;min-height:40px;
  transition:border-color .15s,color .15s}
.logout:hover{color:var(--err);border-color:var(--err)}
.logout-form{margin:0}
@media (max-width:880px){
  .topbar-in{padding:8px 12px;flex-wrap:wrap;gap:8px}
  .who{display:none}
  .logout .lo-txt{display:none}
}

/* --- Pasek informacyjny pod nawigacja (wzorzec strefy klienta) --- */
.pasek-info{background:var(--bg);border-bottom:1px solid var(--line)}
.pasek-in{padding:10px 26px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;font-size:12px;color:var(--faint)}
.pasek-prawa{font-weight:600;color:var(--muted)}
@media (max-width:880px){.pasek-in{padding:8px 12px;font-size:11.5px}}

/* --- Stopka (wzorzec strefy klienta) --- */
.stopka{border-top:1px solid var(--line);background:var(--bg);padding:28px 26px;
  text-align:center;color:var(--faint);font-size:13px}
.stopka p{margin:0 0 4px}
.stopka a{color:var(--faint);text-decoration:none}
.stopka a:hover{color:var(--ink)}

/* --- Layout --- */
.wrap{flex:1;padding:28px 26px 48px}
h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.sub{color:var(--muted);font-size:14px;margin:0 0 18px}
/* Karty jak w strefie klienta: SZARE tlo, delikatna ramka, duze zaokraglenie, BEZ cienia */
.card{background:var(--bg);border:1px solid var(--line);border-radius:16px}
.pad{padding:24px}
@media (max-width:880px){.pad{padding:18px}}
.l2{color:var(--muted);font-size:12.5px;margin-top:2px}
footer{padding:0 26px 40px;color:var(--faint);font-size:12.5px}
@media (max-width:880px){.wrap{padding:16px 12px 48px}footer{padding:0 12px 32px}}

/* --- Formularze / przyciski --- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
/* Pole na szarej karcie musi byc biale — inaczej zlewa sie z tlem */
.field input{width:100%;padding:11px 14px;border:1px solid var(--line-strong);
  border-radius:10px;background:var(--surface);min-height:46px}
.field input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border:0;border-radius:8px;background:var(--accent);color:#fff;
  font-weight:700;cursor:pointer;min-height:44px;transition:background .15s;text-decoration:none}
.btn:hover{background:var(--accent-hover)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--chip);color:var(--ink);font-weight:600}
.btn.ghost:hover{background:var(--line)}
.btn.dark{background:var(--brand);color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Komunikaty --- */
.note{display:flex;gap:9px;align-items:flex-start;border-radius:8px;padding:10px 12px;
  font-size:13.5px;margin-bottom:14px}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.err{background:var(--err-soft);color:var(--err)}

/* --- Ekran logowania (uklad jak w strefie klienta: wysrodkowany, ikona nad tytulem) --- */
.strona-logowania{min-height:100dvh;display:flex;flex-direction:column}
.srodek{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 16px}
.login-box{width:min(420px,100%);text-align:center}
.login-box .card{text-align:left}
/* Ikona nad tytulem: 56x56, zaokraglenie 16 px, ikona 26 px — jak w strefie klienta */
.ikona-naglowka{width:56px;height:56px;border-radius:16px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.ikona-naglowka.zielona{background:var(--ok-soft);color:var(--ok)}
.ikona-naglowka.czerwona{background:var(--err-soft);color:var(--err)}
.login-title{font-size:24px;font-weight:900;margin:0 0 8px;letter-spacing:-.03em}
.login-sub{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 24px}
.btn.szeroki{width:100%}
.drobne{color:var(--faint);font-size:12.5px;margin:12px 0 0;line-height:1.5}
.srodkowany{text-align:center}

/* =================== TABELA PROTOKOŁÓW (F2) =================== */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
/* Wezsza szukajka — Karol: „za duzo zajmuje wyszukiwarka tekstowa" */
.search{position:relative;flex:0 1 250px;min-width:180px;max-width:280px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search input{width:100%;padding:11px 14px 11px 38px;border:1px solid var(--line-strong);
  border-radius:10px;background:var(--surface);min-height:46px}
.toolbar select{padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--surface);cursor:pointer;min-height:46px;max-width:200px}
.check{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px;
  cursor:pointer;user-select:none;min-height:44px}
.check input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.countline{color:var(--muted);font-size:13.5px;margin:0 2px 12px}
.countline b{color:var(--ink);font-variant-numeric:tabular-nums}

.tablebox{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;padding:12px 14px;color:var(--muted);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--bg)}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--surface)}
tbody tr:last-child td{border-bottom:0}
td.pusto{text-align:center;color:var(--faint);padding:36px 14px}
.dt{font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  color:var(--muted);letter-spacing:.02em;margin-top:2px}
.kopiuj,.mono{cursor:pointer;border-bottom:1px dashed transparent}
.kopiuj:hover,.mono:hover{border-bottom-color:var(--line-strong);color:var(--ink)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
.b-immo{background:#E8EDF3;color:var(--brand)}
.b-gps{background:#E6EEFB;color:#1E40AF}
.b-gpsd{background:var(--warn-soft);color:var(--warn)}
.b-arch{background:var(--chip);color:var(--muted)}
.b-test{background:var(--warn-soft);color:var(--warn)}
.firm{display:inline-block;padding:3px 10px;border-radius:7px;background:var(--chip);
  font-size:12px;font-weight:600;color:var(--muted)}

.docs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.doc-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;
  border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);
  color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;min-height:36px;
  text-decoration:none;transition:border-color .15s,color .15s,background .15s;white-space:nowrap}
.doc-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--err-soft)}
.nodocs{color:var(--faint);font-size:12.5px}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;max-width:90vw}
#toast.on{opacity:1}
:root[data-theme] #toast,body #toast{box-shadow:0 8px 24px rgba(15,23,42,.25)}

/* Telefon: tabela zamienia sie w karty (naglowki z atrybutu data-l) */
@media (max-width:880px){
  table.resp thead{display:none}
  table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%}
  /* ⚠️ display:block nadpisuje atrybut [hidden] (styl autora > styl przegladarki),
     przez co filtr NIE chowal wierszy na telefonie — na PC dzialal, bo tam tr nie ma
     wlasnego display. Ta regula przywraca chowanie. */
  table.resp tr[hidden]{display:none}
  table.resp tr{border-bottom:1px solid var(--line);padding:14px 16px}
  table.resp tr:last-child{border-bottom:0}
  table.resp td{border:0;padding:3px 0}
  /* Krawedz statusu na telefonie: wiersz-karta dostaje cien, komorka juz nie */
  #tabela-rozliczen tr[data-status]{box-shadow:inset 3px 0 0 var(--edge, transparent)}
  #tabela-rozliczen tr[data-status] td:first-child{box-shadow:none}
  table.resp td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;
    text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:8px 0 2px}
  .docs{margin-top:10px}
  .toolbar select{max-width:none;flex:1 1 140px}
}

/* =================== ROZLICZENIA (F3) =================== */
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{text-align:right}
tfoot td{padding:12px 14px;font-weight:700;border-top:2px solid var(--line-strong);
  font-variant-numeric:tabular-nums;background:var(--bg)}
.s-ok{background:var(--ok-soft);color:var(--ok)}
.s-warn{background:var(--warn-soft);color:var(--warn)}
/* Niebieski = ruch po stronie partnera (Do wpisania kwot); zolty zostaje dla ruchu
   ETASK (Do rozliczenia). Wczesniej oba byly zolte i nie dalo sie ich odroznic. */
.s-info{background:var(--info-soft);color:var(--info)}

/* Wiersze barwione statusem — na rzut oka widac, co rozliczone (zielone), co czeka
   na ETASK (zolte: FV do wystawienia / gotowka do odebrania), co na partnera
   (niebieskie). „Nie rozliczamy" zostaje neutralne. Delikatny mix z tlem, zeby
   kolory kwot i przyciskow nie utonely (Karol, 2026-08-11). */
#tabela-rozliczen tr[data-status="do_wpisania"]{--tint:var(--info-soft);--edge:var(--info)}
#tabela-rozliczen tr[data-status="do_rozliczenia"]{--tint:var(--warn-soft);--edge:var(--warn)}
#tabela-rozliczen tr[data-status="rozliczone"]{--tint:var(--ok-soft);--edge:var(--ok)}
#tabela-rozliczen tr[data-status]{background:color-mix(in srgb, var(--tint, transparent) 38%, var(--surface))}
#tabela-rozliczen tr[data-status]:hover{background:color-mix(in srgb, var(--tint, transparent) 60%, var(--surface))}
/* Krawedz koloru: na desktopie inset w pierwszej komorce (border na tr jest zawodny),
   na telefonie caly wiersz jest blokiem, wiec cien idzie na tr — patrz media query. */
#tabela-rozliczen tr[data-status] td:first-child{box-shadow:inset 3px 0 0 var(--edge, transparent)}
.s-err{background:var(--err-soft);color:var(--err)}
.s-neutral{background:var(--chip);color:var(--muted)}
/* „Nie rozliczamy" — pozycja wylaczona z rozliczen. Przerywana ramka i brak tla
   odrozniaja ja od statusow, ktore czekaja na akcje (te maja pelne tlo). */
.s-skip{background:transparent;color:var(--faint);border:1px dashed var(--line-strong)}
/* Znacznik powtornego montazu w tym samym aucie — portal wykrywa go sam po VIN */
.chip-serwis{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:6px;
  background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:700}
/* Powody „nie rozliczamy" — jeden pod drugim, bo teksty sa dlugie */
.radio-kolumna{display:flex;flex-direction:column;gap:8px}
/* Pigulki filtra — jedno klikniecie zamiast listy rozwijanej, licznik = ile pozycji */
/* Karta kolejki „do wpisania kwot" — pierwsza rzecz na ekranie.
   Niebieska krawedz = ten sam jezyk kolorow co status „Do wpisania kwot" (ruch partnera). */
.kolejka{margin:0 0 16px;border-left:3px solid var(--info)}
.kolejka-head{padding:14px 18px 8px;font-weight:700;font-size:14px}
.kolejka-head b{font-size:15px}
.kolejka-head .l2{display:inline;font-weight:500}
.pigulki{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pigulki.male{margin:0}
/* Zakres dat od–do obok guzikow okresu */
.zakres{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.zakres input{padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--surface);min-height:38px;font-size:12.5px}
@media (max-width:880px){.zakres{width:100%}.zakres input{flex:1}}
.pigulki.male .pigulka{padding:6px 11px;min-height:38px;font-size:12.5px}
/* „FV do wystawienia" — nasza zaleglosc, wiec ma sie rzucac w oczy */
.uwaga-fv{color:var(--warn);font-weight:700}
.pigulka{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s;min-height:38px}
.pigulka:hover{color:var(--ink);border-color:var(--muted)}
.pigulka b{font-weight:800;font-size:12px;padding:1px 7px;border-radius:999px;
  background:var(--chip);color:var(--muted)}
/* Dopisek „w tym X bez FV" w pigulce Do rozliczenia — FV do wystawienia to podzbior
   tego statusu, nie osobny status (zgloszenie Karola 2026-08-11) */
.pigulka .w-tym{font-size:11px;font-weight:600;opacity:.75;white-space:nowrap}
.pigulka.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pigulka.on b{background:rgba(255,255,255,.22);color:#fff}
/* Rozwijana sciagawka ze statusami */
.pomoc{margin:0 0 16px;font-size:13px;max-width:760px}
.pomoc summary{cursor:pointer;font-weight:600;color:var(--accent-ink);padding:6px 0}
.pomoc dl{margin:8px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.pomoc dt{font-weight:700;color:var(--ink);margin-top:10px}
.pomoc dt:first-child{margin-top:0}
.pomoc dd{margin:2px 0 0;color:var(--muted);line-height:1.5}
.legenda{display:flex;flex-direction:column;gap:4px;margin:0 0 18px;padding:12px 14px;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;
  background:var(--bg);font-size:12.5px;line-height:1.5;color:var(--muted);max-width:760px}
.legenda b{color:var(--ink)}
/* Rozliczenie bez protokolu na liscie firmy — wymaga sprawdzenia przypisania */
.chip-uwaga{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:6px;
  background:var(--err-soft);color:var(--err);font-size:11px;font-weight:700}
.status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
.akcje{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.inline-form{display:inline-flex;gap:5px;align-items:center;margin:0}
.mini-input{width:100px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:7px;
  background:var(--surface);font-size:12px;min-height:34px}

.sumgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media (max-width:880px){.sumgrid{grid-template-columns:repeat(2,1fr)}}
.kpi-label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kpi-big{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px}
.kpi-ok{color:var(--ok)}
.kpi-warn{color:var(--warn)}
.kpi{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:var(--muted);padding:3px 0}
.kpi b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.divider{height:1px;background:var(--line);margin:14px 0}

/* --- Okno kreatora: telefon = pełny ekran, przyciski zawsze na dole --- */
dialog#okno-rozliczenia{border:0;border-radius:12px;background:var(--surface);color:var(--ink);
  box-shadow:0 10px 40px rgba(15,23,42,.3);padding:0;
  width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 48px)}
dialog#okno-rozliczenia::backdrop{background:rgba(15,23,42,.5)}
.okno-form{display:flex;flex-direction:column;max-height:calc(100dvh - 48px)}
.okno-head{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--line);flex:none}
.okno-body{flex:1;overflow-y:auto;padding:16px 20px;overscroll-behavior:contain}
.okno-foot{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line);
  background:var(--surface);flex:none}
@media (max-width:640px){
  dialog#okno-rozliczenia{width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;
    border-radius:0;margin:0}
  .okno-form{max-height:100dvh;height:100dvh}
}
.radio-rzad{display:flex;gap:16px;flex-wrap:wrap}
.field select{width:100%;padding:11px 14px;border:1px solid var(--line-strong);
  border-radius:10px;background:var(--surface);min-height:46px}
.dodaj-rozliczenie{white-space:nowrap}
/* Komentarz pod pojazdem — Karol notuje tu rodzaj montazu i koszty wlasne */
.komentarz{margin-top:5px;padding:4px 8px;border-left:2px solid var(--line-strong);
  font-size:11.5px;color:var(--muted);line-height:1.4;max-width:280px;white-space:normal}
.field textarea{width:100%;padding:11px 14px;border:1px solid var(--line-strong);
  border-radius:10px;background:var(--surface);resize:vertical;min-height:64px;line-height:1.5}

@media (prefers-reduced-motion: reduce){*{transition:none !important}}

/* --- Wartosci kopiowane kliknieciem (VIN, nr rej, mail, telefon) --------------- */
.kopiuj{cursor:pointer;align-items:center;gap:5px;
  border-radius:4px;transition:color .12s,background .12s}
/* Nr rej i VIN siedza w DIV-ach i musza zostac osobnymi wierszami — inline-flex
   zlepilby je z nazwa pojazdu („BMW X5DX 87050WBA11EV…"). */
div.kopiuj{display:flex;width:fit-content}
span.kopiuj{display:inline-flex}
.kopiuj:hover{color:var(--ink);background:var(--chip)}
.kopiuj svg{width:12px;height:12px;flex:none;opacity:0;transition:opacity .12s;color:var(--faint)}
.kopiuj:hover svg{opacity:.85}
.kopiuj:active{background:var(--accent-soft)}
/* Na ekranach dotykowych nie ma najechania — ikonka jest widoczna od razu, lekko */
@media (hover:none){.kopiuj svg{opacity:.45}}

/* --- Powrot do wiersza po zapisie (kotwica #w-...) ---------------------------- */
tr[id]{scroll-margin-top:96px}
tr:target > td{background:var(--accent-soft)}
tr:target > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* Kolumna „Pojazd": nazwa, nr rejestracyjny i VIN — kazde w OSOBNYM wierszu.
   (Karol: „nazwa nowy wiersz, nr rej nowy wiersz, VIN".) */
td[data-l="Pojazd"] b{display:block}
td[data-l="Pojazd"] > div{margin-top:3px}

/* --- Trafienie wyszukiwania: widac, KTORE pole pasuje do frazy ------------------ */
.trafienie{background:var(--warn-soft);color:var(--warn);font-weight:700;
  border-radius:4px;padding:0 3px;margin:0 -3px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent)}
.trafienie.kopiuj:hover{background:var(--warn-soft)}

/* =================== MATERIAŁY (F4) =================== */
.mat-naglowek{font-size:16px;font-weight:800;margin:26px 0 10px;letter-spacing:-.02em}
.mat-naglowek:first-of-type{margin-top:6px}
.mat-lista{display:flex;flex-direction:column;gap:2px;padding:10px 14px}
.mat-wiersz{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--line)}
.mat-wiersz:last-child{border-bottom:none}
.mat-typ{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--muted);
  background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:3px 7px}
.mat-nazwa{flex:1;min-width:0;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mat-nazwa:hover{color:var(--accent)}
.mat-rozmiar{flex:none;font-size:12.5px;color:var(--faint)}
.mat-pobierz,.mat-pokaz{flex:none;padding:7px 12px;font-size:13px}
@media (max-width:640px){
  .mat-rozmiar{display:none}
  .mat-nazwa{white-space:normal}
}
.mat-upload{display:flex;align-items:center;gap:12px;padding:10px 6px 4px}
.mat-wgraj{padding:7px 12px;font-size:13px;cursor:pointer}
.mat-usun-form{flex:none;margin:0}
.mat-usun{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:none;background:none;border-radius:8px;color:var(--faint);cursor:pointer}
.mat-usun:hover{background:var(--err-soft);color:var(--err)}
.mat-kanon{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mat-kanon-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  border-radius:999px;padding:4px 10px;border:1px solid var(--line)}
.mat-kanon-chip.jest{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.mat-kanon-chip.brak{background:var(--chip);color:var(--faint)}
.mat-grupa{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 4px;padding:0 6px}
.mat-grupa:first-child{margin-top:2px}

/* =================== FAQ (F5) =================== */
.vc-siatka{display:grid;grid-template-columns:1fr 1fr 130px auto;gap:12px;align-items:end}
.vc-siatka .field{margin-bottom:0}
.vc-siatka .field select{width:100%;padding:11px 14px;border:1px solid var(--line-strong);
  border-radius:8px;background:var(--surface)}
@media (max-width:760px){.vc-siatka{grid-template-columns:1fr 1fr}.vc-siatka .btn{grid-column:1/-1}}
details.faq{border-bottom:1px solid var(--line);padding:2px 6px}
details.faq:last-of-type{border-bottom:none}
details.faq summary{cursor:pointer;font-weight:600;font-size:14px;padding:9px 0;list-style-position:outside}
details.faq summary:hover{color:var(--accent)}
details.faq > div{color:var(--muted);font-size:13.5px;line-height:1.6;padding:0 0 12px 16px}
details.faq > div b{color:var(--ink)}
details.faq > div ul{margin:6px 0 10px;padding-left:20px}
details.faq > div li{margin:4px 0}
details.faq > div p{margin:8px 0 4px}
.vc-podp{display:flex;flex-direction:column;gap:2px;margin-top:8px;max-height:280px;overflow-y:auto}
/* Podpowiedzi jako TABELA z kolumnami (Karol 14.08): marka | model | rocznik —
   wspolna siatka kolumn, zeby wiersze czytaly sie jak tabela, bez dziury w srodku */
.vc-podp-poz{display:grid;grid-template-columns:150px max-content 1fr;align-items:baseline;gap:10px;
  text-align:left;border:1px solid var(--line);
  background:var(--surface);border-radius:8px;padding:9px 12px;cursor:pointer;font:inherit;font-size:13.5px}
.vc-podp-poz:hover{border-color:var(--accent);background:var(--hover)}
.vc-podp-marka{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-podp-model{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Rocznik ZARAZ za modelem/generacja, z lewej (Karol 14.08) — nie odsuniety do prawej */
.vc-podp-lata{color:var(--faint);font-size:12px;text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:640px){.vc-podp-poz{grid-template-columns:96px max-content 1fr;gap:8px}}
/* FAQ: krotsze linie tekstu — czytelnosc (Karol 12.08) */
#faq-lista details.faq summary{max-width:70ch}
#faq-lista details.faq > div{max-width:66ch}
/* FAQ: wyrazne sekcje pytan — nie zlewaja sie z pytaniami (Karol 12.08) */
#faq-lista .mat-grupa{margin:28px 0 8px;padding:16px 6px 0;border-top:2px solid var(--line);
  color:var(--ink);font-size:13px;display:flex;align-items:center;gap:8px}
#faq-lista .mat-grupa::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--accent)}
#faq-lista .mat-grupa:first-child{border-top:none;margin-top:6px;padding-top:0}

/* =================== ROZLICZENIA MODEL A (F6) =================== */
.ms-kafle{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 16px}
@media (max-width:760px){.ms-kafle{grid-template-columns:1fr}}
.ms-kafel{padding:16px 20px}
.ms-l{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ms-n{font-size:26px;font-weight:900;letter-spacing:-.02em;margin:2px 0}
.ms-s{font-size:12.5px;color:var(--faint)}
.ms-status{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap}
.ms-status.ok{background:var(--ok-soft);color:var(--ok)}
.ms-status.czeka{background:var(--warn-soft);color:var(--warn)}
.ms-vin{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted)}
.ms-czeka-kwota{color:var(--muted)}
.ms-form{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
.ms-cena{width:84px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:8px}
.ms-btn{padding:6px 10px;font-size:12.5px}
.ms-fvnr{width:130px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:8px;font-size:12.5px}

/* v0.7.0 — Materiały: siatka kart sekcji (Oferta / Reklamowe / Umowa / Onboarding) */
.mat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;margin:0 0 14px}
@media(max-width:860px){.mat-grid{grid-template-columns:1fr}}
.mat-sekcja{padding:14px 16px 8px}
.mat-sekcja-head{display:flex;align-items:flex-start;gap:10px;padding:2px 2px 10px;border-bottom:2px solid var(--line)}
.mat-sekcja-head svg{flex:none;color:var(--accent);margin-top:1px}
.mat-sekcja-tekst{flex:1;min-width:0}
.mat-sekcja-tytul{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mat-sekcja-opis{margin:2px 0 0;font-size:12.5px;color:var(--faint)}
.mat-licznik{flex:none;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 7px;border-radius:11px;background:var(--chip);color:var(--muted);font-size:11.5px;font-weight:800}
.mat-sekcja-pliki{display:flex;flex-direction:column;gap:2px;padding:4px 0 2px}
.mat-sekcja .mat-wiersz{padding:9px 2px}
@media(max-width:1100px){.mat-sekcja .mat-rozmiar{display:none}}

/* v0.7.0 — FAQ: graficzny pasek procesu (9 kroków, numeracja + ikony Lucide) */
.proces-siatka{list-style:none;margin:0;padding:2px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:krok}
.proces-krok{position:relative;counter-increment:krok;background:var(--chip);border-radius:10px;padding:12px 40px 12px 48px;min-height:64px}
.proces-krok::before{content:counter(krok);position:absolute;left:12px;top:12px;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.proces-krok .pi{position:absolute;right:12px;top:13px;color:var(--muted);opacity:.75}
.proces-krok b{display:block;font-size:13.5px;letter-spacing:-.01em}
.proces-krok span{display:block;font-size:12.5px;color:var(--faint);margin-top:2px;line-height:1.45}
@media(max-width:980px){.proces-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.proces-siatka{grid-template-columns:1fr}}

/* v0.7.0 — Materiały: wersja i daty pod nazwą pliku (Karol 14.08) */
.mat-opis-plik{flex:1;min-width:0;display:flex;flex-direction:column}
.mat-opis-plik .mat-nazwa{flex:none}
.mat-meta{font-size:11.5px;color:var(--faint);margin-top:1px}

/* v0.7.0 — Materiały: sekcje jedno pod drugim + kafelek cennika przy Ofercie (Karol 14.08) */
.mat-grid{grid-template-columns:1fr}
.mat-oferta-uklad{display:flex;gap:16px;align-items:flex-start}
.mat-oferta-uklad .mat-sekcja-pliki{flex:1;min-width:0}
.mat-cennik{flex:none;width:300px;background:var(--chip);border-radius:10px;padding:12px 14px}
.mat-cennik-tytul{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.mat-cennik-zasada{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.mat-cennik-poz{padding:8px 0;border-top:1px solid var(--line)}
.mat-cennik-poz>b{display:block;font-size:13px}
.mat-cennik-cena{display:block;font-size:15px;font-weight:800;margin-top:2px}
.mat-cennik-cena small{font-size:11px;font-weight:600;color:var(--faint)}
.mat-cennik-prow{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.mat-cennik-abo{display:block;font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.45}
.mat-cennik-stopka{font-size:11px;color:var(--faint);margin:8px 0 0}
@media(max-width:820px){.mat-oferta-uklad{flex-direction:column}.mat-cennik{width:100%}}

/* v0.7.0 — delikatne wyróżnienie pliku oferty (Karol 14.08) */
.mat-oferta-uklad .mat-wiersz{background:var(--chip);border-left:3px solid var(--accent);
  border-bottom:none;border-radius:8px;padding:10px 10px;margin-bottom:4px}

/* v0.7.0 — cennik na PEŁNĄ szerokość, większa typografia (Karol 14.08: „ściśnięte z boku") */
.mat-prawa{flex:1;min-width:0;width:auto;display:flex;flex-direction:column;gap:12px;min-width:0}
.mat-cennik{width:100%;padding:16px 20px}
.mat-cennik-siatka{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mat-cennik-poz{background:var(--bg,#fff);border:1px solid rgba(0,0,0,.07);border-radius:10px;padding:10px 12px}
@media(max-width:1180px){.mat-oferta-uklad{flex-direction:column}.mat-prawa{width:100%}}
@media(max-width:700px){.mat-cennik-siatka{grid-template-columns:1fr}}
.mat-cennik-siatka{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
@media(max-width:860px){.mat-cennik-siatka{grid-template-columns:1fr}}
.mat-cennik-tytul{font-size:13px}
.mat-cennik-zasada{font-size:14px;margin-bottom:4px}
.mat-cennik-przyklad{font-size:13px;color:var(--faint);margin:0 0 12px;line-height:1.5}
.mat-cennik-poz>b{font-size:15px}
.mat-cennik-cena{font-size:17px}
.mat-cennik-prow{font-size:13.5px;line-height:1.5}
.mat-cennik-abo{font-size:13px;line-height:1.55;margin-top:6px}

/* v0.7.0 — cennik MEGA prosto: trzy linie z kwotami (Karol 14.08) */
.mat-cennik-linia{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
.mat-cennik-linia b{font-size:16.5px;letter-spacing:-.01em}
.mat-cennik-linia.zysk{border-bottom:none}
.mat-cennik-linia.zysk b{color:var(--ok)}

/* v0.7.0 — oferta: czerwony przycisk Pobierz (CTA marki), wyróżnienie kafla (Karol 14.08) */
.mat-oferta-uklad .mat-pobierz{background:var(--accent);color:#fff;border-color:var(--accent)}
.mat-oferta-uklad .mat-pobierz:hover{background:var(--accent-hover);color:#fff}

/* v0.7.0 — cennik: pełne rozbicie kwot, kolory lewej/prawej strony (Karol 14.08) */
.mat-cennik-linia span{color:var(--muted)}
.mat-cennik-linia b{color:var(--accent-ink)}
.mat-cennik-linia.suma{background:var(--accent-soft);border-radius:8px;padding:8px 10px;
  border-bottom:none;margin:2px 0 4px}
.mat-cennik-linia.suma span{color:var(--accent-ink);font-weight:700}
.mat-cennik-linia.suma b{font-size:18px}
.mat-cennik-linia.zysk span{color:var(--ok);font-weight:700}
.mat-cennik-linia.okres{border-bottom:none}
.mat-cennik-linia.okres span,.mat-cennik-linia.okres b{font-size:12.5px;color:var(--faint)}
.mat-cennik-linia.okres b{font-size:14px}

/* ===== v0.8 PROTOTYP — strefa klienta (.kl-) — Karol 14.08 ===== */
.kl-body{background:var(--bg,#F4F6F9);margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink)}
.kl-top{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.kl-top-in{display:flex;align-items:center;gap:12px;max-width:860px;margin:0 auto;padding:10px 16px}
.kl-logo{display:inline-flex;align-items:center;gap:7px;font-weight:900;letter-spacing:-.02em}
.kl-logo svg{color:var(--accent)}
.kl-mail{margin-left:auto;font-size:12.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.kl-wyloguj{font-size:13px;font-weight:700;color:var(--muted);text-decoration:none}
.kl-wyloguj:hover{color:var(--accent)}
.kl-taby{display:flex;max-width:860px;margin:0 auto;padding:0 8px}
.kl-tab{flex:1;text-align:center;padding:11px 8px;font-size:14px;font-weight:700;color:var(--muted);
  text-decoration:none;border-bottom:3px solid transparent}
.kl-tab.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.kl-main{max-width:860px;margin:0 auto;padding:14px 14px 40px}
.kl-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px;margin:0 0 14px}
.kl-card h2{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-size:16px;letter-spacing:-.01em}
.kl-card h2 svg{color:var(--accent)}
.kl-sub{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.55}
.kl-drobne{font-size:12px;color:var(--faint);margin:8px 0 0;line-height:1.5}
.kl-drobne a,.kl-lista a,.kl-kroki a{color:var(--accent);font-weight:600}
/* hero */
.kl-hero-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kl-hero h1{margin:0;font-size:22px;letter-spacing:-.02em}
.kl-rej{font-weight:800;color:var(--muted);white-space:nowrap}
.kl-vin{margin:2px 0 0;font-family:ui-monospace,monospace;font-size:12px;color:var(--faint)}
.kl-meta{margin:2px 0 12px;font-size:12.5px;color:var(--faint)}
.kl-blokada{background:var(--chip);border-radius:10px;padding:12px 14px}
.kl-badge{display:inline-flex;align-items:center;gap:7px;background:var(--accent-ink);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.05em;padding:6px 11px;border-radius:8px}
.kl-blokada p{margin:9px 0 0;font-size:13.5px;line-height:1.6}
/* szybkie akcje */
.kl-akcje{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.kl-akcje a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:3px;cursor:pointer}
.kl-akcje a:hover{border-color:var(--accent)}
.kl-akcje svg{color:var(--accent);margin-bottom:3px}
.kl-akcje b{font-size:13.5px;letter-spacing:-.01em}
.kl-akcje span{font-size:11.5px;color:var(--faint)}
@media(max-width:680px){.kl-akcje{grid-template-columns:repeat(2,1fr)}}
/* tryb serwisowy */
.kl-sposoby{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:680px){.kl-sposoby{grid-template-columns:1fr}}
.kl-sposob{background:var(--chip);border-radius:10px;padding:12px 14px}
.kl-sposob>b{font-size:13.5px}
.kl-sposob ol{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.55;color:var(--muted)}
.kl-sposob li{margin-bottom:5px}
.kl-uwaga{margin-top:12px;background:#FEF3C7;border-left:4px solid #D97706;border-radius:8px;
  padding:11px 13px;font-size:13px;line-height:1.55}
.kl-wideo-pas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kl-wideo{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;
  font-size:13px;font-weight:700;padding:9px 13px;border-radius:9px;text-decoration:none;cursor:pointer}
.kl-wideo:hover{background:var(--accent-hover)}
/* dokumenty */
.kl-dok{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 2px;border-bottom:1px solid var(--line)}
.kl-dok:last-child{border-bottom:none}
.kl-dok b{font-size:14px;display:block}
.kl-dok span{display:block;font-size:12px;color:var(--faint);margin-top:1px}
.kl-dok-btns{display:flex;gap:8px;flex-shrink:0}
.kl-dok-btns .btn{padding:8px 13px;font-size:13px}
@media(max-width:560px){.kl-dok{flex-direction:column;align-items:stretch}.kl-dok-btns{justify-content:flex-end}}
/* kody */
.kl-kod{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 2px;border-bottom:1px solid var(--line)}
.kl-kod:last-child{border-bottom:none}
.kl-kod-opis b{font-size:14px;display:block;margin-bottom:2px}
.kl-kod-opis span{font-size:12.5px;color:var(--muted);line-height:1.5}
.kl-kod .kl-wideo{flex-shrink:0}
@media(max-width:640px){.kl-kod{flex-direction:column;align-items:stretch}}
.kl-zdrapka{flex-shrink:0;min-width:210px}
.kl-zdrapka summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  background:var(--accent-ink);color:#fff;font-size:13px;font-weight:700;padding:9px 13px;border-radius:9px}
.kl-zdrapka summary::-webkit-details-marker{display:none}
.kl-zdrapka[open] summary{display:none}
.kl-zdrapka code{display:block;font-size:22px;font-weight:800;letter-spacing:.25em;
  background:var(--chip);border-radius:9px;padding:10px 14px;text-align:center}
/* awaria */
.kl-kroki{margin:0;padding-left:20px;font-size:13.5px;line-height:1.6}
.kl-kroki li{margin-bottom:9px}
/* bateria */
.kl-alert{background:#FEE2E2;border-left:4px solid var(--accent);border-radius:8px;
  padding:12px 14px;font-size:13.5px;line-height:1.6;margin-bottom:10px}
.kl-lista{margin:0;padding-left:20px;font-size:13.5px;line-height:1.6}
.kl-lista li{margin-bottom:8px}
/* stopka */
.kl-stopka{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted);line-height:1.5}
.kl-stopka a{color:var(--accent);font-weight:700}

/* v0.17.0 — uklad: telefon = jedna kolumna (kafle nad trescia),
   desktop = przyklejona nawigacja po lewej + tresc po prawej */
.kl-uklad{display:block}
.kl-nawigacja{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.kl-nawigacja a{display:flex;flex-direction:column;gap:3px;min-height:64px;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);
  text-decoration:none;color:var(--ink)}
.kl-nawigacja a b{font-size:14px;line-height:1.25}
.kl-nawigacja a span{font-size:11.5px;color:var(--muted);line-height:1.3}
.kl-nawigacja a svg{margin-bottom:2px}
.kl-a-pojazd{background:var(--chip);border-color:var(--line-strong)} .kl-a-pojazd svg{color:var(--brand)}
.kl-a-montaz{background:var(--chip);border-color:var(--line-strong)} .kl-a-montaz svg{color:var(--brand)}
.kl-a-serwis{background:#EFF6FF;border-color:#BFDBFE}   .kl-a-serwis svg{color:#2563EB}
.kl-a-awaria{background:#FEF2F2;border-color:#FECACA}   .kl-a-awaria svg{color:var(--accent)}
.kl-a-bateria{background:#FFFBEB;border-color:#FDE68A}  .kl-a-bateria svg{color:#D97706}
.kl-a-aplikacja{background:#F5F3FF;border-color:#DDD6FE} .kl-a-aplikacja svg{color:#7C3AED}
.kl-a-kody{background:#F8FAFC;border-color:var(--line-strong)} .kl-a-kody svg{color:var(--muted)}
.kl-a-dokumenty{background:#ECFDF5;border-color:#A7F3D0} .kl-a-dokumenty svg{color:#059669}
/* Na duzym ekranie strefa klienta rozsuwa sie do 1200px (Karol 16.08) — przy 860px
   kolumna tresci zostawala waska jak na tablecie, a nawigacja zjadala z niej 250px. */
@media(min-width:900px){
  .kl-top-in,.kl-taby,.kl-main{max-width:1200px}
  .kl-uklad{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start}
  .kl-nawigacja{position:sticky;top:96px;grid-template-columns:1fr;gap:6px;margin-bottom:0}
  .kl-nawigacja a{flex-direction:row;align-items:center;gap:10px;min-height:44px;
    padding:9px 12px;background:transparent;border-color:transparent}
  .kl-nawigacja a b{font-size:13.5px}
  .kl-nawigacja a span{display:none}
  .kl-nawigacja a:hover{background:var(--chip);border-color:var(--line)}
}
.kl-card{scroll-margin-top:100px}

/* v0.17.0 — przyciski sklepow (bez nazw aplikacji, sama platforma) */
.kl-sklepy{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.kl-sklep{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px;
  border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
  text-decoration:none;color:var(--ink);flex:1 1 200px}
.kl-sklep:hover{border-color:var(--brand);background:var(--chip)}
.kl-sklep span{display:flex;flex-direction:column;line-height:1.25}
.kl-sklep b{font-size:14.5px}
.kl-sklep span span,.kl-sklep span{font-size:12px;color:var(--muted)}
.kl-sklep b{color:var(--ink)}

/* v0.17.0 — kontakt do punktu montazu w naglowku (nad zagieciem) */
.kl-kontakt-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:10px 0 0}
.kl-kontakt-kto{display:flex;flex-direction:column;min-width:0}
.kl-kontakt-etykieta{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.kl-kontakt-kto b{font-size:15px;line-height:1.3}
.kl-kontakt-kto span:not(.kl-kontakt-etykieta){font-size:12.5px;color:var(--muted)}
.kl-kontakt-tel{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 16px;border-radius:var(--r);background:var(--brand);
  color:#fff;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.kl-kontakt-tel:hover{background:#1E293B}
@media(max-width:520px){.kl-kontakt-tel{width:100%}}

/* v0.17.0 — pasek wyboru pojazdu (tylko przy 2+ autach) */
.kl-wybor{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch}
.kl-wybor-a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
  border:1.5px solid var(--line);border-radius:999px;background:var(--surface);
  text-decoration:none;color:var(--ink);white-space:nowrap}
.kl-wybor-a b{font-size:14px}
.kl-wybor-a span{font-size:12px;color:var(--muted)}
.kl-wybor-a.on{border-color:var(--brand);background:var(--chip)}
.kl-wybor-a svg{color:var(--muted);flex:none}

/* v0.8.1 — panel klienta: kolory kafelków akcji (nie zlewają się — Karol 14.08) */
.kl-akcje{grid-template-columns:repeat(5,1fr)}
@media(max-width:860px){.kl-akcje{grid-template-columns:repeat(2,1fr)}}
.kl-akcje a.kl-a{border-width:1.5px}
.kl-a-serwis{background:#EFF6FF;border-color:#BFDBFE}
.kl-a-serwis svg{color:#2563EB}
.kl-a-serwis:hover{border-color:#2563EB}
.kl-a-awaria{background:#FEF2F2;border-color:#FECACA}
.kl-a-awaria svg{color:var(--accent)}
.kl-a-awaria:hover{border-color:var(--accent)}
.kl-a-cert{background:#ECFDF5;border-color:#A7F3D0}
.kl-a-cert svg{color:#059669}
.kl-a-cert:hover{border-color:#059669}
.kl-a-bateria{background:#FFFBEB;border-color:#FDE68A}
.kl-a-bateria svg{color:#D97706}
.kl-a-bateria:hover{border-color:#D97706}
/* Kafelek kontaktu ma BIALY tekst, wiec jego tlo musi zostac ciemne w obu motywach.
   Wczesniej bralo var(--accent-ink), a ta zmienna w ciemnym motywie jest jasna (#E2E8F0)
   — bialy tekst znikal na jasnym tle (zglosil Karol 16.08). */
.kl-a-kontakt{background:var(--brand);border-color:var(--brand)}
.kl-a-kontakt b{color:#fff}
.kl-a-kontakt svg{color:#fff}
.kl-a-kontakt:hover{border-color:var(--accent)}
/* mocniejsze rozdzielenie sekcji przy czytaniu */
.kl-card{margin-bottom:16px}
.kl-card h2{font-size:17px}
.kl-card h2 svg{display:none}

/* v0.9.0 — panel klienta: zdrapka z okiem (odkryj/zakryj), przyciski dokumentów, drobiazgi */
/* min-width dawal stala szerokosc 230px + flex-shrink:0 — w dwukolumnowym ukladzie
   (od 900px) sekcja kodow wypychala strone w bok o ~110px. Teraz kolumna z kodem
   moze sie zwezic i zawinac. (v0.17.0) */
.kl-kod-poka{flex-shrink:1;min-width:0;max-width:100%;text-align:right}
.kl-kod{flex-wrap:wrap}
.kl-zdrapka2{display:inline-flex;align-items:center;gap:10px;flex-direction:row-reverse}
.kl-zdrapka2 summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  background:var(--chip);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-weight:700;font-size:13px}
.kl-zdrapka2 summary::-webkit-details-marker{display:none}
.kl-zdrapka2:not([open]) .kl-z-off{display:none}
.kl-zdrapka2[open] .kl-z-on{display:none}
.kl-z-on,.kl-z-off{display:inline-flex;align-items:center;gap:8px}
.kl-maska{letter-spacing:.2em;font-size:15px}
.kl-kod-wartosc{font-size:20px;font-weight:800;letter-spacing:.22em;background:#FEF3C7;
  border-radius:8px;padding:8px 12px}
.kl-kod-gdzie{display:block;font-size:12px;color:var(--faint);margin-top:4px}
.kl-dok-btns{gap:10px}
.kl-btn-dok{display:inline-flex;align-items:center;gap:7px}
.kl-a-kontakt span{color:#fff;font-size:13px;font-weight:800;letter-spacing:.01em}
.kl-wyloguj-form{margin:0}
button.kl-wyloguj{background:none;border:none;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:0}
button.kl-wyloguj:hover{color:var(--accent)}
.kl-demo-banner{background:var(--accent-ink);color:#fff;border-radius:12px;padding:12px 16px;
  font-size:13.5px;line-height:1.5;margin:0 0 14px}
@media(max-width:640px){.kl-kod-poka{text-align:left}}

/* v0.9.1 — kafelki akcji: elastyczna siatka (kontakt zawsze widoczny, bez ścisku) */
.kl-akcje{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:680px){.kl-akcje{grid-template-columns:repeat(2,1fr)}}

/* v0.9.2 — miniatura pojazdu w karcie (front_photo_url) */
.kl-foto-auta{float:right;width:120px;height:84px;object-fit:cover;border-radius:10px;
  margin:0 0 8px 12px;border:1px solid var(--line)}
@media(max-width:560px){.kl-foto-auta{width:96px;height:68px}}

/* v0.9.4 — kotwice: sekcja nie chowa się pod przyklejonym nagłówkiem + płynny scroll */
html{scroll-behavior:smooth}
.kl-card{scroll-margin-top:104px}
.kl-card{scroll-margin-top:128px}
.kl-dok-btns{gap:14px}
.kl-dok-btns{gap:18px}
.kl-kroki-male{font-size:12.5px;color:var(--muted);padding-left:18px;margin:6px 0 0;line-height:1.6;text-align:left}
.kl-kroki-male li{margin-bottom:4px}

/* --- Sprawdź pojazd: lista wariantów modelu (zakładka /pojazd) --- */
.vc-wpis{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;margin-top:6px;background:var(--bg)}
.vc-wpis.pas{border-color:#16a34a;background:#f0fdf4}
.vc-chip{display:inline-block;border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:2px 10px;font-size:12px;color:var(--ink);white-space:nowrap}
.vc-chip-rok{font-weight:700;background:var(--ink);color:#fff;border-color:var(--ink)}
.vc-wpis.pas .vc-chip-rok{background:#16a34a;border-color:#16a34a}
.vc-chip-beta{border-color:#d97706;color:#b45309;background:#fffbeb}

/* v0.12.0 — boczne kotwice sekcji (Materialy + FAQ), tylko szerokie ekrany */
.kotwice-uklad{display:flex;gap:18px;align-items:flex-start}
.kotwice-tresc{flex:1;min-width:0}
.kotwice{flex:none;position:sticky;top:84px;width:172px;display:none;background:var(--bg,#fff);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px 6px}
@media(min-width:1280px){.kotwice{display:block}}
.kotwice a{display:block;padding:5px 10px;margin:2px 0;font-size:12.5px;color:var(--muted,#5a6170);
  text-decoration:none;border-left:2px solid rgba(0,0,0,.12);border-radius:0 6px 6px 0}
.kotwice a:hover{color:var(--accent);border-left-color:var(--accent);background:rgba(244,123,54,.06)}
.kotwice .kotwice-tytul{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#5a6170);margin:0 0 6px 10px}

.mat-cennik.pelna{width:100%;padding:4px 2px 0;background:none}
.mat-cennik-sekcja .mat-cennik-siatka{grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.mat-cennik-sekcja .mat-cennik-siatka{grid-template-columns:1fr}}

.kotwice a.kotwica-dzial{margin-top:6px}
.kotwice a.aktywna{color:var(--accent);border-left-color:var(--accent);background:rgba(244,123,54,.07)}

/* --- Warunki wspolpracy: podglad jako podstrona panelu (DEC-022, v0.13.4) --- */
.war-glowa{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.war-sub{display:flex;align-items:center;gap:7px;margin:6px 0 0}
.war-akcje{display:flex;align-items:center;gap:8px}
.war-nav{padding-left:10px;padding-right:10px}
.war-licznik{font-size:13px;color:var(--muted);min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
.war-karta{padding:0;overflow:hidden}
.war-host{display:block;width:100%;min-height:320px}

/* --- Umów montaż (MVP v0.14.0) --- */
.mz-filtr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mz-filtr>span{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.mz-filtr .btn{min-height:30px;display:inline-flex;align-items:center}
.mz-filtr-on{border-color:var(--accent);color:var(--accent);font-weight:700}
.mz-uklad{display:block}
/* Formularz jako OKNO na przycisk (Karol 14.08 — nie zaslania kalendarza) */
.mz-pasek{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mz-pasek .mz-filtr{margin-bottom:0}
.mz-pasek #mz-nowe-btn{margin-left:auto}
/* Okno na CALA STRONE (Karol 14.08 — popup wygladal zle): glowa u gory,
   tresc przewijana, stopka z przyciskami ZAWSZE widoczna na dole. */
.mz-modal{position:fixed;inset:0;z-index:60;background:var(--bg)}
.mz-modal[hidden]{display:none}
.mz-form{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);
  max-width:100vw;overflow-x:hidden}
.mz-form-glowa{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 26px;background:var(--surface);border-bottom:1px solid var(--line)}
.mz-form-tresc{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 26px 26px;
  max-width:min(960px,100%);width:100%;margin:0 auto}
.mz-form-stopka{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:14px 26px;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(15,23,42,.06)}
.mz-form-stopka .drobne{margin-right:auto}
.mz-sekcja-etyk{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--faint);margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.mz-form-tresc .mz-sekcja-etyk:first-of-type{margin-top:4px}
.mz-poj3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:760px){.mz-poj3{grid-template-columns:1fr}}
/* Oczekujace LEWA, Umowione PRAWA (Karol 14.08) */
.mz-listy{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:980px){.mz-listy{grid-template-columns:1fr}}
.mz-h3{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:12px}
.mz-h3 svg{color:var(--accent)}
.mz-typy{display:flex;gap:10px}
.mz-typ{flex:1;display:block;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.mz-typ input{position:absolute;opacity:0;width:0}
.mz-typ b{display:block;font-size:13.5px}
.mz-typ em{font-style:normal;font-size:12px;color:var(--muted)}
.mz-typ:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.mz-daty{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mz-kontakt{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
.mz-wiersz{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:9px 0}
.mz-wiersz:last-child{border-bottom:0}
.mz-listy .card .drobne{margin:4px 0 6px}
#mz-arch-btn{margin-top:12px}
.mz-poj{flex:1;min-width:220px}
.mz-firma{font-size:12px;color:var(--faint);margin-left:6px}
.mz-meta{display:block;font-size:12px;color:var(--muted)}
.mz-monter{display:block;font-size:12px;color:var(--ok,#15803D);font-weight:600}
.mz-akcje{display:flex;gap:6px;align-items:center}
.mz-inline{display:inline}
.mz-termin-form{width:100%;padding:8px 0 2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mz-termin-form[hidden]{display:none}
.mz-termin-form input[type=date]{width:auto;padding:6px 9px}
.mz-ostrzega{color:#B45309}
.btn.maly{padding:5px 10px;font-size:12px;font-weight:500}
/* kalendarz — czytelny: dzialamy pn–pt, czasem sobota (weekendy stonowane) */
.mz-kal2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:980px){.mz-kal2{grid-template-columns:1fr}}
.mz-kal h4{font-size:13.5px;font-weight:700;text-align:center;margin-bottom:10px}
.mz-kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mz-kal-dn{font-size:10.5px;font-weight:600;color:var(--faint);text-align:center;text-transform:uppercase;padding:2px 0}
.mz-kal-d{min-height:56px;border:1px solid var(--line);border-radius:8px;padding:3px 5px 6px;font-size:11px;color:var(--muted);background:var(--surface);position:relative}
.mz-kal-d.pusty{background:transparent;border-color:transparent}
.mz-kal-d.dzis{border-color:var(--accent);border-width:1.5px}
.mz-kal-d.sobota{background:var(--hover)}
.mz-kal-d.wolny{background:var(--chip);opacity:.55}
/* dni przeszle wyszarzone, ale kafelki widac (Karol 14.08) */
.mz-kal-d.przeszly{background:var(--chip);opacity:.5}
.mz-kal-d .nr{font-weight:600}
.mz-kafel{display:block;width:calc(100% - 2px);margin:3px auto 2px;border:0;border-radius:5px;padding:2.5px 6px;font:inherit;font-size:10.5px;font-weight:600;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mz-kafel.czeka{background:#FEF3C7;color:#B45309}
.mz-kafel.ok{background:#DCFCE7;color:#15803D}
.status.czeka{background:#FEF3C7;color:#B45309}
.status.ok{background:#DCFCE7;color:#15803D}
.status.minal{background:#FEE2E2;color:#B91C1C}
.mz-legenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--muted);align-items:center}
.mz-legenda>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:1.4}
.mz-legenda .drobne{line-height:1.4;margin:0}
.mz-krop{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.mz-krop-czeka{background:#FEF3C7;border:1px solid #B45309}
.mz-krop-ok{background:#DCFCE7;border:1px solid #15803D}
.mz-dymek{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:250px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.16);padding:12px 13px;font-size:12.5px;text-align:left}
.mz-dymek{width:290px}
.mz-dymek dl{display:grid;grid-template-columns:96px 1fr;gap:4px 8px;color:var(--muted);margin:8px 0 10px}
.mz-dymek dt{font-weight:600;font-size:11.5px}
.mz-dymek dd{color:var(--ink)}

/* Naglowek kalendarza w JEDNYM wierszu z nazwami miesiecy (Karol 14.08 — wiecej miejsca) */
.mz-kal-karta{position:relative}
.mz-kal-naglowek{position:absolute;top:20px;left:22px;margin:0}
@media(max-width:900px){.mz-kal-naglowek{position:static;margin-bottom:10px}}

.mz-poj2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mz-hint{font-size:12.5px;color:var(--muted);margin:2px 0 4px;min-height:16px}
.mz-hint .ok{color:#15803D}.mz-hint .warn{color:#B45309}

/* Okno formularza: porzadne odstepy jak w Materialach (Karol 14.08) */
.mz-form .field{margin-bottom:13px}
.mz-form .field label{margin-bottom:5px}
.mz-poj2,.mz-poj3,.mz-daty,.mz-kontakt{margin-bottom:2px}
.mz-form .mz-typy{margin-bottom:4px}

/* Podpowiedzi marki/modelu pod polem (od 2 znakow, substring — "mw" znajdzie BMW) */
.mz-podp-kotwica{position:relative}
.mz-podp-lista{position:absolute;z-index:40;top:100%;left:0;right:0;margin-top:3px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:9px;box-shadow:0 10px 26px rgba(15,23,42,.14);
  max-height:220px;overflow-y:auto;padding:3px}
.mz-podp-poz{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:13.5px;
  padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--ink)}
.mz-podp-poz:hover{background:var(--hover)}
.mz-podp-poz b{color:var(--accent)}

/* Odstepy w kafelkach list (Karol 14.08) */
.mz-listy .card{padding:18px 20px 16px}
.mz-listy .mz-wiersz{padding:11px 0;gap:12px}
.mz-listy .mz-wiersz:first-of-type{padding-top:2px}
.mz-poj{line-height:1.45}
.mz-meta{margin-top:3px}
.mz-monter{margin-top:2px}
.mz-akcje{gap:8px;flex-wrap:wrap;padding:2px 0}
.mz-termin-form{margin-top:4px;padding:10px 12px;background:var(--hover);border-radius:9px}
.mz-archiwum-karta{padding:16px 20px}
.mz-kal-karta{margin-bottom:18px}

/* Dane klienta w wierszu zgloszenia (do protokolu) */
.mz-klient{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.mz-klient b{color:var(--ink);font-weight:600}
.mz-adres-mini{color:var(--faint)}
.mz-kop-txt{border:1px solid var(--line-strong);background:var(--surface);border-radius:5px;
  padding:1px 6px;margin-left:5px;font:inherit;font-size:10.5px;color:var(--muted);cursor:pointer;vertical-align:1px}
.mz-kop-txt:hover{border-color:var(--accent);color:var(--accent)}

.mz-dymek dd{display:flex;align-items:center;gap:4px;flex-wrap:wrap;word-break:break-word}

/* NASZE okno potwierdzenia (zamiast systemowego confirm) */
.mz-pytanie{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,23,42,.5)}
.mz-pytanie-okno{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;max-width:420px;width:100%;box-shadow:0 24px 60px rgba(15,23,42,.3)}
.mz-pytanie-okno h4{font-size:16px;font-weight:700;margin-bottom:8px}
.mz-pytanie-okno p{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.mz-pytanie-akcje{display:flex;justify-content:flex-end;gap:10px}

.mz-kafel.mz-wiecej{background:var(--chip);color:var(--muted);font-weight:600}
.mz-kal-d{min-height:56px;height:auto}

/* --- Kalendarz TYGODNIOWY (v0.15.0): 3 tygodnie, kolumny pn–sb, wieksze kafelki --- */
.mz-kal-pasek{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mz-kal-sterowanie{display:flex;gap:6px;align-items:center}
.mz-kal-tygodnie{display:flex;flex-direction:column;gap:16px}
.mz-tydz-etyk{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.mz-tydz-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.mz-dzien{min-height:96px;border:1px solid var(--line);border-radius:10px;padding:7px 8px 9px;
  background:var(--surface);display:flex;flex-direction:column;gap:4px}
.mz-dzien.dzis{border-color:var(--accent);border-width:1.5px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.mz-dzien.sobota{background:var(--hover)}
.mz-dzien.przeszly{background:var(--chip);opacity:.55}
.mz-dzien-glowa{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:2px}
.mz-dzien-nazwa{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--faint)}
.mz-dzien-nr{font-size:14px;font-weight:700;color:var(--ink)}
.mz-kal-tygodnie .mz-kafel{display:block;width:100%;margin:0;border:0;border-radius:7px;padding:6px 8px;
  text-align:left;cursor:pointer;font:inherit;white-space:normal}
.mz-kafel-1{display:block;font-size:12px;font-weight:700;line-height:1.25}
.mz-kafel-2{display:block;font-size:10.5px;font-weight:500;opacity:.75;margin-top:1px}
@media(max-width:1080px){.mz-tydz-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.mz-tydz-grid{grid-template-columns:repeat(2,1fr)}.mz-dzien{min-height:78px}}

/* Wiersz zgloszenia — czytelne linie z etykietami (v0.15.0) */
.mz-wiersz{display:block;padding:13px 0}
.mz-w-glowa{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.mz-w-pojazd{font-size:14.5px}
.mz-w-linia{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--ink);padding:2px 0}
.mz-w-etyk{flex:none;width:120px;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--faint)}
.mz-w-drobne{font-size:12px;color:var(--faint)}
.mz-w-stopka{margin-top:9px;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.mz-klient{display:block}
.mz-klient b{font-weight:600}
@media(max-width:620px){.mz-w-linia{flex-direction:column;gap:1px}.mz-w-etyk{width:auto}}

/* Dymek montazu w kalendarzu — szerszy, bez dziwnego zawijania */
.mz-dymek{width:330px;max-width:min(90vw,360px)}
.mz-dymek dl{grid-template-columns:112px 1fr;gap:5px 10px}
.mz-dymek dd{white-space:normal}

/* --- Agenda „Najbliższe montaże" = JEDYNA lista zgłoszeń (v0.15.2) --- */
.mz-agenda-karta{margin-bottom:18px;padding:20px 22px 12px}
.mz-agenda-karta .mz-h3{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mz-ag{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.mz-ag:first-of-type{padding-top:4px}
.mz-ag:last-child{border-bottom:0}
.mz-ag-data{flex:none;width:195px;display:flex;flex-direction:column;gap:2px;
  padding-right:20px;border-right:1px solid var(--line)}
.mz-ag-dzien{font-size:17px;font-weight:800;line-height:1.2}
.mz-ag-nazwa{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.4px}
.mz-ag-godz{font-size:14px;font-weight:700;color:var(--accent);margin-top:6px}
.mz-ag-czeka{font-size:12.5px;font-weight:600;color:var(--warn,#B45309);margin-top:6px}
.mz-ag-okno-mini{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.35}
.mz-ag-tresc{flex:1;min-width:0;display:block}
.mz-ag-dane{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
.mz-ag-glowa{grid-column:1/-1}
.mz-ag-dane .mz-ag-linia:nth-last-child(-n+1){grid-column:1/-1}
@media(max-width:900px){.mz-ag-dane{grid-template-columns:1fr}}
.mz-ag-glowa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.mz-ag-glowa b{font-size:15px}
.mz-ag-linia{display:flex;gap:12px;align-items:baseline;font-size:13px;padding:3px 0;line-height:1.45}
.mz-ag-etyk{flex:none;width:96px;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--faint);padding-top:2px}
.mz-ag-akcje{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line)}
.mz-ag-akcje form{display:inline-flex;margin:0}
.mz-ag-akcje .btn{white-space:nowrap}
.mz-ag .mz-termin-form{margin-top:10px;padding:12px 14px;background:var(--hover);
  border:1px solid var(--line);border-radius:10px}
.mz-archiwum-karta{padding:18px 22px}
.mz-archiwum-karta .mz-ag{padding:14px 0}
@media(max-width:1100px){
  .mz-ag-tresc{flex-direction:column;gap:12px}
  .mz-ag-akcje{width:100%;flex-direction:row;flex-wrap:wrap}
  .mz-ag-akcje .btn{width:auto}
  .mz-ag-akcje form{width:auto;display:inline-flex}
}
@media(max-width:720px){
  .mz-ag{flex-direction:column;gap:8px}
  .mz-ag-data{flex-direction:row;align-items:baseline;gap:10px;width:auto;border-right:0;padding-right:0}
  .mz-ag-godz{margin-top:0}
  .mz-ag-linia{flex-direction:column;gap:1px}
  .mz-ag-etyk{width:auto}
}

/* Formularz zmiany terminu w prawej kolumnie akcji — pola jedno pod drugim */
/* Zmiana terminu: jedna zwarta linia pod przyciskami */
.mz-ag .mz-termin-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:10px 0 2px;padding:12px 14px;background:var(--hover);
  border:1px solid var(--line-strong);border-radius:10px;width:100%}
.mz-ag .mz-termin-form[hidden]{display:none}
.mz-ag .mz-termin-form input[type=date]{width:auto;padding:6px 9px;min-height:32px}
.mz-ag .mz-termin-form .drobne{margin:0;white-space:nowrap}

/* --- TELEFON: umawianie w trakcie pracy (Karol 14.08) --- */
@media(max-width:760px){
  /* Duzy przycisk „Umów montaż" przyklejony na dole — pod kciukiem */
  .mz-pasek{position:sticky;top:0;z-index:20;background:var(--bg);padding:6px 0 10px;margin-bottom:8px}
  .mz-pasek #mz-nowe-btn{position:fixed;left:14px;right:14px;bottom:14px;z-index:50;
    justify-content:center;padding:14px;font-size:15.5px;border-radius:12px;
    box-shadow:0 8px 24px rgba(220,38,38,.35)}
  .mz-pasek{padding-bottom:0}
  body{padding-bottom:76px}
  /* Kalendarz: jeden tydzien, kompaktowe dni, 3 kolumny */
  .mz-kal-pasek{margin-bottom:12px;padding-bottom:10px}
  .mz-tydz-grid{grid-template-columns:repeat(3,1fr);gap:5px}
  .mz-dzien{min-height:70px;padding:6px 6px 7px}
  .mz-dzien-nazwa{font-size:9.5px}
  .mz-dzien-nr{font-size:13px}
  .mz-kal-tygodnie .mz-kafel{padding:5px 6px}
  .mz-kafel-1{font-size:11.5px}
  .mz-kafel-2{font-size:10px}
  /* Agenda: zwarta, akcje pelna szerokosc */
  .mz-agenda-karta,.mz-archiwum-karta,.mz-kal-karta{padding:14px 14px 10px}
  .mz-ag{padding:14px 0}
  .mz-ag-dzien{font-size:16px}
  .mz-ag-akcje{gap:6px}
  .mz-ag-akcje .btn{flex:1 1 46%;justify-content:center}
  /* Okno zgloszenia: stopka zawsze widoczna, wieksze pola pod palec */
  .mz-form-glowa,.mz-form-stopka{padding:12px 14px}
  .mz-form-tresc{padding:16px 14px 20px}
  .mz-form-stopka{position:sticky;bottom:0}
  .mz-form-stopka .drobne{display:none}
  .mz-form-stopka .btn{flex:1;justify-content:center;padding:12px}
  .mz-form input,.mz-form select{min-height:44px;font-size:16px}  /* 16px = iOS nie zoomuje */
}

/* ================= TELEFON — cały portal (Karol 14.08: dwa widoki, PC i telefon) ====== */
@media(max-width:760px){
  /* Nawigacja: przewijalna poziomo, bez zawijania; mniejszy topbar */
  .topbar-in{padding:0 12px;min-height:56px;gap:8px;flex-wrap:nowrap}
  .topbar-in .nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -4px;padding:0 4px}
  .topbar-in .nav::-webkit-scrollbar{display:none}
  .nav a{padding:8px 11px;font-size:13px;white-space:nowrap}
  .nav a svg{display:none}                     /* na telefonie liczy się nazwa, nie ikona */
  .brand-name{display:none}                    /* zostaje samo logo */
  .kto,.powrot{display:none}                   /* mail i powrót — schowane, są w menu */
  main,.wrap{padding-left:12px;padding-right:12px}
  h1{font-size:19px}
  .card{padding:14px 14px;border-radius:12px}
  .sub,.pomoc{font-size:13px}

  /* Formularze i przyciski pod palec */
  .btn{min-height:40px}
  .field input,.field select,.field textarea{min-height:44px;font-size:16px}
  .filtry,.pigulki{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}

  /* Materiały i FAQ: kotwice chowamy — na telefonie przewija się palcem */
  .kotwice{display:none}
  .kotwice-uklad{display:block}
  .mat-oferta-uklad,.mat-cennik-sekcja{grid-template-columns:1fr;display:block}
  .mat-prawa{width:100%;margin-top:12px}
  .mat-wiersz{flex-wrap:wrap;gap:8px}
  .mat-rozmiar{display:none}
}

/* Okno zgloszenia: nic nie wystaje w bok — przewijamy tylko w pionie (Karol 14.08) */
.mz-form *{max-width:100%}
.mz-form input,.mz-form select,.mz-form .field{min-width:0}
.mz-poj3,.mz-daty,.mz-kontakt{width:100%}
.mz-form-glowa,.mz-form-stopka{max-width:min(960px,100%);width:100%;margin:0 auto}


/* v0.17.3 — poprawki zglosozne przez Karola 16.08 */
/* 1. Przyciski "Otworz/Pobierz" stykaly sie bez odstepu (zgloszenie Karola 16.08).
   Przyczyna: regula .kl-dok span{display:block} (podpisy dokumentow) trafiala takze
   w <span> opakowujacy przyciski i — jako bardziej szczegolowa — kasowala display:flex,
   przez co gap w ogole nie dzialal (zmierzony odstep: 0 px). Stad tez trzy proby
   "naprawy" przez zwiekszanie gap w poprzednich wersjach, ktore nic nie dawaly. */
.kl-dok .kl-dok-btns{display:flex;flex-wrap:wrap;gap:10px;flex-shrink:0;
  font-size:inherit;color:inherit;margin-top:0}
.kl-dok .kl-dok-btns .btn{flex:0 0 auto;min-height:44px}  /* prog dotyku */
/* 2. Blok parowania na CALA szerokosc (byl w siatce 3-kolumnowej jako jedno dziecko) */
.kl-sposob-pelny{width:100%}
/* 3. Kod awaryjny mocno widoczny: wlasna ramka, wieksza zdrapka, kod na pelnej szerokosci */
.kl-kod-awaryjny{background:var(--warn-soft);border:1.5px solid #FCD34D;border-radius:var(--r);
  padding:14px;margin-top:10px;border-bottom:1.5px solid #FCD34D}
.kl-kod-awaryjny .kl-kod-opis b{font-size:16px}
.kl-kod-awaryjny .kl-zdrapka2 summary{min-height:44px;padding:10px 16px;background:var(--surface);
  border:1.5px solid var(--line-strong);font-size:14px}
.kl-kod-awaryjny .kl-kod-wartosc{display:block;text-align:center;margin-top:8px;font-size:24px}
.kl-kod-stopka{flex:1 1 100%;margin-top:10px}
.kl-kod-stopka .kl-uwaga{margin:0 0 10px}
/* 4. Rozwijka z procedura — czytelna, nie "wysypana" na strone */
.kl-rozwijka{margin-top:8px}
.kl-rozwijka summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--accent-ink);
  padding:8px 0;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.kl-rozwijka summary::-webkit-details-marker{display:none}
.kl-rozwijka summary::before{content:"›";font-size:18px;line-height:1}
.kl-rozwijka[open] summary::before{content:"⌄"}

.kl-uwaga p{margin:6px 0 0}
.kl-uwaga p:last-child{margin-bottom:0}

.kl-wylacz{margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line-strong);font-size:12.5px;color:var(--muted);line-height:1.5}

/* kolory kafelkow nawigacji FAQ (te same role co w panelu pojazdu) */
.kl-a-naglestany{background:#FEF2F2;border-color:#FECACA} .kl-a-naglestany svg{color:var(--accent)}
.kl-a-dziala{background:var(--chip);border-color:var(--line-strong)} .kl-a-dziala svg{color:var(--brand)}