/* Kwiatek CRM — rozbudowa v3. Te same tokeny co ui.css (jasny i ciemny motyw). */
[hidden] { display:none !important }
.pole-blad { display:block; color:var(--red); font-size:13px; min-height:0; margin-top:4px }
.pole-blad:empty { display:none }
.blad-t { color:var(--red) }
.pod { display:block; color:var(--muted); font-size:12px; font-weight:500 }
.lista-prosta { margin:0; padding-left:18px; display:grid; gap:6px }
.dl2 { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:8px 0 }
.dl2 dt { color:var(--muted) } .dl2 dd { margin:0; font-weight:600 }
.tab-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
.tab2 tr.suma th { border-top:2px solid var(--line-2) }
.info-b { margin-left:6px; width:20px; height:20px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface-2); color:var(--muted); font-size:12px; cursor:help }
.pasek-proc { display:inline-block; vertical-align:middle; width:56px; height:6px; border-radius:4px; margin-right:8px; background:linear-gradient(90deg, var(--ok) var(--p), var(--surface-3) var(--p)) }
.ai-objasnienie { border:1px dashed var(--line-2); border-radius:var(--r-s); padding:10px 14px; background:var(--surface-2); margin-bottom:12px }
.ai-znak { font-size:12px; color:var(--muted); margin:0 0 4px }
.krok-blok { border:1px solid var(--line); border-radius:var(--r-s); padding:10px 12px; margin:8px 0 }
.krok-blok legend { font-weight:700; padding:0 4px }
fieldset.krok-blok { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:8px }
.mail-tresc { white-space:normal; margin-top:8px; padding:10px; background:var(--surface-2); border-radius:var(--r-s); overflow-wrap:anywhere }
/* demo */
.demo-pasek-proba { flex-wrap:wrap; gap:8px }
.demo-widok select { font:inherit; padding:4px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.15); color:inherit }
.demo-box { max-width:520px }
.demo-h1 { font-size:22px; margin:4px 0 8px; text-align:center }
.demo-warunki { border:1px solid var(--line); border-radius:var(--r-s); padding:8px 12px; margin:8px 0 }
.demo-warunki-t { max-height:220px; overflow:auto; font-size:13px; color:var(--ink-2); margin-top:6px }
.demo-przewodnik { border-left:4px solid var(--brand) }
.demo-przewodnik ol { margin:0; padding-left:20px; display:grid; gap:8px }
.pulapka { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.login-demo { text-align:center; margin:10px 0 0 }
@media (max-width: 640px) {
  .dl2 { grid-template-columns:1fr } .dl2 dt { margin-top:6px }
  .demo-pasek-proba .demo-btn { flex:1 1 auto; text-align:center }
}

/* Moje konto — formularz usunięcia */
.stos-konto { display:flex; flex-direction:column; gap:12px; max-width:440px; margin-top:12px }

/* Zgody na stronach publicznych: tekst z odnośnikiem w jednym akapicie (bez rozbijania na kolumny) */
.demo-box .ptak { display:block; line-height:1.5 }
.demo-box .ptak input { margin:0 6px 0 0; vertical-align:-2px }

/* ===== Okno wiadomości e-mail (22.10.2026) ===== */
.mail-okno.upuszczanie{outline:3px dashed var(--mint); outline-offset:4px; border-radius:12px}
.mail-pasek{display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 6px}
.mail-pasek button{min-width:40px; min-height:36px; padding:4px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer}
.mail-pasek button:hover{border-color:var(--line-2)}
.mail-tresc{min-height:180px; max-height:46vh; overflow:auto; padding:10px 12px; line-height:1.5; white-space:normal; cursor:text; background:var(--surface)}
.mail-tresc:focus{outline:2px solid var(--mint); outline-offset:1px}
.mail-tresc p{margin:0 0 8px}
.mail-tresc ul, .mail-tresc ol{margin:0 0 8px 22px}
.mail-stopka{color:var(--muted); font-size:13.5px}
.mail-stopka-pole{min-height:90px; margin:6px 0}
.mail-zal{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.mail-zal-btn{cursor:pointer}
.mail-zal-lista, .mail-pliki-klienta{display:flex; flex-wrap:wrap; gap:6px; width:100%}
.mail-zal-poz{display:inline-flex; align-items:center; gap:6px; padding:6px 6px 6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); font-size:13.5px; max-width:100%}
.mail-zal-poz small{color:var(--muted)}
.mail-zal-poz button{width:28px; height:28px; border-radius:50%; border:0; background:var(--surface-3); cursor:pointer; color:var(--ink)}
.mail-pliki-klienta .ptak{min-height:36px}
@media (max-width:760px){
  .okno:has(.mail-okno){width:100%}
  .mail-tresc{min-height:160px; font-size:16px}
  .mail-pasek button{min-height:40px}
  .mail-zal-poz button{width:36px; height:36px}
}