/* ===================== image.css ===================== */

.image-modal-content {
  max-width: 92vw; max-height: 92vh; width: auto;
  margin: 4% auto; display: flex; flex-direction: column;
  background: #1a1a2e;
}
.image-modal-header { background: #1a1a2e; border-bottom: 1px solid rgba(255,255,255,0.1); }
.image-modal-header h3 { color: var(--border); }
.image-modal-header .close { color: var(--text-secondary); }
.image-modal-header .close:hover { color: var(--text-primary); }

.image-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.image-tool-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s;
}
.image-tool-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); }
.image-zoom-label { color: var(--text-secondary); font-size: 13px; min-width: 44px; text-align: center; }

.image-body {
  flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#2d2d42 0% 25%, #252538 0% 50%) 0 0 / 20px 20px;
  min-height: 300px; padding: 20px; position: relative;
}
#imageDisplay {
  max-width: 100%; max-height: 70vh;
  object-fit: contain; transition: transform 0.2s ease;
  transform-origin: center center;
  border-radius: 4px;
}

.image-footer {
  padding: 8px 16px; background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.img-info-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.img-info-item i { color: #805ad5; font-size: 12px; }
.img-info-loading { color: var(--text-secondary); font-size: 13px; }
.img-info-error { color: #fc8181; font-size: 13px; }

@keyframes imgFadeIn { from { opacity: 0; } to { opacity: 1; } }
#imageDisplay { animation: imgFadeIn 0.3s ease; }