.file-dropzone-field { position: relative; margin-bottom: 10px; }
.file-dropzone-field > input[type="file"] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0 !important; overflow: hidden !important; }
.file-dropzone-label { display: flex; min-height: 116px; align-items: center; justify-content: center; gap: 14px; padding: 18px; border: 2px dashed #d0d5dd; border-radius: 8px; background: #f9fafb; color: #475467; cursor: pointer; text-align: left; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.file-dropzone-label:hover,.file-dropzone-field.is-dragging .file-dropzone-label { border-color: #d99a18; background: #fffaf0; box-shadow: 0 0 0 3px rgba(217,154,24,.1); }
.file-dropzone-field.has-file .file-dropzone-label { border-style: solid; border-color: #a9d9c1; background: #f6fef9; }
.file-dropzone-field.has-error .file-dropzone-label { border-color: #f04438; background: #fff6f5; }
.file-dropzone-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: #fff3d6; color: #b76b00; font-size: 20px; }
.file-dropzone-field.has-file .file-dropzone-icon { background: #dcfae6; color: #067647; }
.file-dropzone-copy { min-width: 0; }
.file-dropzone-copy strong,.file-dropzone-filename { display: block; }
.file-dropzone-copy strong { margin-bottom: 4px; color: #344054; font-size: 13px; }
.file-dropzone-filename { max-width: 520px; margin-top: 6px; overflow: hidden; color: #067647; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.file-dropzone-error { margin-top: 7px; color: #b42318; font-size: 12px; font-weight: 700; }
.file-preview-list { display: grid; gap: 10px; margin-top: 12px; }
.file-preview-list[hidden] { display: none; }
.file-preview-item { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; }
.file-preview-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #344054; background: #f9fafb; }
.file-preview-head > i { color: #b42318; font-size: 19px; }
.file-preview-head span,.file-preview-head strong,.file-preview-head small { display: block; min-width: 0; }
.file-preview-meta { flex: 1 1 auto; overflow: hidden; }
.file-preview-head strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-head small { margin-top: 2px; color: #667085; font-size: 10px; }
.file-preview-remove { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: 34px; margin-left: auto; padding: 6px 10px; border: 1px solid #f0b4ae; border-radius: 6px; background: #fff; color: #b42318; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; }
.file-preview-remove:hover,.file-preview-remove:focus { border-color: #b42318; background: #fff1f0; color: #8f1717; outline: none; }
.file-preview-remove i { font-size: 14px; }
.file-preview-pdf { display: block; width: 100%; height: 300px; border: 0; border-top: 1px solid #e4e7ec; background: #f2f4f7; }
.file-preview-image { display: block; width: 100%; max-height: 320px; object-fit: contain; border-top: 1px solid #e4e7ec; background: #f2f4f7; }
@media (max-width: 575px) { .file-dropzone-label { min-height: 104px; padding: 14px; } .file-preview-pdf { height: 240px; } .file-preview-remove span { display: none; } .file-preview-remove { width: 34px; padding: 6px; } }