.image-viewer-app { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #101522; }
.image-viewer-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 13px; color: #ecf0ff; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(10,14,25,.92); }
.image-viewer-toolbar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.image-viewer-toolbar > div { display: flex; align-items: center; gap: 5px; }
.image-viewer-toolbar button, .image-viewer-toolbar a { min-height: 31px; display: grid; place-items: center; padding: 0 10px; border: 0; border-radius: 7px; color: #e8edff; text-decoration: none; background: rgba(255,255,255,.09); font: inherit; font-size: 11px; }
.image-viewer-toolbar button:first-child, .image-viewer-toolbar button:nth-child(3) { width: 31px; padding: 0; }
.image-viewer-toolbar button .icon { width: 15px; height: 15px; }
.image-viewer-toolbar output { min-width: 48px; color: #b9c2dc; text-align: center; font-size: 11px; }
.image-viewer-canvas { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: auto; padding: 24px; color: #aeb8d2; background-image: radial-gradient(circle at 50% 35%, rgba(91,112,174,.16), transparent 44%); }
.image-viewer-canvas img { display: block; max-width: none; transform-origin: center; box-shadow: 0 18px 55px rgba(0,0,0,.36); }
.image-viewer-canvas[data-fit="true"] img { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-viewer-error { text-align: center; }
.image-viewer-error h2 { margin: 0 0 7px; color: #f1f3ff; }
.image-viewer-error p { margin: 0; }
@media (max-width: 600px) { .image-viewer-toolbar > span, .image-viewer-toolbar a { display: none; } .image-viewer-toolbar { justify-content: center; } }