/* Shared screenshot previews */
.image-preview-button { display: block; position: relative; width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; color: white; font: inherit; cursor: zoom-in; }
.image-preview-hint { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 5px; background: #071116e6; font-size: 22px; line-height: 1; }
.image-preview-button:hover .image-preview-hint { background: #075c4b; }
body.image-dialog-open { overflow: hidden; }
.image-dialog { width: fit-content; max-width: 96vw; max-height: 94dvh; padding: 0; border: 1px solid #40545f; border-radius: 12px; background: #0d1b23; color: var(--ink); box-shadow: 0 24px 80px #0008; }
.image-dialog::backdrop { background: #02080de6; }
.image-dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 10px 12px; contain: inline-size; border-bottom: 1px solid var(--line); }
.image-dialog-toolbar h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.5; }
.image-dialog-close { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #203641; color: white; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.image-dialog-body { padding: 0; line-height: 0; }
.image-dialog-body img { display: block; width: auto; height: auto; max-width: calc(96vw - 2px); max-height: calc(94dvh - 66px); margin: 0; }
@media (max-width: 480px) { .image-dialog-toolbar { padding: 12px; } .image-dialog-toolbar h2 { font-size: 14px; } }