:host { display: inline-block; }
.hb-image { position: relative; display: inline-flex; overflow: hidden; background: var(--hb-color-fill-quaternary); }
.hb-image__inner { width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }
.hb-image__inner--loaded { opacity: 1; }
.hb-image__error { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--hb-font-size-sm); color: var(--hb-color-text-secondary); }
.hb-image__preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }
.hb-image__preview-img { max-width: 90%; max-height: 90%; object-fit: contain; }
