.el6-wrap {
  background: #f4f9f8;
  min-height: 60vh;
  padding: 3rem 0 5rem;
}

/* Ekran koncowy - layout z ilustracja jak w referencji */
.el6-wrap .el6-koniec-card {
  max-width: 1180px;
  padding: 42px 44px 32px;
  border-radius: 22px;
}

.el6-koniec-hero {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 30px;
}

.el6-koniec-visual {
  position: relative;
  min-height: 230px;
}

.el6-koniec-visual img {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: 0 auto;
  border-radius: 24px;
}

.el6-koniec-flag-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 220px;
  transform: translate(-50%, -50%);
}

.el6-koniec-flag-scene::before {
  content: "";
  position: absolute;
  left: 38px;
  top: 8px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dff4f1, #eef9f7);
}

.el6-koniec-flag-pole {
  position: absolute;
  left: 86px;
  top: 54px;
  width: 9px;
  height: 124px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d5a54d, #956c31);
  transform: rotate(-7deg);
  transform-origin: bottom center;
  z-index: 3;
}

.el6-koniec-flag-pole::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #f1b64d;
}

.el6-koniec-flag {
  position: absolute;
  left: 92px;
  top: 54px;
  width: 106px;
  height: 62px;
  border-radius: 8px 18px 18px 8px;
  background: linear-gradient(135deg, #009b8d, #007a73);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  z-index: 4;
  box-shadow: 0 14px 24px rgba(0, 116, 125, .18);
}

.el6-koniec-hill {
  position: absolute;
  bottom: 18px;
  border-radius: 999px 999px 28px 28px;
  background: #a9ded8;
  z-index: 2;
}

.el6-koniec-hill.h1 { left: 32px; width: 150px; height: 76px; }
.el6-koniec-hill.h2 { right: 22px; width: 112px; height: 58px; background: #b9e6e1; }

.el6-koniec-leaf {
  position: absolute;
  bottom: 32px;
  width: 52px;
  height: 34px;
  border-radius: 80% 0 80% 0;
  background: #68bcb2;
  opacity: .75;
  z-index: 5;
}
.el6-koniec-leaf.l1 { left: 22px; transform: rotate(38deg); }
.el6-koniec-leaf.l2 { right: 18px; transform: rotate(-28deg); }

.el6-koniec-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #f4bd4a;
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}
.el6-koniec-spark.s1 { left: 34px; top: 62px; }
.el6-koniec-spark.s2 { right: 34px; top: 92px; width: 14px; height: 14px; }
.el6-koniec-spark.s3 { left: 70px; bottom: 56px; width: 12px; height: 12px; opacity: .75; }

.el6-koniec-header {
  text-align: left;
  margin-bottom: 28px;
}

.el6-koniec-emoji { display: none; }

.el6-koniec-tytul {
  color: #102942;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  letter-spacing: 0;
}

.el6-koniec-subtytul {
  max-width: 720px;
  color: #3d5164;
  font-size: 1.04rem;
}

.el6-koniec-badge {
  min-height: 92px;
  margin: 0;
  padding: 16px 20px;
  border-color: #c8e6e2;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,155,141,.065), rgba(255,255,255,.86));
}

.el6-koniec-badge-ikona {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #009b8d, #007a73);
  color: #fff;
}

.el6-koniec-badge-tytul {
  color: #0e3a38;
  font-size: 1.08rem;
  font-weight: 850;
}

.el6-koniec-badge-podtytul {
  color: #536575;
  font-size: .95rem;
}

.el6-koniec-badge-fazy { gap: .45rem; }

.el6-koniec-badge-faza {
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255,255,255,.82);
  background: #dff4f1;
  box-shadow: 0 6px 15px rgba(0, 116, 125, .08);
  font-size: 1.15rem;
}

.el6-koniec-materialy { margin-bottom: 24px; }

.el6-koniec-materialy-label {
  color: #007a73;
  font-size: .85rem;
  font-weight: 850;
}

.el6-koniec-materialy-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.el6-koniec-mat-btn {
  justify-content: flex-start;
  gap: .85rem;
  min-height: 66px;
  padding: .85rem 1rem;
  text-align: left;
}

.el6-koniec-mat-btn i { font-size: 1.25rem; }
.el6-koniec-mat-btn span { display: grid; gap: .1rem; }
.el6-koniec-mat-btn strong { color: #008f86; font-size: .96rem; }
.el6-koniec-mat-btn small { color: #536575; font-size: .78rem; font-weight: 500; }

.el6-koniec-stopka {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  color: #667789;
  font-size: .95rem;
}

.el6-koniec-stopka::before {
  content: "\F47A";
  font-family: "bootstrap-icons";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #dff4f1;
  color: #008f86;
}

.el6-koniec-stopka strong {
  color: #008f86;
  font-family: inherit;
  letter-spacing: .04em;
}

.el6-koniec-quote {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 230px;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 22px auto 0;
  padding: 20px 28px;
  border: 1px solid #c8e6e2;
  border-radius: 18px;
  background: #f0f6f7;
  box-shadow: 0 10px 26px rgba(15, 42, 56, .055);
}

.el6-koniec-quote-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #dff4f1;
  color: #008f86;
  font-size: 2rem;
}

.el6-koniec-quote h2 {
  margin: 0 0 .25rem;
  color: #102942;
  font-size: 1.15rem;
  font-weight: 850;
}

.el6-koniec-quote p {
  margin: 0;
  color: #536575;
}

.el6-koniec-people {
  justify-self: end;
  display: block;
  width: min(100%, 235px);
  max-height: 88px;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: .82;
}

@media (max-width: 900px) {
  .el6-wrap .el6-koniec-card { padding: 28px 20px; }
  .el6-koniec-hero { grid-template-columns: 1fr; gap: 10px; }
  .el6-koniec-visual { min-height: 190px; }
  .el6-koniec-header { text-align: center; }
  .el6-koniec-materialy-btns,
  .el6-koniec-quote { grid-template-columns: 1fr; }
  .el6-koniec-people { display: none; }
}
/* ═══ EKRANY ONBOARDINGU (profil, skala) ═══ */
.el6-onboard-inner {
  max-width: 760px; margin: 0 auto; text-align: center;
}
.el6-onboard-steps {
  display: flex; gap: .35rem; justify-content: center; margin-bottom: 1rem;
}
.el6-onboard-dot {
  width: 28px; height: 6px; border-radius: 3px; background: #ddecea;
  transition: background .2s;
}
.el6-onboard-dot.active { background: #009B8D; }
.el6-onboard-dot.done { background: #27ae60; }
.el6-onboard-badge {
  display: inline-block;
  background: rgba(0,155,141,.1); color: #009B8D;
  border: 1px solid rgba(0,155,141,.2);
  border-radius: 999px; padding: .3rem .9rem;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 1.25rem;
}
.el6-onboard-title {
  font-size: 2rem; font-weight: 900; color: #1e3a5f; margin-bottom: .5rem;
}
.el6-onboard-sub {
  font-size: 1rem; color: #4a6c72; margin-bottom: 2rem;
}

/* Karty profilu */
.el6-profiles {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-bottom: 2rem; text-align: left;
}
@media (max-width: 600px) { .el6-profiles { grid-template-columns: 1fr; } }
.el6-profile-card {
  background: #fff; border: 2px solid rgba(0,0,0,.06);
  border-radius: 20px; padding: 1.5rem; cursor: pointer;
  transition: all .22s; text-align: left;
  display: flex; flex-direction: column; gap: .6rem;
  box-shadow: 0 4px 16px rgba(17,24,39,.05);
}
.el6-profile-card:hover, .el6-profile-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(17,24,39,.12);
  border-color: rgba(0,155,141,.3);
  outline: none;
}
.el6-profile-card:focus-visible { outline: 3px solid rgba(0,155,141,.4); outline-offset: 2px; }
.el6-profile-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.el6-profile-label { font-size: 1.05rem; font-weight: 800; color: #1e3a5f; }
.el6-profile-desc { font-size: .88rem; color: #5f7b80; line-height: 1.55; flex: 1; }
.el6-profile-arrow { font-size: 1.1rem; color: #009B8D; align-self: flex-end; }

/* Karty skali */
.el6-skale {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-bottom: 1.5rem; text-align: left;
}
@media (max-width: 750px) { .el6-skale { grid-template-columns: 1fr; } }
.el6-skala-card {
  background: #fff; border: 2px solid rgba(0,0,0,.06);
  border-radius: 18px; padding: 1.25rem; cursor: pointer;
  transition: all .22s;
  display: flex; flex-direction: column; gap: .5rem;
  box-shadow: 0 4px 16px rgba(17,24,39,.05);
}
.el6-skala-card:hover, .el6-skala-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(17,24,39,.12);
  border-color: rgba(0,155,141,.3);
}
.el6-skala-card:focus-visible { outline: 3px solid rgba(0,155,141,.4); outline-offset: 2px; }
.el6-skala-visual {
  display: flex; align-items: baseline; gap: .5rem;
  color: #009B8D; margin-bottom: .3rem;
}
.el6-skala-visual i { font-size: 1.8rem; }
.el6-skala-count { font-size: 1.2rem; font-weight: 900; color: #1e3a5f; }
.el6-skala-label { font-size: 1rem; font-weight: 800; color: #1e3a5f; }
.el6-skala-desc { font-size: .82rem; color: #5f7b80; line-height: 1.5; }

.el6-onboard-back { margin-top: 1rem; }
.el6-back-link {
  background: none; border: none; color: #6b8c90; cursor: pointer;
  font-size: .88rem; text-decoration: underline;
}
.el6-back-link:hover { color: #009B8D; }

/* Kod powrotu (na ekranie 1) */
.el6-kod-link {
  background: none; border: none; color: #009B8D;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  text-decoration: underline; padding: 0;
}
.el6-kod-powrot {
  background: #fff; border: 1px solid #ddecea; border-radius: 14px;
  padding: 1rem 1.25rem; margin-bottom: 1rem; text-align: left;
  max-width: 500px; margin-left: auto; margin-right: auto;
}
.el6-kod-input-row { display: flex; gap: .5rem; }
.el6-kod-input-row input {
  flex: 1; padding: .6rem .8rem;
  border: 1.5px solid #ddecea; border-radius: 10px;
  font-size: .95rem; outline: none; font-family: monospace;
  letter-spacing: .1em; text-transform: uppercase;
}
.el6-kod-input-row input:focus { border-color: #009B8D; }
.el6-kod-input-row button {
  padding: .6rem 1.2rem; background: #009B8D; color: #fff;
  border: none; border-radius: 10px; font-weight: 700; cursor: pointer;
}
.el6-kod-error { color: #c0392b; font-size: .85rem; margin-top: .5rem; font-weight: 600; }

/* ── MATERIAŁY DO WYDRUKU (ekran startowy) ── */
.el6-materialy {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(0,0,0,.1);
  text-align: center;
}
.el6-materialy-label {
  font-size: .78rem; font-weight: 700;
  color: #6b8c90;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .85rem;
}
.el6-materialy-links {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; max-width: 540px; margin: 0 auto;
}
@media (max-width: 480px) {
  .el6-materialy-links { grid-template-columns: 1fr; }
}
.el6-material-link {
  display: flex; flex-direction: column; align-items: center;
  padding: .85rem 1rem; gap: .2rem;
  background: #fff;
  border: 1.5px solid #ddecea;
  border-radius: 14px;
  color: #1e3a5f;
  text-decoration: none;
  transition: all .2s;
  text-align: center;
}
.el6-material-link i { font-size: 1.4rem; color: #c0392b; margin-bottom: .15rem; }
.el6-material-link span { font-weight: 700; font-size: .92rem; }
.el6-material-link small { font-size: .78rem; color: #6b8c90; }
.el6-material-link:hover {
  transform: translateY(-2px);
  border-color: #009B8D;
  box-shadow: 0 6px 20px rgba(0,155,141,.12);
  color: #009B8D;
}

/* ═══ NAGŁÓWEK ŚCIEŻKI ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   NAGŁÓWEK ŚCIEŻKI v6 — boks kodu (góra) + główny pasek (postęp + faza + strzałki)
   Zastępuje stary el6-path-header z badge'ami profilu/skali (które po onboardingu
   są niepotrzebne — user wie co wybrał).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── BOKS KODU (góra) ─── */
.el6-kod-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(0,155,141,0.08), rgba(0,155,141,0.02));
  border: 1.5px solid rgba(0,155,141,0.25);
  border-radius: 14px;
  flex-wrap: wrap;
}
.el6-kod-box-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(0,155,141,0.15);
  color: #009B8D;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.el6-kod-box-text {
  flex: 1; min-width: 200px;
}
.el6-kod-box-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #062f2f;
  margin-bottom: 2px;
}
.el6-kod-box-hint {
  font-size: 0.82rem;
  color: #5f7373;
  line-height: 1.4;
}
.el6-kod-box-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #ffffff;
  border: 1.5px solid #009B8D;
  border-radius: 10px;
  font-family: monospace;
  font-weight: 800;
  font-size: 1.05rem;
  color: #009B8D;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,155,141,0.15);
  transition: all .18s ease;
  flex-shrink: 0;
}
.el6-kod-box-btn:hover {
  background: #009B8D;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,155,141,0.3);
}
.el6-kod-box-btn i { font-size: 0.9rem; }
.el6-kod-box-reset {
  font-size: 0.78rem;
  color: #9aa6a8;
  text-decoration: none;
  padding-left: 10px;
  border-left: 1px solid #d1dcdc;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: color .15s;
}
.el6-kod-box-reset:hover {
  color: #c0392b;
}

.el6-kod-box-journey {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #008f86;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
}

.el6-kod-box-journey:hover {
  color: #006f72;
}

@media (max-width: 700px) {
  .el6-kod-box { padding: 12px 14px; gap: 10px; }
  .el6-kod-box-icon { width: 36px; height: 36px; font-size: 1rem; }
  .el6-kod-box-title { font-size: 0.88rem; }
  .el6-kod-box-hint { font-size: 0.76rem; }
  .el6-kod-box-btn { padding: 8px 14px; font-size: 0.95rem; }
  .el6-kod-box-reset {
    border-left: none;
    padding-left: 0;
    width: auto;
    justify-content: flex-end;
  }
  .el6-kod-box-journey { margin-left: auto; }
}

/* ─── GŁÓWNY PASEK NAGŁÓWKA ─── */
.el6-path-header {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 1rem; flex-wrap: wrap;
  padding: 16px 22px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(8, 60, 60, 0.06);
  border: 1px solid #e3eeee;
}

.el6-path-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #009B8D;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
}
.el6-path-back:hover {
  color: #007a6e;
  text-decoration: underline;
}

/* Pasek postępu w środku */
.el6-path-progress {
  flex: 1;
  min-width: 200px;
}
.el6-path-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 10px;
}
.el6-path-progress-step {
  font-size: 1rem;
  font-weight: 800;
  color: #062f2f;
}
.el6-path-progress-percent {
  font-size: 0.78rem;
  color: #5f7373;
  font-weight: 600;
}
.el6-path-progress-bar {
  display: flex;
  gap: 3px;
}
.el6-path-progress-seg {
  flex: 1;
  height: 8px;
  background: #edf3f3;
  border-radius: 4px;
  transition: background .4s ease, box-shadow .3s ease;
}
.el6-path-progress-seg.done {
  background: linear-gradient(90deg, #009B8D, #2dbfaf);
}
.el6-path-progress-seg.active {
  background: linear-gradient(90deg, #f6a51a, #ffcc66);
  box-shadow: 0 2px 6px rgba(246,165,26,0.3);
}
/* Gdy jesteś NA kroku który już ukończyłeś — pomarańczowy ma priorytet
   (bo "tu jesteś" to najważniejsza informacja), ale dodajemy zielony
   cień pod spodem żeby pokazać że krok jest też ukończony. */
.el6-path-progress-seg.done.active {
  background: linear-gradient(90deg, #f6a51a, #ffcc66);
  box-shadow: 0 2px 6px rgba(246,165,26,0.3), 0 0 0 2px rgba(0,155,141,0.4);
}

/* Faza */
.el6-path-faza {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.el6-path-faza-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4e9e3, #b3dbd0);
  color: #007a6e;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.el6-path-faza-info {
  min-width: 0;
}
.el6-path-faza-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #062f2f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.el6-path-faza-odznaka {
  font-size: 0.78rem;
  color: #5f7373;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.el6-path-faza-odznaka strong {
  color: #009B8D;
  font-weight: 700;
}
.el6-path-faza-odznaka i {
  color: #009B8D;
  font-size: 0.85rem;
}

/* Strzałki prev/next */
.el6-path-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.el6-path-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all .18s ease;
}
.el6-path-arrow-prev {
  background: #ffffff;
  border: 1.5px solid #ddecea;
  color: #1e3a5f;
}
.el6-path-arrow-prev:hover {
  border-color: #009B8D;
  color: #009B8D;
  background: #f7faf9;
  transform: translateY(-1px);
}
.el6-path-arrow-next {
  background: #f6a51a;
  border: none;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(246,165,26,0.35);
}
.el6-path-arrow-next:hover {
  background: #ed9a08;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(246,165,26,0.45);
}

/* Wariant "podgląd" — strzałka next nie zapisuje kroku. Zachowujemy żółte
   tło (jak primary), ale dorzucamy ikonę oka, żeby user widział że to podgląd.
   Obie ikony białe dla czytelności na pomarańczowym tle. */
.el6-path-arrow.el6-path-arrow-preview {
  width: auto;
  padding: 0 .7rem;
  gap: .35rem;
  font-size: 1rem;
  color: #ffffff;
}
.el6-path-arrow.el6-path-arrow-preview i {
  color: #ffffff;
}
.el6-path-arrow.el6-path-arrow-preview .bi-eye {
  font-size: .85rem;
  opacity: .95;
}

.el6-path-arrow.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Kompatybilność wsteczna — stare klasy używane gdzieś jeszcze */
.el6-path-info { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.el6-path-badge {
  display: inline-flex; align-items: center;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.el6-path-badge.uczestnik   { background: rgba(0,155,141,.12); color: #009B8D; }
.el6-path-badge.koordynator { background: rgba(232,168,56,.15); color: #c98a10; }
.el6-path-badge.skala       { background: #f0f4f5; color: #4a6c72; }
.el6-path-progress-text { font-size: .85rem; color: #4a6c72; font-weight: 600; }
.el6-path-actions { display: flex; gap: .5rem; align-items: center; }
.el6-kod-display { display: none; }  /* stary element schowany */
.el6-reset-btn { display: none; }  /* stary element schowany */

@media (max-width: 900px) {
  .el6-path-header { gap: 16px; padding: 14px 16px; }
  .el6-path-progress { min-width: 160px; }
  .el6-path-faza-name { max-width: 160px; font-size: 0.88rem; }
}

@media (max-width: 700px) {
  .el6-path-header {
    padding: 14px 16px;
    gap: 12px;
    border-radius: 14px;
  }
  .el6-path-back {
    width: 100%;
    order: 1;
  }
  .el6-path-progress {
    width: 100%;
    order: 2;
    min-width: 0;
  }
  .el6-path-faza {
    order: 3;
    flex: 1;
    min-width: 0;
  }
  .el6-path-faza-icon { width: 40px; height: 40px; font-size: 1.05rem; }
  .el6-path-faza-name { font-size: 0.85rem; max-width: none; white-space: normal; }
  .el6-path-faza-odznaka { font-size: 0.72rem; }
  .el6-path-arrows { order: 4; flex-shrink: 0; }
  .el6-path-arrow { width: 40px; height: 40px; font-size: 1.05rem; }
}

/* ═══ OŚ POSTĘPU — z etykietami faz na górze + kropki + kreski + pastylka aktualnego ═══ */
.el6-progress-axis {
  display: flex; flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem 1rem;
  background: #fff;
  border: 1px solid #e8eeef;
  border-radius: 12px;
}

/* ── Etykiety faz na górze ── */
.el6-axis-phases-row {
  display: flex; gap: 12px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.el6-axis-phase-label {
  flex: 1;
  text-align: center;
  line-height: 1.3;
}
.el6-axis-phase-label.phase-done    { color: #27ae60; }
.el6-axis-phase-label.phase-active  { color: #854F0B; }
.el6-axis-phase-label.phase-locked  { color: #94a3a8; font-weight: 500; }

/* ── Wiersz z kropkami i kreskami ── */
.el6-axis-dots-row {
  display: flex; align-items: center;
  gap: 3px;
  padding: 4px 2px;
}
.el6-axis-sep {
  flex: 1;
  height: 3px;
  border-radius: 1px;
  min-width: 8px;
}
.el6-axis-sep.sep-done     { background: #27ae60; }
.el6-axis-sep.sep-locked   { background: #e5e7eb; }
.el6-axis-sep.sep-gradient { background: linear-gradient(to right, #27ae60, #E8A838); }
.el6-axis-sep.sep-border-faza {
  flex: 0 0 14px;
  min-width: 14px;
}

/* ── Kropka (button) ── */
.el6-axis-node {
  position: relative;
  background: none; border: none; padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s;
}
.el6-axis-node:not(.locked):hover { transform: translateY(-1px); }
.el6-axis-circle {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700;
  background: #fff; color: #94a3a8;
  border: 2px solid #d1d5db;
  transition: all .2s;
}
.el6-axis-node.done .el6-axis-circle {
  background: #27ae60; color: #fff; border-color: #27ae60;
  font-size: .95rem;
}
.el6-axis-node.active .el6-axis-circle {
  width: 42px; height: 42px;
  background: #E8A838; color: #fff; border-color: #c98a10;
  font-size: 1rem;
  box-shadow: 0 0 0 4px rgba(232,168,56,.22);
}

/* ── Pastylka aktualnego kroku pod osią ── */
.el6-axis-current-label {
  text-align: center;
  margin-top: 6px;
}
.el6-axis-current-pill {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(232,168,56,.12);
  border: 1px solid rgba(232,168,56,.35);
  color: #854F0B;
  font-size: .85rem; font-weight: 600;
  border-radius: 20px;
}
.el6-axis-current-pill-done {
  background: rgba(39,174,96,.12);
  border-color: rgba(39,174,96,.4);
  color: #1e8449;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .el6-progress-axis { padding: 1rem .9rem .85rem; }
  .el6-axis-phases-row { font-size: .58rem; gap: 6px; }
  .el6-axis-circle { width: 28px; height: 28px; font-size: .78rem; }
  .el6-axis-node.done .el6-axis-circle { font-size: .85rem; }
  .el6-axis-node.active .el6-axis-circle { width: 36px; height: 36px; font-size: .9rem; }
  .el6-axis-sep { min-width: 4px; }
  .el6-axis-sep.sep-border-faza { flex: 0 0 8px; min-width: 8px; }
  .el6-axis-current-pill { font-size: .78rem; padding: 5px 10px; }
}

/* ═══ FAZY ═══ */
.el6-faza {
  background: #fff; border: 1.5px solid rgba(0,0,0,.06);
  border-radius: 20px; padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(17,24,39,.04);
}
.el6-faza-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: .85rem;
  border-bottom: 1px dashed rgba(0,0,0,.08);
  flex-wrap: wrap; gap: .5rem;
}
.el6-faza-title {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.1rem; font-weight: 900; color: #1e3a5f; margin: 0;
}
.el6-faza-title i { color: #009B8D; }
.el6-faza-odznaka {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(232,168,56,.12); color: #c98a10;
  border: 1px solid rgba(232,168,56,.25);
  border-radius: 999px; padding: .3rem .75rem;
  font-size: .78rem; font-weight: 700;
}
.el6-faza-odznaka.unlocked {
  background: rgba(39,174,96,.15); color: #27ae60;
  border-color: rgba(39,174,96,.3);
}

/* ═══ KROKI ═══ */
.el6-kroki { display: flex; flex-direction: column; gap: .8rem; }
.el6-krok {
  background: #fafcfc; border: 1.5px solid rgba(0,0,0,.05);
  border-radius: 14px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.el6-krok.locked { opacity: .55; pointer-events: none; }
.el6-krok.done {
  border-color: rgba(39,174,96,.25);
  background: linear-gradient(180deg, #fafcfc 0%, #f4faf6 100%);
}
.el6-krok.active {
  border-color: rgba(0,155,141,.35);
  box-shadow: 0 6px 20px rgba(0,155,141,.08);
  background: #fff;
}
.el6-krok-header {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1.15rem; cursor: pointer; user-select: none;
  background: transparent; border: none; width: 100%; text-align: left;
}
.el6-krok-num {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; flex-shrink: 0;
  background: #e9eeef; color: #6b8c90; transition: .2s;
}
.el6-krok.done .el6-krok-num { background: rgba(39,174,96,.15); color: #27ae60; }
.el6-krok.active .el6-krok-num { background: rgba(0,155,141,.15); color: #009B8D; }
.el6-krok-info { flex: 1; min-width: 0; }
.el6-krok-title {
  font-size: .98rem; font-weight: 800; color: #1e3a5f; margin: 0 0 .1rem;
}
.el6-krok-short { font-size: .8rem; color: #6b8c90; margin: 0; }
.el6-krok-status {
  font-size: .72rem; font-weight: 700; padding: .22rem .65rem;
  border-radius: 999px; white-space: nowrap;
}
.el6-krok.done .el6-krok-status   { background: rgba(39,174,96,.12); color: #27ae60; }
.el6-krok.active .el6-krok-status { background: rgba(0,155,141,.1);  color: #009B8D; }
.el6-krok.locked .el6-krok-status { background: #e9eeef; color: #aab8bb; }
.el6-krok-chevron {
  font-size: .9rem; color: #aab8bb; transition: transform .2s;
  flex-shrink: 0;
}
.el6-krok.open .el6-krok-chevron { transform: rotate(180deg); }

.el6-krok-body {
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid rgba(0,0,0,.05);
  display: none;
}
.el6-krok.open .el6-krok-body { display: block; }
.el6-krok-desc {
  font-size: .95rem; color: #3a5c62; line-height: 1.65;
  margin: .9rem 0;
  white-space: pre-line;
}
.el6-krok-zadanie {
  background: rgba(0,155,141,.06);
  border-left: 4px solid #009B8D;
  border-radius: 0 12px 12px 0;
  padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.el6-krok-zadanie-label {
  font-size: .72rem; font-weight: 800; color: #009B8D;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .35rem;
}
.el6-krok-zadanie p { font-size: .92rem; color: #2a4a50; margin: 0; line-height: 1.55; white-space: pre-line; }

/* ── NOTATKI UŻYTKOWNIKA (Tura 2 PDF-ów) ── */
.el6-notatki-section {
  background: #faf9f4;
  border: 1.5px dashed rgba(30, 58, 95, .15);
  border-radius: 14px;
  padding: 1rem 1.1rem .6rem;
  margin: 1rem 0;
}
.el6-notatki-head {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 700;
  color: #1e3a5f;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.el6-notatki-head i { color: #6b8c90; }
.el6-notatki-hint {
  font-weight: 500; font-size: .75rem;
  color: #6b8c90;
  font-style: italic;
}
.el6-notatki-status {
  margin-left: auto;
  font-size: .75rem; font-weight: 600;
  color: transparent;
  transition: color .2s;
}
.el6-notatki-status.saving { color: #6b8c90; }
.el6-notatki-status.ok { color: #27ae60; }
.el6-notatki-status.err { color: #c0392b; }

.el6-notatka-pole { margin-bottom: .8rem; }
.el6-notatka-pole:last-child { margin-bottom: 0; }
.el6-notatka-pole label {
  display: block;
  font-size: .8rem; font-weight: 600;
  color: #4a6c72;
  margin-bottom: .3rem;
}
.el6-notatka-input,
.el6-notatka-textarea {
  width: 100%;
  border: 1.5px solid #dfeceb;
  border-radius: 8px;
  padding: .55rem .75rem;
  font-size: .92rem;
  font-family: inherit;
  background: #fff;
  color: #1e3a5f;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.el6-notatka-input:focus,
.el6-notatka-textarea:focus {
  outline: none;
  border-color: #009B8D;
  box-shadow: 0 0 0 3px rgba(0,155,141,.1);
}
.el6-notatka-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}
.el6-krok-historia {
  background: rgba(232,168,56,.06);
  border: 1px solid rgba(232,168,56,.18);
  border-radius: 12px; padding: .85rem 1.05rem; margin-bottom: 1rem;
}
.el6-krok-historia-label {
  font-size: .7rem; font-weight: 800; color: #c98a10;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .25rem;
}
.el6-krok-historia-tresc {
  font-size: .88rem; color: #4a3a1a; font-style: italic;
  line-height: 1.55; margin: 0 0 .3rem;
}
.el6-krok-historia-autor {
  font-size: .78rem; color: #8a6a2a; font-weight: 600;
}

.el6-krok-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.el6-krok-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 10px;
  background: #f0f9f8; border: 1px solid rgba(0,155,141,.2);
  color: #009B8D; font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: .15s;
}
.el6-krok-link:hover { background: rgba(0,155,141,.12); color: #007A6E; }

.el6-krok-toolkit {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 10px;
  background: #fff5f5; border: 1px solid rgba(231,76,60,.25);
  color: #c0392b; font-size: .88rem; font-weight: 700;
  text-decoration: none; transition: .15s; margin-bottom: 1rem;
}
.el6-krok-toolkit:hover { background: rgba(231,76,60,.1); }

.el6-krok-footer { display: flex; justify-content: flex-end; gap: .5rem; }
.el6-done-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.5rem; border-radius: 12px;
  background: #009B8D; color: #fff; border: none;
  font-size: .92rem; font-weight: 700; cursor: pointer;
  transition: all .2s;
}
.el6-done-btn:hover { background: #007A6E; transform: translateY(-1px); }
.el6-done-btn.already-done {
  background: rgba(39,174,96,.12); color: #27ae60;
  cursor: default; transform: none;
}

/* Przycisk "Pobierz kartę tego kroku" — dyskretny, obok głównego CTA */
.el6-krok-pdf-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 10px;
  background: #fff; color: #4a6c72;
  border: 1.5px solid #dfeceb;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
  margin-left: .5rem;
}
.el6-krok-pdf-btn:hover {
  border-color: #c98a10; color: #c98a10;
}
.el6-krok-pdf-btn i { color: #c98a10; }

/* Specjalny przycisk mapy tylko w kroku 9 */
.el6-krok-mapa-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem; border-radius: 12px;
  background: #E8A838; color: #fff; border: none;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: all .2s;
  margin: .75rem 0 .5rem;
}
.el6-krok-mapa-btn:hover { background: #c98a10; transform: translateY(-1px); }

/* Formularz w modalu zgłoszenia mapy */
.el6-mapa-form {
  margin-top: 1rem;
  display: flex; flex-direction: column; gap: .8rem;
  text-align: left;
}
.el6-mapa-form label {
  display: block;
  font-size: .85rem; font-weight: 600;
  color: #4a6c72;
}
.el6-mapa-form input {
  display: block;
  width: 100%;
  margin-top: .3rem;
  padding: .55rem .75rem;
  border: 1.5px solid #dfeceb;
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  color: #1e3a5f;
  box-sizing: border-box;
}
.el6-mapa-form input:focus {
  outline: none; border-color: #E8A838;
  box-shadow: 0 0 0 3px rgba(232,168,56,.12);
}

/* ═══ POPUP ODZNAKI ═══ */
.el6-odznaka-popup {
  position: fixed; bottom: 2rem; right: 2rem;
  max-width: 380px; z-index: 1000;
  background: #fff; border: 2px solid rgba(232,168,56,.4);
  border-radius: 16px; padding: 1.1rem 1.3rem;
  box-shadow: 0 16px 48px rgba(17,24,39,.2);
  display: flex; gap: .85rem; align-items: flex-start;
  animation: el6-slide-in .5s ease;
}
@keyframes el6-slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.el6-odznaka-popup-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(232,168,56,.15); color: #c98a10;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.el6-odznaka-popup-body { flex: 1; min-width: 0; }
.el6-odznaka-popup-title {
  font-size: .72rem; font-weight: 800; color: #c98a10;
  text-transform: uppercase; letter-spacing: .05em;
}
.el6-odznaka-popup-name { font-size: 1rem; font-weight: 800; color: #1e3a5f; margin: .15rem 0; }
.el6-odznaka-popup-desc { font-size: .82rem; color: #5f7b80; }
.el6-odznaka-popup-close {
  background: none; border: none; color: #aab8bb; cursor: pointer;
  font-size: 1rem; padding: 0;
}
.el6-odznaka-popup-close:hover { color: #1e3a5f; }

/* ═══ EKRAN UKOŃCZONO ═══ */
.el6-done-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.el6-done-trophy {
  font-size: 5rem; color: #E8A838; margin-bottom: 1rem;
  animation: el6-pop .6s ease;
}
@keyframes el6-pop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.el6-done-title { font-size: 1.9rem; font-weight: 900; color: #1e3a5f; margin-bottom: .5rem; }
.el6-done-sub { font-size: 1rem; color: #4a6c72; margin-bottom: 2rem; max-width: 560px; margin-left:auto;margin-right:auto; }

.el6-odznaki-komplet {
  display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem;
  flex-wrap: wrap;
}
.el6-odznaka-mini {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(232,168,56,.08); border: 2px solid rgba(232,168,56,.3);
  border-radius: 14px; padding: .85rem 1.1rem;
  min-width: 140px;
}
.el6-odznaka-mini-icon { font-size: 1.8rem; color: #c98a10; margin-bottom: .3rem; }
.el6-odznaka-mini-name { font-size: .85rem; font-weight: 800; color: #1e3a5f; }

.el6-done-forms {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: 560px; margin: 0 auto 1.5rem; text-align: left;
}

/* Komunikat po zgłoszeniu (sukces/błąd inline zamiast alert) */
.el6-inline-msg {
  max-width: 560px; margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem; border-radius: 12px;
  font-size: .95rem; line-height: 1.5;
  text-align: left;
}
.el6-inline-msg.ok {
  background: rgba(39,174,96,.08);
  border: 1.5px solid rgba(39,174,96,.3);
  color: #1a6b3d;
}
.el6-inline-msg.err {
  background: rgba(231,76,60,.08);
  border: 1.5px solid rgba(231,76,60,.3);
  color: #a02314;
}
.el6-inline-msg i { margin-right: .4rem; }
.el6-done-label {
  display: block; font-size: .8rem; font-weight: 700;
  color: #4a6c72; margin-bottom: .35rem;
}
.el6-done-input {
  width: 100%; padding: .65rem .85rem;
  border: 1.5px solid #ddecea; border-radius: 10px;
  font-size: .95rem; outline: none; transition: .15s;
}
.el6-done-input:focus { border-color: #009B8D; }

.el6-done-actions {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.el6-btn {
  display: inline-flex; align-items: center;
  padding: .75rem 1.5rem; border-radius: 14px;
  font-size: .92rem; font-weight: 700; text-decoration: none;
  cursor: pointer; border: none; transition: all .2s;
}
.el6-btn-primary { background: #009B8D; color: #fff; }
.el6-btn-primary:hover { background: #007A6E; color: #fff; }
.el6-btn-accent { background: #E8A838; color: #fff; }
.el6-btn-accent:hover { background: #c98a10; color: #fff; }
.el6-btn-outline { background: #fff; color: #1e3a5f; border: 2px solid #ddecea; }
.el6-btn-outline:hover { border-color: #009B8D; color: #009B8D; }

.el6-done-footer { color: #6b8c90; margin-top: 1rem; }
.el6-done-footer strong { color: #1e3a5f; font-size: 1rem; letter-spacing: .08em; }

/* Personalizowane materiały na ekranie ukończenia */
.el6-done-extras {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(0,0,0,.1);
  text-align: center;
}
.el6-done-extras-label {
  font-size: .78rem; font-weight: 700;
  color: #6b8c90;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .85rem;
}
.el6-done-extras-links {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .el6-profile-card, .el6-skala-card, .el6-done-btn,
  .el6-odznaka-popup, .el6-done-trophy { transition: none; animation: none; }
}

/* ═══════════════ MODAL UNIWERSALNY (Etap 7) ═══════════════ */
.powers-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.powers-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);
  animation: powers-modal-fade-in .15s ease;
}
.powers-modal-box {
  position: relative;
  background: #fff;
  border-radius: 18px;
  max-width: 440px; width: 100%;
  padding: 1.75rem;
  box-shadow: 0 24px 64px rgba(17, 24, 39, .25);
  animation: powers-modal-pop-in .2s ease;
  text-align: center;
}
@keyframes powers-modal-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes powers-modal-pop-in {
  0% { transform: scale(.92) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.powers-modal-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
}
.powers-modal-icon.info    { background: rgba(0,155,141,.12);  color: #009B8D; }
.powers-modal-icon.warning { background: rgba(232,168,56,.15); color: #c98a10; }
.powers-modal-icon.danger  { background: rgba(231,76,60,.12);  color: #c0392b; }
.powers-modal-icon.success { background: rgba(39,174,96,.12);  color: #27ae60; }

.powers-modal-title {
  font-size: 1.3rem; font-weight: 800;
  color: #1e3a5f; margin: 0 0 .6rem;
  line-height: 1.3;
}
.powers-modal-body {
  font-size: .98rem; color: #4a6c72;
  line-height: 1.55; margin-bottom: 1.4rem;
}
.powers-modal-body strong { color: #1e3a5f; }

/* Specjalny blok dla kodu PWR-XXXX */
.powers-modal-kod {
  background: #f0f9f8; border: 1.5px solid rgba(0,155,141,.25);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: .15em;
  color: #1e3a5f;
  margin-bottom: 1.2rem;
  user-select: all;
}

.powers-modal-actions {
  display: flex; gap: .6rem; justify-content: center;
}
.powers-modal-btn {
  padding: .7rem 1.5rem; border-radius: 12px;
  font-size: .95rem; font-weight: 700;
  border: none; cursor: pointer;
  transition: all .15s;
  min-width: 100px;
}
.powers-modal-btn-cancel {
  background: #f0f4f5; color: #4a6c72;
}
.powers-modal-btn-cancel:hover { background: #dfeceb; color: #1e3a5f; }
.powers-modal-btn-ok {
  background: #009B8D; color: #fff;
}
.powers-modal-btn-ok:hover { background: #007A6E; }
.powers-modal-btn-ok.danger {
  background: #c0392b;
}
.powers-modal-btn-ok.danger:hover { background: #922b1e; }

@media (prefers-reduced-motion: reduce) {
  .powers-modal-backdrop, .powers-modal-box { animation: none; }
}

/* ═══════════════ KONIEC MODALA ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   MOTYW 1 — kontekstowy, minimalistyczny (propozycja z mockupu)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── KOD PWR → kompaktowy box z małym opisem ── */
.el6-kod-display {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .45rem .7rem !important;
  background: #fff !important;
  border: 1.5px solid rgba(0,155,141,.35) !important;
  border-radius: 8px !important;
  color: #1e3a5f !important;
  text-align: left;
}
.el6-kod-display:hover {
  background: #f0faf9 !important;
  border-color: #009B8D !important;
}
.el6-kod-display i {
  font-size: 1rem;
  color: #009B8D;
  flex-shrink: 0;
}
.el6-kod-display-labels {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.el6-kod-display-title {
  font-size: .72rem;
  font-weight: 600;
  color: #1e3a5f;
  white-space: nowrap;
}
.el6-kod-display-hint {
  font-size: .65rem;
  color: #6b8c90;
  font-weight: 400;
  white-space: nowrap;
}
.el6-kod-display-code {
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1e3a5f;
  background: rgba(0,155,141,.08);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .el6-kod-display-labels { display: none; }
  .el6-kod-display { padding: .4rem .55rem !important; }
}

/* ── STATUS KROKU — proste pastylki bez szaleństwa kolorystycznego ── */
.el6-krok-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .72rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.el6-krok.active .el6-krok-status {
  background: #E8A838;
  color: #fff;
}
.el6-krok.done .el6-krok-status {
  background: rgba(39,174,96,.14);
  color: #27ae60;
}
.el6-krok.locked .el6-krok-status {
  background: transparent;
  color: #94a3a8;
  font-weight: 500 !important;
  font-size: .7rem !important;
  padding: 3px 0;
}

/* ═══════════════ KONIEC MOTYWU 1 ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   NOWE STYLE DLA PODSTRON (refactor)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Lista kroków (kafelki) na index.html ── */
.el6-kroki-lista { margin-top: 1rem; }
.el6-faza-lista { margin-bottom: 2rem; }
.el6-faza-lista .el6-faza-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; margin-bottom: .75rem;
  background: linear-gradient(90deg, rgba(232,168,56,.08), transparent 60%);
  border-left: 4px solid #009B8D;
  border-radius: 0 8px 8px 0;
}
.el6-kafelki-grid {
  display: grid; grid-template-columns: 1fr; gap: .5rem;
}
@media (min-width: 700px) { .el6-kafelki-grid { grid-template-columns: 1fr 1fr 1fr; } }

.el6-kafelek {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem; background: #fff; border: 1px solid #e8eeef;
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: all .15s;
}
.el6-kafelek:not(.locked):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  border-color: #009B8D;
}
.el6-kafelek.active { border-color: #E8A838; border-width: 2px; }
.el6-kafelek.done { background: rgba(39,174,96,.04); }
.el6-kafelek.locked { opacity: .55; cursor: not-allowed; }

.el6-kafelek-num {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  background: #f0f4f5; color: #6b8c90; border: 2px solid #d1d5db;
  flex-shrink: 0;
}
.el6-kafelek.done .el6-kafelek-num { background: #27ae60; color: #fff; border-color: #27ae60; }
.el6-kafelek.active .el6-kafelek-num { background: #E8A838; color: #fff; border-color: #c98a10; }

.el6-kafelek-body { flex: 1; min-width: 0; }
.el6-kafelek-tytul { font-weight: 600; color: #1e3a5f; font-size: .95rem; line-height: 1.3; }
.el6-kafelek-short { font-size: .78rem; color: #6b8c90; margin-top: 2px; }
.el6-kafelek-status {
  font-size: .72rem; padding: 3px 8px; border-radius: 10px; white-space: nowrap;
  background: #f0f4f5; color: #6b8c90; font-weight: 600;
}
.el6-kafelek.done .el6-kafelek-status { background: rgba(39,174,96,.15); color: #27ae60; }
.el6-kafelek.active .el6-kafelek-status { background: #E8A838; color: #fff; }

/* ── Strona pojedynczego kroku ── */
.el6-krok-strona { padding-bottom: 2rem; }

.el6-krok-nav-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0 1.2rem; flex-wrap: wrap; gap: .5rem;
}
.el6-krok-nav-breadcrumb {
  color: #6b8c90; text-decoration: none; font-size: .88rem;
}
.el6-krok-nav-breadcrumb:hover { color: #009B8D; }
.el6-krok-nav-sides { display: flex; gap: .5rem; }

.el6-krok-nav-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; background: #fff; color: #1e3a5f;
  text-decoration: none; border: 1px solid #e8eeef; border-radius: 8px;
  font-size: .85rem; font-weight: 500; transition: all .15s;
}
.el6-krok-nav-btn:hover { border-color: #009B8D; color: #009B8D; }
.el6-krok-nav-btn.disabled { opacity: .35; pointer-events: none; }

.el6-krok-nav-bottom {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e8eeef;
  flex-wrap: wrap;
}
.el6-krok-nav-btn-next {
  background: #009B8D; color: #fff; border-color: #009B8D;
  padding: .7rem 1.2rem; font-size: .95rem; font-weight: 600;
}
.el6-krok-nav-btn-next:hover { background: #007A6E; color: #fff; border-color: #007A6E; }

.el6-krok-strona-header {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.2rem 1.4rem; background: #fff;
  border: 1px solid #e8eeef; border-radius: 12px; margin-bottom: 1.5rem;
}
.el6-krok-strona-num {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700; flex-shrink: 0;
  background: #f0f4f5; color: #6b8c90; border: 2.5px solid #d1d5db;
}
.el6-krok-strona-num.done { background: #27ae60; color: #fff; border-color: #27ae60; }
.el6-krok-strona-num.active { background: #E8A838; color: #fff; border-color: #c98a10; }
.el6-krok-strona-info { flex: 1; }
.el6-krok-strona-faza-label {
  font-size: .75rem; color: #009B8D; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700;
}
.el6-krok-strona-tytul {
  margin: 4px 0 2px; font-size: 1.4rem; font-weight: 700; color: #1e3a5f;
}
.el6-krok-strona-short { color: #6b8c90; font-style: italic; font-size: .95rem; }

.el6-krok-sekcja { margin-bottom: 1.25rem; }
.el6-krok-akcje-row { display: flex; flex-wrap: wrap; gap: .7rem; }

.el6-krok-zrobione-sekcja { text-align: center; margin-top: 2rem; padding: 1.5rem; background: #f9fafb; border-radius: 12px; }
.el6-krok-zrobione-sekcja .el6-done-btn {
  padding: .9rem 2rem; font-size: 1.05rem;
}
.el6-krok-done-hint { margin-top: .5rem; font-size: .82rem; color: #6b8c90; }

@media (max-width: 640px) {
  .el6-krok-nav-btn { padding: .35rem .6rem; font-size: .78rem; }
  .el6-krok-strona-header { padding: .9rem; }
  .el6-krok-strona-num { width: 42px; height: 42px; font-size: 1.1rem; }
  .el6-krok-strona-tytul { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PYTANIA SPRAWDZAJĄCE (Etap 2)
   ═══════════════════════════════════════════════════════════════════════ */

.el6-pytanie-box {
  background: #fff;
  border: 2px solid rgba(0,155,141,.25);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  position: relative;
}
.el6-pytanie-box::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 4px; background: #009B8D;
  border-radius: 0 2px 2px 0;
}

.el6-pytanie-label {
  font-size: .72rem; font-weight: 700; color: #009B8D;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .5rem;
}
.el6-pytanie-label i { margin-right: .3rem; }

.el6-pytanie-tresc {
  font-size: 1.02rem; color: #1e3a5f; font-weight: 500;
  line-height: 1.5; margin-bottom: 1rem;
}

/* ── Pytanie wyboru ── */
.el6-pytanie-opcje {
  display: flex; flex-direction: column; gap: .55rem;
}
.el6-pytanie-opcja {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .8rem 1rem;
  background: #f9fafb; border: 1.5px solid #e8eeef;
  border-radius: 8px; cursor: pointer;
  text-align: left; font-size: .95rem; line-height: 1.45; color: #1e3a5f;
  transition: all .15s;
  width: 100%;
}
.el6-pytanie-opcja:hover:not(:disabled) {
  border-color: #009B8D; background: rgba(0,155,141,.04);
}
.el6-pytanie-opcja:disabled { cursor: default; }

.el6-pytanie-opcja-marker {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #c1cdd1; background: #fff;
  flex-shrink: 0; margin-top: 2px;
  transition: all .2s;
}
.el6-pytanie-opcja.wybrana .el6-pytanie-opcja-marker {
  border-color: #1e3a5f; background: #1e3a5f;
  box-shadow: inset 0 0 0 3px #fff;
}
.el6-pytanie-opcja.poprawna {
  border-color: #27ae60; background: rgba(39,174,96,.06);
}
.el6-pytanie-opcja.poprawna .el6-pytanie-opcja-marker {
  border-color: #27ae60; background: #27ae60;
  box-shadow: inset 0 0 0 3px #fff;
}
.el6-pytanie-opcja.wybrana:not(.poprawna) {
  border-color: #c0392b; background: rgba(192,57,43,.04);
}
.el6-pytanie-opcja.wybrana:not(.poprawna) .el6-pytanie-opcja-marker {
  border-color: #c0392b; background: #c0392b;
  box-shadow: inset 0 0 0 3px #fff;
}

.el6-pytanie-opcja-tresc { flex: 1; }

/* ── Feedback ── */
.el6-pytanie-feedback {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  animation: fadeIn .3s;
}
.el6-pytanie-feedback.poprawna {
  background: rgba(39,174,96,.08);
  border-left: 4px solid #27ae60;
}
.el6-pytanie-feedback.niepoprawna {
  background: rgba(232,168,56,.08);
  border-left: 4px solid #E8A838;
}
.el6-pytanie-feedback.czesciowa {
  background: rgba(0,155,141,.06);
  border-left: 4px solid #009B8D;
}
.el6-pytanie-feedback-naglowek {
  font-weight: 700; font-size: .98rem;
  margin-bottom: .4rem;
}
.el6-pytanie-feedback.poprawna .el6-pytanie-feedback-naglowek { color: #1e8449; }
.el6-pytanie-feedback.niepoprawna .el6-pytanie-feedback-naglowek { color: #854F0B; }
.el6-pytanie-feedback.czesciowa .el6-pytanie-feedback-naglowek { color: #006d63; }
.el6-pytanie-feedback-tresc {
  color: #2a4a50; line-height: 1.55; font-size: .92rem;
}
.el6-pytanie-feedback-para {
  color: #2a4a50; line-height: 1.5; font-size: .88rem;
  margin-top: .5rem; padding: .3rem 0;
  border-top: 1px dashed rgba(0,0,0,.08);
}
.el6-pytanie-feedback-para strong { color: #1e3a5f; }
.el6-pytanie-feedback-ogolny {
  margin-top: .75rem; padding-top: .6rem;
  border-top: 1px dashed rgba(0,0,0,.1);
  font-style: italic; color: #2a4a50;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Pytanie dopasowania ── */
.el6-dopasowanie {
  display: flex; flex-direction: column; gap: .8rem;
  margin-bottom: 1rem;
}
.el6-dopasowanie-wiersz {
  display: grid;
  grid-template-columns: 1fr auto 1.3fr 32px;
  gap: .6rem;
  align-items: center;
}
.el6-dopasowanie-lewa {
  padding: .6rem .8rem;
  background: #f0f4f5; color: #1e3a5f;
  border-radius: 8px; font-weight: 500; font-size: .9rem;
  line-height: 1.35;
}
.el6-dopasowanie-strzalka { color: #94a3a8; font-size: 1.1rem; text-align: center; }
.el6-dopasowanie-select {
  padding: .55rem .7rem;
  background: #fff; color: #1e3a5f;
  border: 1.5px solid #c1cdd1; border-radius: 8px;
  font-size: .88rem; font-family: inherit;
  cursor: pointer;
}
.el6-dopasowanie-select:focus { outline: none; border-color: #009B8D; }
.el6-dopasowanie-select.poprawna { border-color: #27ae60; background: rgba(39,174,96,.04); }
.el6-dopasowanie-select.niepoprawna { border-color: #c0392b; background: rgba(192,57,43,.04); }
.el6-dopasowanie-select:disabled { cursor: default; opacity: .95; }
.el6-dopasowanie-wynik {
  text-align: center;
  font-size: 1.15rem;
}

.el6-pytanie-akcja {
  display: flex; justify-content: center;
  margin-top: .5rem;
}
.el6-pytanie-sprawdz {
  padding: .6rem 1.5rem;
  background: #009B8D; color: #fff;
  border: none; border-radius: 8px;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.el6-pytanie-sprawdz:hover:not(:disabled) { background: #007A6E; }

/* ── Mobile: dopasowanie w kolumnę ── */
@media (max-width: 640px) {
  .el6-dopasowanie-wiersz {
    grid-template-columns: 1fr 32px;
    grid-template-rows: auto auto;
    gap: .4rem;
  }
  .el6-dopasowanie-lewa {
    grid-column: 1 / 3;
    margin-bottom: -.2rem;
  }
  .el6-dopasowanie-strzalka { display: none; }
  .el6-dopasowanie-select { grid-column: 1 / 2; }
  .el6-dopasowanie-wynik { grid-column: 2 / 3; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SMS BUILDER (Etap 2 v2) — interaktywne układanie SMS-a
   ═══════════════════════════════════════════════════════════════════════ */

.el6-sms-builder {
  display: flex; flex-direction: column; gap: 1.2rem;
  margin: 1rem 0;
}

/* ── Live preview SMS-a ── */
.el6-sms-preview {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border: 2px solid rgba(39,174,96,.25);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  position: relative;
}
.el6-sms-preview-label {
  font-size: .68rem; font-weight: 700; color: #1e8449;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .4rem;
}
.el6-sms-preview-tresc {
  font-size: 1rem; line-height: 1.6; color: #1e3a5f;
  min-height: 2.8em;
}
.el6-sms-preview-placeholder {
  color: #94a3a8; font-style: italic; font-size: .92rem;
}
.el6-sms-preview-puste {
  display: inline-block;
  padding: 1px 10px;
  background: rgba(148,163,168,.18);
  border: 1px dashed #94a3a8;
  color: #6b8c90;
  border-radius: 10px;
  font-size: .85rem;
  margin: 0 2px;
}
.el6-sms-preview-fragment {
  display: inline;
  animation: sms-fragment-in .25s ease-out;
}
@keyframes sms-fragment-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Sloty ── */
.el6-sms-sloty {
  display: flex; flex-direction: column; gap: .85rem;
}
.el6-sms-slot {
  background: #fff;
  border: 1px solid #e8eeef;
  border-radius: 10px;
  padding: .85rem 1rem;
}
.el6-sms-slot-header {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
  font-size: .88rem; font-weight: 600; color: #1e3a5f;
  margin-bottom: .55rem;
}
.el6-sms-slot-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #009B8D; color: #fff;
  font-size: .75rem; font-weight: 700;
  flex-shrink: 0;
}
.el6-sms-slot-label { font-weight: 700; }
.el6-sms-slot-opis { font-weight: 400; color: #6b8c90; font-size: .82rem; }

.el6-sms-slot-opcje {
  display: flex; flex-direction: column; gap: .4rem;
}
.el6-sms-opcja {
  text-align: left;
  padding: .6rem .85rem;
  background: #f9fafb;
  border: 1.5px solid #e8eeef;
  border-radius: 8px;
  font-size: .92rem; line-height: 1.4; color: #1e3a5f;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.el6-sms-opcja:hover:not(:disabled) {
  border-color: #009B8D; background: rgba(0,155,141,.04);
}
.el6-sms-opcja.wybrana {
  border-color: #1e3a5f; background: rgba(30,58,95,.05);
  font-weight: 500;
}
.el6-sms-opcja:disabled { cursor: default; }
.el6-sms-opcja.poprawna {
  border-color: #27ae60; background: rgba(39,174,96,.08);
}
.el6-sms-opcja.niepoprawna {
  border-color: #c0392b; background: rgba(192,57,43,.05);
  opacity: .75;
}

/* ── Akcja + licznik ── */
.el6-sms-akcja {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .6rem;
  padding: .4rem 0;
}
.el6-sms-licznik {
  font-size: .82rem; color: #6b8c90;
}

/* ── Feedback per slot ── */
.el6-sms-feedback-slot {
  margin-top: .75rem; padding: .7rem .9rem;
  border-radius: 8px;
  border-left: 3px solid;
}
.el6-sms-feedback-slot.dobry {
  background: rgba(39,174,96,.06);
  border-left-color: #27ae60;
}
.el6-sms-feedback-slot.slaby {
  background: rgba(232,168,56,.06);
  border-left-color: #E8A838;
}
.el6-sms-feedback-slot-tytul {
  font-size: .92rem; color: #1e3a5f;
  margin-bottom: .35rem;
  display: flex; align-items: baseline; gap: .45rem;
  flex-wrap: wrap;
}
.el6-sms-feedback-slot-ikona {
  display: inline-flex; width: 22px; height: 22px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
  flex-shrink: 0;
}
.el6-sms-feedback-slot.dobry .el6-sms-feedback-slot-ikona {
  background: #27ae60; color: #fff;
}
.el6-sms-feedback-slot.slaby .el6-sms-feedback-slot-ikona {
  background: #E8A838; color: #fff;
}
.el6-sms-feedback-slot-tresc {
  font-size: .88rem; line-height: 1.5; color: #2a4a50;
}

/* ── Wzorcowy SMS ── */
.el6-sms-poprawny {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(0,155,141,.06);
  border: 2px dashed rgba(0,155,141,.35);
  border-radius: 10px;
}
.el6-sms-poprawny-label {
  font-size: .75rem; font-weight: 700;
  color: #009B8D;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .5rem;
}
.el6-sms-poprawny-tresc {
  font-size: 1rem; line-height: 1.55; color: #1e3a5f;
  font-style: italic;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .el6-sms-preview { padding: .8rem 1rem; }
  .el6-sms-preview-tresc { font-size: .95rem; }
  .el6-sms-slot { padding: .7rem .85rem; }
  .el6-sms-opcja { padding: .55rem .7rem; font-size: .88rem; }
  .el6-sms-akcja { flex-direction: column; align-items: stretch; }
  .el6-sms-akcja button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PYTANIA WYBÓR — styl miggim, kafelki hybrydowe (grafika + tekst)
   ═══════════════════════════════════════════════════════════════════════ */

.el6-kafelki-pyt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: .5rem 0 1rem;
}
/* 3 opcje → 3 kolumny w 1 wierszu */
.el6-kafelki-pyt-3 { grid-template-columns: 1fr 1fr 1fr; }
/* 2 opcje → obok siebie */
.el6-kafelki-pyt-2 { grid-template-columns: 1fr 1fr; }
/* 4 opcje → 2×2 (domyślnie) */
.el6-kafelki-pyt-4 { grid-template-columns: 1fr 1fr; }
/* 5+ opcji → też 2 kolumny, lecz raczej takich pytań nie ma */
.el6-kafelki-pyt-5, .el6-kafelki-pyt-6 { grid-template-columns: 1fr 1fr; }

.el6-kafelek-pyt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  padding: .7rem .7rem;
  background: #fff;
  border: 1.5px solid #e8eeef;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-size: .85rem; line-height: 1.35;
  color: #1e3a5f;
  transition: all .18s ease;
  position: relative;
}
.el6-kafelek-pyt:hover:not(:disabled) {
  border-color: #009B8D;
  background: rgba(0,155,141,.03);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,155,141,.10);
}
.el6-kafelek-pyt:disabled { cursor: default; }

/* Pole na grafikę (lub placeholder) — 2:1 niższe */
.el6-kafelek-pyt-grafika {
  width: 100%; aspect-ratio: 2 / 1;
  background: #f7faf9;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.el6-kafelek-pyt-grafika img {
  max-width: 75%; max-height: 75%;
  object-fit: contain;
}
.el6-kafelek-pyt-placeholder {
  color: #b8c5c8;
  flex-direction: column;
  gap: .1rem;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  border: 1px dashed #d1dadc;
}
.el6-kafelek-pyt-placeholder i { font-size: 1.1rem; opacity: .5; }

/* Tekst opcji pod grafiką */
.el6-kafelek-pyt-tekst {
  font-weight: 500;
  text-align: center;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
}

/* ─── TRYB TEKSTOWY (radio-button look) ────────────────────────────────
   Aktywuje się gdy żadna opcja nie ma grafiki - opcje układają się
   pionowo, jak lista wyboru, bez placeholderów na obrazek.
   Wyrównanie do lewej (czytelniej dla dłuższych zdań). */
.el6-kafelki-pyt-tekst {
  grid-template-columns: 1fr !important;
  gap: .5rem;
}
.el6-kafelki-pyt-tekst .el6-kafelek-pyt {
  text-align: left;
  padding: .9rem 1rem;
  flex-direction: row;
  align-items: flex-start;
}
.el6-kafelki-pyt-tekst .el6-kafelek-pyt-tekst {
  text-align: left;
  justify-content: flex-start;
  font-size: .92rem;
  line-height: 1.45;
}
.el6-kafelek-pyt-litera {
  display: inline-block;
  font-weight: 700;
  color: #009B8D;
  margin-right: .15rem;
}
.el6-kafelki-pyt-tekst .el6-kafelek-pyt.poprawna .el6-kafelek-pyt-litera { color: #27ae60; }
.el6-kafelki-pyt-tekst .el6-kafelek-pyt.niepoprawna .el6-kafelek-pyt-litera { color: #e74c3c; }

/* ─── TRYB ANKIETOWY (psychologiczny) ────────────────────────────────
   W pytaniach z `podsumowanie_typu` nie ma "dobrze/źle" - wszystkie wybory
   są ważne i opisują styl. Wybrana opcja dostaje subtelne podświetlenie,
   bez podpowiadania sugerowanej odpowiedzi w trakcie quizu. */

/* Feedback ankietowy - bez ikony, neutralna ramka, kierunek dla lidera u dołu */
/* Stany — poprawna / niepoprawna kliknięta */
.el6-kafelek-pyt.poprawna {
  border-color: #27ae60;
  background: rgba(39,174,96,.06);
  box-shadow: 0 0 0 1.5px rgba(39,174,96,.12);
}
.el6-kafelek-pyt.poprawna .el6-kafelek-pyt-grafika {
  background: rgba(39,174,96,.08);
}
.el6-kafelek-pyt.poprawna::after {
  content: '✓';
  position: absolute; top: 6px; right: 8px;
  width: 18px; height: 18px;
  background: #27ae60; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}
.el6-kafelek-pyt.niepoprawna {
  border-color: #c0392b;
  background: rgba(192,57,43,.04);
  opacity: .85;
}
.el6-kafelek-pyt.niepoprawna .el6-kafelek-pyt-grafika {
  background: rgba(192,57,43,.06);
}
.el6-kafelek-pyt.niepoprawna::after {
  content: '✗';
  position: absolute; top: 6px; right: 8px;
  width: 18px; height: 18px;
  background: #c0392b; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}

/* Feedback z ikoną — mniejszy */
.el6-pytanie-feedback {
  text-align: center;
  padding: .9rem 1.1rem;
  border-radius: 12px;
}
.el6-pytanie-feedback.poprawna {
  background: linear-gradient(135deg, #d4f4dd 0%, #e8f5e9 100%);
  border: 1.5px solid rgba(39,174,96,.35);
  border-left: 1.5px solid rgba(39,174,96,.35);
}
.el6-pytanie-feedback.niepoprawna {
  background: linear-gradient(135deg, #fce8d9 0%, #fef3eb 100%);
  border: 1.5px solid rgba(232,168,56,.4);
  border-left: 1.5px solid rgba(232,168,56,.4);
}
.el6-pytanie-feedback-ikona {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .5rem;
  font-size: 1.3rem; font-weight: 700;
}
.el6-pytanie-feedback.poprawna .el6-pytanie-feedback-ikona {
  background: #27ae60; color: #fff;
}
.el6-pytanie-feedback.niepoprawna .el6-pytanie-feedback-ikona {
  background: #E8A838; color: #fff;
}
.el6-pytanie-feedback-naglowek {
  font-size: .98rem; font-weight: 700;
  margin-bottom: .4rem;
}
.el6-pytanie-feedback.poprawna .el6-pytanie-feedback-naglowek { color: #1e8449; }
.el6-pytanie-feedback.niepoprawna .el6-pytanie-feedback-naglowek { color: #854F0B; }
.el6-pytanie-feedback-tresc {
  font-size: .87rem; line-height: 1.5; color: #2a4a50;
  max-width: 580px; margin: 0 auto;
}

/* Mobile — wszystkie układy w 1 kolumnie */
@media (max-width: 480px) {
  .el6-kafelki-pyt,
  .el6-kafelki-pyt-2,
  .el6-kafelki-pyt-3,
  .el6-kafelki-pyt-4,
  .el6-kafelki-pyt-5,
  .el6-kafelki-pyt-6 { grid-template-columns: 1fr; gap: .65rem; }
  .el6-kafelek-pyt-grafika { aspect-ratio: 2.5 / 1; }
}
/* Tablet — 3 opcje wracają do 2×2 (3 kolumny zbyt wąskie), reszta jak w desktopie */
@media (min-width: 481px) and (max-width: 700px) {
  .el6-kafelki-pyt-3 { grid-template-columns: 1fr 1fr; }
  .el6-kafelek-pyt-grafika { aspect-ratio: 1.6 / 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ONBOARDING — kafelki profilu/skali (siatka)
   ═══════════════════════════════════════════════════════════════════════ */

.el6-profile-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin: 1rem 0 1.5rem;
}
.el6-skala-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .85rem; margin: 1rem 0 1.5rem;
}

/* Mobile/wąskie — wszystko w 1 kolumnie */
@media (max-width: 600px) {
  .el6-profile-cards { grid-template-columns: 1fr; gap: .75rem; }
  .el6-skala-cards { grid-template-columns: 1fr; gap: .65rem; }
}
/* Tablet — skale 3 -> 1×3 nadal albo na siłę po 2 + 1; zostaje 3 */
@media (min-width: 601px) and (max-width: 800px) {
  .el6-skala-cards { gap: .65rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Przycisk "Wróć do poprzedniego kroku" (zamiast linku "Zmień profil")
   ═══════════════════════════════════════════════════════════════════════ */
.el6-back-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  margin-top: 1.5rem;
  background: #fff;
  border: 1.5px solid #c1cdd1;
  border-radius: 10px;
  color: #4a6266;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.el6-back-btn:hover {
  border-color: #009B8D;
  color: #009B8D;
  background: #f7faf9;
}
.el6-back-btn i { font-size: .95rem; }

/* ═══════════════════════════════════════════════════════════════════════
   POWERS MODAL — uniwersalne okienka dialogowe
   ═══════════════════════════════════════════════════════════════════════ */
.powers-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.powers-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);
  animation: powers-modal-fade-in .15s ease;
}
.powers-modal-box {
  position: relative;
  background: #fff;
  border-radius: 18px;
  max-width: 440px; width: 100%;
  padding: 1.75rem;
  box-shadow: 0 24px 64px rgba(17, 24, 39, .25);
  animation: powers-modal-pop-in .2s ease;
  text-align: center;
}
@keyframes powers-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes powers-modal-pop-in {
  0% { transform: scale(.92) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.powers-modal-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
}
.powers-modal-icon.info    { background: rgba(0,155,141,.12);  color: #009B8D; }
.powers-modal-icon.warning { background: rgba(232,168,56,.15); color: #c98a10; }
.powers-modal-icon.danger  { background: rgba(231,76,60,.12);  color: #c0392b; }
.powers-modal-icon.success { background: rgba(39,174,96,.12);  color: #27ae60; }

.powers-modal-title {
  font-size: 1.3rem; font-weight: 800;
  color: #1e3a5f; margin: 0 0 .6rem;
  line-height: 1.3;
}
.powers-modal-body {
  font-size: .98rem; color: #4a6c72;
  line-height: 1.55; margin-bottom: 1.4rem;
}
.powers-modal-body strong { color: #1e3a5f; }

.powers-modal-kod {
  background: #f0f9f8; border: 1.5px solid rgba(0,155,141,.25);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: .15em;
  color: #1e3a5f;
  margin-bottom: 1.2rem;
  user-select: all;
}

.powers-modal-actions {
  display: flex; gap: .6rem; justify-content: center;
}
.powers-modal-btn {
  padding: .7rem 1.5rem; border-radius: 12px;
  font-size: .95rem; font-weight: 700;
  border: none; cursor: pointer;
  transition: all .15s;
  min-width: 100px;
  font-family: inherit;
}
.powers-modal-btn-cancel {
  background: #f0f4f5; color: #4a6c72;
}
.powers-modal-btn-cancel:hover { background: #dfeceb; color: #1e3a5f; }
.powers-modal-btn-ok {
  background: #009B8D; color: #fff;
}
.powers-modal-btn-ok:hover { background: #007A6E; }
.powers-modal-btn-ok.danger { background: #c0392b; }
.powers-modal-btn-ok.danger:hover { background: #922b1e; }

@media (prefers-reduced-motion: reduce) {
  .powers-modal-backdrop, .powers-modal-box { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Kod powrotu — wyraźny boks z opisem i przyciskiem
   ═══════════════════════════════════════════════════════════════════════ */
.el6-kod-powrot-box {
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  padding: 1.1rem 1.25rem;
  background: #f7faf9;
  border: 1.5px solid #ddecea;
  border-radius: 14px;
  max-width: 540px; margin-left: auto; margin-right: auto;
  text-align: center;
}
.el6-kod-powrot-tekst {
  font-size: .92rem; color: #4a6c72; line-height: 1.4;
}
.el6-kod-powrot-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.4rem;
  background: #009B8D; color: #fff;
  border: none; border-radius: 10px;
  font-size: .95rem; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.el6-kod-powrot-btn:hover {
  background: #007A6E;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,155,141,.2);
}
.el6-kod-powrot-btn i { font-size: 1.05rem; }

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — widok ścieżki (lista kroków)
   wersja dashboardowa, zgodna z wytycznymi: jedna duża karta z gradientem,
   wyraźny nagłówek, progress card, fazy z numerami, kafelki kroków.
   ═══════════════════════════════════════════════════════════════════════ */

/* Schowaj starą oś (nav.el6-progress-axis) wewnątrz screen-sciezka,
   bo dashboard ma własny progress card. Inne strony (krok/koniec) widzą oś. */
#screen-sciezka .el6-progress-axis,
#screen-sciezka #progress-axis { display: none !important; }

/* Schowanie tytułu strony "Działaj(cie)!" gdy aktywny dashboard
   (mamy własny duży nagłówek wewnątrz dashboardu).
   Body dostaje klasę 'el6-on-sciezka' z JS gdy screen-sciezka jest pokazany. */
body.el6-on-sciezka > .el6-wrap > h1.h3,
body.el6-on-sciezka .el6-wrap > h1.h3,
body.el6-on-sciezka .el6-wrap > h1.h3 + p.text-muted { display: none; }

/* ─── ZEWNĘTRZNA SEKCJA Z GRADIENTEM ─── */
.el6-dashboard {
  background: #eef5f4;
  border-radius: 24px;
  padding: 32px;
  margin-top: 1rem;
}
@media (max-width: 700px) {
  .el6-dashboard { padding: 22px 16px; border-radius: 18px; }
}

/* ─── NAGŁÓWEK DASHBOARDU ─── */
.el6-dashboard-header { margin-bottom: 26px; }
.el6-dashboard-header h2 {
  font-size: 32px; font-weight: 800;
  color: #062f2f;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.el6-dashboard-header p {
  font-size: 15px; color: #5f7373;
  max-width: 720px;
  margin: 0; line-height: 1.55;
}
.el6-dashboard-header strong { color: #063b3b; }
@media (max-width: 700px) {
  .el6-dashboard-header h2 { font-size: 26px; }
  .el6-dashboard-header p { font-size: 14px; }
}

/* ─── PROGRESS CARD ─── */
.el6-progress-card {
  background: #ffffff;
  border: 1px solid #dcebea;
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: 0 12px 34px rgba(8, 60, 60, 0.08);
  margin-bottom: 22px;
}
.el6-prog-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
}
.el6-prog-step-label {
  font-size: 0.95rem; color: #1e3a5f; font-weight: 700;
}
.el6-prog-faza-label {
  font-size: 0.82rem; color: #6b8c90;
}
.el6-prog-bar {
  display: flex; gap: 4px;
}
.el6-prog-seg {
  flex: 1; height: 10px; background: #edf3f3; border-radius: 5px;
  transition: background .4s ease;
}
.el6-prog-seg.done {
  background: linear-gradient(90deg, #009B8D, #2dbfaf);
}
.el6-prog-seg.active {
  background: linear-gradient(90deg, #f6a51a, #ffcc66);
  box-shadow: 0 2px 8px rgba(246, 165, 26, 0.3);
}

@media (max-width: 700px) {
  .el6-progress-card { padding: 18px; border-radius: 18px; }
}

/* ─── FAZA — tytuł sekcji ─── */
.el6-phase-title {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800;
  color: #063b3b;
  font-size: 18px;
  margin: 28px 0 14px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.el6-phase-title::before {
  content: '';
  width: 6px; height: 24px;
  background: #0f766e;
  border-radius: 4px;
  flex-shrink: 0;
}
.el6-faza-blok.faza-active .el6-phase-title::before { background: #f6a51a; }
.el6-faza-blok.faza-done .el6-phase-title::before { background: #27ae60; }

.el6-phase-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.92rem; font-weight: 800;
  background: #cfe1de; color: #5f7373;
  flex-shrink: 0;
}
.el6-phase-tytul {
  font-size: 18px;
  color: #5f7373;
}
/* Faza w trakcie — numer w morskim, tytuł ciemny */
.el6-faza-blok.faza-active .el6-phase-num { background: #009B8D; color: #fff; }
.el6-faza-blok.faza-active .el6-phase-tytul { color: #063b3b; }
/* Faza ukończona — numer w zielonym z fajką */
.el6-faza-blok.faza-done .el6-phase-num {
  background: #27ae60; color: #fff;
}
.el6-phase-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  padding: 4px 11px;
  background: rgba(232, 168, 56, 0.15);
  color: #854F0B;
  border-radius: 12px;
  font-size: 0.74rem; font-weight: 700;
  text-transform: none;
}
.el6-phase-badge.zdobyta {
  background: rgba(39, 174, 96, 0.15);
  color: #1e8449;
}

/* ─── KAFELKI KROKÓW W FAZIE (3 w rzędzie) ─── */
.el6-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .el6-step-grid { grid-template-columns: 1fr; gap: 10px; }
}

.el6-step-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #ffffff;
  border: 1px solid #dfeaea;
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: 0.22s ease;
  position: relative;
  min-height: 130px;
}
.el6-step-card:hover {
  transform: translateY(-2px);
  border-color: #b8d6d2;
  box-shadow: 0 6px 18px rgba(8, 60, 60, 0.08);
}

/* AKTYWNY krok — pomarańczowy akcent, mocno wyskakuje */
.el6-step-card.active {
  background: linear-gradient(135deg, #fff8eb, #ffffff);
  border: 2px solid #f6a51a;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(246, 165, 26, 0.25);
  padding: 17px;  /* bo border 2px zamiast 1px — wyrównujemy padding */
}
.el6-step-card.active:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(246, 165, 26, 0.32);
}

/* ZROBIONY krok — zielona obwódka, zielony numer z fajką */
.el6-step-card.done {
  background: rgba(39, 174, 96, 0.04);
  border-color: rgba(39, 174, 96, 0.3);
}

/* ZABLOKOWANY krok — przyciemniony ale subtelny hover (że "czeka") */
.el6-step-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
  transition: opacity .2s ease;
}
.el6-step-card.locked:hover {
  opacity: 0.85;
  transform: none;
  border-color: #dfeaea;
  box-shadow: none;
}

/* Numer kroku w kółku */
.el6-step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.95rem;
  background: #edf5f4; color: #789090;
  flex-shrink: 0;
}
.el6-step-card.active .el6-step-num {
  background: #f6a51a; color: #ffffff;
  width: 38px; height: 38px;
  font-size: 1.05rem;
}
.el6-step-card.done .el6-step-num {
  background: #27ae60; color: #ffffff;
}
.el6-step-card.done .el6-step-num i { font-size: 1rem; }

/* Treść kroku */
.el6-step-content {
  flex: 1; min-width: 0;
}
.el6-step-title {
  font-size: 0.98rem; font-weight: 700;
  color: #1e3a5f;
  line-height: 1.3;
  margin-bottom: 4px;
}
.el6-step-short {
  font-size: 0.8rem; color: #789090;
  line-height: 1.4;
}

/* Status w prawym dolnym rogu kafelka */
.el6-step-status {
  font-size: 0.72rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  margin-top: auto;
}
.el6-step-status.active {
  padding: 9px 16px;
  background: #f6a51a;
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(246, 165, 26, 0.3);
  gap: 6px;
}
.el6-step-status.active i.bi-hand-index-thumb-fill {
  font-size: 0.9rem;
}
.el6-step-status.done {
  color: #1e8449;
}
.el6-step-status.locked {
  color: #94a3a8;
  font-size: 0.85rem;
}

/* Mobile: status wraca do dolnej linii, oddzielnie */
@media (max-width: 700px) {
  .el6-step-card { min-height: auto; padding: 14px; }
  .el6-step-card.active { padding: 13px; }
  .el6-step-title { font-size: 0.95rem; }
  .el6-phase-title { margin-top: 22px; gap: 9px; }
  .el6-phase-tytul { font-size: 0.95rem; }
  .el6-phase-num { width: 26px; height: 26px; font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Strzałka na aktualnym kafelku — wskazuje "tutaj kliknij"
   ═══════════════════════════════════════════════════════════════════════ */
.el6-step-arrow {
  /* Stara reguła — pozostawiona dla wstecznej kompatybilności, niewykorzystywana */
  display: none;
}

/* Strzałka teraz JEST CZĘŚCIĄ przycisku CTA - subtelna animacja przy hover */
.el6-step-status.active i.bi-arrow-right {
  font-size: 0.95rem;
  transition: transform .25s ease;
}
.el6-step-card.active:hover .el6-step-status.active i.bi-arrow-right {
  transform: translateX(4px);
}

/* Status "Kliknij, aby zacząć" — z ikoną palca (rozmiar zgodny z wyższym rule) */

/* Numer fazy z cyframi rzymskimi — `III` jest szersze niż `3`, dajmy więcej miejsca
   ale tylko gdy w środku jest tekst >=2 znaki */
.el6-phase-num {
  min-width: 30px; padding: 0 6px;
  width: auto;
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .el6-phase-num { min-width: 26px; padding: 0 5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Tooltip na zablokowanych kafelkach kroków
   ═══════════════════════════════════════════════════════════════════════ */
.el6-step-card.locked[data-tooltip] {
  position: relative;
}
.el6-step-card.locked[data-tooltip]::before,
.el6-step-card.locked[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}
/* Bąbel z tekstem */
.el6-step-card.locked[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1e3a5f;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(8, 60, 60, 0.25);
}
/* Strzałka w dół */
.el6-step-card.locked[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1e3a5f;
}
/* Pokazuje się przy hover/focus */
.el6-step-card.locked[data-tooltip]:hover::before,
.el6-step-card.locked[data-tooltip]:hover::after,
.el6-step-card.locked[data-tooltip]:focus-visible::before,
.el6-step-card.locked[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Mobile — na małych ekranach tooltip nie ma sensu (brak hover), 
   ale focus po klik jest OK; ograniczamy szerokość */
@media (max-width: 600px) {
  .el6-step-card.locked[data-tooltip]::before {
    max-width: 180px;
    font-size: 0.78rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   STRONA KROKU — wersja dashboardowa z 4 kolorowymi sekcjami
   Kolorystyka:
   - Karta nagłówka kroku: pomarańczowy (jak aktualny w dashboardzie)
   - ① Zrozum: fiolet
   - ② Inspiruj się: koral
   - ③ Twoje przemyślenia: morski
   - 💡 Sprawdź się: zielony
   - CTA: pomarańczowy gradient
   ═══════════════════════════════════════════════════════════════════════ */

/* Wrapper strony kroku — schowaj oś z _naglowek.html (mamy własny układ) */
.el6-wrap-krok #progress-axis,
.el6-wrap-krok .el6-progress-axis { display: none !important; }

/* Schowaj na stronie kroku/koniec stary <h1>Działaj(cie)!</h1> + opis,
   gdyby gdzieś jeszcze został. Bezpiecznik. */
.el6-wrap-krok > h1.h3,
.el6-wrap-krok > h1.h3 + p.text-muted { display: none; }

/* Karta strony kroku jest też dashboardowa — używa .el6-dashboard z gradientem */
article.el6-krok-strona.el6-dashboard {
  background: #eef5f4;
  border-radius: 24px;
  padding: 28px;
  margin-top: 1rem;
}
@media (max-width: 700px) {
  article.el6-krok-strona.el6-dashboard { padding: 22px 16px; border-radius: 18px; }
}

/* ─── KARTA NAGŁÓWKA KROKU ─── */
.el6-krok-card-header {
  background: #ffffff;
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 12px 34px rgba(8, 60, 60, 0.08);
  border-left: 6px solid #f6a51a;
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.el6-krok-num-big {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #f6a51a;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(246, 165, 26, 0.3);
}
.el6-krok-head-info {
  flex: 1; min-width: 0;
}
.el6-krok-head-faza {
  font-size: 0.78rem;
  color: #009B8D;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}
.el6-krok-head-faza em {
  color: #5f7373;
  font-weight: 500;
}
.el6-krok-head-tytul {
  font-size: 26px;
  font-weight: 800;
  color: #062f2f;
  margin: 0 0 4px;
  line-height: 1.2;
}
.el6-krok-head-short {
  font-size: 0.92rem;
  color: #5f7373;
  font-style: italic;
}
@media (max-width: 700px) {
  .el6-krok-card-header { padding: 20px; gap: 14px; }
  .el6-krok-num-big { width: 52px; height: 52px; font-size: 1.35rem; }
  .el6-krok-head-tytul { font-size: 22px; }
}

/* ─── WSPÓLNE STYLE SEKCJI (Zrozum / Inspiruj / Przemyślenia / Sprawdź) ─── */
.el6-section {
  background: #ffffff;
  border-radius: 22px;
  padding: 24px 26px;
  box-shadow: 0 12px 34px rgba(8, 60, 60, 0.06);
  margin-bottom: 16px;
  border-left: 6px solid #cfe1de;  /* domyślny — nadpisuje stan */
}
@media (max-width: 700px) {
  .el6-section { padding: 20px; border-radius: 18px; }
}

.el6-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.el6-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.el6-section-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.el6-section-tytul {
  font-size: 1.15rem;
  font-weight: 800;
  color: #062f2f;
  margin: 0 0 6px;
}
.el6-section-sub {
  font-size: 0.88rem;
  color: #5f7373;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* ─── ① ZROZUM (fioletowa) ─── */
.el6-section-zrozum {
  border-left-color: #7C5BC9;
}
.el6-section-zrozum .el6-section-num {
  background: rgba(124, 91, 201, 0.12);
  color: #5B3FA6;
}
.el6-section-zrozum .el6-section-tag {
  color: #5B3FA6;
}
.el6-krok-desc {
  font-size: 0.95rem;
  color: #2a4a50;
  line-height: 1.6;
  margin-bottom: 16px;
  /* Zachowuj złamania linii z bazy (\n staje się fizycznym łamaniem),
     ale wielokrotne spacje kolapsuj. To pozwala punktom z bulletami "• "
     wyświetlać się jeden pod drugim, bez konieczności ostylowania <ul>. */
  white-space: pre-line;
}
.el6-krok-desc:last-child { margin-bottom: 0; }
/* Highlight box — Twoje zadanie */
.el6-highlight-box {
  background: #fff4e5;
  border-left: 4px solid #f6a51a;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin-top: 16px;
}
.el6-highlight-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #854F0B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.el6-highlight-tresc {
  font-size: 0.95rem;
  color: #2a4a50;
  line-height: 1.55;
  font-weight: 500;
  /* Tak samo jak opis - zachowujemy łamania linii (np. listę punktów). */
  white-space: pre-line;
}
.el6-highlight-tresc strong { color: #062f2f; }

/* ─── ② INSPIRUJ SIĘ (koralowa) ─── */
.el6-section-inspiruj {
  border-left-color: #E8745E;
}
.el6-section-inspiruj .el6-section-num {
  background: rgba(232, 116, 94, 0.15);
  color: #B5462E;
}
.el6-section-inspiruj .el6-section-tag {
  color: #B5462E;
}
.el6-inspiracje-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) {
  .el6-inspiracje-grid { grid-template-columns: 1fr; }
}
.el6-inspiracja {
  background: #ffffff;
  border: 2px dashed rgba(232, 116, 94, 0.35);
  border-radius: 14px;
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.el6-inspiracja:hover {
  border-color: #E8745E;
  background: #fff8f5;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 116, 94, 0.18);
}
.el6-inspiracja.aktywna {
  border-style: solid;
  border-color: #E8745E;
  background: rgba(232, 116, 94, 0.08);
}
.el6-inspiracja-tresc {
  font-size: 0.92rem;
  color: #1e3a5f;
  line-height: 1.5;
  font-weight: 500;
}
.el6-inspiracja-autor {
  font-size: 0.74rem;
  color: #B5462E;
  font-weight: 600;
}

/* ─── ③ TWOJE PRZEMYŚLENIA (morska) ─── */
.el6-section-przemyslenia {
  border-left-color: #009B8D;
}
.el6-section-przemyslenia .el6-section-num {
  background: rgba(0, 155, 141, 0.12);
  color: #007A6E;
}
.el6-section-przemyslenia .el6-section-tag {
  color: #007A6E;
}
.el6-section-przemyslenia .el6-notatki-pola {
  margin-bottom: 12px;
}
.el6-section-przemyslenia .el6-notatki-pola textarea {
  width: 100%;
  min-height: 100px;
  padding: 14px;
  border: 1.5px solid #ddecea;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #1e3a5f;
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5;
  transition: border-color 0.18s ease;
}
.el6-section-przemyslenia .el6-notatki-pola textarea:focus {
  outline: none;
  border-color: #009B8D;
  box-shadow: 0 0 0 3px rgba(0, 155, 141, 0.12);
}
.el6-notatki-info {
  font-size: 0.78rem;
  color: #6b8c90;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.el6-notatki-info i { color: #009B8D; font-size: 0.95rem; }

/* ─── 💡 SPRAWDŹ SIĘ (zielona) ─── */
.el6-section-sprawdz {
  border-left-color: #27AE60;
}
.el6-section-sprawdz .el6-section-num {
  background: rgba(39, 174, 96, 0.13);
  color: #1e8449;
}
.el6-section-sprawdz .el6-section-tag {
  color: #1e8449;
}
.el6-section-sprawdz .el6-pytanie-box {
  /* Zostawiamy istniejące style pytań — sekcja wokół jest white, pytania mają swoje */
  border: none;
  background: transparent;
  padding: 0;
}
.el6-section-sprawdz .el6-pytanie-box::before {
  display: none;  /* wyłączamy stary morski pasek po lewej z .el6-pytanie-box */
}

/* ─── CTA — duży pomarańczowy pill button ─── */
.el6-cta-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: 0 12px 34px rgba(8, 60, 60, 0.08);
  text-align: center;
  margin-bottom: 16px;
  margin-top: 8px;
}
.el6-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #f6a51a 0%, #ff9933 100%);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 12px 28px rgba(246, 165, 26, 0.4);
  transition: all 0.2s ease;
}
.el6-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(246, 165, 26, 0.5);
}
.el6-cta-btn:disabled {
  background: #c1cdd1;
  box-shadow: none;
  cursor: not-allowed;
}
.el6-cta-hint {
  font-size: 0.82rem;
  color: #6b8c90;
  margin-top: 12px;
}

/* Stała linijka pod głównym CTA — komunikuje że TO jest jedyny przycisk
   zapisujący krok jako ukończony (strzałki/karty nawigacyjne to podgląd). */
.el6-cta-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: 14px;
  padding: .65rem .85rem;
  border-radius: 10px;
  background: rgba(0,155,141,.08);
  color: #1f4744;
  font-size: .85rem;
  line-height: 1.45;
}
.el6-cta-note i {
  color: #008f86;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.el6-cta-secondary {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.el6-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid #ddecea;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #5f7373;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-decoration: none;
}
.el6-secondary-btn:hover {
  border-color: #009B8D;
  color: #009B8D;
  background: #f7faf9;
}
.el6-mapa-btn {
  border-color: #009B8D;
  color: #009B8D;
  background: rgba(0, 155, 141, 0.04);
}

@media (max-width: 700px) {
  .el6-cta-card { padding: 22px 18px; }
  .el6-cta-btn { padding: 14px 26px; font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGINACJA NAZWANA — strona kroku
   - Górny breadcrumb: kompaktowy (← Wszystkie kroki · Krok X z 9 · Faza I)
   - Dolne karty: prev/next z tytułami kroków
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── GÓRNY BREADCRUMB (info + mini prev/next) ─── */
.el6-krok-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border: 1px solid #ddecea;
  font-size: 0.85rem;
}
.el6-breadcrumb-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.el6-breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #007A6E;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s;
}
.el6-breadcrumb-back:hover {
  color: #009B8D;
  text-decoration: underline;
}
.el6-breadcrumb-sep {
  color: #b8c5c8;
  font-weight: 700;
}
.el6-breadcrumb-stan {
  color: #1e3a5f;
  white-space: nowrap;
}
.el6-breadcrumb-stan strong {
  color: #062f2f;
  font-weight: 800;
}
.el6-breadcrumb-faza {
  color: #5f7373;
  font-style: italic;
}

/* Mini prev/next w breadcrumbie */
.el6-breadcrumb-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.el6-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #ffffff;
  border: 1px solid #ddecea;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #5f7373;
  text-decoration: none;
  font-weight: 500;
  transition: all .15s ease;
  max-width: 200px;
}
.el6-breadcrumb-link:hover {
  border-color: #009B8D;
  color: #009B8D;
  background: #f7faf9;
}
.el6-breadcrumb-link i {
  flex-shrink: 0;
  font-size: 0.85rem;
}
.el6-breadcrumb-link-tytul {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .el6-breadcrumb-link { max-width: 130px; }
  .el6-breadcrumb-link-tytul { font-size: 0.74rem; }
}
@media (max-width: 600px) {
  .el6-krok-breadcrumb {
    padding: 9px 12px;
    font-size: 0.78rem;
    gap: 8px;
  }
  .el6-breadcrumb-info { width: 100%; }
  .el6-breadcrumb-nav {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid #e8eeef;
    padding-top: 8px;
    margin-top: 2px;
  }
  .el6-breadcrumb-link {
    flex: 1;
    max-width: none;
    padding: 6px 8px;
    justify-content: center;
  }
  .el6-breadcrumb-link-tytul {
    /* na mobile pokazujemy tylko skrócony tytuł */
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el6-breadcrumb-faza {
    flex-basis: 100%;
    margin-top: 2px;
  }
  .el6-krok-breadcrumb .el6-breadcrumb-sep:nth-of-type(2) { display: none; }
}

/* ─── DOLNE KARTY PAGINACJI ─── */
.el6-krok-nav-named {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .el6-krok-nav-named { grid-template-columns: 1fr; }
}

.el6-nav-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #ddecea;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all .2s ease;
  min-height: 64px;
}
.el6-nav-card:hover {
  border-color: #009B8D;
  background: #f7faf9;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 155, 141, 0.12);
}
.el6-nav-card-prev { text-align: left; }
.el6-nav-card-next { text-align: right; }

.el6-nav-card-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #007A6E;
}
.el6-nav-card-prev .el6-nav-card-label { justify-content: flex-start; }
.el6-nav-card-next .el6-nav-card-label { justify-content: flex-end; }

.el6-nav-card-tytul {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e3a5f;
  line-height: 1.35;
}

/* Mała linijka pod tytułem na karcie next — informuje że klik nie zapisze
   kroku (wariant podglądowy). */
.el6-nav-card-note {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 600;
  color: #6b8c90;
  font-style: italic;
}
.el6-nav-card-next .el6-nav-card-note { justify-content: flex-end; }
.el6-nav-card-note i {
  font-size: .8rem;
  font-style: normal;
  opacity: .85;
}

/* Wariant "podgląd" karty — subtelnie odróżnia od potencjalnie zapisującej. */
.el6-nav-card.el6-nav-card-preview {
  background: #fafcfc;
  border-color: #e3eeee;
}
.el6-nav-card.el6-nav-card-preview:hover {
  background: #f7faf9;
  border-color: #c6e0dc;
}

/* ═══════════════════════════════════════════════════════════════════════
   CTA — animacja checkmark po kliknięciu "Gotowe"
   ═══════════════════════════════════════════════════════════════════════ */
.el6-cta-btn {
  position: relative;
  overflow: hidden;
  min-height: 56px;
}
.el6-cta-text,
.el6-cta-success {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity .25s ease, transform .25s ease;
}
.el6-cta-success {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  font-size: 1.05rem;
  font-weight: 700;
  pointer-events: none;
}
.el6-cta-btn.zapisano .el6-cta-text {
  opacity: 0;
  transform: scale(0.92);
}
.el6-cta-btn.zapisano .el6-cta-success {
  opacity: 1;
  transform: scale(1);
}
.el6-cta-btn.zapisano {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  box-shadow: 0 12px 28px rgba(39, 174, 96, 0.4);
  cursor: default;
}

/* SVG checkmark — rysuje się dwoma keyframami: kółko, potem fajka */
.el6-checkmark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.el6-checkmark-circle {
  stroke: #ffffff;
  stroke-width: 3;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-linecap: round;
  animation: el6-cm-circle .45s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  animation-delay: 0s;
}
.el6-checkmark-check {
  stroke: #ffffff;
  stroke-width: 4;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: el6-cm-check .35s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  animation-delay: .35s;
}
@keyframes el6-cm-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes el6-cm-check {
  to { stroke-dashoffset: 0; }
}

/* Schowaj starą animację checkmark na ekranie kroku — uruchamia się tylko gdy .zapisano */
.el6-cta-btn:not(.zapisano) .el6-checkmark-circle,
.el6-cta-btn:not(.zapisano) .el6-checkmark-check {
  animation: none;
  stroke-dashoffset: 166;  /* circle - schowany */
}
.el6-cta-btn:not(.zapisano) .el6-checkmark-check {
  stroke-dashoffset: 50;
}

/* ═══════════════════════════════════════════════════════════════════════
   PYTANIE TYPU "KLASYFIKACJA" — toggle 2-stanowy
   Każdy element ma 2 duże przyciski: ZADZIAŁA / NIE ZADZIAŁA
   ═══════════════════════════════════════════════════════════════════════ */
.el6-klasyfikacja {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.el6-klasyfikacja-wiersz {
  background: #f9fbfb;
  border: 1.5px solid #dfeaea;
  border-radius: 14px;
  padding: 14px 18px;
  transition: all .2s ease;
}
.el6-klasyfikacja-wiersz.poprawna {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.04);
}
.el6-klasyfikacja-wiersz.niepoprawna {
  border-color: #f6a51a;
  background: rgba(246, 165, 26, 0.04);
}

.el6-klasyfikacja-tekst {
  font-size: 0.95rem;
  color: #1e3a5f;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
}

.el6-klasyfikacja-przyciski {
  display: flex;
  gap: 8px;
}
.el6-klasyfikacja-btn {
  flex: 1;
  padding: 10px 14px;
  background: #ffffff;
  color: #5f7373;
  border: 2px solid #dfeaea;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.el6-klasyfikacja-btn i { font-size: 1rem; opacity: 0.5; }
.el6-klasyfikacja-btn:hover:not(:disabled):not(.aktywny) {
  border-color: #c1cdd1;
  background: #f7faf9;
}

/* Stan aktywny - "ZADZIAŁA" zielony */
/* ── PODCZAS WYBIERANIA: aktywny przycisk neutralnie granatowy.
   Nie używamy zielonego/czerwonego, bo to sugerowałoby userowi "dobrze/źle"
   ZANIM zobaczy feedback. Ma być neutralne "wybrane". ── */
.el6-klasyfikacja-btn.aktywny {
  background: #1e3a5f;
  color: #ffffff;
  border-color: #1e3a5f;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}
.el6-klasyfikacja-btn.aktywny i { opacity: 1; }

.el6-klasyfikacja-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

/* ── PO SPRAWDZENIU: kolor odzwierciedla poprawność wyboru.
   Wybór poprawny → zielony (niezależnie czy TAK czy NIE — "to była dobra decyzja").
   Wybór błędny → pomarańczowy (ostrzeżenie, nie czerwony "alarm").
   Niewybrane przyciski zostają szare jak były. ── */
.el6-klasyfikacja-wiersz.poprawna .el6-klasyfikacja-btn.aktywny {
  background: #27AE60;
  border-color: #27AE60;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25);
}
.el6-klasyfikacja-wiersz.niepoprawna .el6-klasyfikacja-btn.aktywny {
  background: #f6a51a;
  border-color: #f6a51a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(246, 165, 26, 0.25);
}

/* Feedback per element po sprawdzeniu */
.el6-klasyfikacja-feedback {
  font-size: 0.85rem;
  color: #5f7373;
  line-height: 1.5;
  margin-top: 10px;
  padding: 0;
  display: none;
}
.el6-klasyfikacja-feedback.feedback-poprawna,
.el6-klasyfikacja-feedback.feedback-niepoprawna {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
}
.el6-klasyfikacja-feedback.feedback-poprawna {
  background: rgba(39, 174, 96, 0.08);
  color: #1e8449;
}
.el6-klasyfikacja-feedback.feedback-poprawna i { color: #27ae60; }
.el6-klasyfikacja-feedback.feedback-niepoprawna {
  background: rgba(246, 165, 26, 0.08);
  color: #854F0B;
}
.el6-klasyfikacja-feedback.feedback-niepoprawna i { color: #f6a51a; }

/* Hint pod przyciskiem Sprawdź */
.el6-klasyfikacja-hint {
  font-size: 0.78rem;
  color: #6b8c90;
  margin-top: 8px;
  transition: opacity .25s ease;
}
.el6-klasyfikacja-hint-top {
  margin: 0 0 12px;
}

/* Mobile - przyciski idą jeden pod drugi gdy ekran wąski */
@media (max-width: 480px) {
  .el6-klasyfikacja-przyciski {
    flex-direction: column;
  }
  .el6-klasyfikacja-btn {
    padding: 12px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   EKRAN KOŃCA (v2) — gratulacje + badge ścieżki + CTA quiz + materiały
   Zastępuje stare style .el6-done-* (zostają jako dead code dla wstecznej
   kompatybilności gdyby ktoś dawno temu zalinkował starą wersję).
   ═══════════════════════════════════════════════════════════════════════ */
.el6-koniec-card {
  background: #ffffff;
  border: 1px solid #e3eeee;
  border-radius: 22px;
  padding: 36px 32px;
  box-shadow: 0 12px 34px rgba(8, 60, 60, 0.08);
  max-width: 720px;
  margin: 0 auto;
}

/* ── Header z emoji 🎉 + tytułem + subtytułem ── */
.el6-koniec-header { text-align: center; margin-bottom: 28px; }
.el6-koniec-emoji {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #009B8D, #2dbfaf);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 2.4rem;
  box-shadow: 0 12px 30px rgba(0,155,141,0.3);
}
.el6-koniec-tytul {
  font-size: 28px;
  font-weight: 800;
  color: #062f2f;
  margin: 0 0 8px;
}
.el6-koniec-subtytul {
  font-size: 1rem;
  color: #5f7373;
  margin: 0;
  line-height: 1.5;
}

/* ── Badge "Ścieżka ukończona" — drobne potwierdzenie ── */
.el6-koniec-badge {
  background: linear-gradient(135deg, rgba(0,155,141,0.06), rgba(0,155,141,0.02));
  border: 1.5px solid rgba(0,155,141,0.2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.el6-koniec-badge-ikona {
  width: 50px; height: 50px;
  border-radius: 12px;
  background: rgba(0,155,141,0.15);
  color: #009B8D;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.el6-koniec-badge-info { flex: 1; min-width: 0; }
.el6-koniec-badge-tytul {
  font-weight: 700;
  color: #062f2f;
  font-size: 0.98rem;
}
.el6-koniec-badge-podtytul {
  font-size: 0.85rem;
  color: #5f7373;
  margin-top: 2px;
}
.el6-koniec-badge-fazy {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.el6-koniec-badge-faza {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,155,141,0.18);
  color: #009B8D;
  font-size: 1rem;
}

/* ── Materiały do pobrania ── */
.el6-koniec-materialy { margin-bottom: 16px; }
.el6-koniec-materialy-label {
  font-size: 0.78rem;
  color: #5f7373;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 12px;
}
.el6-koniec-materialy-label i { margin-right: 4px; color: #009B8D; }
.el6-koniec-materialy-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.el6-koniec-mat-btn {
  flex: 1;
  min-width: 130px;
  padding: 10px 14px;
  background: #ffffff;
  color: #009B8D;
  border: 1.5px solid #009B8D;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: all .15s ease;
  font-family: inherit;
}
.el6-koniec-mat-btn:hover {
  background: rgba(0,155,141,0.06);
  color: #007a6e;
  text-decoration: none;
}
.el6-koniec-mat-btn i { font-size: 1rem; }

/* ── Stopka z kodem ── */
.el6-koniec-stopka {
  font-size: 0.82rem;
  color: #6b8c90;
  padding-top: 16px;
  border-top: 1px solid #e3eeee;
  margin-top: 20px;
  text-align: center;
}
.el6-koniec-stopka strong {
  font-family: monospace;
  color: #1e3a5f;
  font-weight: 700;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .el6-koniec-card {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .el6-koniec-emoji {
    width: 64px; height: 64px;
    font-size: 1.9rem;
  }
  .el6-koniec-tytul { font-size: 22px; }
  .el6-koniec-badge {
    flex-wrap: wrap;
    gap: 10px;
  }
  .el6-koniec-badge-fazy {
    width: 100%;
    justify-content: center;
  }
  .el6-koniec-materialy-btns {
    flex-direction: column;
  }
  .el6-koniec-mat-btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRZEBUDOWA KROKU GRYWALIZACJI v2
   2-kolumnowy układ, białe panele bez kolorowych borderów,
   inspirowany aktywnościami/scenariuszami w POWERS.
   Stosowany na .el6-krok-v2 (article z nową strukturą).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Wyłączenie starych styli sekcji w wariancie v2 ── */
.el6-krok-v2 .el6-section { display: none !important; }
.el6-krok-v2 .el6-krok-sekcja { display: none !important; }

/* ── Białe/jasnoszare tło zamiast zielonkawego (jak na inspiracji) ── */
.el6-wrap-krok {
  background: #f5f7f9;
}

/* ── Top stepper (1 → 2 → 3 → ... → 9) ── */
.el6-krok-v2 .el6-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin: 0 0 1.5rem;
  flex-wrap: wrap;
}
.el6-stepper-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #6f7c80;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  border: 2px solid #e3edec;
  transition: all .15s;
}
.el6-stepper-item:hover {
  border-color: #009B8D;
  color: #009B8D;
}
.el6-stepper-item.done {
  background: #009B8D;
  border-color: #009B8D;
  color: #fff;
}
.el6-stepper-item.done:hover {
  background: #007e74;
  border-color: #007e74;
}
.el6-stepper-item.active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
  width: 42px; height: 42px;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(30,58,95,.25);
}
.el6-stepper-sep {
  width: 14px;
  height: 2px;
  background: #e3edec;
  border-radius: 2px;
}

/* ── Nagłówek kroku v2 (biały z turkusowym paskiem po lewej, jak inspiracja) ── */
.el6-krok-card-header-v2 {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 20px rgba(8, 60, 60, .06);
  border: 1px solid rgba(0,0,0,.04);
}
.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(180deg, #009B8D 0%, #007e74 100%);
  color: #fff;
  min-width: 110px;
  width: auto;       /* reset starej reguły width:60px */
  height: auto;      /* reset starej reguły height:60px */
  border-radius: 0;  /* reset starej reguły border-radius:50% */
  box-shadow: none;  /* reset zielonkawego cienia z starej reguły */
  text-align: center;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  flex-shrink: 0;
  align-self: stretch;  /* żeby pasek rozciągał się na całą wysokość headera */
}
.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-big small {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .9;
  display: block;
  margin-bottom: .35rem;
}
.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-big strong {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  display: block;
}
.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-z {
  font-size: .72rem;
  opacity: .9;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .35rem;
}
.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-head-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.75rem;
  text-align: left;
}
.el6-krok-v2 .el6-krok-head-faza {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b7c8f;
  margin-bottom: .5rem;
}
.el6-krok-v2 .el6-krok-head-tytul {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 .5rem;
  color: #1e3a5f;
  line-height: 1.2;
}
.el6-krok-v2 .el6-krok-head-short {
  font-size: .98rem;
  color: #4a6c72;
  line-height: 1.55;
  font-weight: 400;
}

/* ── 2-kolumnowy grid ── */
.el6-krok-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 991.98px) {
  .el6-krok-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ── Panel (wspólny styl dla wszystkich białych kafli) ── */
.el6-panel {
  background: #fff;
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 6px 20px rgba(8, 60, 60, .06);
  margin-bottom: 1rem;
  border: 1px solid rgba(0,0,0,.04);
}
.el6-panel:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .el6-panel { padding: 1.15rem 1.2rem; border-radius: 14px; }
}

.el6-panel-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid #eef2f1;
}
.el6-panel-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,155,141,.12);
  color: #009B8D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.el6-panel-tytul {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e3a5f;
  line-height: 1.3;
}
.el6-panel-body {
  font-size: .95rem;
  color: #2a4a50;
  line-height: 1.65;
}
.el6-panel-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
.el6-panel-sub {
  font-size: .88rem;
  color: #5f7373;
  line-height: 1.55;
  margin: 0 0 1rem;
}

/* ── Override istniejących styli wewnątrz paneli ── */
.el6-krok-v2 .el6-panel .el6-krok-desc {
  margin-bottom: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: .95rem;
  color: #2a4a50;
}

/* Inspiracje — siatka kart wewnątrz panelu (mniejsze niż w starym układzie, bo wąskie) */
.el6-krok-v2 .el6-panel .el6-inspiracje-grid {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.el6-krok-v2 .el6-panel .el6-inspiracja {
  background: #f7faf9;
  border: 1.5px solid #e0ecec;
  border-radius: 12px;
  padding: .75rem .9rem;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
}
.el6-krok-v2 .el6-panel .el6-inspiracja:hover {
  border-color: #009B8D;
  background: rgba(0,155,141,.04);
}
.el6-krok-v2 .el6-panel .el6-inspiracja-tresc {
  font-size: .88rem;
  color: #2a4a50;
  line-height: 1.5;
  font-style: italic;
  margin-bottom: .25rem;
}
.el6-krok-v2 .el6-panel .el6-inspiracja-autor {
  font-size: .75rem;
  color: #009B8D;
  font-weight: 600;
}

/* Linki — w panelu na prawej kolumnie */
.el6-krok-v2 .el6-panel .el6-krok-links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.el6-krok-v2 .el6-panel .el6-krok-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #009B8D;
  text-decoration: none;
  font-weight: 600;
}
.el6-krok-v2 .el6-panel .el6-krok-link:hover {
  text-decoration: underline;
}

/* Toolkit (PDF) wewnątrz panelu */
.el6-krok-v2 .el6-panel .el6-krok-toolkit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #009B8D;
  color: #fff;
  padding: .65rem 1rem;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .15s;
}
.el6-krok-v2 .el6-panel .el6-krok-toolkit:hover {
  background: #007e74;
  transform: translateY(-1px);
}

/* Notatki — pola formularzy mają już swoje style w el6-notatki-pola */
.el6-krok-v2 .el6-panel .el6-notatki-info {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eef2f1;
  font-size: .8rem;
  color: #5f7373;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.el6-krok-v2 .el6-panel .el6-notatki-info i {
  color: #009B8D;
}

/* Pytanie sprawdzające w panelu prawej kolumny — kompaktowo */
.el6-krok-v2 .el6-panel .el6-pytanie-box {
  background: none;
  padding: 0;
  border: none;
}

/* Mobilny override headera */
@media (max-width: 700px) {
  .el6-krok-v2 .el6-krok-card-header-v2 {
    flex-direction: column;
  }
  .el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-big {
    min-width: 0;
    width: 100%;
    flex-direction: row;
    gap: .5rem;
    padding: 1rem 1.25rem;
  }
  .el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-big strong {
    font-size: 2rem;
  }
  .el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-big small,
  .el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-z {
    margin: 0;
  }
  .el6-krok-v2 .el6-krok-head-tytul { font-size: 1.3rem; }
  .el6-stepper-item { width: 32px; height: 32px; font-size: .8rem; }
  .el6-stepper-item.active { width: 36px; height: 36px; font-size: .9rem; }
}

/* ── Element 6: wariant bliżej karty z inspiracji ── */
.el6-wrap-krok {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 155, 141, .08), transparent 32rem),
    linear-gradient(180deg, #f8fafb 0%, #f3f6f7 100%);
}

.el6-wrap-krok article.el6-krok-strona.el6-dashboard {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.el6-krok-v2 .el6-krok-card-header-v2 {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) minmax(320px, .82fr);
  align-items: stretch;
  border-radius: 14px;
  border: 1px solid #edf1f2;
  box-shadow: 0 18px 42px rgba(15, 42, 56, .08);
  overflow: hidden;
}

.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-big {
  min-width: 0;
  background: linear-gradient(180deg, #008f86 0%, #006f72 100%);
}

.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-head-info {
  padding: 2rem 2rem 1.9rem;
}

.el6-krok-v2 .el6-krok-head-faza {
  color: #667783;
  margin-bottom: .65rem;
}

.el6-krok-v2 .el6-krok-head-tytul {
  color: #10283d;
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  letter-spacing: 0;
}

.el6-krok-v2 .el6-krok-head-short {
  max-width: 62ch;
  color: #22384c;
}

.el6-krok-head-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .95rem;
  padding: 1.45rem 1.55rem 1.45rem 0;
}

.el6-krok-v2 .el6-stepper {
  justify-content: flex-end;
  margin: 0;
  gap: .25rem;
  flex-wrap: nowrap;
}

.el6-krok-v2 .el6-stepper-item {
  width: 30px;
  height: 30px;
  border-width: 2px;
  border-color: #cfd8df;
  color: #7c8792;
  font-size: .78rem;
  background: #fff;
}

.el6-krok-v2 .el6-stepper-item.done {
  background: #eef8f6;
  border-color: #008f86;
  color: #007a73;
}

.el6-krok-v2 .el6-stepper-item.locked {
  opacity: .62;
  color: #9aa5ae;
}

.el6-krok-v2 .el6-stepper-item.active {
  width: 34px;
  height: 34px;
  background: #00747d;
  border-color: #00747d;
  box-shadow: 0 5px 14px rgba(0, 116, 125, .25);
}

.el6-krok-v2 .el6-stepper-sep {
  width: 13px;
  background: #d9e1e6;
}

.el6-krok-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.el6-krok-meta-card {
  min-height: 76px;
  padding: .75rem .8rem;
  border: 1px solid #edf1f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 42, 56, .045);
}

.el6-krok-meta-card span,
.el6-krok-meta-card small {
  display: block;
  color: #536575;
  font-size: .74rem;
  line-height: 1.25;
}

.el6-krok-meta-card strong {
  display: flex;
  align-items: center;
  gap: .34rem;
  margin-top: .38rem;
  color: #162f46;
  font-size: .86rem;
  line-height: 1.25;
}

.el6-krok-meta-card strong .bi {
  color: #008f86;
  font-size: 1.2rem;
}

.el6-krok-meta-card:first-child strong {
  gap: .1rem;
  color: #f3a51b;
}

.el6-krok-meta-card:first-child strong .bi {
  color: #f3a51b;
  font-size: .98rem;
}

.el6-krok-meta-card small {
  margin-top: .2rem;
  color: #162f46;
  font-weight: 700;
}

.el6-krok-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, .98fr);
  gap: 1.05rem;
}

.el6-panel {
  border-radius: 8px;
  border: 1px solid #edf1f2;
  box-shadow: 0 14px 34px rgba(15, 42, 56, .065);
  padding: 1.45rem 1.55rem;
}

.el6-panel-head {
  gap: .85rem;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.el6-panel-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #eef8f6;
  color: #007a73;
  font-size: 1.2rem;
}

.el6-panel-tytul {
  color: #007a73;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.el6-panel-body {
  color: #1d3448;
}

.el6-krok-v2 .el6-panel .el6-krok-desc {
  color: #1d3448;
  font-size: 1rem;
  white-space: pre-line;
}

.el6-krok-v2 .el6-panel .el6-krok-desc ul,
.el6-krok-v2 .el6-panel .el6-krok-desc ol {
  padding-left: 1.15rem;
  margin: .5rem 0 0;
}

.el6-krok-v2 .el6-panel .el6-notatka-input,
.el6-krok-v2 .el6-panel .el6-notatka-textarea {
  border-radius: 8px;
  border-color: #dce5e8;
  background: #fff;
}

.el6-krok-v2 .el6-panel .el6-notatka-input:focus,
.el6-krok-v2 .el6-panel .el6-notatka-textarea:focus {
  border-color: #008f86;
  box-shadow: 0 0 0 3px rgba(0, 143, 134, .12);
}

.el6-cta-card {
  border-radius: 8px;
  border: 1px solid #edf1f2;
  background: linear-gradient(90deg, rgba(246, 165, 26, .12), #fff 44%);
  box-shadow: 0 14px 34px rgba(15, 42, 56, .065);
}

.el6-cta-btn {
  border-radius: 8px;
  background: linear-gradient(135deg, #008f86, #006f72);
  box-shadow: 0 12px 24px rgba(0, 116, 125, .22);
}

.el6-secondary-btn,
.el6-nav-card {
  border-radius: 8px;
}

@media (max-width: 1199.98px) {
  .el6-krok-v2 .el6-krok-card-header-v2 {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .el6-krok-head-side {
    grid-column: 2;
    padding: 0 1.5rem 1.45rem;
  }

  .el6-krok-v2 .el6-stepper {
    justify-content: flex-start;
  }
}

@media (max-width: 991.98px) {
  .el6-krok-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .el6-krok-v2 .el6-krok-card-header-v2 {
    display: flex;
    border-radius: 12px;
  }

  .el6-krok-head-side {
    padding: 0 1.15rem 1.15rem;
  }

  .el6-krok-v2 .el6-stepper {
    overflow-x: auto;
    padding-bottom: .15rem;
  }

  .el6-krok-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Finalny hero kroku: czysty wariant jak w referencji ── */
.el6-wrap-krok {
  background: #f6f8fa;
}

.el6-krok-v2 .el6-krok-card-header-v2 {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  align-items: stretch;
  min-height: 150px;
  gap: 0;
  padding: 0;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #edf1f4;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-num-big {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  width: 106px;
  height: 100%;
  min-height: 150px;
  margin: 0;
  padding: 1.4rem 1rem;
  background: linear-gradient(180deg, #008f86 0%, #006f72 100%);
  color: #ffffff;
  border-radius: 0;
}

.el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-head-info {
  padding: 2.1rem 2rem;
}

.el6-krok-v2 .el6-krok-head-faza {
  margin-bottom: .7rem;
  color: #6f7785;
}

.el6-krok-v2 .el6-krok-head-tytul {
  color: #10283d;
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: 0;
}

.el6-krok-v2 .el6-krok-head-status {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: -.1rem 0 .65rem;
}

.el6-krok-v2 .el6-krok-head-status:empty {
  display: none;
}

.el6-krok-v2 .el6-krok-head-status .el6-krok-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .42rem .75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.el6-krok-v2 .el6-krok-head-status .el6-krok-status i {
  font-size: 1rem;
  line-height: 1;
}

.el6-krok-v2 .el6-krok-head-status .el6-krok-status.done {
  border-color: #f1d18d;
  background: #fff8e8;
  color: #8a5a00;
}

.el6-krok-v2 .el6-krok-head-status .el6-krok-status.active {
  border-color: #bfe3df;
  background: #eef8f6;
  color: #007a73;
}

.el6-krok-v2 .el6-krok-head-status .el6-krok-status.locked {
  border-color: #dce5e8;
  background: #f4f7f8;
  color: #6f7d86;
}

.el6-krok-v2 .el6-phase-medals {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  gap: .5rem;
  flex: 0 0 auto;
  min-width: 218px;
  margin-left: auto;
  padding: 1.45rem 1.65rem 1.45rem .75rem;
}

.el6-krok-v2 .el6-phase-medal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #8a98a3;
}

.el6-krok-v2 .el6-phase-medal-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #dce5e8;
  background: #f3f6f7;
  color: #9aa8b2;
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .68);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.el6-krok-v2 .el6-phase-medal.earned {
  color: #8a5a00;
}

.el6-krok-v2 .el6-phase-medal.earned .el6-phase-medal-icon {
  border-color: #f1c96e;
  background: linear-gradient(135deg, #ffe59a, #f3a51b);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(243, 165, 27, .28), inset 0 0 0 4px rgba(255, 255, 255, .26);
}

.el6-krok-v2 .el6-phase-medal.current:not(.earned) .el6-phase-medal-icon {
  border-color: #9fd5d0;
  background: #eef8f6;
  color: #007a73;
}

.el6-krok-v2 .el6-phase-medal.earned .el6-phase-medal-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #009b8d;
}

.el6-krok-v2 .el6-krok-head-short {
  max-width: 760px;
  color: #26384b;
  font-size: 1.05rem;
}

.el6-panel,
.el6-cta-card,
.el6-nav-card {
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.el6-path-header,
.el6-kod-box {
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

/* ── Twoja droga: dziennik postępu ───────────────────────────── */
.el6-journey {
  display: grid;
  gap: 1.25rem;
}

.el6-journey-hero,
.el6-journey-badges,
.el6-journey-timeline {
  background: #fff;
  border: 1px solid #dce8ea;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15, 42, 63, .055);
}

.el6-journey-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  padding: clamp(1.45rem, 3vw, 2.4rem);
  background:
    radial-gradient(circle at 0 0, rgba(0,155,141,.1), transparent 22rem),
    #fff;
}

.el6-journey-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #008f86;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .65rem;
}

.el6-journey-hero h1 {
  margin: 0 0 .55rem;
  color: #062f4f;
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 900;
  letter-spacing: 0;
}

.el6-journey-hero p {
  max-width: 760px;
  margin: 0;
  color: #43566a;
  font-size: 1.04rem;
  line-height: 1.7;
}

.el6-journey-score {
  min-width: 170px;
  padding: 1.2rem;
  border-radius: 18px;
  background: #effaf8;
  border: 1px solid #bfe3df;
  text-align: center;
}

.el6-journey-score strong {
  display: block;
  color: #008f86;
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 900;
}

.el6-journey-score span {
  display: block;
  margin-top: .4rem;
  color: #536575;
  font-size: .86rem;
  font-weight: 750;
}

.el6-journey-badges,
.el6-journey-timeline {
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
}

.el6-journey-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.el6-journey-section-head h2 {
  margin: 0;
  color: #062f4f;
  font-size: 1.35rem;
  font-weight: 900;
}

.el6-journey-section-head p {
  margin: 0;
  color: #6d7c8a;
  font-size: .92rem;
}

.el6-journey-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}

.el6-journey-badge {
  display: flex;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid #e0e9eb;
  border-radius: 16px;
  background: #f8fbfb;
  opacity: .62;
}

.el6-journey-badge.is-done {
  opacity: 1;
  border-color: #9edbd5;
  background: #f0fbfa;
}

.el6-journey-badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #8b9aa7;
  border: 2px solid #d6e2e5;
  background: #fff;
  font-size: 1.25rem;
}

.el6-journey-badge.is-done .el6-journey-badge-icon {
  color: #008f86;
  border-color: #008f86;
  box-shadow: 0 0 0 6px rgba(0,143,134,.08);
}

.el6-journey-badge h3 {
  margin: .1rem 0 .25rem;
  color: #062f4f;
  font-size: .98rem;
  font-weight: 900;
}

.el6-journey-badge p {
  margin: 0;
  color: #536575;
  font-size: .84rem;
  line-height: 1.45;
}

.el6-journey-phase {
  display: grid;
  gap: .7rem;
  margin-top: 1rem;
}

.el6-journey-phase:first-child { margin-top: 0; }

.el6-journey-phase > h2 {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .2rem 0 .45rem;
  color: #008f86;
  font-size: .88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.el6-journey-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: .9rem;
  padding: 1rem 0;
  border-top: 1px solid #edf2f3;
}

.el6-journey-phase > div .el6-journey-step:first-child {
  border-top: 0;
}

.el6-journey-step-marker {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #d6e2e5;
  color: #8b9aa7;
  background: #fff;
}

.el6-journey-step.is-done .el6-journey-step-marker {
  color: #fff;
  background: #008f86;
  border-color: #008f86;
}

.el6-journey-step-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.el6-journey-step-top span {
  display: block;
  color: #718190;
  font-size: .78rem;
  font-weight: 850;
}

.el6-journey-step-top h3 {
  margin: .1rem 0 0;
  color: #062f4f;
  font-size: 1.1rem;
  font-weight: 900;
}

.el6-journey-step-top a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #008f86;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 850;
  white-space: nowrap;
}

.el6-journey-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  margin-top: .6rem;
  color: #718190;
  font-size: .82rem;
  font-weight: 700;
}

.el6-journey-step-meta span {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
}

.el6-journey-step-meta .done { color: #008f86; }

.el6-journey-notes {
  display: grid;
  gap: .55rem;
  margin-top: .85rem;
}

.el6-journey-note {
  padding: .85rem .95rem;
  border-radius: 14px;
  background: #f7fafb;
  border: 1px solid #e1ecee;
}

.el6-journey-note strong {
  display: block;
  color: #062f4f;
  font-size: .84rem;
  margin-bottom: .28rem;
}

.el6-journey-note p {
  margin: 0;
  color: #26384b;
  line-height: 1.55;
}

.el6-journey-empty-note {
  margin: .75rem 0 0;
  color: #8b9aa7;
  font-size: .88rem;
}

.el6-phase-summary-modal {
  text-align: left;
}

.el6-phase-summary-badge {
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: .9rem;
  border-radius: 16px;
  background: #effaf8;
  border: 1px solid #bfe3df;
  margin-bottom: .9rem;
}

.el6-phase-summary-badge i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #008f86;
  background: #fff;
  border: 2px solid #008f86;
}

.el6-phase-summary-badge strong,
.el6-phase-summary-badge span {
  display: block;
}

.el6-phase-summary-badge strong {
  color: #062f4f;
  font-size: 1rem;
}

.el6-phase-summary-badge span {
  color: #536575;
  font-size: .86rem;
}

.el6-phase-summary-modal ul {
  list-style: none;
  margin: .8rem 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.el6-phase-summary-modal li {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  color: #26384b;
  font-weight: 750;
}

.el6-phase-summary-modal li i {
  color: #008f86;
  margin-top: .1rem;
}

.el6-phase-summary-note {
  color: #536575;
  margin-bottom: 0;
}

.el6-phase-summary-note a {
  color: #008f86;
  font-weight: 900;
}

@media (max-width: 760px) {
  .el6-journey-hero {
    grid-template-columns: 1fr;
  }
  .el6-journey-score {
    text-align: left;
  }
  .el6-journey-section-head,
  .el6-journey-step-top {
    display: grid;
  }
  .el6-journey-step {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}

.el6-krok-head-side,
.el6-krok-meta-grid,
.el6-stepper {
  display: none !important;
}

@media (max-width: 700px) {
  .el6-krok-v2 .el6-krok-card-header-v2 {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    min-height: 0;
    padding: 0;
    gap: 0;
  }

  .el6-krok-v2 .el6-krok-card-header-v2 .el6-krok-head-info {
    padding: 1.35rem 1.2rem 1.45rem;
  }

  .el6-krok-v2 .el6-phase-medals {
    justify-content: flex-end;
    flex-wrap: wrap;
    align-self: center;
    min-width: 0;
    margin-left: 0;
    padding: 1rem 1rem 1rem 0;
    gap: .38rem;
  }

  .el6-krok-v2 .el6-phase-medal-icon {
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
  }
}

.el6-krok-v2 header.el6-krok-card-header-v2 {
  padding: 0 !important;
  gap: 0 !important;
}

/* ── Sekcja notatek jak karta "Uzupełnij" z referencji ── */
/* Sekcja celu kroku jak w referencji */
.el6-krok-v2 .el6-goal-panel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.25rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #edf1f3;
  box-shadow: 0 8px 22px rgba(15, 42, 63, .055);
}

.el6-krok-v2 .el6-goal-panel .el6-panel-head {
  display: contents;
}

.el6-krok-v2 .el6-goal-panel .el6-panel-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  color: #008f86;
  font-size: 1.95rem;
}

.el6-krok-v2 .el6-goal-panel .el6-panel-tytul {
  margin: 0 0 .12rem;
  color: #008174;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.el6-krok-v2 .el6-goal-panel .el6-panel-body {
  grid-column: 2;
  color: #1d3448;
  font-size: .96rem;
  line-height: 1.45;
}

.el6-krok-v2 .el6-goal-panel .el6-panel-text {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}

@media (max-width: 520px) {
  .el6-krok-v2 .el6-goal-panel {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: .85rem;
    padding: .95rem 1rem;
  }

  .el6-krok-v2 .el6-goal-panel .el6-panel-icon {
    width: 38px;
    height: 38px;
    font-size: 1.7rem;
  }
}

.el6-krok-v2 .el6-notes-panel {
  padding: 1.75rem 1.9rem 1.85rem;
}

/* Sekcja "Co zrobisz?" w stylu kart z referencji */
.el6-krok-v2 .el6-task-panel {
  padding: 1.25rem 1.35rem 1.35rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #edf1f3;
  box-shadow: 0 8px 22px rgba(15, 42, 63, .055);
}

.el6-krok-v2 .el6-task-panel .el6-panel-head {
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: 0;
  border-bottom: 0;
}

.el6-krok-v2 .el6-task-panel .el6-panel-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef8f6;
  color: #008f86;
  font-size: 1.12rem;
}

.el6-krok-v2 .el6-task-panel .el6-panel-tytul {
  margin: 0;
  color: #008174;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.el6-krok-v2 .el6-task-panel .el6-panel-body {
  color: #102942;
  font-size: .96rem;
  line-height: 1.58;
}

.el6-krok-v2 .el6-task-panel .el6-krok-desc {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.el6-krok-v2 .el6-task-panel .el6-krok-desc p {
  margin: 0 0 .95rem;
}

.el6-krok-v2 .el6-task-panel .el6-krok-desc p:last-child {
  margin-bottom: 0;
}

.el6-krok-v2 .el6-task-panel .el6-krok-desc ul,
.el6-krok-v2 .el6-task-panel .el6-krok-desc ol {
  margin: .45rem 0 1.05rem;
  padding-left: 1.15rem;
}

.el6-krok-v2 .el6-task-panel .el6-krok-desc li {
  margin: .25rem 0;
  padding-left: .1rem;
}

.el6-krok-v2 .el6-task-panel .el6-krok-desc strong,
.el6-krok-v2 .el6-task-panel .el6-krok-desc b {
  color: #102942;
  font-weight: 700;
}

.el6-krok-v2 .el6-before-panel {
  padding: 1.25rem 1.35rem 1.35rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #edf1f3;
  box-shadow: 0 8px 22px rgba(15, 42, 63, .055);
}

.el6-krok-v2 .el6-before-panel .el6-panel-head {
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: 0;
  border-bottom: 0;
}

.el6-krok-v2 .el6-before-panel .el6-panel-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef8f6;
  color: #008f86;
  font-size: 1.12rem;
}

.el6-krok-v2 .el6-before-panel .el6-panel-tytul {
  margin: 0;
  color: #008174;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.el6-krok-v2 .el6-before-panel .el6-panel-body,
.el6-krok-v2 .el6-before-panel .el6-krok-desc {
  color: #102942;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.58;
  white-space: pre-line;
}

.el6-krok-v2 .el6-task-extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: -0.15rem 0 1rem;
}

.el6-krok-v2 .el6-task-extra {
  padding: 1.15rem 1.2rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #edf1f3;
  box-shadow: 0 8px 22px rgba(15, 42, 63, .045);
}

.el6-krok-v2 .el6-task-extra-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}

.el6-krok-v2 .el6-task-extra-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eef8f6;
  color: #008f86;
}

.el6-krok-v2 .el6-task-extra-trap .el6-task-extra-head span {
  background: #fff5e6;
  color: #d86b00;
}

.el6-krok-v2 .el6-task-extra-head h3 {
  margin: 0;
  color: #008174;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.el6-krok-v2 .el6-task-extra-trap .el6-task-extra-head h3 {
  color: #c45d00;
}

.el6-krok-v2 .el6-task-extra-text {
  color: #102942;
  font-size: .91rem;
  font-weight: 500;
  line-height: 1.55;
  white-space: pre-line;
}

.el6-krok-v2 .el6-task-extras-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1rem;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra {
  padding: 1.2rem 1.2rem 1.25rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #edf1f3;
  box-shadow: 0 8px 22px rgba(15, 42, 63, .055);
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head {
  align-items: center;
  margin-bottom: .8rem;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #008f86;
  color: #008f86;
  font-size: 1.2rem;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-trap .el6-task-extra-head span {
  background: transparent;
  border-color: #f07a1a;
  color: #f07a1a;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head h3 {
  color: #008174;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-trap .el6-task-extra-head h3 {
  color: #c45d00;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text {
  color: #1d3448;
  font-size: .9rem;
  line-height: 1.62;
}

.el6-krok-v2 .el6-task-extra-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  margin: 0 0 .9rem;
}

.el6-krok-v2 .el6-task-extra-item:last-child {
  margin-bottom: 0;
}

.el6-krok-v2 .el6-task-extra-item > i {
  margin-top: .1rem;
  color: #008f86;
  font-size: 1rem;
  line-height: 1;
}

.el6-krok-v2 .el6-task-extra-trap .el6-task-extra-item > i {
  color: #f07a1a;
}

.el6-krok-v2 .el6-task-extra-item > span {
  color: #1d3448;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.55;
}

.el6-krok-v2 .el6-task-extra-text ul,
.el6-krok-v2 .el6-task-extra-text ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.el6-krok-v2 .el6-task-extra-text .ql-editor {
  padding: 0;
}

.el6-krok-v2 .el6-task-extra-text li {
  position: relative;
  margin: 0 0 .62rem;
  padding-left: 1.7rem;
  color: #1d3448;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
}

.el6-krok-v2 .el6-task-extra-text li:last-child {
  margin-bottom: 0;
}

.el6-krok-v2 .el6-task-extra-text li::before {
  content: "\F26A";
  position: absolute;
  left: 0;
  top: .08rem;
  font-family: "bootstrap-icons";
  color: #008f86;
  font-size: 1rem;
  line-height: 1;
}

.el6-krok-v2 .el6-task-extra-trap .el6-task-extra-text li::before {
  content: "\F623";
  color: #f07a1a;
}

.el6-krok-v2 .el6-task-extra-text p {
  margin: 0 0 .55rem;
}

.el6-krok-v2 .el6-task-extra-text p:last-child {
  margin-bottom: 0;
}

/* Quill w panelach potrafi dodać własny rytm list; tutaj go świadomie ścieśniamy. */
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text {
  line-height: .95 !important;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text ul,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text ol {
  margin: 0 !important;
  padding: 0 !important;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text li {
  margin: 0 0 .12rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: .95 !important;
  min-height: 0 !important;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text li + li {
  margin-top: 0 !important;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text p {
  margin: 0 0 .12rem !important;
  line-height: .95 !important;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text p:empty,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text p:has(br:only-child) {
  display: none;
}

@media (max-width: 800px) {
  .el6-krok-v2 .el6-task-extras {
    grid-template-columns: 1fr;
  }
}

.el6-krok-v2 .el6-notes-panel .el6-panel-head {
  align-items: flex-start;
  margin-bottom: .55rem;
}

.el6-krok-v2 .el6-notes-panel .el6-panel-icon {
  width: 44px;
  height: 44px;
  background: transparent;
  color: #008f86;
  font-size: 1.75rem;
}

.el6-krok-v2 .el6-notes-panel .el6-panel-tytul {
  padding-top: .15rem;
}

.el6-krok-v2 .el6-notes-panel .el6-panel-sub {
  margin: 0 0 1.55rem 3.65rem;
  color: #1d3448;
  font-size: .96rem;
}

.el6-krok-v2 .el6-notatki-pola {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.el6-krok-v2 .el6-notatka-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.el6-krok-v2 .el6-notatka-ikona {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #f3f8f8;
  color: #008f86;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.el6-krok-v2 .el6-notatka-pole {
  position: relative;
  margin: 0;
}

.el6-krok-v2 .el6-notatka-pole label {
  position: absolute;
  top: -0.72rem;
  left: .85rem;
  z-index: 1;
  max-width: calc(100% - 1.7rem);
  padding: 0 .42rem;
  margin: 0;
  background: #ffffff;
  color: #26384b;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el6-krok-v2 .el6-notes-panel .el6-notatka-input,
.el6-krok-v2 .el6-notes-panel .el6-notatka-textarea {
  min-height: 58px;
  padding: 1.05rem 1.15rem .75rem;
  border: 1.5px solid #dfe5ea;
  border-radius: 8px;
  color: #1d3448;
  font-size: .98rem;
  box-shadow: none;
}

.el6-krok-v2 .el6-notes-panel .el6-notatka-textarea {
  min-height: 74px;
}

.el6-krok-v2 .el6-notes-panel .el6-notatka-input::placeholder,
.el6-krok-v2 .el6-notes-panel .el6-notatka-textarea::placeholder {
  color: #8b9aab;
}

.el6-krok-v2 .el6-notes-panel .el6-notatka-input:focus,
.el6-krok-v2 .el6-notes-panel .el6-notatka-textarea:focus {
  border-color: #008f86;
  box-shadow: 0 0 0 3px rgba(0, 143, 134, .1);
}

.el6-krok-v2 .el6-notes-panel .el6-notatki-info {
  margin-left: 3.75rem;
}

@media (max-width: 700px) {
  .el6-krok-v2 .el6-notes-panel {
    padding: 1.35rem 1.1rem;
  }

  .el6-krok-v2 .el6-notes-panel .el6-panel-sub,
  .el6-krok-v2 .el6-notes-panel .el6-notatki-info {
    margin-left: 0;
  }

  .el6-krok-v2 .el6-notatka-row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: .75rem;
  }

  .el6-krok-v2 .el6-notatka-ikona {
    width: 46px;
    height: 46px;
    font-size: 1.7rem;
  }
}

/* ── Sekcja "Sprawdź się" jak karta z referencji ── */
.el6-krok-v2 .el6-check-panel {
  padding: 1.7rem 1.55rem 1.85rem;
}

.el6-krok-v2 .el6-check-panel .el6-panel-head {
  align-items: center;
  margin-bottom: 1.35rem;
}

.el6-krok-v2 .el6-check-panel .el6-panel-icon {
  width: 42px;
  height: 42px;
  border: 3px solid #008f86;
  border-radius: 50%;
  background: #ffffff;
  color: #008f86;
  font-size: 1.35rem;
}

.el6-krok-v2 .el6-check-panel .el6-panel-tytul {
  color: #008176;
  font-size: .92rem;
  letter-spacing: .07em;
}

.el6-krok-v2 .el6-check-panel .el6-panel-subtitle {
  margin: .35rem 0 0;
  color: #5f7486;
  font-size: .95rem;
  line-height: 1.45;
  letter-spacing: 0;
}

.el6-krok-v2 .el6-check-panel .el6-panel-body,
.el6-krok-v2 .el6-check-panel .el6-pytanie-box {
  padding: 0;
  border: 0;
  background: transparent;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-box::before {
  display: none;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-tresc {
  margin: 0 0 .55rem;
  color: #1d3448;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.5;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-sub {
  margin: 0 0 1.15rem;
  color: #667783;
  font-size: .92rem;
}

.el6-krok-v2 .el6-quiz-podsumowanie-ogolne {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0, 143, 134, .22);
  border-radius: var(--el6-card-radius);
  background: linear-gradient(135deg, rgba(230, 247, 245, .95), rgba(255, 255, 255, .98));
  color: #1d3448;
}

.el6-krok-v2 .el6-quiz-podsumowanie-ogolne.in-summary {
  margin: .95rem 0;
}

.el6-krok-v2 .el6-quiz-podsumowanie-ogolne-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .45rem;
  color: #008176;
  font-size: .85rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.el6-krok-v2 .el6-quiz-podsumowanie-ogolne-text {
  color: #253f52;
  font-size: .98rem;
  line-height: 1.55;
}

.el6-krok-v2 .el6-quiz-final-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid rgba(0, 143, 134, .22);
  border-radius: var(--el6-card-radius);
  background: linear-gradient(135deg, rgba(232, 247, 245, .98), rgba(255, 255, 255, .98));
  color: #1d3448;
}

.el6-krok-v2 .el6-quiz-final-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #008f86;
  color: #fff;
  font-size: 1.55rem;
  box-shadow: 0 10px 22px rgba(0, 143, 134, .2);
}

.el6-krok-v2 .el6-quiz-final-summary-kicker {
  margin-bottom: .25rem;
  color: #008176;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.el6-krok-v2 .el6-quiz-final-summary h3 {
  margin: 0 0 .45rem;
  color: #102942;
  font-size: 1.35rem;
  line-height: 1.2;
}

.el6-krok-v2 .el6-quiz-final-summary p {
  margin: 0;
  color: #253f52;
  font-size: 1rem;
  line-height: 1.6;
}

.el6-krok-v2 .el6-quiz-counts-label {
  margin: .85rem 0 .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: #4f6870;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.el6-krok-v2 .el6-quiz-counts {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .15rem 0 .55rem;
}

.el6-krok-v2 .el6-quiz-counts-hint {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .85rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  background: rgba(0,155,141,.06);
  color: #1f4744;
  font-size: .82rem;
  line-height: 1.4;
}

.el6-krok-v2 .el6-quiz-counts-hint i {
  color: #008f86;
  font-size: .95rem;
  flex-shrink: 0;
}

.el6-krok-v2 .el6-quiz-count-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 78px;
  padding: .5rem .7rem;
  border: 1px solid #d6e6e8;
  border-radius: 999px;
  background: #fff;
  color: #1d3448;
}

.el6-krok-v2 .el6-quiz-count-pill strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f7f5;
  color: #008176;
}

.el6-krok-v2 .el6-quiz-count-pill span {
  font-size: 1.15rem;
  font-weight: 850;
}

.el6-krok-v2 .el6-quiz-count-pill.active {
  border-color: rgba(0, 143, 134, .45);
  background: #e8f7f5;
}

.el6-krok-v2 .el6-quiz-count-interpretations {
  display: grid;
  gap: .55rem;
  margin-top: .7rem;
  color: #253f52;
  line-height: 1.5;
}

.el6-krok-v2 .el6-quiz-count-interpretations > div {
  padding: .7rem .8rem;
  border: 1px solid #e3edf0;
  border-radius: 12px;
  background: #fff;
}

.el6-krok-v2 .el6-quiz-count-interpretations > div.active {
  border-color: rgba(0, 143, 134, .38);
  background: #f2fbfa;
}

.el6-krok-v2 .el6-check-panel .el6-kafelki-pyt {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.el6-krok-v2 .el6-check-panel .el6-kafelek-pyt,
.el6-krok-v2 .el6-check-panel .el6-kafelki-pyt-tekst .el6-kafelek-pyt {
  min-height: 58px;
  padding: .8rem .95rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .85rem;
  border: 1.5px solid #dde4e9;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
  color: #1d3448;
  text-align: left;
  transform: none;
}

.el6-krok-v2 .el6-check-panel .el6-kafelek-pyt:hover:not(:disabled) {
  border-color: #008f86;
  background: #fbfdfd;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
  transform: none;
}

.el6-krok-v2 .el6-check-panel .el6-kafelek-pyt-tekst,
.el6-krok-v2 .el6-check-panel .el6-kafelki-pyt-tekst .el6-kafelek-pyt-tekst {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .8rem;
  width: 100%;
  text-align: left;
  color: #1d3448;
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.42;
}

.el6-krok-v2 .el6-check-panel .el6-kafelek-pyt-litera {
  width: 28px;
  height: 28px;
  margin: 0;
  border: 2px solid #008f86;
  border-radius: 5px;
  color: #008f86;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: .92rem;
  font-weight: 800;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-nawigacja {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 1rem;
  align-items: center;
  margin-top: 1.45rem;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-licznik {
  color: #536575;
  font-size: .88rem;
  font-weight: 800;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-kropki {
  display: flex;
  gap: .75rem;
  align-items: center;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-kropki span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9e1e6;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-kropki span.active {
  background: #006f72;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-nav-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: .55rem;
  justify-content: flex-end;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-prev,
.el6-krok-v2 .el6-check-panel .el6-pytanie-next {
  border-radius: 8px;
  border: 1.5px solid #008f86;
  padding: .5rem .85rem;
  font-weight: 700;
  cursor: pointer;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-prev {
  background: #ffffff;
  color: #008f86;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-next {
  background: #008f86;
  color: #ffffff;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-done {
  color: #008f86;
  font-size: .9rem;
  font-weight: 800;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-final-action {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-finish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 0;
  border-radius: 8px;
  background: #008f86;
  color: #ffffff;
  padding: .52rem .9rem;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 143, 134, .18);
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-finish:hover {
  background: #00766f;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-missing {
  display: inline-flex;
  align-items: flex-start;
  gap: .45rem;
  max-width: 100%;
  color: #a06a00;
  background: #fff8e8;
  border: 1px solid #f4d79a;
  border-radius: 10px;
  padding: .55rem .75rem;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.35;
}

.el6-krok-v2 .el6-check-panel .el6-pytanie-missing i {
  margin-top: .08rem;
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .el6-krok-v2 .el6-check-panel {
    padding: 1.35rem 1.1rem;
  }
  .el6-krok-v2 .el6-check-panel .el6-pytanie-nav-actions,
  .el6-krok-v2 .el6-check-panel .el6-pytanie-final-action {
    justify-content: stretch;
  }
  .el6-krok-v2 .el6-check-panel .el6-pytanie-prev,
  .el6-krok-v2 .el6-check-panel .el6-pytanie-next,
  .el6-krok-v2 .el6-check-panel .el6-pytanie-finish {
    flex: 1;
  }
}

/* ── Ujednolicona typografia elementu 6 ── */
.el6-wrap,
.el6-wrap button,
.el6-wrap input,
.el6-wrap textarea,
.el6-wrap select {
  font-family: var(--font-ui, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  letter-spacing: 0;
}

.el6-krok-v2 .el6-panel-body,
.el6-krok-v2 .el6-krok-desc,
.el6-krok-v2 .el6-pytanie-box,
.el6-krok-v2 .el6-notatka-input,
.el6-krok-v2 .el6-notatka-textarea {
  font-size: 1rem;
  line-height: 1.55;
}

.el6-krok-v2 .el6-krok-desc {
  white-space: normal;
}

.el6-krok-v2 .el6-krok-desc p {
  margin: 0 0 .7rem;
}

.el6-krok-v2 .el6-krok-desc p:last-child {
  margin-bottom: 0;
}

.el6-krok-v2 .el6-krok-desc ul,
.el6-krok-v2 .el6-krok-desc ol {
  margin: .55rem 0 .7rem;
  padding-left: 1.25rem;
}

.el6-krok-v2 .el6-krok-desc li {
  margin: .22rem 0;
}

.el6-krok-v2 .el6-krok-desc h3,
.el6-krok-v2 .el6-krok-desc h4 {
  margin: .85rem 0 .45rem;
  color: #102942;
  font-size: 1rem;
  line-height: 1.3;
}

/* ── Podsumowanie quizu lidera w nowym stylu ── */
.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie-naglowek {
  margin-bottom: 1rem;
  text-align: center;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie-naglowek div {
  color: #25384a;
  font-size: .86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie-glowny {
  padding: 1.2rem 1.25rem 1.25rem;
  border: 0;
  border-left: 0;
  border-radius: 8px;
  background: #fbfdfd;
  box-shadow: none;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie-title {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: .85rem;
  align-items: center;
  margin-bottom: .9rem;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie-title span {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #eef8f6;
  color: #008f86;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie-title strong {
  color: #10283d;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.3;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie p {
  margin: .65rem 0 0;
  color: #1d3448;
  font-size: .96rem;
  line-height: 1.58;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie.profil-partnerstwo .el6-quiz-podsumowanie-glowny {
  background: #f7fbfa;
}

.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie.profil-kontrola .el6-quiz-podsumowanie-glowny,
.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie.profil-rezygnacja .el6-quiz-podsumowanie-glowny {
  background: #fbfaf7;
}

@media (max-width: 700px) {
  .el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie-glowny {
    padding: 1rem;
  }
}

/* ── Giełda ról / dopasowanie w wąskiej kolumnie ── */
.el6-krok-v2 .el6-check-panel .el6-dopasowanie {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: .95rem 0 1.15rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-one .el6-dopasowanie-wiersz[hidden] {
  display: none;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-wiersz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  grid-template-areas:
    "quote result"
    "select result";
  gap: .55rem .7rem;
  align-items: center;
  padding: .9rem;
  border-radius: 8px;
  background: #fbfdfd;
  border: 1px solid #e4eaee;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-lewa {
  grid-area: quote;
  padding: .82rem .9rem;
  border-radius: 8px;
  background: #f2f7f7;
  color: #1d3448;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.45;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select-wrap {
  grid-area: select;
  position: relative;
  margin-top: .25rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select-wrap label {
  position: static;
  display: block;
  padding: 0;
  margin: 0 0 .35rem;
  background: transparent;
  color: #536575;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.25;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select {
  width: 100%;
  min-height: 46px;
  padding: .65rem 2.2rem .65rem .85rem;
  border: 1.5px solid #d6e0e5;
  border-radius: 8px;
  background-color: #ffffff;
  color: #1d3448;
  font-size: .92rem;
  font-weight: 700;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .85rem 0 1rem;
  color: #536575;
  font-size: .86rem;
  font-weight: 800;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-progress .el6-pytanie-kropki span.done {
  background: #008f86;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-akcja {
  justify-content: stretch;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select:focus {
  outline: none;
  border-color: #008f86;
  box-shadow: 0 0 0 3px rgba(0, 143, 134, .1);
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-wynik {
  grid-area: result;
  width: 28px;
  text-align: center;
  font-size: 1.2rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select.poprawna {
  border-color: #008f86;
  background: #f7fbfa;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select.niepoprawna {
  border-color: #f3a51b;
  background: #fbfaf7;
}

.el6-krok-v2 .el6-check-panel #btn-sprawdz-dopasowanie {
  width: 100%;
  min-height: 46px;
  border-radius: 8px;
  background: #008f86;
  box-shadow: none;
}

@media (min-width: 1200px) {
  .el6-krok-v2 .el6-check-panel .el6-dopasowanie-wiersz {
    grid-template-columns: minmax(0, 1fr) 30px;
    grid-template-areas:
      "quote result"
      "select result";
  }
}

/* Finalny wariant giełdy ról: kafelki zamiast dropdownu */
.el6-krok-v2 .el6-check-panel .el6-dopasowanie.el6-dopasowanie-one {
  margin-top: 1.2rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-wiersz {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  gap: .7rem;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  background: #eef8f6;
  border: 1px solid #dcefed;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #008f86;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  align-self: start;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-lewa {
  grid-area: auto;
  padding: 0;
  background: transparent;
  color: #102942;
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
  align-self: center;
  justify-self: start;
  max-width: 100%;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-wynik {
  grid-area: auto;
  width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 143, 134, .08);
  font-size: 1.15rem;
  align-self: center;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select-wrap {
  grid-area: auto;
  margin-top: 1.05rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select-wrap > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.el6-krok-v2 .el6-check-panel .el6-role-prompt {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .75rem;
  color: #102942;
  font-size: 1rem;
  font-weight: 650;
}

.el6-krok-v2 .el6-check-panel .el6-role-prompt::after {
  content: "\F138";
  font-family: "bootstrap-icons";
  color: #008f86;
  font-size: 1.25rem;
  transform: rotate(35deg);
}

.el6-krok-v2 .el6-check-panel .el6-role-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: .75rem;
}

.el6-krok-v2 .el6-check-panel .el6-role-option {
  position: relative;
  min-height: 132px;
  padding: .9rem .7rem .8rem;
  border: 1.5px solid #dce5ea;
  border-radius: 8px;
  background: #ffffff;
  color: #102942;
  box-shadow: 0 8px 18px rgba(15, 42, 63, .04);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.el6-krok-v2 .el6-check-panel .el6-role-option:hover {
  border-color: #9fd0cb;
  transform: translateY(-1px);
}

.el6-krok-v2 .el6-check-panel .el6-role-option.selected {
  border-color: #008f86;
  background: #fbfffe;
  box-shadow: 0 14px 26px rgba(0, 143, 134, .12);
}

.el6-krok-v2 .el6-check-panel .el6-role-option:disabled {
  cursor: default;
}

.el6-krok-v2 .el6-check-panel .el6-role-option.poprawna {
  border-color: #008f86;
  background: #f2fbf9;
}

.el6-krok-v2 .el6-check-panel .el6-role-option.niepoprawna {
  border-color: #f3a51b;
  background: #fffaf0;
}

.el6-krok-v2 .el6-check-panel .el6-role-option > i {
  display: block;
  margin-bottom: .5rem;
  color: #008f86;
  font-size: 1.8rem;
  line-height: 1;
}

.el6-krok-v2 .el6-check-panel .el6-role-option > span {
  display: block;
  color: #102942;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
}

.el6-krok-v2 .el6-check-panel .el6-role-option > small {
  display: block;
  margin-top: .25rem;
  color: #536575;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.25;
}

.el6-krok-v2 .el6-check-panel .el6-role-option > strong {
  position: absolute;
  top: -10px;
  right: -10px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #008f86;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 143, 134, .24);
}

.el6-krok-v2 .el6-check-panel .el6-role-option.selected > strong {
  display: inline-flex;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-progress {
  margin-top: 1.1rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-akcja {
  margin-top: .2rem;
}

@media (min-width: 900px) {
  .el6-krok-v2 .el6-check-panel .el6-role-options {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (max-width: 520px) {
  .el6-krok-v2 .el6-check-panel .el6-dopasowanie-head {
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    padding: .9rem;
  }

  .el6-krok-v2 .el6-check-panel .el6-dopasowanie-num {
    width: 36px;
    height: 36px;
  }

  .el6-krok-v2 .el6-check-panel .el6-dopasowanie-wynik {
    width: 30px;
    min-height: 30px;
  }

  .el6-krok-v2 .el6-check-panel .el6-role-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
  }

  .el6-krok-v2 .el6-check-panel .el6-role-option {
    min-height: 118px;
    padding: .8rem .55rem .7rem;
  }

  .el6-krok-v2 .el6-check-panel .el6-role-option > span {
    font-size: .82rem;
  }

  .el6-krok-v2 .el6-check-panel .el6-role-option > small {
    font-size: .7rem;
  }
}

/* Podsumowanie giełdy ról zastępujące interakcję */
.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie {
  padding: 1.1rem;
  border-radius: 8px;
  background: #f7fbfa;
  border: 1px solid #dcefed;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .9rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #008f86;
  color: #ffffff;
  font-size: 1.25rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-head strong {
  display: block;
  color: #102942;
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.25;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-head small {
  display: block;
  margin-top: .18rem;
  color: #536575;
  font-size: .9rem;
  line-height: 1.35;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-ogolne {
  margin: 0 0 .9rem;
  color: #1d3448;
  font-size: .94rem;
  line-height: 1.5;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-lista {
  display: grid;
  gap: .65rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  padding: .78rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e3ebef;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-item b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 143, 134, .1);
  color: #008f86;
  font-size: .86rem;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-item p {
  margin: 0;
  color: #1d3448;
  font-size: .9rem;
  line-height: 1.45;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-item strong {
  display: block;
  margin-bottom: .2rem;
  color: #102942;
  font-size: .88rem;
  font-weight: 700;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie-item span {
  display: block;
}

.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie.czesciowa .el6-dopasowanie-podsumowanie-head > span {
  background: #f3a51b;
}

/* SMS builder - wariant krokowy w nowym stylu */
.el6-krok-v2 .el6-check-panel .el6-sms-builder { margin-top: 1rem; display: grid; gap: 1rem; }
.el6-krok-v2 .el6-check-panel .el6-sms-preview { border-radius: 8px; border: 1px solid #dcefed; background: #eef8f6; box-shadow: none; }
.el6-krok-v2 .el6-check-panel .el6-sms-preview-label { color: #008174; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.el6-krok-v2 .el6-check-panel .el6-sms-preview-tresc { color: #102942; font-size: .94rem; font-weight: 600; line-height: 1.5; }
.el6-krok-v2 .el6-check-panel .el6-sms-slot[hidden] { display: none; }
.el6-krok-v2 .el6-check-panel .el6-sms-slot { padding: 1rem; border-radius: 8px; border: 1px solid #e3ebef; background: #ffffff; }
.el6-krok-v2 .el6-check-panel .el6-sms-slot-header { align-items: center; margin-bottom: .85rem; }
.el6-krok-v2 .el6-check-panel .el6-sms-slot-num { background: #008f86; color: #ffffff; }
.el6-krok-v2 .el6-check-panel .el6-sms-slot-label { color: #102942; font-weight: 750; }
.el6-krok-v2 .el6-check-panel .el6-sms-slot-opis { display: block; width: 100%; margin-top: .15rem; color: #667783; font-size: .78rem; }
.el6-krok-v2 .el6-check-panel .el6-sms-slot-opcje { display: grid; gap: .55rem; }
.el6-krok-v2 .el6-check-panel .el6-sms-opcja { min-height: 44px; padding: .68rem .8rem; border-radius: 8px; border: 1.5px solid #dce5ea; background: #ffffff; color: #1d3448; font-size: .88rem; font-weight: 600; text-align: left; box-shadow: 0 5px 14px rgba(15, 42, 63, .035); }
.el6-krok-v2 .el6-check-panel .el6-sms-opcja.wybrana { border-color: #008f86; background: #f7fbfa; box-shadow: 0 10px 20px rgba(0, 143, 134, .1); }
.el6-krok-v2 .el6-check-panel .el6-sms-akcja { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.el6-krok-v2 .el6-check-panel .el6-sms-progress { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #536575; font-size: .86rem; font-weight: 800; }
.el6-krok-v2 .el6-check-panel .el6-sms-progress .el6-pytanie-kropki span.done { background: #008f86; }
.el6-krok-v2 .el6-check-panel .el6-sms-licznik { display: none; }
.el6-krok-v2 .el6-check-panel .el6-sms-button-hint {
  padding: .65rem .75rem;
  border-radius: 8px;
  background: #eef8f6;
  border: 1px solid #dcefed;
  color: #1d3448;
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
}
.el6-krok-v2 .el6-check-panel .el6-sms-akcja .el6-pytanie-sprawdz { width: 100%; min-height: 46px; border-radius: 8px; }
.el6-krok-v2 .el6-check-panel .el6-sms-summary-wrap .el6-pytanie-feedback-naglowek { margin-bottom: .85rem; color: #102942; font-size: 1.05rem; font-weight: 750; }
.el6-krok-v2 .el6-check-panel .el6-sms-summary-wrap .el6-pytanie-feedback-ogolny,
.el6-krok-v2 .el6-check-panel .el6-sms-summary-wrap .el6-sms-poprawny,
.el6-krok-v2 .el6-check-panel .el6-sms-summary-wrap .el6-sms-feedback-slot { border-radius: 8px; }

/* Dolne CTA kroku - jasny pasek jak w karcie referencyjnej */
.el6-krok-v2 .el6-cta-card.el6-cta-final-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem 1.45rem;
  border: 1px solid #f1dfbf;
  border-radius: 8px;
  background: #fffaf2;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
  text-align: left;
}

.el6-krok-v2 .el6-cta-copy {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 1.05rem;
}

.el6-krok-v2 .el6-cta-trophy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc342, #f6a51a);
  color: #ffffff;
  font-size: 2rem;
  box-shadow: 0 10px 22px rgba(246, 165, 26, .22);
}

.el6-krok-v2 .el6-cta-copy h2 {
  margin: 0;
  color: #102942;
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: 0;
}

.el6-krok-v2 .el6-cta-copy p {
  margin: .28rem 0 0;
  color: #536575;
  font-size: .94rem;
  line-height: 1.35;
}

.el6-krok-v2 .el6-cta-final-card .el6-cta-btn {
  justify-content: center;
  flex: 0 0 auto;
  min-width: 275px;
  min-height: 58px;
  padding: .95rem 1.6rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #008f86, #006f72);
  box-shadow: 0 12px 24px rgba(0, 116, 125, .18);
  font-size: 1.08rem;
  font-weight: 750;
}

.el6-krok-v2 .el6-cta-final-card .el6-cta-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}

.el6-krok-v2 .el6-cta-final-card .el6-cta-text .bi-arrow-right {
  font-size: 1.35rem;
  line-height: 1;
}

.el6-krok-v2 .el6-cta-final-card .el6-cta-btn.already-done {
  background: linear-gradient(135deg, #008f86, #006f72);
  cursor: pointer;
}

.el6-krok-v2 .el6-cta-final-card .el6-cta-btn.already-done:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 116, 125, .24);
}

.el6-krok-v2 .el6-cta-final-card .el6-cta-hint,
.el6-krok-v2 .el6-cta-final-card .el6-cta-secondary,
.el6-krok-v2 .el6-krok-nav-bottom {
  display: none !important;
}

.el6-krok-v2 .el6-bottom-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0;
}

.el6-krok-v2 .el6-bottom-actions .el6-secondary-btn {
  min-height: 46px;
  padding: .7rem 1.2rem;
  border: 1px solid #dfe8eb;
  border-radius: 8px;
  background: #ffffff;
  color: #26384b;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
  font-size: .92rem;
  font-weight: 600;
  gap: .65rem;
}

.el6-krok-v2 .el6-bottom-actions .el6-secondary-btn i {
  font-size: 1.25rem;
  color: #2a5367;
}

.el6-krok-v2 .el6-bottom-actions .el6-prev-step-btn {
  justify-self: start;
}

.el6-krok-v2 .el6-bottom-actions .el6-download-step-btn {
  justify-self: center;
}

.el6-krok-v2 .el6-bottom-actions .el6-mapa-btn {
  justify-self: end;
  border-color: #cfe5e2;
  color: #006f72;
}

.el6-krok-v2 .el6-bottom-actions .el6-secondary-btn:hover {
  border-color: #008f86;
  color: #008f86;
  background: #f8fcfb;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .el6-krok-v2 .el6-cta-card.el6-cta-final-card {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .el6-krok-v2 .el6-cta-trophy {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
  }

  .el6-krok-v2 .el6-cta-final-card .el6-cta-btn {
    width: 100%;
    min-width: 0;
  }

  .el6-krok-v2 .el6-bottom-actions {
    grid-template-columns: 1fr;
  }

  .el6-krok-v2 .el6-bottom-actions .el6-secondary-btn,
  .el6-krok-v2 .el6-bottom-actions .el6-prev-step-btn,
  .el6-krok-v2 .el6-bottom-actions .el6-download-step-btn,
  .el6-krok-v2 .el6-bottom-actions .el6-mapa-btn {
    justify-self: stretch;
    justify-content: center;
  }
}

/* Wskazowki i pulapki - tintowane karty jak w inspiracji */
.el6-krok-v2 .el6-task-extra.el6-task-extra-tip {
  border-color: #d8eeec;
  background: linear-gradient(180deg, #f8fdfc 0%, #f3fbfa 100%);
  box-shadow: 0 10px 24px rgba(0, 116, 125, .055);
}

.el6-krok-v2 .el6-task-extra.el6-task-extra-trap {
  border-color: #f2dfc2;
  background: linear-gradient(180deg, #fffdf9 0%, #fff8ee 100%);
  box-shadow: 0 10px 24px rgba(201, 103, 0, .055);
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra {
  padding: 1.35rem 1.35rem 1.4rem;
  border-radius: 10px;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head {
  gap: .75rem;
  margin-bottom: 1rem;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head span {
  width: 42px;
  height: 42px;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, .55);
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head h3 {
  font-size: .82rem;
  font-weight: 850;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-item {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: .7rem;
  margin-bottom: .46rem;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-item > i {
  margin-top: .12rem;
  font-size: 1.05rem;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-item > span {
  color: #1d3448;
  font-size: .9rem;
  line-height: 1.28;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text li {
  padding-left: 1.85rem !important;
  line-height: 1.18 !important;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text li::before {
  top: .02rem;
  font-size: 1.05rem;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text p {
  line-height: 1.18 !important;
}

/* Lzejsze odpowiedzi w sekcji Sprawdz sie */
.el6-krok-v2 .el6-check-panel .el6-kafelek-pyt-tekst,
.el6-krok-v2 .el6-check-panel .el6-kafelki-pyt-tekst .el6-kafelek-pyt-tekst,
.el6-krok-v2 .el6-check-panel .el6-pytanie-opcja,
.el6-krok-v2 .el6-check-panel .el6-pytanie-opcja-tresc {
  font-weight: 500 !important;
  line-height: 1.42;
}

.el6-krok-v2 .el6-check-panel .el6-kafelek-pyt-litera,
.el6-krok-v2 .el6-check-panel .el6-pytanie-opcja-marker {
  font-weight: 750;
}

/* Ujednolicony promien kart w kroku */
.el6-krok-v2 {
  --el6-card-radius: 18px;
}

.el6-krok-v2 .el6-krok-card-header-v2,
.el6-krok-v2 .el6-panel,
.el6-krok-v2 .el6-task-extra,
.el6-krok-v2 .el6-cta-card.el6-cta-final-card,
.el6-krok-v2 .el6-check-panel .el6-pytanie-box,
.el6-krok-v2 .el6-check-panel .el6-pytanie-opcja,
.el6-krok-v2 .el6-check-panel .el6-quiz-podsumowanie-glowny,
.el6-krok-v2 .el6-check-panel .el6-dopasowanie-head,
.el6-krok-v2 .el6-check-panel .el6-dopasowanie-podsumowanie,
.el6-krok-v2 .el6-check-panel .el6-sms-preview,
.el6-krok-v2 .el6-check-panel .el6-sms-slot,
.el6-krok-v2 .el6-check-panel .el6-sms-summary-wrap .el6-pytanie-feedback-ogolny,
.el6-krok-v2 .el6-check-panel .el6-sms-summary-wrap .el6-sms-poprawny,
.el6-krok-v2 .el6-check-panel .el6-sms-summary-wrap .el6-sms-feedback-slot {
  border-radius: var(--el6-card-radius) !important;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra {
  border-radius: var(--el6-card-radius) !important;
}

/* Jednolity rytm naglowkow i ikon w kartach kroku */
.el6-krok-v2 .el6-panel-tytul,
.el6-krok-v2 .el6-goal-panel .el6-panel-tytul,
.el6-krok-v2 .el6-task-panel .el6-panel-tytul,
.el6-krok-v2 .el6-before-panel .el6-panel-tytul,
.el6-krok-v2 .el6-notes-panel .el6-panel-tytul,
.el6-krok-v2 .el6-check-panel .el6-panel-tytul,
.el6-krok-v2 .el6-task-extra-head h3,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head h3 {
  color: #008174;
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.el6-krok-v2 .el6-task-extra-trap .el6-task-extra-head h3,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-trap .el6-task-extra-head h3 {
  color: #c45d00;
}

.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head span {
  width: 46px;
  height: 46px;
  font-size: 1.55rem;
}

.el6-krok-v2 .el6-task-extra-item,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-item {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .72rem;
  margin-bottom: .68rem;
}

.el6-krok-v2 .el6-task-extra-item > i,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-item > i {
  color: #008f86;
  font-size: 1.6rem;
  margin-top: .02rem;
}

.el6-krok-v2 .el6-task-extra-trap .el6-task-extra-item > i,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-trap .el6-task-extra-item > i {
  color: #f07a1a;
}

.el6-krok-v2 .el6-task-extra-text li,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text li {
  padding-left: 2.15rem !important;
  line-height: 1.34 !important;
}

.el6-krok-v2 .el6-task-extra-text li::before,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-text li::before {
  top: -.02rem;
  color: #008f86;
  font-size: 1.28rem;
}

.el6-krok-v2 .el6-task-extra-trap .el6-task-extra-text li::before,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-trap .el6-task-extra-text li::before {
  color: #f07a1a;
}

.el6-krok-v2 .el6-before-panel .el6-panel-icon,
.el6-krok-v2 .el6-task-panel .el6-panel-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #008f86;
  color: #008f86;
  font-size: 2rem;
}

/* Jeden, sztywny rozmiar ikon naglowkow we wszystkich sekcjach kroku */
.el6-krok-v2 .el6-panel-head .el6-panel-icon,
.el6-krok-v2 .el6-goal-panel .el6-panel-icon,
.el6-krok-v2 .el6-before-panel .el6-panel-icon,
.el6-krok-v2 .el6-task-panel .el6-panel-icon,
.el6-krok-v2 .el6-notes-panel .el6-panel-icon,
.el6-krok-v2 .el6-check-panel .el6-panel-icon,
.el6-krok-v2 .el6-task-extra-head span,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-head span {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid currentColor !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #008f86;
  font-size: 1.45rem !important;
  line-height: 1 !important;
}

.el6-krok-v2 .el6-task-extra-trap .el6-task-extra-head span,
.el6-krok-v2 .el6-task-extras-side .el6-task-extra-trap .el6-task-extra-head span {
  color: #f07a1a;
}

.el6-krok-v2 .el6-panel-head .el6-panel-icon i,
.el6-krok-v2 .el6-task-extra-head span i {
  display: block;
  font-size: inherit !important;
  line-height: 1 !important;
}

/* Listy w sekcjach tekstowych kroku */
.el6-krok-v2 .el6-before-panel .el6-krok-desc ol,
.el6-krok-v2 .el6-task-panel .el6-krok-desc ol {
  list-style: none;
  counter-reset: el6-step-list;
  margin: .75rem 0 1rem;
  padding-left: 0;
}

.el6-krok-v2 .el6-before-panel .el6-krok-desc ol > li,
.el6-krok-v2 .el6-task-panel .el6-krok-desc ol > li {
  counter-increment: el6-step-list;
  position: relative;
  margin: .45rem 0;
  padding-left: 2.15rem;
  min-height: 1.65rem;
}

.el6-krok-v2 .el6-before-panel .el6-krok-desc ol > li::before,
.el6-krok-v2 .el6-task-panel .el6-krok-desc ol > li::before {
  content: counter(el6-step-list);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #008f86;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
}

.el6-krok-v2 .el6-before-panel .el6-krok-desc ul,
.el6-krok-v2 .el6-task-panel .el6-krok-desc ul {
  list-style: none;
  margin: .75rem 0 1rem;
  padding-left: 0;
}

.el6-krok-v2 .el6-before-panel .el6-krok-desc ul > li,
.el6-krok-v2 .el6-task-panel .el6-krok-desc ul > li {
  position: relative;
  margin: .45rem 0;
  padding-left: 1.45rem;
}

.el6-krok-v2 .el6-before-panel .el6-krok-desc ul > li::before,
.el6-krok-v2 .el6-task-panel .el6-krok-desc ul > li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #008f86;
}

.el6-krok-v2 .el6-before-panel .el6-krok-desc ol > li[data-list="bullet"],
.el6-krok-v2 .el6-task-panel .el6-krok-desc ol > li[data-list="bullet"] {
  counter-increment: none;
  padding-left: 1.45rem;
}

.el6-krok-v2 .el6-before-panel .el6-krok-desc ol > li[data-list="bullet"]::before,
.el6-krok-v2 .el6-task-panel .el6-krok-desc ol > li[data-list="bullet"]::before {
  content: "";
  left: .25rem;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #008f86;
}

.el6-krok-v2 .el6-before-panel .el6-krok-desc li > .ql-ui,
.el6-krok-v2 .el6-task-panel .el6-krok-desc li > .ql-ui {
  display: none;
}

/* Medale faz w naglowku kroku */
.el6-krok-v2 header.el6-krok-card-header-v2 {
  position: relative !important;
}

.el6-krok-v2 header.el6-krok-card-header-v2 .el6-krok-head-info {
  padding-right: 18rem !important;
}

.el6-krok-v2 header.el6-krok-card-header-v2 .el6-phase-medals {
  position: absolute !important;
  top: 2rem !important;
  right: 2rem !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: .6rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 16rem !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.el6-krok-v2 header.el6-krok-card-header-v2 .el6-phase-medal-icon {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
}

@media (max-width: 900px) {
  .el6-krok-v2 header.el6-krok-card-header-v2 .el6-krok-head-info {
    padding-right: 1.2rem !important;
  }

  .el6-krok-v2 header.el6-krok-card-header-v2 .el6-phase-medals {
    position: static !important;
    transform: none !important;
    justify-content: flex-start !important;
    padding: 0 1.2rem 1.2rem !important;
    grid-column: 2 / -1;
  }

}

/* Final override ekranu koncowego */
.el6-wrap .el6-koniec-card {
  max-width: none !important;
  width: 100% !important;
  padding: 46px 52px 34px !important;
  border-radius: 22px !important;
}
.el6-koniec-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr) !important;
  gap: 42px !important;
  align-items: center !important;
  margin-bottom: 30px !important;
}
@media (max-width: 575.98px) {
  .el6-koniec-hero {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 22px !important;
  }
}
.el6-koniec-visual img {
  display: block !important;
  width: min(100%, 330px) !important;
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
}
.el6-koniec-header {
  text-align: left !important;
  margin-bottom: 28px !important;
}
.el6-koniec-emoji { display: none !important; }
.el6-koniec-tytul {
  color: #102942 !important;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem) !important;
  letter-spacing: 0 !important;
}
.el6-koniec-subtytul {
  max-width: 720px !important;
  color: #3d5164 !important;
  font-size: 1.04rem !important;
}
.el6-koniec-badge {
  min-height: 92px !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  border-color: #c8e6e2 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(0,155,141,.065), rgba(255,255,255,.86)) !important;
}
.el6-koniec-badge-ikona {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #009b8d, #007a73) !important;
  color: #fff !important;
}
.el6-koniec-badge-faza {
  width: 46px !important;
  height: 46px !important;
  border: 2px solid rgba(255,255,255,.82) !important;
  background: #dff4f1 !important;
  box-shadow: 0 6px 15px rgba(0, 116, 125, .08) !important;
  font-size: 1.15rem !important;
}
.el6-koniec-materialy-btns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.el6-koniec-mat-btn {
  justify-content: flex-start !important;
  gap: .85rem !important;
  min-height: 66px !important;
  padding: .85rem 1rem !important;
  text-align: left !important;
}
.el6-koniec-mat-btn span { display: grid !important; gap: .1rem !important; }
.el6-koniec-mat-btn strong { color: #008f86 !important; font-size: .96rem !important; }
.el6-koniec-mat-btn small { color: #536575 !important; font-size: .78rem !important; font-weight: 500 !important; }
.el6-koniec-quote {
  max-width: none !important;
  width: 100% !important;
}
.el6-koniec-people {
  justify-self: end !important;
  display: block !important;
  width: min(100%, 260px) !important;
  max-height: 96px !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
  opacity: .84 !important;
}

.el6-koniec-card.is-preview .el6-koniec-tytul {
  color: #082b4a !important;
}

.el6-koniec-card.is-preview .el6-koniec-badge {
  background: #fff8e8 !important;
  border-color: #f6c96b !important;
}

.el6-koniec-card.is-preview .el6-koniec-badge-ikona {
  background: #f6a51a !important;
  box-shadow: 0 12px 24px rgba(246, 165, 26, .18) !important;
}

.el6-koniec-card.is-preview .el6-koniec-badge-faza {
  opacity: .55 !important;
}

@media (max-width: 900px) {
  .el6-wrap .el6-koniec-card { padding: 28px 20px !important; }
  .el6-koniec-hero { grid-template-columns: 1fr !important; gap: 10px !important; }
  .el6-koniec-header { text-align: center !important; }
  .el6-koniec-materialy-btns,
  .el6-koniec-quote { grid-template-columns: 1fr !important; }
}


/* WCAG 2.2: public gamification accessibility layer */
.el6-wrap *:focus-visible {
  outline: 4px solid #102942 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(246, 165, 26, .34) !important;
}

.el6-wrap input:focus-visible,
.el6-wrap textarea:focus-visible,
.el6-wrap select:focus-visible {
  border-color: #006f72 !important;
}

.el6-wrap a,
.el6-kod-box-code,
.el6-card-actions a {
  color: #006f72;
}

.el6-wrap .text-muted,
.el6-kod-box-subtitle,
.el6-path-progress-percent,
.el6-koniec-lock,
.el6-krok-v2 .el6-panel-sub,
.el6-krok-v2 .el6-panel-subtitle {
  color: #4f6870 !important;
}

.el6-kafelek-pyt[role="radio"] {
  position: relative;
}

.el6-kafelek-pyt.poprawna::after,
.el6-kafelek-pyt.niepoprawna::after {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  height: 1.65rem;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.65rem;
}

.el6-kafelek-pyt.poprawna::after {
  background: #008f86;
  content: "\2713";
}

.el6-kafelek-pyt.niepoprawna::after {
  background: #c53b32;
  content: "\00d7";
}

.el6-klasyfikacja-feedback[role="status"],
.el6-pytanie-feedback[role="status"] {
  min-height: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .el6-wrap *,
  .el6-wrap *::before,
  .el6-wrap *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body.dyslexia-font .el6-wrap,
body.dyslexia-font .el6-wrap *:not(.bi):not([class*="bi-"]):not(i) {
  font-family: 'Comic Sans MS', 'Trebuchet MS', Arial, sans-serif !important;
  letter-spacing: .03em;
  word-spacing: .08em;
}

body.high-contrast .el6-wrap,
body.high-contrast .el6-wrap main,
body.high-contrast .el6-wrap section,
body.high-contrast .el6-krok-v2,
body.high-contrast .el6-start-page,
body.high-contrast .el6-koniec-page {
  background: #000 !important;
  color: #fff !important;
}

body.high-contrast .el6-wrap :where(h1, h2, h3, h4, p, li, span, strong, small, label, div) {
  color: #fff !important;
}

body.high-contrast .el6-wrap :where(a) {
  color: #00fff0 !important;
}

body.high-contrast .el6-wrap :where(.el6-card, .el6-krok-v2 .el6-panel, .el6-krok-v2 .el6-side-card, .el6-krok-head, .el6-kod-box, .el6-path-shell, .el6-check-panel, .el6-notatki-card, .el6-koniec-card, .el6-koniec-quote, .el6-pytanie-feedback, .el6-klasyfikacja-wiersz, .el6-sms-slot, .el6-dopasowanie-card, .el6-role-card) {
  background: #111 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

body.high-contrast .el6-wrap :where(button, .el6-btn, .el6-primary-btn, .el6-secondary-btn, input, textarea, select) {
  border-color: #fff !important;
}

body.high-contrast .el6-wrap :where(input, textarea, select) {
  background: #000 !important;
  color: #fff !important;
}

body.high-contrast .el6-wrap :where(input::placeholder, textarea::placeholder) {
  color: #d7d7d7 !important;
  opacity: 1 !important;
}

body.high-contrast .el6-wrap :where(.el6-primary-btn, .el6-cta-next, .el6-pytanie-sprawdz) {
  background: #ffd43b !important;
  border-color: #ffd43b !important;
  color: #000 !important;
}

body.high-contrast .el6-wrap :where(.el6-kafelek-pyt.poprawna, .el6-klasyfikacja-wiersz.poprawna) {
  border-color: #00fff0 !important;
}

body.high-contrast .el6-wrap :where(.el6-kafelek-pyt.niepoprawna, .el6-klasyfikacja-wiersz.niepoprawna) {
  border-color: #ff6b6b !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HIGH CONTRAST — UZUPEŁNIENIE
   Pokrywa elementy nieobjęte powyższym blokiem ogólnym:
   - dashboard / start-page (index.html)
   - pływający header (_naglowek.html: kod-box, path-*)
   - krok (krok.html: panele, task-extras, sms-builder, dopasowanie, notatki)
   - droga / journey (droga.html: timeline, badge-grid, step-cards)
   - koniec (koniec.html: hero, badge, materiały, scena z flagą)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── DASHBOARD / START PAGE (index.html) ─────────────────────────────── */
/* Hero rozszerza się na całą szerokość ekranu (width:100vw + ujemne marginy)
   przez .el6-start-hero-bleed — to JEGO trzeba przyciemnić, nie .el6-start-hero */
body.high-contrast .el6-start-hero-bleed {
  background: #000 !important;
  border-top-color: #00fff0 !important;
  border-bottom-color: #00fff0 !important;
}
body.high-contrast .el6-start-hero {
  background: #000 !important;
}
/* Dekoracyjne kropki w wizualu — wyłączamy, żeby nie wprowadzały szumu */
body.high-contrast .el6-start-visual::before,
body.high-contrast .el6-start-visual::after {
  display: none !important;
}
/* Obrazek "rakieta" — usuwamy drop-shadow który gubi się na czarnym tle */
body.high-contrast .el6-start-visual-img {
  filter: drop-shadow(0 0 8px rgba(0,255,240,.4)) !important;
}

/* "Twoje postępy i kod powrotu" — 3 kafelki na dole (.el6-start-return-steps > div) */
body.high-contrast .el6-start-return {
  background: #111 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.high-contrast .el6-start-return-steps > div {
  background: #002a26 !important;
  color: #fff !important;
  border-left: 3px solid #00fff0 !important;
  border-radius: 12px;
}
body.high-contrast .el6-start-return-steps strong { color: #00fff0 !important; }
body.high-contrast .el6-start-return-steps span { color: #d7d7d7 !important; }

/* "Jak to działa" — kafelki .el6-start-how-item miały background: #f4fbfa */
body.high-contrast .el6-start-section {
  background: #111 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
body.high-contrast .el6-start-how-item {
  background: #002a26 !important;
  border: 1px solid #00fff0 !important;
  color: #fff !important;
}
body.high-contrast .el6-start-how-item i { color: #00fff0 !important; }
body.high-contrast .el6-start-how-item strong { color: #fff !important; }
body.high-contrast .el6-start-how-item span { color: #d7d7d7 !important; }

/* Tekst-kart "Od rozmów do działania" / "To nie jest teoria" */
body.high-contrast .el6-start-text-card h2 { color: #00fff0 !important; }
body.high-contrast .el6-start-text-card p { color: #d7d7d7 !important; }

/* Section/return icon (kółko obok nagłówka sekcji) */
body.high-contrast .el6-start-section-icon {
  background: #002a26 !important;
  border: 2px solid #00fff0 !important;
  color: #00fff0 !important;
}
body.high-contrast .el6-start-section h2,
body.high-contrast .el6-start-return h2 { color: #fff !important; }
body.high-contrast .el6-start-badge {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0 !important;
}
body.high-contrast .el6-start-num,
body.high-contrast .el6-start-3,
body.high-contrast .el6-start-2,
body.high-contrast .el6-start-1 {
  color: #fff !important;
  text-shadow: none !important;
}
body.high-contrast .el6-start-word { color: #ffd43b !important; text-shadow: none !important; }
body.high-contrast .el6-start-title { color: #fff !important; }
body.high-contrast .el6-start-lead { color: #d7d7d7 !important; }

/* CTA-y na start-page */
body.high-contrast .el6-witaj-cta {
  background: #ffd43b !important;
  color: #000 !important;
  border: 2px solid #ffd43b !important;
  box-shadow: none !important;
}
body.high-contrast .el6-kod-powrot-btn {
  background: #000 !important;
  color: #00fff0 !important;
  border: 2px solid #00fff0 !important;
}
body.high-contrast .el6-kod-powrot-btn:hover {
  background: #00fff0 !important;
  color: #000 !important;
}

/* Karty intro / how-to-use */
body.high-contrast .el6-start-text-card,
body.high-contrast .el6-start-how-item,
body.high-contrast .el6-start-return-main,
body.high-contrast .el6-materialy {
  background: #111 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.high-contrast .el6-start-section-head { color: #fff !important; }
body.high-contrast .el6-start-section-icon {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
}

/* Materiały do pobrania */
body.high-contrast .el6-materialy-label { color: #00fff0 !important; }
body.high-contrast .el6-material-link {
  background: #000 !important;
  color: #00fff0 !important;
  border: 2px solid #00fff0 !important;
}
body.high-contrast .el6-material-link:hover {
  background: #ffd43b !important;
  color: #000 !important;
  border-color: #ffd43b !important;
}

/* Dashboard header + lista faz/kroków */
/* Wrapper .el6-dashboard miał bg: #eef5f4 (jasny teal-szary) — nadpisuję
   na czarne, inaczej biały nagłówek "Działaj!" znika na jasnym tle */
body.high-contrast .el6-dashboard {
  background: #000 !important;
  border: 2px solid #fff !important;
}
body.high-contrast .el6-dashboard-header {
  background: transparent !important;
}
body.high-contrast .el6-dashboard-header h2 { color: #fff !important; }
body.high-contrast .el6-dashboard-header p { color: #d7d7d7 !important; }
body.high-contrast .el6-dashboard-header strong { color: #00fff0 !important; }
body.high-contrast .el6-phase-title { color: #00fff0 !important; }
body.high-contrast .el6-phase-num {
  background: #ffd43b !important;
  color: #000 !important;
}
body.high-contrast .el6-phase-tytul { color: #fff !important; }
body.high-contrast .el6-phase-badge {
  background: #002a26 !important;
  color: #d7d7d7 !important;
  border: 1px solid #444;
}
body.high-contrast .el6-phase-badge.zdobyta {
  background: #1a1500 !important;
  color: #ffd43b !important;
  border-color: #ffd43b;
}

/* Step-cards (kafelki kroków na dashboardzie) */
body.high-contrast .el6-step-card {
  background: #111 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  color: #fff !important;
}
body.high-contrast .el6-step-card.locked {
  background: #0a0a0a !important;
  border-color: #444 !important;
  opacity: .65;
}
body.high-contrast .el6-step-card.active {
  border-color: #ffd43b !important;
  box-shadow: 0 0 0 3px #ffd43b !important;
}
body.high-contrast .el6-step-card.done {
  border-color: #00fff0 !important;
}
body.high-contrast .el6-step-card:hover { transform: none !important; }
body.high-contrast .el6-step-num {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
}
body.high-contrast .el6-step-card.active .el6-step-num {
  background: #ffd43b !important;
  color: #000 !important;
  border-color: #ffd43b;
}
body.high-contrast .el6-step-card.done .el6-step-num {
  background: #00fff0 !important;
  color: #000 !important;
}
body.high-contrast .el6-step-title { color: #fff !important; }
body.high-contrast .el6-step-short { color: #d7d7d7 !important; }
body.high-contrast .el6-step-status {
  background: #002a26 !important;
  color: #d7d7d7 !important;
  border: 1px solid #444;
}
body.high-contrast .el6-step-status.done {
  background: #002a26 !important;
  color: #00fff0 !important;
  border-color: #00fff0;
}
body.high-contrast .el6-step-status.active {
  background: #1a1500 !important;
  color: #ffd43b !important;
  border-color: #ffd43b;
}
body.high-contrast .el6-step-status.locked {
  background: transparent !important;
  color: #777 !important;
  border-color: #444;
}

/* ─── PŁYWAJĄCY HEADER (_naglowek.html: kod-box, path-*) ──────────────── */
body.high-contrast .el6-kod-box-icon {
  background: #002a26 !important;
  color: #00fff0 !important;
}
body.high-contrast .el6-kod-box-title { color: #fff !important; }
body.high-contrast .el6-kod-box-text { color: #d7d7d7 !important; }
body.high-contrast .el6-kod-box-hint { color: #d7d7d7 !important; }
body.high-contrast .el6-kod-box-btn,
body.high-contrast .el6-kod-box-journey {
  background: #ffd43b !important;
  color: #000 !important;
  border: 2px solid #ffd43b !important;
}
body.high-contrast .el6-kod-box-reset {
  background: #000 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0 !important;
}

body.high-contrast .el6-path-header {
  background: rgba(0,0,0,.95) !important;
  border-bottom: 2px solid #00fff0 !important;
}
body.high-contrast .el6-path-back {
  background: #000 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0 !important;
}
body.high-contrast .el6-path-back:hover {
  background: #ffd43b !important;
  color: #000 !important;
  border-color: #ffd43b !important;
}
body.high-contrast .el6-path-progress-bar {
  background: #1a1a1a !important;
}
body.high-contrast .el6-path-progress-bar > * {
  background: #ffd43b !important;
}
body.high-contrast .el6-path-progress-percent { color: #ffd43b !important; font-weight: 800; }
body.high-contrast .el6-path-progress-step { color: #d7d7d7 !important; }
body.high-contrast .el6-path-faza-icon {
  background: #002a26 !important;
  color: #00fff0 !important;
}
body.high-contrast .el6-path-faza-name { color: #fff !important; }
body.high-contrast .el6-path-faza-odznaka {
  background: #1a1500 !important;
  color: #ffd43b !important;
  border: 1px solid #ffd43b;
}
body.high-contrast .el6-path-arrow {
  background: #000 !important;
  color: #00fff0 !important;
  border: 2px solid #00fff0 !important;
}
body.high-contrast .el6-path-arrow:hover {
  background: #ffd43b !important;
  color: #000 !important;
  border-color: #ffd43b !important;
}
body.high-contrast .el6-path-arrow.preview {
  background: #ffd43b !important;
  color: #000 !important;
  border-color: #ffd43b !important;
}
body.high-contrast .el6-progress-axis {
  background: #1a1a1a !important;
}

/* ─── KROK (krok.html: panele, task-extras, formy) ───────────────────── */
body.high-contrast .el6-krok-card-header-v2 {
  background: #111 !important;
  border: 2px solid #fff !important;
}
body.high-contrast .el6-krok-num-big {
  background: #ffd43b !important;
  color: #000 !important;
}
body.high-contrast .el6-krok-num-z { color: #d7d7d7 !important; }
body.high-contrast .el6-krok-head-faza { color: #00fff0 !important; }
body.high-contrast .el6-krok-head-tytul { color: #fff !important; }
body.high-contrast .el6-krok-head-short { color: #d7d7d7 !important; }
body.high-contrast .el6-krok-head-status {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* Wewnętrzny pill statusu — 3 warianty (.done/.active/.locked) — wszystkie
   miały jasne pastelowe tła z ledwo widocznym tekstem */
body.high-contrast .el6-krok-status {
  background: transparent !important;
  border: 2px solid currentColor !important;
}
body.high-contrast .el6-krok-status.done {
  background: #1a1500 !important;
  color: #ffd43b !important;
  border-color: #ffd43b !important;
}
body.high-contrast .el6-krok-status.active {
  background: #002a26 !important;
  color: #00fff0 !important;
  border-color: #00fff0 !important;
}
body.high-contrast .el6-krok-status.locked {
  background: #111 !important;
  color: #d7d7d7 !important;
  border-color: #888 !important;
}
body.high-contrast .el6-krok-status i { color: inherit !important; }

body.high-contrast .el6-phase-medals { background: transparent !important; }

/* Phase-medals — odznaki faz w nagłówku kroku
   3 stany: default (locked), .earned (zdobyta), .current (aktualna)
   Wszystkie miały jasne tła + ciemne ikony — nieczytelne na ciemnym page-bg */
body.high-contrast .el6-phase-medal { color: #888 !important; }
body.high-contrast .el6-phase-medal-icon {
  background: #111 !important;
  border: 2px solid #555 !important;
  color: #888 !important;
  box-shadow: none !important;
}
/* Zdobyta (.earned) — żółta z czarną ikoną */
body.high-contrast .el6-phase-medal.earned { color: #ffd43b !important; }
body.high-contrast .el6-phase-medal.earned .el6-phase-medal-icon {
  background: #ffd43b !important;
  border-color: #ffd43b !important;
  color: #000 !important;
  box-shadow: 0 0 0 3px rgba(255,212,59,.35) !important;
}
/* Mała "kropka ukończenia" w prawym dolnym rogu .earned — z cyjanu */
body.high-contrast .el6-phase-medal.earned .el6-phase-medal-icon::after {
  background: #00fff0 !important;
  border-color: #000 !important;
}
/* Bieżąca (.current) — cyjanowa */
body.high-contrast .el6-phase-medal.current:not(.earned) .el6-phase-medal-icon {
  background: #002a26 !important;
  border-color: #00fff0 !important;
  color: #00fff0 !important;
  box-shadow: 0 0 0 3px rgba(0,255,240,.35) !important;
}

/* Panele (cel/przed/zadanie/notatki) */
body.high-contrast .el6-panel,
body.high-contrast .el6-panel-goal,
body.high-contrast .el6-panel-before,
body.high-contrast .el6-panel-task,
body.high-contrast .el6-notes-panel {
  background: #111 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.high-contrast .el6-panel-head { border-bottom: 1px solid #00fff0 !important; }
body.high-contrast .el6-panel-icon {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
}
body.high-contrast .el6-panel-tytul { color: #00fff0 !important; }
body.high-contrast .el6-panel-text { color: #fff !important; }
body.high-contrast .el6-panel-sub { color: #d7d7d7 !important; }
body.high-contrast .el6-krok-desc { color: #d7d7d7 !important; }

/* Wskazówki / pułapki */
body.high-contrast .el6-task-extras,
body.high-contrast .el6-task-extras-side {
  background: transparent !important;
}
body.high-contrast .el6-task-extra {
  background: #111 !important;
  border: 2px solid #fff !important;
}
body.high-contrast .el6-task-extra.tip {
  background: #002a26 !important;
  border-color: #00fff0 !important;
}
body.high-contrast .el6-task-extra.trap {
  background: #1a1500 !important;
  border-color: #ffd43b !important;
}
body.high-contrast .el6-task-extra-head {
  color: #fff !important;
  font-weight: 800;
}
body.high-contrast .el6-task-extra.tip .el6-task-extra-head { color: #00fff0 !important; }
body.high-contrast .el6-task-extra.trap .el6-task-extra-head { color: #ffd43b !important; }
body.high-contrast .el6-task-extra-text,
body.high-contrast .el6-task-extra-item { color: #fff !important; }

/* Notatki — pola textarea i status */
body.high-contrast .el6-notatki-pola textarea,
body.high-contrast .el6-notatki-pola input,
body.high-contrast .el6-notatka-input,
body.high-contrast .el6-notatka-textarea {
  background: #000 !important;
  color: #fff !important;
  border: 1.5px solid #fff !important;
}
body.high-contrast .el6-notatki-pola textarea:focus,
body.high-contrast .el6-notatki-pola input:focus,
body.high-contrast .el6-notatka-input:focus,
body.high-contrast .el6-notatka-textarea:focus {
  border-color: #ffd43b !important;
  box-shadow: 0 0 0 3px rgba(255,212,59,.4) !important;
}
body.high-contrast .el6-notatka-input::placeholder,
body.high-contrast .el6-notatka-textarea::placeholder { color: #888 !important; opacity: 1 !important; }
/* Ikona po lewej każdego pola — miała bg #f3f8f8 (jasny) */
body.high-contrast .el6-notatka-ikona {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
}
/* Floating-label nad textarea — KLUCZOWY: miała bg #ffffff, czyli białą belka
   wisząca nad polem; teraz ciemne tło z cyjanowym tekstem */
body.high-contrast .el6-notatka-pole label {
  background: #000 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
  border-radius: 4px;
}
body.high-contrast .el6-notatki-info { color: #d7d7d7 !important; }
body.high-contrast .el6-notatki-info i { color: #00fff0 !important; }
body.high-contrast .el6-notatki-status {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
}
body.high-contrast .el6-notatki-status.saving { color: #ffd43b !important; border-color: #ffd43b; }
body.high-contrast .el6-notatki-status.ok { color: #5fff5f !important; border-color: #5fff5f; }
body.high-contrast .el6-notatki-status.err { color: #ff8080 !important; border-color: #ff8080; }

/* Pytania w kroku 5 (quiz ABC) */
body.high-contrast .el6-pytanie-tresc { color: #fff !important; }
body.high-contrast .el6-pytanie-label { color: #d7d7d7 !important; }
body.high-contrast .el6-pytanie-kropki { color: #ffd43b !important; }
body.high-contrast .el6-kafelek-pyt {
  background: #111 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
body.high-contrast .el6-kafelek-pyt:hover {
  background: #002a26 !important;
  border-color: #00fff0 !important;
  transform: none !important;
}
body.high-contrast .el6-kafelek-pyt.zaznaczone,
body.high-contrast .el6-kafelek-pyt.aktywne {
  background: #1a1500 !important;
  border-color: #ffd43b !important;
  color: #ffd43b !important;
}

/* SMS-builder (krok 5) */
body.high-contrast .el6-sms-builder,
body.high-contrast .el6-sms-preview,
body.high-contrast .el6-sms-progress {
  background: #111 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
body.high-contrast .el6-sms-licznik { color: #ffd43b !important; }
body.high-contrast .el6-sms-fragment {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0 !important;
}
body.high-contrast .el6-sms-fragment:hover {
  background: #ffd43b !important;
  color: #000 !important;
  border-color: #ffd43b !important;
}
body.high-contrast .el6-sms-slot {
  background: #000 !important;
  border: 2px dashed #00fff0 !important;
}
body.high-contrast .el6-sms-slot.poprawna { border-color: #5fff5f !important; }
body.high-contrast .el6-sms-slot.niepoprawna { border-color: #ff8080 !important; }
body.high-contrast .el6-sms-puste,
body.high-contrast .el6-sms-placeholder { color: #d7d7d7 !important; }
body.high-contrast .el6-sms-akcja {
  background: #ffd43b !important;
  color: #000 !important;
  border: 2px solid #ffd43b !important;
}
body.high-contrast .el6-sms-feedback,
body.high-contrast .el6-sms-feedback-slot {
  background: #1a1500 !important;
  color: #fff !important;
  border: 1px solid #ffd43b !important;
}

/* Dopasowanie - podsumowanie i lista */
body.high-contrast .el6-dopasowanie-card {
  background: #111 !important;
  border: 2px solid #fff !important;
}
body.high-contrast .el6-dopasowanie-podsumowanie {
  background: #002a26 !important;
  border: 2px solid #00fff0 !important;
  color: #fff !important;
}
body.high-contrast .el6-dopasowanie-lista .el6-dopasowanie-item {
  background: #000 !important;
  color: #d7d7d7 !important;
  border: 1px solid #444;
}
body.high-contrast .el6-dopasowanie-item.poprawna {
  border-color: #5fff5f !important;
  color: #5fff5f !important;
}
body.high-contrast .el6-dopasowanie-item.niepoprawna {
  border-color: #ff8080 !important;
  color: #ff8080 !important;
}

/* Profile / skala / role */
body.high-contrast .el6-profile-card,
body.high-contrast .el6-skala-card,
body.high-contrast .el6-role-card,
body.high-contrast .el6-onboard-card {
  background: #111 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

/* ─── DROGA / JOURNEY (droga.html) ────────────────────────────────────── */
body.high-contrast .el6-journey-hero { background: #000 !important; }
body.high-contrast .el6-journey-kicker {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
}
body.high-contrast .el6-journey-score {
  background: #1a1500 !important;
  color: #ffd43b !important;
  border: 2px solid #ffd43b !important;
}
body.high-contrast .el6-journey-section-head {
  color: #fff !important;
  border-bottom-color: #00fff0 !important;
}
body.high-contrast .el6-journey-phase { color: #00fff0 !important; }

/* Badge-grid (odznaki za fazy) */
body.high-contrast .el6-journey-badge {
  background: #111 !important;
  border: 2px solid #fff !important;
  color: #d7d7d7 !important;
  opacity: .55;
}
body.high-contrast .el6-journey-badge.is-done {
  background: #1a1500 !important;
  border-color: #ffd43b !important;
  color: #ffd43b !important;
  opacity: 1;
}
body.high-contrast .el6-journey-badge-icon {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
}
body.high-contrast .el6-journey-badge.is-done .el6-journey-badge-icon {
  background: #ffd43b !important;
  color: #000 !important;
  border-color: #ffd43b;
}

/* Timeline */
body.high-contrast .el6-journey-timeline {
  background: transparent !important;
}
body.high-contrast .el6-journey-step {
  background: #111 !important;
  border: 2px solid #fff !important;
  color: #d7d7d7 !important;
}
body.high-contrast .el6-journey-step.is-done {
  border-color: #00fff0 !important;
  background: #002a26 !important;
  color: #fff !important;
}
body.high-contrast .el6-journey-step-marker {
  background: #002a26 !important;
  color: #d7d7d7 !important;
  border: 2px solid #444 !important;
}
body.high-contrast .el6-journey-step.is-done .el6-journey-step-marker {
  background: #00fff0 !important;
  color: #000 !important;
  border-color: #00fff0 !important;
}
body.high-contrast .el6-journey-step-title { color: #fff !important; }
body.high-contrast .el6-journey-step-meta { color: #d7d7d7 !important; }

/* Notatki użytkownika w drodze */
body.high-contrast .el6-journey-notes,
body.high-contrast .el6-journey-note {
  background: #111 !important;
  border: 1px solid #00fff0 !important;
  color: #fff !important;
}
body.high-contrast .el6-journey-empty-note {
  background: #111 !important;
  border: 2px dashed #444 !important;
  color: #888 !important;
}

/* ─── KONIEC (koniec.html: hero, badge, materiały, scena z flagą) ─────── */
body.high-contrast .el6-koniec-hero { background: #000 !important; }

/* Animowana scena (flaga + wzgórza + iskry) — wyłączamy dekoracyjne kolory */
body.high-contrast .el6-koniec-flag-scene {
  background: transparent !important;
}
body.high-contrast .el6-koniec-flag-pole { background: #ffd43b !important; }
body.high-contrast .el6-koniec-flag {
  background: #ffd43b !important;
  border-color: #ffd43b !important;
}
body.high-contrast .el6-koniec-hill {
  background: #1a1a1a !important;
  border-top: 1px solid #00fff0;
}
body.high-contrast .el6-koniec-leaf,
body.high-contrast .el6-koniec-spark {
  filter: brightness(0) invert(1) sepia(1) saturate(8) hue-rotate(20deg);
}

body.high-contrast .el6-koniec-tytul { color: #fff !important; }
body.high-contrast .el6-koniec-subtytul { color: #d7d7d7 !important; }

/* Badge ukończenia + ikony faz */
body.high-contrast .el6-koniec-badge {
  background: #111 !important;
  border: 2px solid #ffd43b !important;
  color: #fff !important;
}
body.high-contrast .el6-koniec-badge-ikona {
  background: #ffd43b !important;
  color: #000 !important;
}
body.high-contrast .el6-koniec-badge-tytul { color: #ffd43b !important; }
body.high-contrast .el6-koniec-badge-podtytul { color: #d7d7d7 !important; }
body.high-contrast .el6-koniec-badge-fazy { color: #00fff0 !important; }
body.high-contrast .el6-koniec-badge-faza {
  background: #002a26 !important;
  color: #00fff0 !important;
  border: 1px solid #00fff0;
}

/* Sekcja "Materiały do druku" — 3 mat-btn */
body.high-contrast .el6-koniec-materialy {
  background: #111 !important;
  border: 2px solid #fff !important;
}
body.high-contrast .el6-koniec-materialy-label { color: #00fff0 !important; }
body.high-contrast .el6-koniec-mat-btn {
  background: #000 !important;
  color: #00fff0 !important;
  border: 2px solid #00fff0 !important;
}
body.high-contrast .el6-koniec-mat-btn:hover {
  background: #ffd43b !important;
  color: #000 !important;
  border-color: #ffd43b !important;
}

/* Stopka koniec + cytat z osobami */
body.high-contrast .el6-koniec-stopka { color: #d7d7d7 !important; }
body.high-contrast .el6-koniec-quote-icon { color: #ffd43b !important; }
body.high-contrast .el6-koniec-people { color: #d7d7d7 !important; }