/* ============================================================
   Lightbox (10b) + porównanie A/B. Tokeny w tokens.css.
   ============================================================ */
.lightbox{position:fixed;inset:0;background:rgba(4,6,9,.93);z-index:100;display:flex;flex-direction:column}
.lightbox .lb-top{display:flex;align-items:center;gap:14px;padding:14px 24px;background:linear-gradient(180deg,rgba(4,6,9,.9),rgba(4,6,9,0))}
.lightbox .lb-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 60px}
.lightbox .lb-stage img{max-width:100%;max-height:100%;border:1px solid var(--border-chip);border-radius:var(--radius-3)}
.lightbox .lb-bottom{display:flex;align-items:center;gap:16px;padding:16px 24px;background:linear-gradient(0deg,rgba(4,6,9,.92),rgba(4,6,9,0))}
.lb-key{font:600 var(--font-size-sm) var(--font-mono);color:var(--text-secondary);border:1px solid var(--border-chip);border-radius:4px;padding:3px 8px;cursor:pointer;background:transparent}
.lb-key.is-active{color:var(--on-accent);background:var(--accent);border-color:var(--accent-border)}
/* przycisk „i": miękki akcent w obu stanach (plansza 10b), nie pełny fill */
#lb-info-btn,#lb-info-btn.is-active{color:var(--accent-soft);background:var(--accent-dim-bg);border-color:var(--border-field-hover)}
.lb-info{position:absolute;right:24px;top:64px;width:262px;background:var(--surface-2);border:1px solid var(--border-chip);border-radius:var(--radius-4);padding:16px 18px;box-shadow:0 20px 50px rgba(0,0,0,.6);z-index:5}
.lb-info .li-row{display:flex;justify-content:space-between;margin-top:7px;font-size:var(--font-size-sm)}
.lb-info .section-label + .li-row{margin-top:12px}
.lb-info .li-row .v{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-soft)}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;color:var(--text-tertiary);cursor:pointer;background:none;border:none;padding:6px 10px;z-index:6}
.lb-arrow:hover{color:var(--text-primary)}
.lb-arrow.prev{left:14px}
.lb-arrow.next{right:14px}
/* panel „i" otwarty: odsuń scenę i strzałkę „następny", by się nie nakładały */
.lightbox.has-info .lb-stage{padding-right:310px}
.lightbox.has-info .lb-arrow.next{right:300px}