:root {
  --tlo: #0E1320;
  --panel: #121828;
  --karta: #171E2E;
  --linia: #26304A;
  --linia-mocna: #3A476B;
  --tekst: #EEF1F7;
  --tekst-jasny: #C9D2E3;
  --pomocniczy: #A3AEC4;
  --niebieski: #5B8CFF;
  --niebieski-tlo: #24345F;
  --niebieski-jasny: #C2D4FF;
  --bursztyn: #FFB454;
  --zielony: #6FE0A8;
  --zielony-tlo: #1F3A2E;
  --zielony-jasny: #8EEBBE;
  --szary: #6F7C96;
  --czerwony: #FF6B6B;
  --promien: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--tlo);
  color: var(--tekst);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: #8FB0FF; }
a:hover { color: var(--niebieski-jasny); }

h1, h2, h3, .logo { font-family: "Sora", system-ui, sans-serif; font-weight: 600; margin: 0 0 8px; }
h1 { font-size: 24px; }
h2 { font-size: 22px; }
h1.duzy { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }

.karta {
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 22px;
}

.pomocniczy { color: var(--pomocniczy); margin: 0; }
.maly { font-size: 13px; }
.blad { color: var(--czerwony); margin: 0 0 12px; }
.ostrzezenie { color: var(--bursztyn); margin: 0 0 12px; }
.wielowierszowy { white-space: pre-line; overflow-wrap: anywhere; }
.ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- formularze ---------- */

label { display: block; font-weight: 600; margin-bottom: 6px; }
input, textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--tlo);
  color: var(--tekst);
  border: 1px solid var(--linia-mocna);
  border-radius: 12px;
  font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--niebieski); }

.formularz { max-width: 760px; display: flex; flex-direction: column; }
.formularz input, .formularz textarea, .formularz select { margin-bottom: 18px; }

.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  background: var(--niebieski);
  color: var(--tlo);
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.przycisk:hover { filter: brightness(1.08); color: var(--tlo); }
.przycisk:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.przycisk.bursztyn { background: var(--bursztyn); }
.przycisk.drugorzedny { width: auto; background: transparent; border: 1px solid var(--linia-mocna); color: var(--tekst); font-weight: 600; }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }
.przyciski .przycisk { width: auto; }
.przycisk-sesji { min-height: 48px; padding: 0 22px; }

.link-przycisk { background: none; border: 0; padding: 0; color: #8FB0FF; font: inherit; cursor: pointer; text-decoration: underline; }

.ikona {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  background: transparent; color: var(--pomocniczy);
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
}
.ikona:hover { color: var(--tekst); border-color: var(--linia-mocna); }
.ikona-odstep { display: inline-block; width: 36px; height: 36px; }

/* ---------- logowanie (etap 1) ---------- */

.logowanie { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.logowanie .karta { width: 100%; max-width: 380px; padding: 24px; }
.logowanie .pomocniczy { margin-bottom: 16px; }
.logowanie input { margin-bottom: 16px; }

/* ---------- układ: panel boczny + treść ---------- */

.uklad { min-height: 100vh; display: flex; }

.panel {
  flex: 0 0 260px;
  background: var(--panel);
  border-right: 1px solid var(--linia);
  padding: 24px 16px;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
}
.panel-gora { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.marka { display: flex; align-items: center; gap: 10px; color: var(--tekst); text-decoration: none; font-family: "Sora", sans-serif; font-weight: 700; font-size: 17px; padding: 0 6px; }
.marka:hover { color: var(--tekst); }
.znak { width: 28px; height: 28px; border-radius: 8px; background: var(--bursztyn); }
.panel-przelacz { display: none; }

.panel-lista { display: flex; flex-direction: column; gap: 4px; }
.etykieta-sekcji { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pomocniczy); font-weight: 700; padding: 0 10px; margin: 0; }
#szukaj { margin: 8px 0 12px; border-radius: 10px; }
.grupa-tytul { font-size: 12px; color: var(--pomocniczy); padding: 12px 10px 4px; }
.pozycja {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 10px; border-radius: 10px;
  color: var(--tekst); text-decoration: none; overflow-wrap: anywhere;
}
.pozycja:hover { background: #1A2338; color: var(--tekst); }
.pozycja.aktywna { background: var(--niebieski-tlo); color: #fff; font-weight: 700; }
.pozycja[hidden], .grupa[hidden] { display: none; }
.pusto { color: var(--pomocniczy); font-size: 13px; padding: 8px 10px; margin: 0; }
.przycisk-kreska {
  display: flex; align-items: center; justify-content: center;
  margin-top: 16px; min-height: 44px;
  border: 1px dashed var(--linia-mocna); border-radius: 10px;
  color: var(--tekst); text-decoration: none; font-weight: 600;
}
.przycisk-kreska:hover { border-color: var(--niebieski); color: var(--tekst); }
.wyloguj { margin: 20px 10px 0; }
.wyloguj .link-przycisk { color: var(--pomocniczy); font-size: 13px; }

.kropka { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--niebieski); }
.kropka-otwarta { background: var(--zielony); }
.kropka-aktywny { background: var(--niebieski); }
.kropka-wstrzymany { background: var(--bursztyn); }
.kropka-zakonczony { background: var(--szary); }

.glowna { flex: 1 1 auto; min-width: 0; padding: 32px 32px 56px; }
.kontener { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

.powrot { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; margin-bottom: -12px; }

/* ---------- ekran główny ---------- */

.tytul-strony .pomocniczy { margin-top: 6px; font-size: 16px; }
.kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.kafel {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px; min-height: 260px;
  border-radius: 18px; background: var(--karta); border: 1px solid var(--linia);
  color: var(--tekst); text-decoration: none;
}
.kafel:hover { border-color: var(--linia-mocna); color: var(--tekst); }
.kafel-otwarty { border-color: var(--niebieski); }
.kafel-gora { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kafel-nazwa { font-family: "Sora", sans-serif; font-size: 26px; font-weight: 700; overflow-wrap: anywhere; }
.kafel-nazwa.maly-tytul { font-size: 20px; font-weight: 600; }
.kafel-liczby { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 16px; border-top: 1px solid var(--linia); }
.liczba { font-family: "Sora", sans-serif; font-size: 20px; font-weight: 600; }
.kafel-nowy { align-items: center; justify-content: center; gap: 12px; background: transparent; border: 2px dashed var(--linia-mocna); text-align: center; }

.pigulka { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--linia); color: var(--tekst-jasny); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pigulka-zielona { background: var(--zielony-tlo); color: var(--zielony-jasny); }

/* ---------- wnętrze projektu ---------- */

.naglowek-projektu { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.duzy-opis { font-size: 16px; }
.metka { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--pomocniczy); }

.pasek-sesji {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
  padding: 18px 22px; border-radius: var(--promien);
  background: var(--karta); border: 1px solid var(--linia);
}
.okno { flex: 1 1 260px; min-width: 0; }
.okno-opis { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--pomocniczy); }
.okno-pasek { height: 8px; border-radius: 999px; background: var(--linia); margin-top: 6px; }
.okno-wypelnienie { height: 8px; border-radius: 999px; background: var(--niebieski); max-width: 100%; }
.ostrzezenie-tlo { background: var(--bursztyn); }

.zakladki { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--linia); padding-bottom: 12px; }
.zakladka {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid transparent;
  color: var(--tekst-jasny); text-decoration: none; font-weight: 600;
}
.zakladka:hover { color: #fff; border-color: var(--linia-mocna); }
.zakladka.wybrana { background: var(--niebieski-tlo); border-color: var(--niebieski); color: #fff; }

.przeglad { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.kolumna-glowna { flex: 3 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.kolumna-boczna { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.trzy-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.mala-karta { padding: 20px; }
.etykieta-bursztyn { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bursztyn); }

.sekcja-gora { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.wiersz { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linia); margin: 0; }
.wiersz-nazwa { flex: 1 1 160px; font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.akcje { display: flex; gap: 2px; }
.licznik { min-width: 64px; text-align: right; }
.akcje form, .wybor-stanu, .zadanie form { margin: 0; }

.pigulka-wybor {
  width: auto; min-height: 36px; padding: 4px 30px 4px 12px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background-color: var(--linia); color: var(--tekst-jasny);
}
.pigulka-wybor.stan-w_trakcie { background-color: var(--niebieski-tlo); color: var(--niebieski-jasny); }
.pigulka-wybor.stan-zakonczony, .pigulka-wybor.stan-zrobione { background-color: var(--zielony-tlo); color: var(--zielony-jasny); }

.dodaj { display: flex; gap: 10px; margin-top: 12px; }
.dodaj input { flex: 1 1 auto; min-width: 0; }
.dodaj .przycisk { width: auto; }

.zadanie {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 8px 8px 10px; border-radius: 12px;
  background: var(--tlo); border: 1px solid var(--linia);
}
.zadanie-w_trakcie { border-color: var(--niebieski); }
.zadanie-zrobione .zadanie-tresc { color: var(--pomocniczy); }
.zadanie-tresc { flex: 1 1 auto; min-width: 0; }

.zapowiedz { padding: 32px; }

/* ---------- zakładka Sesje ---------- */

.sesje { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.archiwum { flex: 3 1 460px; min-width: 0; }
.karta-sesji { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.karta-sesji h2 { margin: 0; }
.tabela-przewijana { overflow-x: auto; }
.tabela { width: 100%; min-width: 480px; border-collapse: collapse; text-align: left; }
.tabela th { padding: 10px 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pomocniczy); font-weight: 700; }
.tabela td { padding: 12px 8px; border-top: 1px solid var(--linia); vertical-align: middle; }
.tabela td a { font-weight: 600; text-decoration: none; display: inline-block; min-height: 24px; }
.tabela td .pomocniczy { display: block; }
.tabela tr.wybrany td { background: #1A2338; }
.tabela tr.wybrany td:first-child { box-shadow: inset 3px 0 0 var(--niebieski); }
.pogrubione { font-weight: 600; }

.kontynuuj summary { list-style: none; }
.kontynuuj summary::-webkit-details-marker { display: none; }
.kontynuuj[open] summary { margin-bottom: 12px; }
.kontynuuj textarea { margin: 8px 0 10px; font-size: 13px; }
.przycisk.niebezpieczny { color: var(--czerwony); border-color: #5A2A35; }
.karta-sesji .przyciski form { margin: 0; }

/* ---------- podłączenie z Claude ---------- */

.stan-polaczenia { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px 22px; }
.krok { display: flex; gap: 18px; align-items: flex-start; }
.krok-numer {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--niebieski-tlo); color: var(--niebieski-jasny);
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 18px;
}
.krok-tresc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.krok-tresc h2 { margin: 0; }
.krok-tresc textarea { font-size: 13px; }
.krok-tresc .przycisk { width: auto; }
.lista-krokow { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pole-krotkie { display: block; max-width: 220px; margin-top: 6px; }
.kod {
  margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--tlo); border: 1px solid var(--linia);
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; width: 100%;
}

.instrukcja-sesji { position: relative; }
.instrukcja-sesji summary { list-style: none; }
.instrukcja-sesji summary::-webkit-details-marker { display: none; }
.instrukcja-sesji .dymek {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; width: min(360px, calc(100vw - 32px));
  padding: 16px; border-radius: 14px; background: var(--karta); border: 1px solid var(--linia-mocna);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 8px;
}
.instrukcja-sesji .dymek p { margin: 0; }
.cytat { padding: 10px 12px; border-radius: 10px; background: var(--tlo); border: 1px solid var(--linia); font-weight: 600; }

@media (max-width: 860px) {
  .krok { flex-direction: column; gap: 10px; }
}

.pola-w-rzedzie { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }

/* ---------- telefon ---------- */

@media (max-width: 860px) {
  .uklad { flex-direction: column; }
  .panel { position: static; height: auto; flex: none; align-self: stretch; border-right: 0; border-bottom: 1px solid var(--linia); padding: 12px 16px; }
  .panel-gora { margin-bottom: 0; }
  .panel-przelacz {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px;
    background: transparent; color: var(--tekst);
    border: 1px solid var(--linia-mocna); border-radius: 10px;
    font: inherit; font-weight: 600; cursor: pointer;
  }
  .panel-lista { display: none; padding-top: 12px; }
  .panel.otwarty .panel-lista { display: flex; }
  .glowna { padding: 20px 16px 48px; }
  h1.duzy { font-size: 30px; }
  .kafle { grid-template-columns: 1fr; }
  .kafel { min-height: 0; }
  .przyciski .przycisk-sesji { flex: 1 1 auto; }
}