/* Visualizador: página ativa à esquerda, lista nomeada à direita. */
.pp-browser{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(240px,.72fr);
  gap:16px;align-items:stretch;min-width:0
}
.pp-stage{min-width:0}
.pp-view{
  position:relative;overflow:hidden;overscroll-behavior:contain;
  width:100%;height:min(70vh,640px);min-height:360px;
  border-radius:18px;background:#0D0D0D;
  border:1px solid rgba(255,255,255,.08)
}
.pp-track{
  position:absolute;left:0;top:0;width:100%
}
.pp-track.is-ready{
  animation:ppPagePan var(--pan-time, 14s) linear infinite paused;
  will-change:transform
}
.pp-slide{
  display:block;width:100%;height:auto;max-width:none;
  object-fit:unset;object-position:top center;background:#0D0D0D
}
.pp-track:has(video){height:100%}
video.pp-slide{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
.pp-side{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  background:#101010;border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:16px
}
.pp-side h3{
  margin:0;color:#fff;font-size:22px;letter-spacing:-.4px;
  overflow-wrap:anywhere
}
.pp-list{
  display:grid;gap:8px;overflow:auto;max-height:min(42vh,360px);padding-right:2px
}
.pp-media-strip{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;
  overflow:auto;max-height:min(28vh,220px);padding-right:2px
}
.pp-media-strip.is-single{display:none}
.pp-media-thumb{
  padding:0;border:1px solid transparent;border-radius:12px;background:transparent;cursor:pointer
}
.pp-media-thumb img,.pp-media-thumb .pp-ph{
  width:100%;aspect-ratio:1;object-fit:cover;object-position:center;
  border-radius:10px;background:#1a1815;display:block
}
.pp-media-thumb.is-active{
  border-color:#D4AF7C;
  box-shadow:0 0 0 1px rgba(212,175,124,.35)
}
.pp-item{
  display:grid;grid-template-columns:54px auto minmax(0,1fr);gap:10px;align-items:center;
  width:100%;padding:6px;border-radius:12px;border:1px solid transparent;
  background:transparent;color:#F7F3EA;text-align:left;cursor:pointer
}
.pp-item img,.pp-ph{
  width:54px;height:40px;object-fit:contain;object-position:top center;
  border-radius:8px;background:#1a1815;display:block
}
.pp-tags{display:flex;flex-wrap:wrap;gap:6px}
.pp-tags span{
  font-size:10px;letter-spacing:.3px;font-weight:700;color:rgba(247,243,234,.72);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:5px 10px
}
.pp-num{color:#D4AF7C;font-size:12px;font-weight:800}
.pp-name{font-size:14px;font-weight:650;overflow-wrap:anywhere}
.pp-item.is-active{
  border-color:#D4AF7C;
  box-shadow:0 0 0 1px rgba(212,175,124,.35);
  background:rgba(212,175,124,.08)
}
.pp-missing{
  margin:0 auto;width:min(100%,420px);padding:24px 18px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(247,243,234,.7);font-size:14px;line-height:1.5
}
.pp-side .pp-actions{margin-top:auto}
.pp-side .pf-card-meta{margin:0}
.pp-side p{margin:0;color:rgba(247,243,234,.62);font-size:14px;line-height:1.5}
@media (hover:hover) and (pointer:fine){
  .pp-stage:hover .pp-track.is-ready{animation-play-state:running}
}
.pp-stage.is-touching .pp-track.is-ready{animation-play-state:running}
@keyframes ppPagePan{
  0%{transform:translate3d(0,0,0)}
  68%{transform:translate3d(0,calc(var(--pan, 0px) * -1),0)}
  78%{transform:translate3d(0,calc(var(--pan, 0px) * -1),0)}
  100%{transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .pp-track{animation:none}
}
@media (max-width:860px){
  .pp-browser{grid-template-columns:minmax(0,1fr)}
  .pp-view{height:52vh;min-height:240px}
  video.pp-slide{max-height:52vh}
  .pp-list{max-height:none}
  .pp-view{
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-y:auto;touch-action:pan-y
  }
  .pp-track{position:relative;transform:none}
  .pp-track.is-ready{animation:none;will-change:auto}
  .pp-track:has(video){position:absolute}
}

.pp-modal{
  position:fixed;inset:0;z-index:90;
  display:grid;place-items:center;padding:24px
}
.pp-modal[hidden]{display:none !important}
.pp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.pp-card{
  position:relative;z-index:1;width:min(1080px,100%);max-height:min(92vh,900px);
  overflow:auto;border-radius:24px;background:#141414;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.45);padding:18px
}
.pp-close{
  position:absolute;top:14px;right:14px;z-index:2;
  appearance:none;border:0;background:rgba(13,13,13,.7);color:#F7F3EA;
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px
}