#image-preview {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 64px 24px 48px;
    border: 0;
    background: transparent;
    color: #fff;
    box-sizing: border-box;
    cursor: zoom-out;
}
#image-preview[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
#image-preview::backdrop { background: rgb(0 0 0 / 90%); }
#image-preview-image { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
#image-preview-hint { margin: 0; flex-shrink: 0; font-size: 13px; text-align: center; color: #ddd; }
.image-preview-close { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; padding: 0; border: 1px solid #777; border-radius: 50%; background: #191919; color: #fff; font: 32px/1 sans-serif; cursor: pointer; }
.image-preview-close:hover { background: #333; }
.image-preview-close:focus-visible { outline: 3px solid var(--accent, #c4ef80); outline-offset: 4px; }
@media (max-width: 600px) { #image-preview { padding: 64px 8px 24px; } }