:root {
  --tlo: #f3f5f9; --karta: #fff; --tekst: #1b2232; --cichy: #677189; --linia: #e1e6ef;
  --akcent: #1f4fd8; --akcent-2: #e8eefd; --dobra: #128a4f; --srednia: #c27b00; --slaba: #c8322b;
  --r: 10px; font-family: 'Barlow', system-ui, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font-size: 15px; line-height: 1.5; }
h2, h3 { margin: 0 0 8px; }
h3 { margin-top: 28px; font-size: 17px; }
input, select, button { font: inherit; }
input, select { border: 1px solid var(--linia); border-radius: 8px; padding: 9px 11px; background: #fff; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--akcent-2); border-color: var(--akcent); }
.cichy { color: var(--cichy); font-weight: 400; font-size: 13px; }
.blad { color: var(--slaba); }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linia); background: #fff; color: var(--tekst);
  border-radius: 8px; padding: 9px 16px; cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 40px; }
.btn:hover { border-color: var(--akcent); }
.btn.glowny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.btn:disabled { opacity: .55; cursor: wait; }
.link { background: none; border: 0; color: var(--akcent); cursor: pointer; padding: 0 4px; font-weight: 500; }
.znak { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--akcent); color: #fff; font-weight: 700; letter-spacing: .5px; font-size: 13px; }

/* logowanie */
body.logowanie { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.karta-logowania { background: #fff; padding: 32px; border-radius: 14px; width: 100%; max-width: 360px; display: grid; gap: 14px; box-shadow: 0 10px 40px rgba(20,30,60,.08); }
.karta-logowania h1 { margin: 0; font-size: 24px; }
.karta-logowania p { margin: 0; }
.karta-logowania label { display: grid; gap: 6px; font-weight: 600; }

/* układ */
.gora { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 5; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo small { display: block; color: var(--cichy); font-size: 12px; }
.asystenci { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; font-weight: 600; }
.chip.on { background: #e3f5ec; color: var(--dobra); }
.chip.off { background: #f0f1f4; color: #9aa2b4; text-decoration: line-through; }
.wyloguj { color: var(--cichy); text-decoration: none; font-size: 14px; }
.uklad { display: grid; grid-template-columns: 290px 1fr; min-height: calc(100vh - 60px); }
.boczny { background: #fff; border-right: 1px solid var(--linia); padding: 18px; }
.nowy { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--linia); }
.nowy h3, .lista-tyt { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; color: var(--cichy); }
.lista-tyt { margin-top: 18px; }
.projekty { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 4px; }
.projekty li { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; }
.projekty li:hover { background: var(--tlo); }
.projekty li.akt { background: var(--akcent-2); }
.projekty li span { display: block; font-weight: 600; }
.projekty li small { color: var(--cichy); font-size: 12px; }
.ocena { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; font-size: 15px; color: #fff; }
.ocena.dobra { background: var(--dobra); } .ocena.srednia { background: var(--srednia); } .ocena.slaba { background: var(--slaba); }
.projekty .ocena.dobra, .projekty .ocena.srednia, .projekty .ocena.slaba { color: #fff; }
.ocena.brak, .ocena.trwa { background: #d9dee8; color: var(--cichy); }
main { padding: 24px 28px 60px; min-width: 0; }
.pusty { background: #fff; border-radius: var(--r); padding: 28px; max-width: 760px; }
.pusty li { margin-bottom: 8px; }

/* projekt */
.naglowek-projektu { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.p-nazwa { font-size: 26px; }
.p-url { color: var(--cichy); font-size: 14px; }
.p-marki { margin-top: 6px; font-size: 13px; color: var(--cichy); }
.znacznik { background: var(--akcent-2); color: var(--akcent); border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.akcje { display: flex; gap: 8px; flex-wrap: wrap; }
.postep { margin: 16px 0 0; display: grid; gap: 6px; }
.pasek { height: 8px; background: var(--linia); border-radius: 99px; overflow: hidden; }
.pasek i { display: block; height: 100%; background: var(--akcent); width: 2%; transition: width .6s; }
.postep-opis { font-size: 13px; color: var(--cichy); }
.komunikat { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--akcent-2); }
.komunikat.ok { background: #e3f5ec; } .komunikat.blad { background: #fde8e7; color: var(--slaba); }
.zakladki { display: flex; gap: 2px; margin: 22px 0 18px; border-bottom: 1px solid var(--linia); overflow-x: auto; }
.zakladki button { background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--cichy); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.zakladki button.akt { color: var(--akcent); border-bottom-color: var(--akcent); }
.pusto { color: var(--cichy); padding: 30px 0; }

/* tematy */
.pasek-tematow { color: var(--cichy); font-size: 13px; margin-bottom: 12px; }
.tematy { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.temat { background: #fff; border-radius: var(--r); padding: 14px; border: 1px solid var(--linia); display: flex; flex-direction: column; }
.temat-gora { display: flex; gap: 8px; align-items: center; }
.temat-nazwa { font-weight: 700; border-color: transparent; padding: 4px 6px; }
.temat-nazwa:hover { border-color: var(--linia); }
.zrodlo { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 6px; background: #f0f1f4; color: var(--cichy); }
.zrodlo.ai { background: #f1ebff; color: #6a3fd1; }
.pytania { list-style: none; padding: 0; margin: 8px 0; flex: 1; }
.pytania li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 14px; }
.pytania li:hover { background: var(--tlo); }
.pytania .x { border: 0; background: none; color: #aab1c2; cursor: pointer; font-size: 17px; line-height: 1; }
.temat-dol { display: flex; gap: 8px; align-items: center; }
.temat-dol input { font-size: 14px; padding: 6px 9px; }
.dodaj-temat { display: flex; gap: 8px; margin-top: 14px; max-width: 700px; }

/* wynik */
.wyniki-gora { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.duzy { background: #fff; border-radius: var(--r); padding: 16px; display: grid; gap: 2px; border: 1px solid var(--linia); }
.duzy span { color: var(--cichy); font-size: 13px; font-weight: 600; }
.duzy b { font-size: 40px; line-height: 1.1; }
.duzy b.maly { font-size: 19px; line-height: 1.3; }
.duzy b small { font-size: 16px; color: var(--cichy); font-weight: 500; }
.duzy em { font-style: normal; font-size: 13px; color: var(--cichy); }
.duzy em.plus { color: var(--dobra); font-weight: 700; } .duzy em.minus { color: var(--slaba); font-weight: 700; }
.duzy > small { color: var(--cichy); font-size: 12px; }
.dobra { color: var(--dobra); } .srednia { color: var(--srednia); } .slaba { color: var(--slaba); }
.kafle-as { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kafel-as { background: #fff; border-radius: var(--r); padding: 14px; border: 1px solid var(--linia); display: grid; gap: 6px; }
.as-nazwa { font-weight: 700; } .as-nazwa small { display: block; color: var(--cichy); font-weight: 400; font-size: 12px; }
.as-wynik { font-size: 30px; font-weight: 700; }
.kafel-as > small { color: var(--cichy); font-size: 12px; }
.pasek-maly { height: 6px; background: var(--linia); border-radius: 9px; overflow: hidden; }
.pasek-maly i { display: block; height: 100%; background: var(--akcent); }
.opisy { background: #fff; border-radius: var(--r); padding: 14px 14px 14px 32px; border: 1px solid var(--linia); }
.opisy li { margin-bottom: 6px; }
.ton { font-size: 11px; border-radius: 5px; padding: 0 6px; background: #f0f1f4; }
.ton.pozytywny { background: #e3f5ec; color: var(--dobra); } .ton.negatywny { background: #fde8e7; color: var(--slaba); }
.tabela { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--linia); }
.tabela th, .tabela td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--linia); vertical-align: top; font-size: 14px; }
.tabela th { background: #f7f8fb; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--cichy); }
.tabela td small { display: block; color: var(--cichy); font-size: 12px; }
.tabela.waska { max-width: 420px; }
.wiersz-tematu td { background: #f7f8fb; }
.kropka { text-align: center !important; font-size: 17px; }
.kropka .tak { color: var(--dobra); font-style: normal; } .kropka .nie { color: #c2c8d4; font-style: normal; } .kropka .bl { color: var(--srednia); font-style: normal; }
td.ok { color: var(--dobra); font-weight: 700; } td.zle { color: var(--slaba); font-weight: 700; }
tr.klient td { background: #eef3ff; font-weight: 700; }
.pasek-udzial { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.pasek-udzial i { display: block; height: 10px; background: var(--akcent); border-radius: 9px; min-width: 2px; }
.pasek-udzial span { font-size: 13px; font-weight: 600; }
.typ { font-size: 12px; font-weight: 700; border-radius: 5px; padding: 1px 7px; background: #f0f1f4; }
.typ.katalog, .typ.ranking { background: #e3f5ec; color: var(--dobra); } .typ.media, .typ.forum { background: #fff3dc; color: var(--srednia); }
.typ.konkurent { background: #fde8e7; color: var(--slaba); }
.cta-wdrozenie { margin-top: 26px; background: #0f2a6b; color: #fff; border-radius: var(--r); padding: 18px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-wdrozenie b { display: block; font-size: 18px; } .cta-wdrozenie span { opacity: .85; font-size: 14px; }
.cta-wdrozenie .btn.glowny { background: #fff; color: #0f2a6b; border-color: #fff; }

/* odpowiedzi */
.filtry { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filtry select { width: auto; }
.odp { background: #fff; border-radius: 8px; border: 1px solid var(--linia); margin-bottom: 6px; border-left: 4px solid #c2c8d4; }
.odp.tak { border-left-color: var(--dobra); } .odp.z-bledem { border-left-color: var(--srednia); }
.odp summary { display: flex; gap: 12px; padding: 10px 12px; cursor: pointer; align-items: baseline; }
.odp .as { font-weight: 700; min-width: 90px; } .odp .q { flex: 1; } .odp .stan { font-size: 12px; color: var(--cichy); white-space: nowrap; }
.odp > *:not(summary) { margin: 0 14px 10px; }
.tekst-odp { font-size: 14px; background: #fafbfd; border-radius: 6px; padding: 10px 12px; max-height: 420px; overflow: auto; }
.firmy span { display: inline-block; background: #f0f1f4; border-radius: 5px; padding: 1px 7px; margin: 2px; font-size: 13px; }
.firmy span.klient { background: #e3f5ec; color: var(--dobra); font-weight: 700; }

/* technika */
.uwagi { list-style: none; padding: 0; display: grid; gap: 6px; }
.uwagi li { background: #fff; border: 1px solid var(--linia); border-radius: 8px; padding: 9px 12px; display: flex; gap: 10px; align-items: baseline; }
.uwagi li span { font-size: 11px; font-weight: 700; text-transform: uppercase; border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.uwagi .w3 span { background: #fde8e7; color: var(--slaba); } .uwagi .w2 span { background: #fff3dc; color: var(--srednia); } .uwagi .w1 span { background: #f0f1f4; color: var(--cichy); }

/* działania */
.dz-sekcja { margin-top: 22px; }
.dz { background: #fff; border: 1px solid var(--linia); border-radius: var(--r); padding: 12px 14px; margin-top: 8px; }
.dz.st-zrobione { opacity: .7; border-left: 4px solid var(--dobra); } .dz.st-w_toku, .dz.st-przekazane { border-left: 4px solid var(--akcent); }
.dz.st-czeka_na_klienta, .dz.st-blad { border-left: 4px solid var(--srednia); } .dz.st-odrzucone { opacity: .45; }
.dz-gora { display: flex; gap: 10px; align-items: center; cursor: pointer; flex-wrap: wrap; }
.dz-gora input { width: auto; }
.dz-gora b { flex: 1; min-width: 200px; }
.dz p { margin: 6px 0; font-size: 14px; color: #3b4458; }
.prio { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 7px; text-transform: uppercase; }
.prio.p1 { background: #fde8e7; color: var(--slaba); } .prio.p2 { background: #fff3dc; color: var(--srednia); } .prio.p3 { background: #f0f1f4; color: var(--cichy); }
.status { font-size: 12px; color: var(--cichy); }
pre { white-space: pre-wrap; word-break: break-word; background: #f6f7fa; border-radius: 6px; padding: 10px 12px; font-size: 12.5px; margin: 6px 0; max-height: 380px; overflow: auto; }
.wynik-dz { background: #eef3ff; }
.dz-dol { display: flex; justify-content: flex-end; }
.dz-dol select { width: auto; font-size: 13px; padding: 4px 8px; }
details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--akcent); }

@media (max-width: 860px) {
  .uklad { grid-template-columns: 1fr; }
  .boczny { border-right: 0; border-bottom: 1px solid var(--linia); }
  main { padding: 18px 16px 50px; }
  .gora { flex-wrap: wrap; padding: 10px 16px; }
  .tabela { display: block; overflow-x: auto; }
  .tematy { grid-template-columns: 1fr; }
  .dodaj-temat { flex-direction: column; }
}