/* Frontend styles for Document Collector - minimal modern design */
:root{
  --dc-grad-start:#667eea;
  --dc-grad-end:#764ba2;
  --dc-bg:#f7fafc;
}
body .dc-card{ background:var(--dc-bg); border-radius:10px; box-shadow:0 4px 6px rgba(0,0,0,0.1); padding:18px; max-width:720px; margin:20px auto; }
.dc-card-header h2{ margin:0 0 12px 0; font-family:Arial,Helvetica,sans-serif }
.dc-card-body label{ display:block; margin-top:10px; font-weight:600 }
.dc-card-body input[type=text]{ width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0; margin-top:6px }
.dc-dropzone{ border:1px dashed rgba(102,126,234,0.4); border-radius:10px; padding:12px; margin-top:8px; background:#fff }
.dc-dropzone.dragover{ box-shadow:0 6px 12px rgba(102,126,234,0.12); }
.dc-dropzone-inner{ display:flex; align-items:center; gap:12px }
.dc-icon{ width:0; height:0; display:inline-block }
.dc-icon-doc{ display:none }
.dc-icon-photo{ display:none }
.dc-help{ color:#6b7280; margin:0 }
.dc-previews{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }
.dc-preview-item{ width:120px; background:#fff; padding:6px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.06); position:relative }
.dc-preview-item img{ width:100%; height:80px; object-fit:cover; border-radius:6px }
.dc-remove-file{ position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.08); color:#111827; border:none; border-radius:6px; padding:4px 6px; font-size:12px }
.dc-actions{ margin-top:14px; display:flex; gap:12px; align-items:center }
.dc-btn{ padding:10px 18px; border-radius:10px; border:none; cursor:pointer; transition:all 0.3s ease; font-weight:600 }
.dc-btn-primary{ background:linear-gradient(90deg,var(--dc-grad-start),var(--dc-grad-end)); color:#fff; box-shadow: 0 6px 18px rgba(102,126,234,0.18) }
.dc-btn{ background:#eef2ff; color:#1f2937 }
.dc-btn.loading{ opacity:0.8 }
.dc-status{ margin-left:8px; color:#334155 }
.dc-status.success{ color:green }
.dc-status.error{ color:red }

@media(max-width:600px){ .dc-card{ margin:12px } .dc-preview-item{ width:80px } }

/* subtle transitions */
.dc-card, .dc-dropzone, .dc-preview-item, .dc-btn{ transition: box-shadow .28s ease, transform .18s ease }
.dc-card:hover{ transform: translateY(-2px) }