/* Platforma LSM — oprawa wg tonalności strony franczyzy marki (LSM-U-07, polecenie Aleksa 09.10 09:52, D-28;
   wcześniej strona sklepu, D-14). Tło kremowe, białe karty z dużym zaokrągleniem i miękkim cieniem, tekst prawie czarny,
   akcent czerwony, zielone pastylki akcji; koral = kolor logo marki (pliki od Aleksa). Responsywna (R-N1). */
:root {
  --koral: #FF5B50; --koral-ciemny: #E04B41; --bordo: #541024;
  --czerwien: #CC4242; --czerwien-ciemna: #9B4242; --akcent-miekki: rgba(204, 66, 66, 0.10);
  --zielen: #2EA24B; --zielen-jasna: #258A3F; --zielen-ciemna: #1F7A36;
  --krem: #FAF6F1; --krem-jasny: #FFFDFB; --bez: #F1E9E1;
  --tekst: #161616; --tekst-2: rgba(22, 22, 22, 0.72); --ramka: rgba(22, 22, 22, 0.08); --ramka-mocna: rgba(22, 22, 22, 0.14);
  --bialy: #FFFFFF;
  --cien: 0 18px 40px rgba(17, 17, 17, 0.06); --promien: 28px; --promien-maly: 14px;
}
/* Typografia (LSM-U-07): ten sam zestaw co strona franczyzy — Inter, gdy jest w systemie, inaczej Arial. Strona marki też
   nie pobiera pliku fontu; tu tak samo: zero fontów z sieci (LSM-U-04). Ikony: SVG inline (_ikony.html). */
:root { --font: Inter, Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); background: var(--krem); color: var(--tekst); line-height: 1.5; font-size: 16px; -webkit-font-smoothing: antialiased; }
.ikona-svg { vertical-align: -3px; margin-right: 0.35rem; flex: none; }
h2 .ikona-svg { color: var(--czerwien); }
button .ikona-svg { vertical-align: -3px; margin-right: 0.25rem; }

/* nagłówek: jasny jak na stronie franczyzy — logo na jasne tło (logo_jasne), linki ciemne, wylogowanie jako zielona pastylka */
.naglowek { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.4rem; background: rgba(255, 253, 251, 0.94); color: var(--tekst); border-bottom: 1px solid var(--ramka); position: sticky; top: 0; z-index: 40; backdrop-filter: blur(8px); }
.marka { font-weight: 800; font-size: 1.15rem; }
.marka small { display: block; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--koral); margin-top: 0.15rem; }
.marka-nazwa { color: var(--koral); letter-spacing: -0.02em; }
.logo-marki { display: block; height: 38px; width: auto; max-width: 220px; object-fit: contain; }
.logo-tlo { display: inline-block; background: var(--koral); border-radius: var(--promien-maly); padding: 5px 10px; }
.naglowek nav { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.naglowek a, .naglowek .kto { color: var(--tekst); text-decoration: none; padding: 0.4rem 0.85rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; }
.naglowek a:hover { background: var(--akcent-miekki); }
.naglowek .kto { background: var(--akcent-miekki); color: var(--czerwien-ciemna); font-weight: 700; font-size: 0.82rem; }
.naglowek form.inline { display: inline; }
.naglowek form.inline button { padding: 0.45rem 1.1rem; }

.tresc { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1rem 3rem; }
.stopka { text-align: center; font-size: 0.78rem; color: var(--tekst-2); padding: 1.2rem; }
h1 { font-size: 2.2rem; font-weight: 600; color: var(--tekst); margin: 0.4rem 0 0.9rem; letter-spacing: -0.045em; line-height: 1.1; }
h2 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.03em; color: var(--tekst); margin: 2.2rem 0 0.7rem; }
h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; margin: 0.6rem 0 0.3rem; color: var(--tekst); }
a { color: var(--czerwien); }

/* komentarze pomocnicze: krótkie wyjaśnienie, co tu zrobić */
.pomoc { color: var(--tekst-2); font-size: 0.9rem; }
.komentarz { background: var(--krem-jasny); border: 1px solid var(--ramka); border-left: 4px solid var(--czerwien); border-radius: var(--promien-maly); padding: 0.7rem 1rem; font-size: 0.92rem; color: var(--tekst-2); margin: 0.4rem 0 1rem; }
.komentarz strong { color: var(--tekst); }
.kroki { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0 1rem; }
.krok { flex: 1 1 200px; background: var(--bialy); border-radius: var(--promien-maly); padding: 0.9rem 1rem; box-shadow: var(--cien); font-size: 0.92rem; }
.krok .numer { display: inline-block; width: 1.7rem; height: 1.7rem; line-height: 1.7rem; text-align: center; border-radius: 50%; background: var(--akcent-miekki); color: var(--czerwien); font-weight: 800; margin-right: 0.45rem; }

/* kafelki liczb (pulpit centrali): białe karty jak na stronie franczyzy */
.kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; margin: 0.6rem 0 1.4rem; }
.kafelek { background: var(--bialy); border-radius: var(--promien); padding: 1.1rem 1.3rem; box-shadow: var(--cien); border: 1px solid var(--ramka); }
.kafelek .liczba { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.045em; color: var(--tekst); line-height: 1.1; }
.kafelek .etykieta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-2); }
.kafelek.alarm { border-color: var(--czerwien); }
.kafelek.alarm .liczba { color: var(--czerwien); }

/* formularze i przyciski: zielone pastylki akcji z cieniem (CTA strony franczyzy) */
.formularz { display: grid; gap: 0.7rem; max-width: 460px; }
.formularz label { display: grid; gap: 0.3rem; font-size: 0.9rem; color: var(--tekst-2); font-weight: 600; }
input, select, textarea, button { font: inherit; padding: 0.6rem 0.85rem; border: 1px solid var(--ramka-mocna); border-radius: var(--promien-maly); background: var(--bialy); color: var(--tekst); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--czerwien); outline-offset: 1px; border-color: var(--czerwien); }
textarea { min-height: 8rem; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
button { background: var(--zielen); color: var(--bialy); border: 0; cursor: pointer; border-radius: 999px; padding: 0.65rem 1.4rem; font-weight: 700; box-shadow: 0 14px 28px rgba(46, 162, 75, 0.22); transition: background 0.15s, transform 0.05s; }
button:hover { background: var(--zielen-jasna); }
button:active { transform: translateY(1px); background: var(--zielen-ciemna); }
button.drugi { background: var(--bialy); color: var(--tekst); border: 1px solid var(--ramka-mocna); box-shadow: none; }
button.drugi:hover { background: var(--krem-jasny); }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
.blad { color: var(--czerwien-ciemna); font-weight: 700; background: var(--akcent-miekki); border-radius: var(--promien-maly); padding: 0.6rem 0.9rem; }
.info { color: var(--zielen-ciemna); font-weight: 700; background: #E8F5EC; border-radius: var(--promien-maly); padding: 0.6rem 0.9rem; }

/* tabele i karty */
.tabela-przewijana { overflow-x: auto; background: var(--bialy); border-radius: var(--promien-maly); box-shadow: var(--cien); border: 1px solid var(--ramka); }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--ramka); vertical-align: top; }
th { background: var(--krem-jasny); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-2); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--krem-jasny); }
.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; }
.karta { background: var(--bialy); border-radius: var(--promien); padding: 1.3rem 1.4rem; box-shadow: var(--cien); border: 1px solid var(--ramka); transition: border-color 0.15s; }
.karta:hover { border-color: var(--czerwien); }
.karta strong { font-size: 1.05rem; color: var(--tekst); }
.karta form.inline { margin-top: 0.6rem; }
.podglad { max-width: 100%; height: auto; border-radius: var(--promien-maly); background: var(--bialy); box-shadow: var(--cien); }
.miniatura { display: block; width: 100%; max-height: 220px; object-fit: contain; object-position: top; border-radius: 10px; background: var(--krem-jasny); margin-bottom: 0.6rem; }
.miniatura.mala { width: 72px; max-height: 96px; margin: 0; }
.uklad-dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.odznaka { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--akcent-miekki); color: var(--czerwien-ciemna); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.odznaka.ok, .odznaka.OPUBLIKOWANY, .odznaka.AKTYWNY, .odznaka.wdrożone, .odznaka.TAK { background: #E7F3EC; color: var(--zielen); }
.odznaka.uwaga, .odznaka.ROBOCZY, .odznaka.przyjęte { background: #FFF1CC; color: #7A5A00; }
.odznaka.stop, .odznaka.WYCOFANY, .odznaka.NIEAKTYWNY, .odznaka.odrzucone, .odznaka.NIE { background: #F2E6E8; color: var(--czerwien); }
.odznaka.nowe { background: #FFE1DE; color: var(--koral-ciemny); }
.ikona { display: inline-block; width: 1.3rem; text-align: center; }
code, pre { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
pre { background: var(--bialy); border: 1px solid var(--ramka); border-radius: 10px; padding: 0.6rem; overflow-x: auto; }

/* Kreator szablonu (LSM-U-06) */
.k-el { margin-bottom: 0.7rem; padding: 0.7rem 0.9rem; }
.k-siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0.4rem 0; }
.k-siatka label, .k-el label { font-size: 0.8rem; }
.k-el input[type=number] { width: 100%; }
.k-pula label.inline { display: inline-block; font-weight: 500; margin-right: 0.4rem; }
.plansza { position: relative; border: 1px solid var(--ramka); border-radius: 8px; box-shadow: var(--cien); overflow: hidden; margin-bottom: 1rem; }
.k-box { position: absolute; overflow: hidden; white-space: nowrap; border: 1px dashed rgba(22,22,22,0.35); padding: 1px 2px; line-height: 1.1; }
.k-box.WYBOR_Z_PULI, .k-box.EDYTOWALNY { border-style: solid; border-color: var(--zielen); }
#k-json { font-size: 0.75rem; min-height: 14rem; }

/* Pętla uwag testera: przycisk z twarzą Theo i okno czatu */
#uwagi-przycisk { position: fixed; right: 16px; bottom: 16px; z-index: 50; border-radius: 999px; padding: 0.6rem 1.1rem 0.6rem 0.6rem; box-shadow: 0 14px 28px rgba(17,17,17,0.22); background: var(--tekst); display: flex; align-items: center; gap: 0.4rem; }
#uwagi-przycisk:hover { background: var(--czerwien); }
#uwagi-przycisk .licznik { background: var(--koral); color: var(--bialy); border-radius: 999px; padding: 0 0.45rem; margin-left: 0.2rem; font-size: 0.8rem; }
.uwagi-okno { position: fixed; right: 16px; bottom: 72px; width: 400px; max-width: calc(100vw - 32px); max-height: 80vh; overflow: auto; background: var(--bialy); border-radius: var(--promien-maly); padding: 1rem; z-index: 51; box-shadow: 0 18px 40px rgba(17,17,17,0.18); border: 1px solid var(--ramka); }
.uwagi-naglowek { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.uwagi-okno .formularz { max-width: none; gap: 0.3rem; }
.awatar { display: inline-block; width: 1.65rem; height: 1.65rem; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--koral); }  /* P-10: twarz Theo (static/theo.webp) */
.uwagi-watek { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.3rem 0; }
.dymek { max-width: 92%; padding: 0.5rem 0.7rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.35; }
.dymek small { color: var(--tekst-2); font-size: 0.74rem; }
.dymek.tester { align-self: flex-end; background: var(--krem); border-bottom-right-radius: 3px; }
.dymek.theo { align-self: flex-start; background: var(--krem-jasny); border: 1px solid var(--bez); border-bottom-left-radius: 3px; }
.uwagi-pisz textarea { min-height: 3.5rem; font-family: inherit; }
.uwagi-pasek { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
.uwagi-pasek input[type=file] { max-width: 180px; font-size: 0.8rem; padding: 0.3rem; }

/* R-C2 (WF-04): stany akceptacji, pasek stanu na egzemplarzu, kolejka centrali */
.odznaka.DO_AKCEPTACJI { background: #FFF1CC; color: #7A5A00; }
.odznaka.ZAAKCEPTOWANY { background: #E7F3EC; color: var(--zielen); }
.odznaka.ODRZUCONY { background: #F2E6E8; color: var(--czerwien); }
.pasek-stanu { background: var(--bialy); border-radius: var(--promien); box-shadow: var(--cien); padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; border-left: 4px solid var(--koral); }
.pasek-stanu .komentarz { margin: 0.5rem 0; }
a.kafelek { display: block; color: inherit; text-decoration: none; }
a.kafelek:hover { box-shadow: 0 0 0 2px var(--koral); }
.kolejka td { vertical-align: top; }
.kolejka .wpisy-lokalne div { background: var(--krem-jasny); border-radius: 6px; padding: 0.25rem 0.45rem; margin-bottom: 0.25rem; }
.kolejka .formularz-decyzji { display: flex; gap: 0.35rem; margin-bottom: 0.35rem; }
.kolejka .formularz-decyzji input { min-width: 9rem; }
.formularz-obrazu { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.3rem; font-size: 0.8rem; }
.formularz-hasla { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }  /* B21: strona kont */
.formularz-hasla input { min-width: 8rem; flex: 1 1 8rem; }
#lista-kont td { vertical-align: top; }
label.wybor { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
label.wybor input { width: auto; }

@media (max-width: 600px) {
  .naglowek { flex-direction: column; align-items: flex-start; gap: 0.4rem; position: static; }
  .tresc { padding: 0.8rem 0.6rem 3rem; }
  .uklad-dwie { grid-template-columns: 1fr; }
  table { font-size: 0.84rem; }
  h1 { font-size: 1.35rem; }
  .uwagi-okno { right: 8px; left: 8px; width: auto; bottom: 64px; }
  .kafelki { grid-template-columns: repeat(2, 1fr); }
  .kolejka .formularz-decyzji { flex-direction: column; }
}