:root{
  --okno-tlo: #fff;
  --okno-tekst: var(--text-dark, #111827);
  --okno-cien: 0 10px 25px rgba(0,0,0,.10);
  --okno-border: 1px solid rgba(0,0,0,.06);
  --okno-promien: 18px;

  --panel-tlo: #f9fafb;
  --panel-border: 1px solid rgba(0,0,0,.06);

  --accent: #2563eb;
  --accent-2: #1d4ed8;

  --btn-tlo: #2563eb;
  --btn-tlo-hover: #1d4ed8;
  --btn-tekst: #fff;

  --tekst-muted: #6b7280;

  --gap: 16px;
  --gap-lg: 24px;

  --okno-dur: 0.22s;
  --okno-in-dur: var(--okno-dur);
  --okno-out-dur: var(--okno-dur);

  --scroll-top-dur: 900ms;
}

html, body { scroll-behavior: smooth; }

.okno-hidden{ display: none !important; }
.okno-visible{ display: block !important; }

.prawy-obszar,
.prawy-panel,
#prawa-kolumna{
  position: relative;
}

.okno-rozwiazania{
  position: absolute;
  top: 0;
  right: 0;

  width: clamp(560px, 48vw, 900px);
  min-height: clamp(280px, 36vh, 420px);

  background: var(--okno-tlo);
  color: var(--okno-tekst);
  border: var(--okno-border);
  border-radius: var(--okno-promien);
  box-shadow: var(--okno-cien);

  padding: var(--gap-lg);
  margin-left: var(--gap-lg);

  transform-origin: 90% 8%;
  will-change: transform, opacity, filter;
}

.okno-anim-in-a{ animation: oknoPopInA var(--okno-in-dur) cubic-bezier(.4,0,1,1) both; }
.okno-anim-in-b{ animation: oknoPopInB var(--okno-in-dur) cubic-bezier(.4,0,1,1) both; }
.okno-anim-out{  animation: oknoPopOut var(--okno-out-dur) cubic-bezier(.4,0,1,1) both; }

@keyframes oknoPopInA{
  from{ opacity: 0; transform: translateY(-10px) scale(.98); filter: blur(2px); }
  to  { opacity: 1; transform: translateY(0)     scale(1);   filter: blur(0);  }
}
@keyframes oknoPopInB{
  from{ opacity: 0; transform: translateY(-10px) scale(.98); filter: blur(2px); }
  to  { opacity: 1; transform: translateY(0)     scale(1);   filter: blur(0);  }
}
@keyframes oknoPopOut{
  from{ opacity: 1; transform: translateY(0)     scale(1);   filter: blur(0);  }
  to  { opacity: 0; transform: translateY(-10px) scale(.98); filter: blur(2px); }
}

@media (prefers-reduced-motion: reduce){
  .okno-anim-in-a, .okno-anim-in-b, .okno-anim-out{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.okno-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
}

.okno-tytul{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .2px;
}
.okno-tytul::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 3px;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.okno-tytul.okno-tytul-anim::after{ width: 100%; }

.okno-tytul-nr{
  display: inline-block;
  transform: translateY(-1px);
  padding: .15rem .55rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .3px;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .25);
}

@keyframes badgePop{
  from{ transform: translateY(-3px) scale(.9); opacity: 0; }
  to  { transform: translateY(-1px) scale(1);  opacity: 1; }
}
.okno-tytul.okno-tytul-anim .okno-tytul-nr{ animation: badgePop .28s ease-out .05s both; }

.okno-zamknij{
  appearance: none;
  border: 0;
  border-radius: 12px;
  background: var(--panel-tlo);
  border: var(--panel-border);
  padding: 8px 10px;
  cursor: pointer;
  line-height: 1;
}
.okno-zamknij:hover{ filter: brightness(.98); }

.okno-tresc{ display: grid; gap: var(--gap); }

.okno-macierz{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 4px;
}
.okno-macierz .macierz-wrap{
  margin: 0 auto;
  position: relative;
}
.macierz--okno{
  font-size: 1.05rem;
  position: relative;
  z-index: 2;
}
@media (min-width: 1280px){ .macierz--okno{ font-size: 1.12rem; } }

.mx-znak{
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 9999px;
  background: var(--panel-tlo);
  border: var(--panel-border);
  color: var(--tekst-muted);
  font: 600 0.92rem ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.mx-znak--ukryty{ display: none; }

.mx-blok{
  position: absolute;
  z-index: 1;
  border-radius: 10px;
  background: rgba(250,204,21,.28);
  animation: mxBlinkBlock 1.35s ease-in-out infinite;
  pointer-events: none;
}
.mx-blok--ukryty{ display: none; }

@keyframes mxBlinkBlock{
  0%{   background: rgba(250,204,21,.25); }
  50%{  background: rgba(250,204,21,.45); }
  100%{ background: rgba(250,204,21,.25); }
}

@media (max-width: 640px){
  .mx-znak{
    position: static;
    transform: none;
    margin-bottom: 6px;
    display: inline-block;
  }
}

.okno-empty{
  padding: 14px;
  border-radius: 12px;
  background: var(--panel-tlo);
  border: var(--panel-border);
  color: var(--tekst-muted);
  font-size: .95rem;
}

.mx-legenda{
  position: absolute;
  right: var(--gap);
  bottom: var(--gap);
  background: var(--panel-tlo);
  border: var(--panel-border);
  border-radius: 10px;
  padding: 6px 10px;
  color: var(--tekst-muted);
  font-size: .88rem;
  line-height: 1.25;
  text-align: right;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  pointer-events: none;
}
.mx-legenda--hidden{ display: none; }

.mx-belka{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.mx-licznik{ font-weight: 700; color: var(--okno-tekst); }
.mx-sterowanie{ display: flex; gap: 8px; }
.mx-przycisk{
  appearance: none;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--btn-tlo);
  color: var(--btn-tekst);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s ease;
}
.mx-przycisk:hover{ background: var(--btn-tlo-hover); }
.mx-przycisk:disabled{ opacity:.55; cursor:not-allowed; }
.mx-przycisk--reset{ background:#6b7280; color:#fff; }
.mx-przycisk--reset:hover{ background:#4b5563; }

.mx-opis{
  margin-top: 8px;
  color: var(--okno-tekst);
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.02rem;
  line-height: 1.55;
  letter-spacing: .1px;
}

.macierz--okno td.mx-pivot{ outline: 2px solid var(--accent); background: rgba(37,99,235,.12); border-radius: 6px; }

@keyframes mxRowPulseGreen{
  0%{   background: rgba(16,185,129,.10); }
  50%{  background: rgba(16,185,129,.18); }
  100%{ background: rgba(16,185,129,.10); }
}
@keyframes mxRowPulseAmber{
  0%{   background: rgba(245,158,11,.12); }
  50%{  background: rgba(245,158,11,.20); }
  100%{ background: rgba(245,158,11,.12); }
}
.macierz--okno tr.mx-wiersz-zrodlo td{ animation: mxRowPulseGreen 2.4s ease-in-out infinite; }
.macierz--okno tr.mx-wiersz-cel td{     animation: mxRowPulseAmber 2.0s ease-in-out infinite; }

.macierz--okno td.mx-komorka-zmieniona{ animation: none !important; }

@media (prefers-reduced-motion: reduce){
  .macierz--okno tr.mx-wiersz-zrodlo td,
  .macierz--okno tr.mx-wiersz-cel td,
  .macierz--okno td.mx-komorka-zmieniona{
    animation: none !important;
  }
}

@media (max-width: 1024px){
  .okno-rozwiazania{
    position: static;
    width: 100%;
    margin-top: var(--gap-lg);
  }
}

.sekcja-przyklady { overflow: visible; position: relative; }
.okno-rozwiazania { z-index: 50; }

.rozwiaz, .btn-rozwiaz, [data-rozwiaz]{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}