.image-upload-field{container-type:inline-size;display:grid;gap:12px;min-width:0}.image-upload-heading{display:grid;gap:4px}.image-upload-heading>strong{font-size:14px;color:#27272a}.image-upload-heading>span{font-size:12px;color:#71717a}.image-dropzone{min-height:210px;border:1.5px dashed #fecdd3;border-radius:18px;background:linear-gradient(135deg,#fff 20%,#fff7f8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}.image-dropzone.dragging,.image-dropzone:hover{border-color:#e31b4b;background:#fff0f4;box-shadow:0 12px 30px #e31b4b14;transform:translateY(-2px)}.image-dropzone>svg{width:34px;height:34px;color:#e31b4b;transition:transform .2s ease}.image-dropzone:hover>svg{transform:translateY(-3px) scale(1.04)}.image-dropzone>strong{font-size:16px}.image-dropzone>small,.image-dropzone>span{color:#71717a}.image-dropzone>em{display:flex;align-items:center;gap:5px;color:#2563eb;font-size:11px;font-style:normal}.image-dropzone>em svg{width:14px}.image-dropzone>button,.image-upload-replace{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;background:#e31b4b;color:#fff;font-weight:700;padding:10px 15px;margin-top:7px;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.image-dropzone>button:hover,.image-upload-replace:hover{background:#c91340;box-shadow:0 8px 18px #e31b4b30;transform:translateY(-1px)}.image-dropzone button svg,.image-upload-replace svg{width:16px}.image-upload-active{display:grid;grid-template-columns:minmax(150px,.85fr) minmax(0,1.15fr);gap:14px;border:1px solid #e4e4e7;border-radius:18px;padding:14px;background:#fff;min-width:0;transition:border-color .2s ease,box-shadow .2s ease}.image-upload-active:hover{border-color:#f3b6c6;box-shadow:0 10px 30px #18181b0b}.image-upload-preview{position:relative;min-height:150px;border-radius:14px;overflow:hidden;background:#f4f4f5;align-self:start}.image-upload-preview.aspect-square{aspect-ratio:1}.image-upload-preview.aspect-landscape{aspect-ratio:4/3}.image-upload-preview.aspect-wide{aspect-ratio:16/9}.image-upload-preview img{width:100%;height:100%;min-height:150px;object-fit:cover;transition:transform .35s ease}.image-upload-active:hover .image-upload-preview img{transform:scale(1.015)}.image-upload-existing{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#71717a}.image-upload-existing svg{width:32px;height:32px;color:#e31b4b}.image-upload-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#18181bcc;color:#fff}.image-upload-overlay b{font-size:28px}.image-upload-details{display:grid;gap:10px;align-content:start;min-width:0}.image-upload-file{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;background:#fafafa;min-width:0}.image-upload-file>svg{color:#16a34a;flex:0 0 auto}.image-upload-file>span{display:grid;min-width:0}.image-upload-file small,.image-upload-file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-upload-file small{color:#71717a}.image-upload-error,.image-upload-success{display:flex;align-items:center;gap:10px;border-radius:11px;padding:10px 12px}.image-upload-success{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.image-upload-error span,.image-upload-success span{display:grid}.image-upload-error{color:#be123c;background:#fff1f2;border:1px solid #fecdd3}.image-upload-error>button{margin-left:auto;border:1px solid #fecdd3;border-radius:9px;background:#fff;color:#be123c;padding:7px 9px}.image-upload-recommendation{display:flex;align-items:flex-start;gap:7px;padding:9px 10px;border-radius:10px;background:#eff6ff;color:#2563eb;font-size:11px;line-height:1.4}.image-upload-recommendation svg{width:15px;flex:0 0 auto}.image-upload-progress{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.image-upload-progress>div{height:8px;border-radius:99px;background:#f4f4f5;overflow:hidden}.image-upload-progress>div>span{display:block;height:100%;border-radius:inherit;background:#e31b4b;transition:width .15s linear}.image-upload-progress small{grid-column:1/-1;color:#71717a}.image-upload-alt{display:grid;gap:5px;font-weight:650;font-size:12px}.image-upload-alt input{width:100%;min-width:0;font-weight:400}.image-upload-alt small{color:#71717a;font-weight:400}.image-upload-actions{display:flex;flex-wrap:wrap;gap:8px}.image-upload-actions button{margin:0}.image-upload-delete{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #fecdd3;border-radius:11px;background:#fff1f2;color:#e11d48;font-weight:700;padding:10px 14px;transition:background .2s ease,transform .2s ease,border-color .2s ease}.image-upload-delete:hover{background:#ffe4e8;border-color:#fb7185;transform:translateY(-1px)}.image-upload-field.compact .image-dropzone{min-height:160px}.image-upload-field.compact .image-upload-preview,.image-upload-field.compact .image-upload-preview img{min-height:130px}@container(max-width:560px){.image-upload-active{grid-template-columns:1fr}.image-upload-preview{width:100%}.image-upload-actions>*{flex:1 1 130px}}@container(max-width:330px){.image-upload-active{padding:10px}.image-upload-success{display:none}.image-upload-actions{display:grid}.image-upload-file small{white-space:normal}.image-upload-recommendation{font-size:10px}}@media(prefers-reduced-motion:reduce){.image-dropzone,.image-dropzone>svg,.image-upload-actions button,.image-upload-active,.image-upload-preview img{transition:none}}