/* pv-app-screenshots.css — Screenshot Modal & Lightbox */

.pv-ss-backdrop { position: fixed; inset: 0; background: var(--overlay-bg); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-5); backdrop-filter: blur(4px); }

.pv-ss-modal { background: var(--bg2); border: 1px solid var(--border-active); border-radius: var(--radius-lg); width: 100%; max-width: 780px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }

.pv-ss-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); flex-shrink: 0; }

.pv-ss-modal-title { font-family: var(--font-mono); font-size: 12px; color: var(--text2); letter-spacing: 0.08em; text-transform: uppercase; }
.pv-ss-modal-title span { color: var(--accent); }

.pv-ss-modal-close { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg3); color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all var(--transition-fast); }
.pv-ss-modal-close:hover { border-color: var(--red); color: var(--red); }

.pv-ss-modal-body { flex: 1; overflow-y: auto; padding: var(--space-4); }

.pv-ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }

.pv-ss-item { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }

.pv-ss-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer; }
.pv-ss-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--transition-fast); }
.pv-ss-img-wrap:hover img { opacity: 0.85; }

.pv-ss-zoom-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-fast); font-size: 20px; }
.pv-ss-img-wrap:hover .pv-ss-zoom-hint { opacity: 1; }

.pv-ss-footer { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; gap: 6px; }
.pv-ss-name { font-family: var(--font-mono); font-size: 9px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.pv-ss-delete-btn { font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--red); cursor: pointer; transition: all var(--transition-fast); text-transform: uppercase; }
.pv-ss-delete-btn:hover { background: color-mix(in srgb, var(--red) 18%, transparent); border-color: var(--red); }
.pv-ss-delete-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pv-ss-empty { text-align: center; padding: var(--space-7); color: var(--text3); font-family: var(--font-mono); font-size: 12px; }

.pv-lightbox { position: fixed; inset: 0; background: var(--overlay-heavy); z-index: var(--z-toast); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.pv-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: var(--radius-sm); object-fit: contain; }