/* =========================================================================
   Prezentacja integracji Integrator KSeF do Symfonii ⇄ AkceptujFaktury.pl
   Scena ma płótno 1600×900; jednostką jest --u = 1/1600 szerokości sceny,
   więc schemat skaluje się w całości (ten sam zabieg co w ilustracjach bloga).
   Wszystkie klasy z przedrostkiem pz- (scena) i sc- (miniatury w panelu).
========================================================================= */

.pz{
  --bg:#0a1628; --bg2:#0d1d35; --box:#14264a; --box2:#1a2f57;
  --line:rgba(255,255,255,.16); --line2:rgba(255,255,255,.28);
  --tx:#e7ecf4; --mut:#94a3b8;
  --c:#6fd3ff; --c2:#38b6f0; --g:#4ade80; --v:#c4a1ff; --y:#facc15; --r:#f87171;
  --panel:440px;
  position:relative; display:grid; min-height:0; height:100%;
  grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"stage" "dock";
  background:radial-gradient(ellipse at 50% -10%,rgba(56,182,240,.16),transparent 60%),
             linear-gradient(135deg,var(--bg) 0%,#132744 55%,var(--bg) 100%);
  color:var(--tx); font-family:Inter,system-ui,"Segoe UI",sans-serif;
}
.pz *{box-sizing:border-box}
.pz a{color:inherit}

/* ---------- układ z otwartym panelem ---------- */
.js .pz.is-open{grid-template-columns:minmax(0,1fr) var(--panel); grid-template-areas:"stage panel" "dock panel"}
.pz-stage-wrap{grid-area:stage; container-type:size; display:flex; align-items:center; justify-content:center; padding:14px 18px 6px; min-height:0}
.pz-stage{position:relative; container-type:inline-size;
  width:min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio:16/9;
  --u:calc(100cqw / 1600)}
/* cqw wewnątrz własnego kontenera — --u liczymy na dzieciach */
.pz-stage > *{--u:calc(100cqw / 1600)}

/* ---------- przewody ---------- */
.pz-wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.pz-w{fill:none; stroke-width:2.6; stroke-dasharray:9 9; opacity:.55; transition:opacity .3s, stroke-width .3s;
  animation:pz-flow 1.4s linear infinite}
.pz-w.c{stroke:var(--c)} .pz-w.g{stroke:var(--g)} .pz-w.v{stroke:var(--v)}
.pz-w.is-hot{opacity:1; stroke-width:4}
.pz.has-active .pz-w:not(.is-hot){opacity:.18}
@keyframes pz-flow{to{stroke-dashoffset:-36}}

.pz-tok rect{rx:7}
.pz-tok text{font:700 13px Inter,system-ui,sans-serif; fill:#0a1628}

/* ---------- etykiety ---------- */
.pz-lbl{position:absolute; left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u));
  font-size:calc(15 * var(--u)); font-weight:600; color:#cfe6f7; white-space:nowrap; line-height:1;
  display:flex; align-items:center; gap:calc(7 * var(--u)); transition:opacity .3s}
.pz-lbl b{display:inline-flex; align-items:center; justify-content:center; width:calc(26 * var(--u)); height:calc(26 * var(--u));
  border-radius:50%; background:var(--c); color:#0a1628; font-size:calc(14 * var(--u))}
.pz-lbl.g{color:#bff3d1} .pz-lbl.g b{background:var(--g)}
.pz-lbl.v{color:#e3d4ff}
.pz-lbl-s{font-size:calc(13 * var(--u)); font-weight:500; opacity:.85}
.pz.has-active .pz-lbl{opacity:.35}
.pz-who{position:absolute; left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u));
  font-size:calc(15 * var(--u)); color:var(--mut); white-space:nowrap}

/* ---------- węzły i skrzynki ---------- */
.pz-node,.pz-box{position:absolute; left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u)); height:calc(var(--h) * var(--u));
  background:var(--box); border:calc(1.5 * var(--u)) solid var(--line); border-radius:calc(20 * var(--u));
  box-shadow:0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(2,10,24,.45);
  transition:opacity .35s, border-color .35s, box-shadow .35s, transform .35s}
.pz-node{display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; text-align:center; cursor:pointer}
.pz-node:hover,.pz-node:focus-visible{border-color:var(--c); transform:translateY(calc(-3 * var(--u)))}
.pz-node-t{font-family:"Space Grotesk",Inter,sans-serif; font-weight:700; font-size:calc(26 * var(--u)); line-height:1.1}
.pz-node-s{font-size:calc(15 * var(--u)); color:var(--mut); margin-top:calc(5 * var(--u))}
.pz-node.is-hot,.pz-box.is-hot{border-color:var(--c); box-shadow:0 0 0 calc(2 * var(--u)) rgba(111,211,255,.35), 0 0 calc(50 * var(--u)) rgba(56,182,240,.35)}
.pz.has-active .pz-node:not(.is-hot),.pz.has-active .pz-box:not(.is-hot){opacity:.42}

.pz-ksef{flex-direction:row; gap:calc(16 * var(--u)); justify-content:flex-start; padding-left:calc(28 * var(--u)); text-align:left; flex-wrap:wrap; align-content:center}
.pz-ksef .pz-node-t,.pz-ksef .pz-node-s{width:calc(200 * var(--u))}
.pz-ksef .pz-node-s{margin-top:0}
.pz-ksef-ico{width:calc(56 * var(--u)); height:calc(56 * var(--u)); border-radius:calc(14 * var(--u)); background:#b11226;
  display:flex; align-items:center; justify-content:center; flex:none; order:-1; position:absolute; left:calc(26 * var(--u)); top:calc(42 * var(--u))}
.pz-ksef{padding-left:calc(100 * var(--u))}
.pz-ksef-ico svg{width:60%; height:60%; fill:none; stroke:#fff; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}

.pz-box{padding:calc(16 * var(--u)) calc(18 * var(--u)); display:flex; flex-direction:column; gap:calc(10 * var(--u))}
.pz-int{border-color:rgba(111,211,255,.55)}
.pz-box-head{display:flex; align-items:center; gap:calc(14 * var(--u)); margin-bottom:calc(4 * var(--u))}
.pz-box-head img{width:calc(52 * var(--u)); height:calc(52 * var(--u)); border-radius:calc(12 * var(--u))}
.pz-box-head > span:last-child{display:flex; flex-direction:column}
.pz-box-t{font-family:"Space Grotesk",Inter,sans-serif; font-weight:700; font-size:calc(25 * var(--u)); line-height:1.1}
.pz-box-s{font-size:calc(14 * var(--u)); color:var(--mut); margin-top:calc(3 * var(--u))}
.pz-af-ico{position:relative; width:calc(52 * var(--u)); height:calc(52 * var(--u)); border-radius:calc(12 * var(--u)); background:#13203a;
  border:calc(1.5 * var(--u)) solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; flex:none}
.pz-af-ico svg{width:58%; height:58%; fill:none; stroke:#fff; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.pz-af-ico i{position:absolute; right:calc(-8 * var(--u)); top:calc(-8 * var(--u)); width:calc(24 * var(--u)); height:calc(24 * var(--u));
  border-radius:50%; background:#22c55e; color:#fff; font-style:normal; font-weight:800; font-size:calc(14 * var(--u));
  display:flex; align-items:center; justify-content:center}

.pz-tile{flex:1; display:flex; align-items:center; gap:calc(14 * var(--u)); text-decoration:none;
  background:rgba(255,255,255,.04); border:calc(1.5 * var(--u)) solid var(--line); border-radius:calc(14 * var(--u));
  padding:0 calc(16 * var(--u)); transition:background .25s, border-color .25s, opacity .3s}
.pz-tile:hover,.pz-tile:focus-visible{background:rgba(111,211,255,.10); border-color:var(--c); outline:none}
.pz-tile-nr{flex:none; width:calc(34 * var(--u)); height:calc(34 * var(--u)); border-radius:50%; background:var(--c); color:#0a1628;
  font-weight:800; font-size:calc(17 * var(--u)); display:flex; align-items:center; justify-content:center}
.pz-tile-tx{flex:1; display:flex; flex-direction:column; min-width:0}
.pz-tile-t{font-weight:700; font-size:calc(19 * var(--u)); line-height:1.15}
.pz-tile-s{font-size:calc(13.5 * var(--u)); color:var(--mut); margin-top:calc(2 * var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pz-tile-go{font-size:calc(13 * var(--u)); color:var(--c); opacity:.6}
.pz-tile.is-hot{background:rgba(111,211,255,.16); border-color:var(--c)}
.pz-tile.is-hot .pz-tile-go{opacity:1}
.pz.has-active .pz-box.is-hot .pz-tile:not(.is-hot){opacity:.5}

.pz-api{justify-content:flex-start; padding-top:calc(22 * var(--u)); border-color:rgba(196,161,255,.45); overflow:hidden}
.pz-api .pz-node-t{font-size:calc(21 * var(--u))}
.pz-api-code{font-family:"JetBrains Mono",Consolas,monospace; font-weight:700; color:var(--v); font-size:calc(30 * var(--u)); line-height:1}
.pz-api-list{position:relative; width:100%; flex:1; margin-top:calc(12 * var(--u)); overflow:hidden;
  mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.pz-api-list > span{position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; gap:calc(7 * var(--u));
  animation:pz-scroll 16s linear infinite}
.pz-api-list i{font-style:normal; font-size:calc(14 * var(--u)); color:#d9cbff; background:rgba(196,161,255,.12);
  border-radius:calc(8 * var(--u)); padding:calc(5 * var(--u)) calc(8 * var(--u)); margin:0 calc(14 * var(--u))}
@keyframes pz-scroll{to{transform:translateY(-50%)}}

.pz-fk{border-color:rgba(74,222,128,.5); padding:0 calc(130 * var(--u)) 0 calc(80 * var(--u))}
.pz-fk .pz-node-t{font-size:calc(24 * var(--u))}
.pz-fk.is-hot{border-color:var(--g); box-shadow:0 0 0 calc(2 * var(--u)) rgba(74,222,128,.3), 0 0 calc(50 * var(--u)) rgba(74,222,128,.3)}
.pz-fk-nr{position:absolute; left:calc(22 * var(--u)); top:calc(20 * var(--u)); width:calc(34 * var(--u)); height:calc(34 * var(--u)); border-radius:50%;
  background:var(--g); color:#0a1628; font-weight:800; font-size:calc(17 * var(--u)); display:flex; align-items:center; justify-content:center}
.pz-fk-stack{position:absolute; right:calc(28 * var(--u)); top:50%; transform:translateY(-50%); width:calc(70 * var(--u)); height:calc(80 * var(--u))}
.pz-fk-stack i{position:absolute; inset:0; background:#e8fbef; border-radius:calc(8 * var(--u)); border:calc(1.5 * var(--u)) solid #b7dfc4}
.pz-fk-stack i:nth-child(2){transform:translate(calc(-8 * var(--u)),calc(8 * var(--u)))}
.pz-fk-stack i:nth-child(3){transform:translate(calc(-16 * var(--u)),calc(16 * var(--u)))}
.pz-fk-stack i:nth-child(3)::after{content:"FK"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-weight:800; font-size:calc(18 * var(--u)); color:#116b33}

.pz-kl{flex-direction:column; gap:calc(8 * var(--u)); background:rgba(20,38,74,.55)}
.pz-kl-t{font-family:"JetBrains Mono",Consolas,monospace; font-size:calc(14 * var(--u)); letter-spacing:calc(2 * var(--u)); color:var(--g); font-weight:600}
.pz-kl-s{font-size:calc(14 * var(--u)); color:var(--mut)}
.pz-kl-dev{display:flex; align-items:flex-end; gap:calc(26 * var(--u))}
.pz-kl-pc,.pz-kl-ph{position:relative; display:flex; flex-direction:column; gap:calc(5 * var(--u)); background:#1b2e52;
  border:calc(2 * var(--u)) solid var(--c); padding:calc(9 * var(--u))}
.pz-kl-pc{width:calc(150 * var(--u)); height:calc(72 * var(--u)); border-radius:calc(6 * var(--u))}
.pz-kl-ph{width:calc(46 * var(--u)); height:calc(78 * var(--u)); border-radius:calc(10 * var(--u)); border-color:#cbd5e1; padding:calc(7 * var(--u))}
.pz-kl-pc i,.pz-kl-ph i{display:block; height:calc(5 * var(--u)); border-radius:3px; background:rgba(255,255,255,.3)}
.pz-kl-pc b,.pz-kl-ph b{margin-top:auto; align-self:flex-start; background:var(--g); color:#06331a; font-size:calc(11 * var(--u));
  border-radius:calc(8 * var(--u)); padding:calc(2 * var(--u)) calc(7 * var(--u)); animation:pz-tap 3.2s ease-in-out infinite}
.pz-kl-ph b{align-self:center}
@keyframes pz-tap{0%,70%,100%{transform:scale(1)} 78%{transform:scale(.86)} 86%{transform:scale(1.08)}}

/* ---------- pasek obszarów ---------- */
.pz-dock{grid-area:dock; position:relative; display:flex; align-items:center; gap:12px; padding:10px 18px 14px; min-width:0}
.pz-play{flex:none; display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; border-radius:999px;
  padding:10px 18px; font:700 14px Inter,system-ui,sans-serif; color:#0a1628; background:linear-gradient(135deg,#6fd3ff,#38b6f0);
  box-shadow:0 6px 20px rgba(56,182,240,.35)}
.pz-play:hover{filter:brightness(1.08)}
.pz-play[aria-pressed="true"]{background:linear-gradient(135deg,#fde68a,#facc15)}
.pz-chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; min-width:0}
.pz-chips::-webkit-scrollbar{display:none}
.pz-chip{flex:none; display:inline-flex; align-items:center; gap:7px; text-decoration:none; border-radius:999px;
  padding:7px 13px 7px 7px; font-size:13px; color:#d6e3f2; background:rgba(255,255,255,.06); border:1px solid var(--line);
  transition:background .2s, border-color .2s}
.pz-chip b{width:22px; height:22px; border-radius:50%; background:rgba(111,211,255,.18); color:var(--c);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px}
.pz-chip:hover{border-color:var(--c)}
.pz-chip.is-hot{background:rgba(111,211,255,.18); border-color:var(--c); color:#fff}
.pz-chip.is-hot b{background:var(--c); color:#0a1628}
.pz-chip[data-obszar="fk"] b{color:var(--g); background:rgba(74,222,128,.15)}
.pz-chip[data-obszar="fk"].is-hot b{background:var(--g); color:#0a1628}
.pz-progress{position:absolute; left:18px; right:18px; bottom:4px; height:3px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
.pz-progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--c),var(--g))}

/* ---------- panel ---------- */
.pz-panel{grid-area:panel; position:relative; background:#0f1d36; border-left:1px solid var(--line);
  overflow-y:auto; padding:22px 24px 18px; min-height:0}
.js .pz-panel{display:none}
.js .pz.is-open .pz-panel{display:block; animation:pz-slide .35s ease-out}
@keyframes pz-slide{from{opacity:0; transform:translateX(24px)}}
.no-js-hint{display:none}
.pz-close{position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--tx); cursor:pointer; font-size:15px}
.pz-close:hover{border-color:var(--c)}
.js .pz-sec{display:none}
.js .pz-sec.is-active{display:block}
.pz-sec{padding-bottom:6px}
html:not(.js) .pz-sec{border-top:1px solid var(--line); padding-top:22px; margin-top:22px}
html:not(.js) .pz-close, html:not(.js) .pz-nav, html:not(.js) .pz-play{display:none}
.pz-kick{font-family:"JetBrains Mono",Consolas,monospace; font-size:11.5px; letter-spacing:1.4px; color:var(--c); text-transform:uppercase; padding-right:40px}
.pz-sec h2{font-family:"Space Grotesk",Inter,sans-serif; font-size:24px; line-height:1.2; margin:8px 0 10px; color:#fff}
.pz-lead{font-size:14.5px; line-height:1.6; color:#c9d6e6; margin:0 0 14px}
.pz-lead strong,.pz-steps strong,.pz-note strong{color:#fff}
.pz-steps{margin:14px 0 12px; padding-left:20px; font-size:13.5px; line-height:1.6; color:#c9d6e6}
.pz-steps li{margin-bottom:6px}
.pz-steps li::marker{color:var(--c); font-weight:700}
.pz-steps code{font-family:"JetBrains Mono",Consolas,monospace; font-size:12px; background:rgba(255,255,255,.08); padding:1px 5px; border-radius:4px}
.pz-facts{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:12px 0}
.pz-facts li{font-size:12px; border:1px solid var(--line2); border-radius:999px; padding:4px 10px; color:#dbe7f5}
.pz-note{font-size:13px; line-height:1.55; color:#c9d6e6; border-left:3px solid var(--c); background:rgba(111,211,255,.07);
  padding:10px 12px; border-radius:0 8px 8px 0; margin:12px 0}
.pz-more{font-size:13px; color:var(--mut); margin:12px 0 0}
.pz-more a{color:var(--c)}
.pz-nav{display:flex; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.js .pz-intro.is-active ~ .pz-nav{display:none}
.pz-intro-play{display:inline-flex; align-items:center; gap:8px; margin:6px 0 14px; border:0; cursor:pointer; border-radius:999px;
  padding:11px 20px; font:700 14px Inter,system-ui,sans-serif; color:#0a1628; background:linear-gradient(135deg,#6fd3ff,#38b6f0);
  box-shadow:0 6px 20px rgba(56,182,240,.35)}
.pz-intro-play:hover{filter:brightness(1.08)}
html:not(.js) .pz-intro-play{display:none}
.pz-intro-list{margin:0 0 12px; padding-left:22px; font-size:13.5px; line-height:1.9}
.pz-intro-list a{color:#dbe7f5; text-decoration:none; border-bottom:1px dashed rgba(111,211,255,.45)}
.pz-intro-list a:hover{color:#fff; border-bottom-color:var(--c)}
.pz-intro-list li::marker{color:var(--c); font-weight:700}
.pz-nav button{flex:1; border:1px solid var(--line2); background:transparent; color:var(--tx); border-radius:10px; padding:9px 8px;
  font:600 12.5px Inter,system-ui,sans-serif; cursor:pointer}
.pz-nav button:hover{border-color:var(--c); color:#fff}

/* statusy — kolory jak w Integratorze */
.st{display:inline-block; font-style:normal; font-size:11px; font-weight:700; line-height:1; padding:4px 8px; border-radius:999px;
  background:#e0e0e0; color:#111; white-space:nowrap; vertical-align:middle}
.st-nowy{background:#19d5e8; color:#000}
.st-ok{background:#4caf50; color:#fff}
.st-wyj{background:#ffeb3b; color:#000}
.st-odr{background:#f44336; color:#fff}

/* =================== MINIATURY ANIMACJI (sc-) =================== */
.pz-scene{position:relative; margin:4px 0 6px; padding:16px; border-radius:14px; background:linear-gradient(160deg,#13284c,#0b1830);
  border:1px solid var(--line); color:#1c2430; font-size:12.5px; overflow:hidden; min-height:200px}
.pz-scene::after{content:"Animacja poglądowa · dane przykładowe"; display:block; margin-top:10px; font:500 10.5px "JetBrains Mono",Consolas,monospace;
  letter-spacing:.6px; color:#7a91b0; text-align:right; grid-column:1/-1; width:100%}
.sc-win,.sc-doc,.sc-cloud,.sc-pay,.sc-col,.sc-tb,.sc-wys .sc-rows{background:#fff; border-radius:10px; box-shadow:0 10px 26px rgba(2,10,24,.35)}
.sc-win{overflow:hidden}
.sc-win-t{background:#13203a; color:#fff; font-weight:600; padding:8px 12px; font-size:12px; display:flex; align-items:center; gap:8px}
.sc-dot{width:8px; height:8px; border-radius:50%; background:var(--g); margin-left:auto; box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.sc-bar{height:5px; background:#e9eef5}
.sc-bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg,#38b6f0,#6fd3ff); transform-origin:left; transform:scaleX(0)}
.sc-rows{padding:4px 10px}
.sc-row{display:grid; grid-template-columns:1.1fr 1fr .9fr auto; gap:8px; align-items:center; padding:7px 2px; border-bottom:1px solid #edf1f6}
.sc-row:last-child{border-bottom:0}
.sc-row span:nth-child(3){text-align:right; font-weight:700}
.sc-foot{font-size:11px; color:#4b5b72; padding:6px 12px 10px}

/* stan „przed” — wszystko, co ma się pojawić */
.sc-ksef .sc-row,.sc-ksef .sc-foot,.sc-dek>*,.sc-dekret tbody tr,.sc-afk .sc-card,.sc-afk .sc-token em,
.sc-akc .sc-pay,.sc-api .sc-res,.sc-api .sc-sys span,.sc-fk .d1b,.sc-fk .d2b,.sc-fk .sc-fk-badge,.sc-wys .sc-opt{opacity:0}

/* --- 1. KSeF --- */
.run .sc-ksef .sc-bar i{animation:sc-grow 1.4s .2s ease-out forwards}
.run .sc-ksef .sc-row{animation:sc-in .45s calc(1.5s + var(--i,0) * .45s) ease-out both}
.sc-ksef .sc-row:nth-child(2){--i:1} .sc-ksef .sc-row:nth-child(3){--i:2} .sc-ksef .sc-row:nth-child(4){--i:3}
.run .sc-ksef .sc-foot{animation:sc-in .4s 3.6s both}

/* --- 2. Dekretacja --- */
.sc-dek{display:flex; flex-direction:column; gap:10px}
.sc-doc{padding:10px 12px}
.sc-doc-h{font-weight:700; color:#13203a; margin-bottom:4px}
.sc-doc-l{font-size:11.5px; color:#4b5b72}
.sc-doc-l b{color:#13203a}
.sc-match{display:flex; align-items:center; gap:8px; color:#e7ecf4; font-size:12px; padding:0 4px}
.sc-match b{color:var(--c)} .sc-match em{margin-left:auto; font-style:normal; color:var(--g); font-weight:700}
.sc-dekret{width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; font-size:11.5px}
.sc-dekret th{background:#13203a; color:#fff; text-align:left; padding:6px 10px; font-weight:600}
.sc-dekret td{padding:6px 10px; border-bottom:1px solid #edf1f6}
.sc-dekret td:nth-child(n+2),.sc-dekret th:nth-child(n+2){text-align:right; font-variant-numeric:tabular-nums}
.sc-vat{color:#bff3d1; font-weight:600; font-size:12px; padding:0 4px}
.run .sc-dek .sc-doc{animation:sc-in .4s .1s both}
.run .sc-dek .sc-match{animation:sc-in .4s 1s both, sc-flash 1s 1.1s}
.run .sc-dek .sc-dekret{animation:sc-in .3s 1.8s both}
.run .sc-dekret tbody tr{animation:sc-in .4s calc(2s + var(--i,0) * .5s) both}
.sc-dekret tbody tr:nth-child(2){--i:1} .sc-dekret tbody tr:nth-child(3){--i:2}
.run .sc-dek .sc-vat{animation:sc-in .4s 3.7s both}

/* --- 3. Wyślij / Synchronizuj / FK --- */
.sc-wys{display:flex; flex-direction:column; gap:10px}
.sc-tb{display:flex; gap:6px; padding:8px; flex-wrap:wrap}
.sc-btn{font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:7px; background:#eef3fa; color:#13203a; border:1px solid #d6e0ea}
.sc-wys .sc-rows{padding:2px 10px}
.sc-wys .sc-row{grid-template-columns:1.2fr .9fr auto; transition:opacity .4s}
.sc-wys .sc-row em{grid-column:3; grid-row:1; justify-self:end}
.sc-wys .s-b,.sc-wys .s-c{opacity:0}
.sc-wys .r2{--i:1} .sc-wys .r3{--i:2} .sc-wys .r4{--i:3}
.run .sc-btn-send{animation:sc-press .6s .5s}
.run .sc-btn-sync{animation:sc-press .6s 2.8s}
.run .sc-btn-fk{animation:sc-press .6s 4.7s}
.run .sc-wys .s-a{animation:sc-out .3s calc(1.1s + var(--i,0) * .12s) forwards}
.run .sc-wys .s-b{animation:sc-in .3s calc(1.1s + var(--i,0) * .12s) both, sc-out .3s calc(3.3s + var(--i,0) * .25s) forwards}
.run .sc-wys .s-c{animation:sc-pop .4s calc(3.3s + var(--i,0) * .25s) both}
.run .sc-wys .r2,.run .sc-wys .r4{animation:sc-dim .4s 5s forwards}
.sc-opt{color:#bff3d1; font-size:12px; font-weight:600; padding:0 4px}
.sc-opt b{color:#fff}
.run .sc-wys .sc-opt{animation:sc-in .4s 5.2s both}

/* --- 4. AF pobiera z KSeF --- */
.sc-afk{display:grid; grid-template-columns:.9fr 1.3fr; gap:12px; align-items:start}
.sc-token{display:flex; align-items:center; gap:10px; background:#fff; border-radius:10px; padding:10px; font-size:11.5px; color:#13203a; position:relative}
.sc-token-i{font-size:20px}
.sc-token em{position:absolute; right:-8px; top:-8px; width:24px; height:24px; border-radius:50%; background:#22c55e; color:#fff; font-style:normal;
  font-weight:800; display:flex; align-items:center; justify-content:center}
.run .sc-afk .sc-token em{animation:sc-pop .4s .9s both}
.sc-cloud{padding:8px}
.sc-cloud-h{font-weight:700; color:#13203a; margin:2px 4px 8px; display:flex; justify-content:space-between}
@property --n{syntax:"<integer>"; inherits:false; initial-value:0}
.sc-cnt{--n:0; counter-reset:n var(--n); background:#19d5e8; border-radius:999px; padding:1px 8px; font-size:0}
.sc-cnt::after{content:counter(n); font-size:11px}
.run .sc-afk .sc-cnt{animation:sc-count 1.4s 1.6s steps(3,end) forwards}
@keyframes sc-count{to{--n:3}}
.sc-card{display:grid; grid-template-columns:1fr 1fr 22px; gap:6px; align-items:center; padding:7px 8px; border:1px solid #e3e9f2; border-radius:8px; margin-bottom:6px}
.sc-qr{width:22px; height:22px; background:
  conic-gradient(#13203a 25%,#fff 0 50%,#13203a 0 75%,#fff 0) 0 0/8px 8px; border:2px solid #13203a; border-radius:2px}
.run .sc-afk .sc-card{animation:sc-drop .45s calc(1.6s + var(--i,0) * .5s) both}
.sc-afk .c2{--i:1} .sc-afk .c3{--i:2}

/* --- 5. Akceptacja i płatności --- */
.sc-akc{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:10px; align-items:start}
.sc-akc > *{min-width:0}
.sc-phone{background:#0b1830; border:3px solid #cbd5e1; border-radius:22px; padding:10px 9px 12px; color:#e7ecf4}
.sc-ph-top{display:flex; justify-content:space-between; font-size:10.5px; font-weight:700; margin:0 4px 8px}
.sc-ph-top span{font-family:"Space Grotesk",Inter,sans-serif}
.sc-ph-card{background:#14264a; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:8px; font-size:11px}
.sc-ph-n{font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:4px}
.sc-ph-k{color:#94a3b8; margin:4px 0 6px} .sc-ph-k b{color:#fff}
.sc-ph-f{color:#94a3b8; margin-top:3px; white-space:nowrap; overflow:hidden}
.sc-type,.sc-type2{display:inline-block; vertical-align:bottom; color:#fff; overflow:hidden; white-space:nowrap; max-width:0}
.run .sc-type{animation:sc-type 1.3s .7s steps(22,end) forwards}
.run .sc-type2{animation:sc-type .8s 2.1s steps(14,end) forwards}
@keyframes sc-type{to{max-width:20ch}}
.sc-swap{display:inline-grid} .sc-swap em{grid-area:1/1; justify-self:end}
.sc-swap .sw-b{opacity:0}
.run .sc-swap .sw-a{animation:sc-out .25s 3.2s forwards}
.run .sc-swap .sw-b{animation:sc-pop .4s 3.2s both}
.sc-ph-btns{display:flex; gap:4px; margin-top:8px}
.sc-ph-btns span{flex:1; text-align:center; font-size:9.5px; font-weight:700; border-radius:7px; padding:6px 2px; border:1px solid rgba(255,255,255,.2)}
.sc-ph-btns .sc-ok{background:#4ade80; color:#06331a; border-color:#4ade80}
.run .sc-ph-btns .sc-ok{animation:sc-press .5s 2.9s}
.sc-pay{padding:9px 10px; font-size:11px}
.sc-pay-r{gap:6px; flex-wrap:wrap}
.sc-pay-h{font-weight:700; color:#13203a; margin-bottom:6px} .sc-pay-h small{color:#6b7a90; font-weight:500}
.sc-pay-r{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:#4b5b72; padding:3px 0}
.sc-pay-r b{color:#13203a}
.sc-pay-bar{height:6px; border-radius:6px; background:#e9eef5; margin:8px 0; overflow:hidden}
.sc-pay-bar i{display:block; height:100%; background:#4caf50; transform-origin:left; transform:scaleX(0)}
.sc-pay-st{display:grid} .sc-pay-st em{grid-area:1/1; justify-self:start}
.sc-pay-st .p2{opacity:0}
.sc-over{border-top:1px solid #edf1f6; margin-top:8px; padding-top:7px}
.run .sc-akc .sc-pay{animation:sc-in .4s 3.7s both}
.run .sc-pay-bar i{animation:sc-grow 1.1s 4.3s ease-in-out forwards}
.run .sc-pay-st .p1{animation:sc-out .25s 5.4s forwards}
.run .sc-pay-st .p2{animation:sc-pop .4s 5.4s both}
.run .sc-pay-kw{animation:sc-strike .3s 5.4s forwards}

/* --- 6. REST API --- */
.sc-api{display:flex; flex-direction:column; gap:10px}
.sc-term{background:#050c18; border-radius:10px; border:1px solid rgba(196,161,255,.35); overflow:hidden}
.sc-term-h{display:flex; align-items:center; gap:5px; font:500 10.5px "JetBrains Mono",Consolas,monospace; color:#7a91b0; padding:6px 10px; background:#0d1a30}
.sc-term-h i{width:8px; height:8px; border-radius:50%; background:#f87171} .sc-term-h i:nth-child(2){background:#facc15} .sc-term-h i:nth-child(3){background:#4ade80; margin-right:6px}
.sc-term-b{margin:0; padding:10px 12px; font:12px/1.55 "JetBrains Mono",Consolas,monospace; color:#d9e6f5; white-space:pre-wrap; word-break:break-all}
.sc-cmd{display:block; color:#e3d4ff; clip-path:inset(0 100% 0 0)}
.run .sc-cmd{animation:sc-reveal 1.8s .3s steps(36,end) forwards}
@keyframes sc-reveal{to{clip-path:inset(0 0 0 0)}}
.sc-res{display:block; margin-top:8px; color:#bff3d1} .sc-res b{color:#4ade80}
.run .sc-api .sc-res{animation:sc-in .4s 2.4s both}
.sc-sys{display:flex; flex-wrap:wrap; gap:6px}
.sc-sys span{font-size:11px; font-weight:600; color:#e3d4ff; background:rgba(196,161,255,.14); border:1px solid rgba(196,161,255,.35); border-radius:999px; padding:4px 9px}
.run .sc-api .sc-sys span{animation:sc-pop .35s calc(3.1s + var(--i,0) * .18s) both}
.sc-sys span:nth-child(2){--i:1}.sc-sys span:nth-child(3){--i:2}.sc-sys span:nth-child(4){--i:3}
.sc-sys span:nth-child(5){--i:4}.sc-sys span:nth-child(6){--i:5}.sc-sys span:nth-child(7){--i:6}.sc-sys span:nth-child(8){--i:7}
.sc-cap{font-size:10.5px; color:#7a91b0}

/* --- 7. Symfonia FK --- */
.sc-fk{display:grid; grid-template-columns:1fr 26px 1fr; gap:8px; align-items:start}
.sc-col{padding:8px; min-height:120px}
.sc-col-h{font-weight:700; color:#13203a; margin:2px 4px 8px; font-size:12px}
.sc-col-ok .sc-col-h{color:#116b33}
.sc-fkd{border:1px solid #e3e9f2; border-radius:8px; padding:6px 8px; margin-bottom:6px; font-weight:700; color:#13203a; font-size:11.5px}
.sc-fkd small{display:block; font-weight:500; color:#6b7a90; font-size:10.5px; margin-top:2px}
.sc-col-ok .sc-fkd{background:#eaf6ee; border-color:#b7dfc4}
.sc-arrow{align-self:center; color:var(--g); font-size:20px; font-weight:800; text-align:center}
.sc-fk-badge{position:absolute; right:22px; top:10px; background:#4caf50; color:#fff; font-weight:800; border-radius:6px; padding:3px 8px; font-size:12px}
.run .sc-fk .d1{animation:sc-away .5s 1.3s forwards}
.run .sc-fk .d1b{animation:sc-in .45s 1.7s both}
.run .sc-fk .d2{animation:sc-away .5s 2.6s forwards}
.run .sc-fk .d2b{animation:sc-in .45s 3s both}
.run .sc-fk .sc-fk-badge{animation:sc-pop .45s 3.8s both}

/* --- klatki wspólne --- */
@keyframes sc-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes sc-out{to{opacity:0}}
@keyframes sc-pop{0%{opacity:0; transform:scale(.6)} 70%{opacity:1; transform:scale(1.12)} 100%{opacity:1; transform:scale(1)}}
@keyframes sc-drop{from{opacity:0; transform:translateY(-14px)} to{opacity:1; transform:none}}
@keyframes sc-grow{to{transform:scaleX(1)}}
@keyframes sc-press{0%,100%{transform:scale(1)} 40%{transform:scale(.9); background:#38b6f0; color:#fff}}
@keyframes sc-flash{50%{filter:drop-shadow(0 0 8px rgba(111,211,255,.9))}}
@keyframes sc-dim{to{opacity:.4}}
@keyframes sc-away{to{opacity:0; transform:translateX(30px)}}
@keyframes sc-strike{to{text-decoration:line-through; color:#94a3b8}}

/* ---------- wąskie ekrany: scena u góry, panel pod nią ---------- */
@media (max-width:1100px){
  .js .pz.is-open{grid-template-columns:minmax(0,1fr); grid-template-areas:"stage" "dock" "panel"; grid-template-rows:auto auto auto}
  .pz{height:auto; grid-template-rows:auto auto}
  .pz-stage-wrap{container-type:inline-size}
  .pz-stage{width:100%}
  .pz-panel{border-left:0; border-top:1px solid var(--line); overflow:visible}
}
@media (max-width:560px){
  .pz-stage-wrap{padding:8px 6px 2px}
  .pz-dock{flex-wrap:wrap; padding:8px 10px 12px}
  .pz-play{width:100%; justify-content:center}
  .pz-panel{padding:18px 14px}
  .sc-afk,.sc-akc{grid-template-columns:1fr}
}

/* ---------- tryb karty społecznościowej (?og=1) ---------- */
.pg-og .pz-dock,.pg-og .pz-panel{display:none !important}

@media (prefers-reduced-motion:reduce){
  .pz *, .pz *::before, .pz *::after{animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition:none !important}
  .pz-api-list > span{animation:none !important}
}