/* The supplied card keeps its own Shadow DOM styles; only its host is sized. */
.bag-item { cursor: zoom-in; }
.bag-item .id-card-content { display: block; background: none; border: 0; border-radius: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.3); }
.bag-item:hover .id-card-content, .bag-item:focus-visible .id-card-content { transform: translateY(-6px); box-shadow: none; }
.id-card-content > vivi-id-card { width: 100%; pointer-events: none; }
.bag-item.is-out .id-card-content { visibility: hidden; }
.item-placeholder { display: block; width: 100%; aspect-ratio: 85.6 / 54; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px 16px; visibility: hidden; pointer-events: none; color: #f1ebdd; }
.lightbox.is-active { visibility: visible; pointer-events: auto; }
.lightbox .veil { position: absolute; inset: 0; background: rgba(12,12,12,.55); opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: opacity .45s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease; }
.lightbox.on .veil { opacity: 1; -webkit-backdrop-filter: blur(16px) saturate(.8); backdrop-filter: blur(16px) saturate(.8); }
.lightbox-stage { position: relative; display: grid; justify-items: center; gap: 22px; width: var(--open-w); }
.lightbox-stage > vivi-id-card { display: block; width: 100%; transform-origin: 50% 50%; will-change: transform; }
.lightbox-hint { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; max-width: calc(100vw - 32px); margin: 0; color: #8c8a85; font: 10px/1.5 var(--mono); letter-spacing: .06em; text-align: center; opacity: 0; transition: opacity .3s; }
.lightbox-hint span { white-space: nowrap; }
.lightbox-hint b { color: #f1ebdd; font-weight: 500; }
.lightbox.on.settled .lightbox-hint { opacity: 1; }
.lightbox-close { position: absolute; z-index: 2; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); width: 40px; height: 40px; padding: 0; border: 1px solid rgba(241,235,221,.35); border-radius: 50%; background: rgba(20,19,18,.5); color: #f1ebdd; font: 20px/1 var(--mono); opacity: 0; transition: opacity .3s; }
.lightbox.on .lightbox-close { opacity: 1; }
.lightbox-close:focus-visible { outline: 2px solid #f1ebdd; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bag-item .id-card-content, .lightbox .veil, .lightbox-hint, .lightbox-close { transition: none; } }