/* WordPress-safe ID-prefixed CSS (exif_) */
:root{
  --accent1:#6366f1; --accent2:#ef4444; --bg:linear-gradient(135deg,#fef3c7, #eef2ff);
  --card:#ffffff; --muted:#6b7280;
  --success:#16a34a; --danger:#dc2626;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}

html,body{height:100%;margin:0;background:var(--bg);color:#0f172a}
#exif_header{max-width:1100px;margin:18px auto;padding:12px;border-radius:10px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;text-align:center}
#exif_title{margin:0;font-size:20px}#exif_sub{margin:4px 0 0;font-size:13px;opacity:0.95}

#exif_app{max-width:1100px;margin:12px auto;display:grid;grid-template-columns:420px 1fr;gap:16px;padding:0 12px}
@media(max-width:920px){#exif_app{grid-template-columns:1fr}}

#exif_left,#exif_right{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 8px 28px rgba(2,6,23,0.06)}
#exif_drop{border:2px dashed rgba(99,102,241,0.16);padding:14px;border-radius:8px;text-align:center;cursor:pointer}
#exif_drop.ssj_drag{background:rgba(99,102,241,0.03)}
#exif_hint{font-size:13px;color:var(--muted);margin-top:8px}

#exif_controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#exif_controls button{padding:9px 10px;border-radius:8px;border:0;background:linear-gradient(90deg,var(--accent1),#8b5cf6);color:#fff;cursor:pointer;font-weight:600}
#exif_controls button:nth-child(2){background:transparent;border:1px solid rgba(0,0,0,0.06);color:#111}

#exif_filelist{margin-top:12px;max-height:56vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:6px}
.exif_item{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:8px;background:linear-gradient(180deg,#fff,#fbfbff);box-shadow:0 2px 8px rgba(2,6,23,0.04)}
.exif_thumb{width:86px;height:86px;border-radius:8px;object-fit:cover;background:#f3f4f6}
.exif_meta_wrap{flex:1}
.exif_meta_title{margin:0;font-size:14px}
.exif_meta_text{font-size:13px;color:var(--muted);margin-top:6px}
.exif_item_buttons{display:flex;flex-direction:column;gap:8px;align-items:flex-end}

#exif_preview_area{display:flex;gap:12px;align-items:flex-start}
#exif_preview_img{width:160px;height:160px;object-fit:cover;border-radius:8px;background:#f3f4f6}
#exif_preview_meta{flex:1;font-size:13px;color:var(--muted)}

#exif_actions{display:flex;gap:8px;margin-top:12px}
#exif_actions button{padding:10px;border-radius:8px;border:0;background:linear-gradient(90deg,#10b981,#06b6d4);color:#fff;cursor:pointer}

#exif_left_progress,#exif_right_progress{margin-top:12px;display:flex;align-items:center;gap:12px}
#exif_left_fill,#exif_right_fill{height:10px;background:linear-gradient(90deg,#00c6ff,#0072ff);border-radius:999px;width:0%;transition:width 300ms ease, background 300ms}
#exif_left_text,#exif_right_text{font-size:13px;color:var(--muted)}

.exif_msg{font-weight:700;margin-top:10px;opacity:0;transition:opacity 300ms}
.exif_msg.show{opacity:1}

@media(max-width:600px){
  .exif_item{flex-direction:column;align-items:center}
  #exif_preview_img{width:120px;height:120px}
}