#okPv{
  position:fixed; inset:0; z-index:12000; display:none;
  background:#2b2740;
  overflow:auto;
}
#okPv.open{ display:block; }
#okPv .okpv-stage{
  min-width:100%; min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
#okPv.real .okpv-stage{ padding:24px; align-items:flex-start; }
#okPv .okpv-sheet{
  transform-origin:center center;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  flex:none;
}
#okPv.real .okpv-sheet{ transform:none !important; }

#okPvBar{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:12010; display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:16px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border:1px solid rgba(43,39,64,.10);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  font-family:var(--cs-font);
}
#okPvBar button{
  border:1px solid rgba(43,39,64,.09); border-radius:11px; cursor:pointer;
  padding:9px 15px; font-family:var(--cs-font); font-weight:800; font-size:12.5px;
  background:linear-gradient(180deg,#ffffff,#eeebf8);
  color:var(--ok-ink);
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 #ddd9ec;
  transition:transform .1s, filter .1s;
}
#okPvBar button:hover{ filter:brightness(1.03); }
#okPvBar button:active{ transform:translateY(2px); box-shadow:inset 0 1px 0 #fff, 0 1px 0 #ddd9ec; }
#okPvBar button.on{
  background:linear-gradient(180deg,#fff3d2,#ffd98a);
  color:var(--gel-gold-ink); box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 3px 0 var(--gel-gold-rim);
}
#okPvBar .okpv-note{
  font-size:11px; font-weight:700; color:var(--ok-ink-faint);
  max-width:230px; line-height:1.35; padding:0 4px;
}
#okPvClose{ background:linear-gradient(180deg,#fff1f3,#ffd2da) !important; color:var(--gel-rose-ink) !important;
            box-shadow:inset 0 1px 0 #fff, 0 3px 0 var(--gel-rose-rim) !important; }

#okPvBtns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
@media print{ #okPv, #okPvBar{ display:none !important; } }