/* 343: Peek-popover */
.lx-peek {
    position: absolute; z-index: 9998;
    background: var(--lx-surface, #fff); color: inherit;
    border: 1px solid var(--lx-border, rgba(0,0,0,.08)); border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
    width: 100%; max-width: 480px;
    animation: lx-peek-in 160ms ease;
}
:root[data-theme="dark"] .lx-peek { background: #171717; border-color: rgba(255,255,255,.10); }
.lx-peek[hidden] { display: none; }
.lx-peek-content { padding: 16px 18px; font-size: 14px; }
.lx-peek-close { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; font-size: 20px; cursor: pointer; color: inherit; opacity: .5; }
.lx-peek-close:hover { opacity: 1; }
.lx-peek-arrow { position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: inherit; border-top: 1px solid var(--lx-border, rgba(0,0,0,.08)); border-left: 1px solid var(--lx-border, rgba(0,0,0,.08)); }
.lx-peek-error { color: #e11d48; padding: 12px 0; text-align: center; }
@keyframes lx-peek-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
    .lx-peek--sheet { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; max-width: none; border-radius: 14px 14px 0 0; }
    .lx-peek--sheet .lx-peek-arrow { display: none; }
}