/* =============================
   SCREENSHOT (img#screenshot zastępuje statyczny <img class="obrazek-profilu">)
   Szata.css nadaje .obrazek-profilu: 140x140, border-radius, object-fit.
   Tu tylko nadpisujemy rozmiar na bardziej odpowiedni dla zrzutu ekranu.
============================= */

#screenshot {
  width: 100%;
  height: auto;
  min-height: 120px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* =============================
   LOADER (widoczny gdy src="" lub JS ładuje screenshot)
============================= */

.ladowanie-analizy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px;
  color: var(--muted);
  font-size: .9rem;
}

.ladowanie-analizy img { opacity: .7; }

/* =============================
   PASEK POSTEPU ANALIZY
============================= */

.pasek-postepu-analizy {
  padding: 14px 18px;
}

.etykieta-postepu {
  font-size: .88rem;
  font-weight: 700;
  color: var(--tekst);
  margin-bottom: 10px;
}

.etykieta-postepu #progress-label {
  color: var(--cta);
}

.pasek-tlo-postepu {
  width: 100%;
  height: 10px;
  background: var(--karta2);
  border: 1px solid var(--obrys);
  border-radius: 999px;
  overflow: hidden;
}

#progressbar {
  height: 100%;
  width: 5%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--a), var(--b));
  background-size: 200% 100%;
  animation: pasek-ruch 1.8s ease infinite;
  transition: width .4s ease;
}

@keyframes pasek-ruch {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =============================
   BLAD ANALIZY
============================= */

.boks-blad {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* =============================
   UDOSTEPNIANIE
============================= */

.udostepnij-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 14px 0 4px;
}

.udostepnij-lista span {
  font-size: .82rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.udostepnij-lista a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--obrys);
  background: var(--karta2);
  font-size: .88rem;
  font-weight: 700;
}

.udostepnij-lista a:hover {
  text-decoration: none;
  background: var(--surface);
}

/* =============================
   SEOBOX — content generowany przez silnik analizy
============================= */

.seoBox {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid var(--obrys);
  background: var(--karta2);
  margin-bottom: 8px;
  padding: 0;
  transition: border-color .15s ease, background .15s ease;
}

.seoBox:hover {
  border-color: color-mix(in oklab, var(--a) 35%, var(--obrys));
  background: var(--karta);
}

.headBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  margin-bottom: 0;
}

.titleStr {
  font-size: .95rem;
  font-weight: 700;
  color: var(--tekst);
  margin: 0;
  flex: 1;
  min-width: 0;
}

.solveMsg { display: none; }

.solveMsg .fa,
.headBox .fa {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  font-size: 0;
  background: color-mix(in oklab, var(--tekst) 18%, transparent);
  vertical-align: middle;
}

.solveMsg .solveMsgBlue { background: var(--cta); }

.contentBox {
  padding: 14px;
  margin: 0;
  border-top: 1px solid var(--obrys);
}

.seoBox .questionBox {
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 1;
}

.seoBox .questionBox i { display: none; }

.contentBox table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.contentBox table th,
.contentBox table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--obrys);
  text-align: left;
}

.contentBox table th {
  font-weight: 700;
  color: var(--muted);
  font-size: .85rem;
}

.contentBox .suggestionBox {
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: .9rem;
}

.passedBox .suggestionBox  { background: color-mix(in oklab, var(--ziel) 14%, transparent); }
.errorBox .suggestionBox   { background: color-mix(in oklab, var(--czerw) 14%, transparent); }
.improveBox .suggestionBox { background: color-mix(in oklab, var(--zolty) 14%, transparent); }
.lowImpactBox .suggestionBox { background: var(--karta2); }

.clearSep   { display: none; }
.seoBox-title { display: none; }

.hide { display: none; }

/* DEBUGOWANIE: domain.css v2 - tenSEO */