/* Drag & drop uploader (includes/js/file-uploader.js), ChicCanvas light palette (tokens in modern.css) */
.mfa-uploader { width: 100%; text-align: center; font-family: var(--font-ui, 'Jost', Arial, sans-serif); }
.mfa-uploader-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

.mfa-uploader-drop { width: 100%; padding: 30px 16px 24px; border: 2px dashed #d9c8a8; border-radius: 10px; background: #fbf8f1; color: var(--ink-soft, #6b5a3a); cursor: pointer; transition: border-color .15s, background-color .15s; }
.mfa-uploader-drop:hover, .mfa-uploader-drop:focus { border-color: var(--orange-fill, #e8731c); background: #fff8f0; outline: none; }
.mfa-uploader-drop:focus-visible { box-shadow: 0 0 0 3px rgba(232, 115, 28, .25); }
.mfa-uploader-drop.is-over { border-style: solid; border-color: var(--orange-fill, #e8731c); background: #fff1e3; }
.mfa-uploader.is-busy .mfa-uploader-drop { cursor: default; opacity: .6; }

.mfa-uploader-drop::before {
    content: "";
    display: block;
    width: 44px; height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--orange-fill, #e8731c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M5 20h14'/%3E%3C/svg%3E") no-repeat center / 22px;
}
.mfa-uploader .mfa-uploader-title { margin: 0; padding: 0; font-family: var(--font-display, Georgia, serif); font-size: 21px; font-weight: 600; color: var(--ink, #3b2c0e); }
.mfa-uploader .mfa-uploader-or { margin: 2px 0 10px; padding: 0; font-size: 13px; color: var(--ink-soft, #6b5a3a); }
.mfa-uploader .mfa-uploader-hint { margin: 14px 0 0; padding: 0; font-size: 12px; color: var(--ink-soft, #6b5a3a); }

.mfa-uploader-list { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; }
.mfa-uploader-item { margin: 0 0 8px; padding: 10px 12px; background: #fbf8f1; border: 1px solid var(--rule, #ddd8c6); border-left: 4px solid var(--rule, #ddd8c6); border-radius: 6px; }
.mfa-uploader-item-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink, #3b2c0e); }
.mfa-uploader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mfa-uploader-size { flex: none; color: var(--ink-soft, #6b5a3a); }
.mfa-uploader-bar { height: 5px; margin: 8px 0 6px; background: #ece5d3; border-radius: 3px; overflow: hidden; }
.mfa-uploader-fill { width: 0; height: 100%; background: var(--orange-fill, #e8731c); transition: width .2s; }
.mfa-uploader .mfa-uploader-status { margin: 0; padding: 0; font-size: 13px; color: var(--ink-soft, #6b5a3a); }

.mfa-uploader-item.is-uploading { border-left-color: var(--orange-fill, #e8731c); }
.mfa-uploader-item.is-processing { border-left-color: var(--olive, #a99a10); }
.mfa-uploader-item.is-processing .mfa-uploader-fill { background: var(--olive, #a99a10); animation: mfa-uploader-pulse 1.2s ease-in-out infinite; }
.mfa-uploader-item.is-done { border-left-color: #4f8a3c; }
.mfa-uploader-item.is-done .mfa-uploader-fill { background: #4f8a3c; }
.mfa-uploader-item.is-error { border-left-color: var(--danger, #b3261e); background: #fdf1f0; }
.mfa-uploader-item.is-error .mfa-uploader-bar { display: none; }
.mfa-uploader-item.is-error .mfa-uploader-status { color: var(--danger, #b3261e); font-weight: 500; }

@keyframes mfa-uploader-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .mfa-uploader-drop, .mfa-uploader-fill { transition: none; }
    .mfa-uploader-item.is-processing .mfa-uploader-fill { animation: none; }
}