/* ===========================================================
   Modal / Drawer / Overlay
   =========================================================== */
.xpc-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.xpc-modal.open { display: block; }
.xpc-modal__mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: xpcFade .2s ease; }
.xpc-modal__box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px);
  background: var(--c-panel); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.25); animation: xpcPop .22s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column;
}
.xpc-modal__box.wide { width: 560px; }
.xpc-modal__box.xl { width: 720px; }
.xpc-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--color-border); }
.xpc-modal__head h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); }
.xpc-modal__body { padding: 22px; overflow-y: auto; }
.xpc-modal__foot { padding: 14px 22px; border-top: 1px solid var(--color-border); display: flex; gap: 10px; justify-content: flex-end; }
.xpc-modal__close { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.xpc-modal__close:hover { background: var(--color-surface-2); color: var(--color-text); }
@keyframes xpcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xpcPop { from { opacity: 0; transform: translate(-50%,-46%) scale(.96); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* Share row */
.share-row { display: flex; gap: 14px; }
.share-row a { width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; color: var(--color-text-strong); font-size: var(--fs-xs); }
.share-row a:hover { background: var(--color-primary-bg); color: var(--color-primary); }

/* QR modal */
.qr-box { width: 200px; height: 200px; margin: 0 auto; background: var(--c-panel); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); }

/* Drawer (right side) */
.xpc-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw; background: var(--c-panel); z-index: var(--z-modal); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.3,1); box-shadow: -8px 0 30px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.xpc-drawer.open { transform: translateX(0); }
.xpc-drawer__head { padding: 18px 20px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.xpc-drawer__body { padding: 20px; overflow-y: auto; flex: 1; }