#image-exif-reader { color:#182b45; }
.exif-reader { overflow:hidden; border:1px solid #dfe6ef; border-radius:16px; background:#fff; box-shadow:0 8px 28px rgba(31,55,88,.06); }
.exif-upload { padding:20px 22px; border-bottom:1px solid #e3e9f0; background:#f6f9fd; }
.exif-label { margin:0 0 7px; color:#43536a; font-size:13px; font-weight:700; }
.exif-dropzone { display:flex; min-height:72px; align-items:center; gap:13px; padding:13px 16px; border:2px dashed #a9bdd5; border-radius:11px; background:#fff; color:#52657d; transition:border-color .15s,background .15s,transform .15s; cursor:pointer; }
.exif-dropzone:hover,.exif-dropzone.is-dragging { border-color:#2563eb; background:#f0f6ff; }
.exif-dropzone.is-dragging { transform:scale(.995); }
.exif-dropzone>.material-icons { color:#2563eb; font-size:32px; }
.exif-dropzone-copy { display:grid; min-width:0; }
.exif-dropzone-copy strong { color:#1e3a5f; font-size:14px; }
.exif-dropzone-copy small { color:#718096; font-size:12px; }
.exif-dropzone:focus-within { outline:3px solid rgba(37,99,235,.22); outline-offset:2px; }
.exif-file-name { overflow:hidden; margin:6px 0 0; color:#64748b; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.exif-workspace { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr); min-height:360px; }
.exif-preview-panel,.exif-results-panel { min-width:0; padding:22px; }
.exif-preview-panel { border-inline-end:1px solid #e3e9f0; background:#fbfcfe; }
.exif-panel-heading { display:flex; min-height:49px; align-items:flex-start; justify-content:space-between; gap:12px; }
.exif-panel-heading h2 { margin:1px 0 0; font-size:18px; }
.exif-eyebrow { margin:0; color:#2563eb; font-size:10px; font-weight:800; letter-spacing:.12em; }
#exif-status { color:#087f5b; font-size:12px; font-weight:650; text-align:end; }
#exif-status.is-error { color:#b42332; }
.exif-thumbnail-wrap { position:relative; display:grid; min-height:260px; place-items:center; overflow:hidden; border:2px dashed #cbd6e3; border-radius:11px; background:#eef2f7; transition:border-color .15s,background .15s; }
.exif-thumbnail-wrap.is-dragging { border-color:#2563eb; background:#e8f1ff; }
.exif-thumbnail-wrap img { display:block; width:100%; max-height:420px; object-fit:contain; }
.exif-thumbnail-wrap:not(.has-image) img { display:none; }
.exif-thumbnail-placeholder { display:grid; place-items:center; gap:5px; padding:20px; color:#7a8798; font-size:12px; text-align:center; }
.exif-thumbnail-placeholder .material-icons { font-size:35px; }
.exif-thumbnail-wrap.has-image .exif-thumbnail-placeholder { display:none; }
.exif-details { overflow:auto; max-height:520px; border:1px solid #dfe6ef; border-radius:10px; }
.exif-empty { margin:0; padding:32px 20px; color:#718096; font-size:13px; text-align:center; }
.exif-alert { margin:14px; padding:12px 14px; border:1px solid #f0d58a; border-radius:8px; background:#fff8df; color:#745300; font-size:13px; }
.exif-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.exif-table th,.exif-table td { padding:9px 12px; border-bottom:1px solid #e6ebf1; vertical-align:top; font-size:12px; text-align:start; overflow-wrap:anywhere; }
.exif-table th { width:38%; background:#f5f8fc; color:#43536a; font-weight:700; }
.exif-table td { color:#263a55; }
.exif-table tr:last-child th,.exif-table tr:last-child td { border-bottom:0; }
.exif-privacy { display:flex; align-items:flex-start; gap:7px; margin:18px 0 0; padding:14px 16px; border:1px solid #dce6f2; border-radius:10px; background:#f7faff; color:#52657d; font-size:13px; }
.exif-privacy .material-icons { flex:0 0 auto; margin-top:1px; color:#2563eb; font-size:17px; }

@media (max-width:760px) {
  .exif-upload { padding:16px; }
  .exif-workspace { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); min-height:300px; }
  .exif-preview-panel,.exif-results-panel { padding:16px; }
  .exif-thumbnail-wrap { min-height:210px; }
  .exif-details { max-height:430px; }
}
@media (max-width:560px) {
  .exif-workspace { grid-template-columns:1fr; }
  .exif-preview-panel { border-inline-end:0; border-bottom:1px solid #e3e9f0; }
  .exif-thumbnail-wrap { min-height:180px; }
  .exif-thumbnail-wrap img { max-height:300px; }
  .exif-details { max-height:420px; }
  .exif-dropzone { min-height:64px; padding:10px 12px; }
  .exif-dropzone>.material-icons { font-size:28px; }
}