#ipu-wrap {
--ipu-pink:       #e91e63;
--ipu-pink-soft:  rgba(233,30,99,0.07);
--ipu-pink-mid:   rgba(233,30,99,0.15);
--ipu-navy:       #1a1a2e;
--ipu-success:    #16a34a;
--ipu-success-bg: #f0fdf4;
--ipu-error:      #dc2626;
--ipu-error-bg:   #fef2f2;
--ipu-warn:       #d97706;
--ipu-warn-bg:    #fffbeb;
--ipu-border:     #ccc;
--ipu-surface:    #ffffff;
--ipu-muted:      #888;
--ipu-font:       'DM Sans', system-ui, sans-serif;
--ipu-r:          10px;
--ipu-t:          0.18s ease;
display:     block !important;
max-width:   860px;
width:       100%;
font-family: var(--ipu-font) !important;
font-size:   15px !important;
line-height: 1.5 !important;
color:       var(--ipu-navy) !important;
box-sizing:  border-box;
}
#ipu-wrap *, #ipu-wrap *::before, #ipu-wrap *::after {
box-sizing: border-box !important;
} #ipu-wrap .ipu-intro {
font-size:     0.88rem !important;
color:         #555 !important;
line-height:   1.6 !important;
margin-bottom: 14px !important;
display:       block !important;
} #ipu-wrap .ipu-dropzone {
display:        flex !important;
flex-direction: column !important;
border:         2px dashed var(--ipu-border) !important;
border-radius:  var(--ipu-r) !important;
background:     var(--ipu-surface) !important;
min-height:     260px !important;
position:       relative !important;
overflow:       visible !important;
cursor:         default !important;
outline:        none !important;
transition:     border-color var(--ipu-t), background var(--ipu-t) !important;
}
#ipu-wrap .ipu-dropzone.ipu-dragover {
border-color: var(--ipu-pink) !important;
background:   var(--ipu-pink-soft) !important;
} #ipu-wrap .ipu-topbar {
display:         flex !important;
align-items:     center !important;
justify-content: space-between !important;
padding:         10px 12px !important;
border-bottom:   1px solid #eee !important;
flex-shrink:     0 !important;
}
#ipu-wrap .ipu-select-btn {
display:         inline-flex !important;
align-items:     center !important;
gap:             6px !important;
padding:         7px 16px !important;
background:      #2271b1 !important;
color:           #fff !important;
border:          none !important;
border-radius:   6px !important;
font-family:     var(--ipu-font) !important;
font-size:       0.85rem !important;
font-weight:     600 !important;
cursor:          pointer !important;
transition:      background var(--ipu-t) !important;
white-space:     nowrap !important;
}
#ipu-wrap .ipu-select-btn:hover { background: #135e96 !important; }
#ipu-wrap .ipu-rate-inline {
font-size:  0.75rem !important;
color:      var(--ipu-muted) !important;
text-align: right !important;
} #ipu-wrap .ipu-body {
flex:            1 !important;
display:         flex !important;
flex-direction:  column !important;
align-items:     center !important;
justify-content: center !important;
padding:         24px 16px !important;
position:        relative !important;
} #ipu-wrap .ipu-empty {
display:        flex !important;
flex-direction: column !important;
align-items:    center !important;
gap:            10px !important;
pointer-events: none !important;
}
#ipu-wrap .ipu-empty-icon {
font-size: 3rem !important;
line-height: 1 !important;
opacity: 0.6 !important;
}
#ipu-wrap .ipu-empty-text {
font-size:  0.9rem !important;
color:      var(--ipu-muted) !important;
text-align: center !important;
} #ipu-wrap .ipu-queue {
display:               grid !important;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
gap:                   10px !important;
width:                 100% !important;
} #ipu-wrap .ipu-file-row {
border-radius: 8px !important;
border:        1.5px solid #e8e8e8 !important;
background:    #fff !important;
overflow:      hidden !important;
position:      relative !important;
animation:     ipu-pop-in 0.2s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes ipu-pop-in {
from { opacity:0; transform:scale(0.85); }
to   { opacity:1; transform:scale(1); }
}
#ipu-wrap .ipu-file-row.ipu-state-error   { border-color: var(--ipu-error) !important; }
#ipu-wrap .ipu-file-row.ipu-state-success { border-color: var(--ipu-success) !important; }
#ipu-wrap .ipu-file-row.ipu-state-uploading { border-color: var(--ipu-warn) !important; }
#ipu-wrap .ipu-thumb-area { position:relative !important; line-height:0 !important; }
#ipu-wrap .ipu-file-thumb {
width:        100% !important;
aspect-ratio: 4/5 !important;
object-fit:   cover !important;
display:      block !important;
}
#ipu-wrap .ipu-file-thumb-placeholder {
width:           100% !important;
aspect-ratio:    4/5 !important;
background:      #f5f5f5 !important;
display:         flex !important;
align-items:     center !important;
justify-content: center !important;
font-size:       2rem !important;
color:           #ddd !important;
animation:       ipu-pulse 1.4s ease-in-out infinite !important;
}
@keyframes ipu-pulse { 0%,100%{opacity:.6} 50%{opacity:1} } #ipu-wrap .ipu-file-row.ipu-state-uploading .ipu-thumb-area::after {
content:    "" !important;
position:   absolute !important;
inset:      0 !important;
background: linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent) !important;
animation:  ipu-shimmer 1.2s infinite !important;
}
@keyframes ipu-shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} } #ipu-wrap .ipu-file-remove {
position:      absolute !important;
top:           4px !important;
right:         4px !important;
width:         22px !important;
height:        22px !important;
background:    rgba(0,0,0,0.5) !important;
border:        none !important;
border-radius: 50% !important;
color:         #fff !important;
font-size:     13px !important;
cursor:        pointer !important;
display:       flex !important;
align-items:   center !important;
justify-content: center !important;
opacity:       0 !important;
transition:    opacity var(--ipu-t), background var(--ipu-t) !important;
padding:       0 !important;
line-height:   1 !important;
z-index:       2 !important;
}
#ipu-wrap .ipu-file-row:hover .ipu-file-remove { opacity: 1 !important; }
#ipu-wrap .ipu-file-remove:hover { background: var(--ipu-error) !important; } #ipu-wrap .ipu-file-info { padding: 6px 8px !important; }
#ipu-wrap .ipu-file-name {
font-size:     0.68rem !important;
font-weight:   600 !important;
white-space:   nowrap !important;
overflow:      hidden !important;
text-overflow: ellipsis !important;
display:       block !important;
color:         var(--ipu-navy) !important;
}
#ipu-wrap .ipu-file-meta   { font-size:0.6rem !important; color:var(--ipu-muted) !important; display:block !important; }
#ipu-wrap .ipu-file-status {
font-size:  0.62rem !important;
font-weight:600 !important;
display:    block !important;
}
#ipu-wrap .ipu-file-row.ipu-state-error     .ipu-file-status { color:var(--ipu-error) !important; }
#ipu-wrap .ipu-file-row.ipu-state-success   .ipu-file-status { color:var(--ipu-success) !important; }
#ipu-wrap .ipu-file-row.ipu-state-uploading .ipu-file-status { color:var(--ipu-warn) !important; }
#ipu-wrap .ipu-file-row.ipu-state-ready     .ipu-file-status { color:var(--ipu-muted) !important; } #ipu-wrap .ipu-bottombar {
display:         flex !important;
align-items:     center !important;
gap:             10px !important;
padding:         10px 12px !important;
border-top:      1px solid #eee !important;
flex-shrink:     0 !important;
min-height:      44px !important;
}
#ipu-wrap .ipu-progress-wrap {
flex:          1 !important;
height:        6px !important;
background:    #eee !important;
border-radius: 99px !important;
overflow:      hidden !important;
display:       none !important;
}
#ipu-wrap .ipu-progress-wrap.ipu-active { display:block !important; }
#ipu-wrap .ipu-progress-bar {
height:       100% !important;
width:        0% !important;
background:   linear-gradient(90deg, var(--ipu-pink), #ff6b9d) !important;
border-radius:99px !important;
transition:   width 0.25s ease !important;
}
#ipu-wrap .ipu-file-count {
font-size:   0.78rem !important;
color:       var(--ipu-muted) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
} #ipu-wrap .ipu-consent {
display:     flex !important;
align-items: flex-start !important;
gap:         10px !important;
margin-top:  14px !important;
font-size:   0.82rem !important;
color:       #555 !important;
line-height: 1.5 !important;
}
#ipu-wrap .ipu-consent input[type="checkbox"] {
flex-shrink: 0 !important;
margin-top:  3px !important;
width:       16px !important;
height:      16px !important;
cursor:      pointer !important;
accent-color: var(--ipu-pink) !important;
} #ipu-wrap .ipu-actions {
display:     flex !important;
align-items: center !important;
gap:         12px !important;
margin-top:  14px !important;
flex-wrap:   wrap !important;
}
#ipu-wrap .ipu-btn-upload {
display:         inline-flex !important;
align-items:     center !important;
gap:             8px !important;
padding:         11px 28px !important;
background:      var(--ipu-success) !important;
color:           #fff !important;
border:          none !important;
border-radius:   8px !important;
font-family:     var(--ipu-font) !important;
font-size:       0.95rem !important;
font-weight:     700 !important;
cursor:          pointer !important;
transition:      opacity var(--ipu-t) !important;
}
#ipu-wrap .ipu-btn-upload:hover:not(:disabled) { opacity: 0.88 !important; }
#ipu-wrap .ipu-btn-upload:disabled { opacity:0.4 !important; cursor:not-allowed !important; }
#ipu-wrap .ipu-btn-clear {
background:  transparent !important;
border:      1.5px solid #ddd !important;
color:       var(--ipu-muted) !important;
border-radius: 8px !important;
padding:     10px 18px !important;
font-family: var(--ipu-font) !important;
font-size:   0.85rem !important;
cursor:      pointer !important;
}
#ipu-wrap .ipu-btn-clear:hover { border-color:#bbb !important; color:#555 !important; }
#ipu-wrap .ipu-limit-note {
font-size:  0.78rem !important;
color:      var(--ipu-muted) !important;
margin-left: auto !important;
} #ipu-wrap .ipu-notice {
margin-top:    14px !important;
padding:       12px 16px !important;
border-radius: 8px !important;
font-size:     0.88rem !important;
font-weight:   600 !important;
border-left:   4px solid transparent !important;
display:       none !important;
}
#ipu-wrap .ipu-notice-success { background:var(--ipu-success-bg) !important; border-color:var(--ipu-success) !important; color:var(--ipu-success) !important; }
#ipu-wrap .ipu-notice-error   { background:var(--ipu-error-bg) !important;   border-color:var(--ipu-error) !important;   color:var(--ipu-error) !important; }
#ipu-wrap .ipu-notice-partial { background:var(--ipu-warn-bg) !important;    border-color:var(--ipu-warn) !important;    color:var(--ipu-warn) !important; } #ipu-wrap .ipu-lb-exceeded {
background:   #fff1f2 !important;
border:       1.5px solid #fda4af !important;
border-radius: 10px !important;
padding:      14px 18px !important;
font-size:    0.88rem !important;
color:        #be123c !important;
line-height:  1.6 !important;
} #ipu-wrap .ipu-spinner {
width:  14px !important; height: 14px !important;
border: 2px solid rgba(255,255,255,0.35) !important;
border-top-color: #fff !important;
border-radius: 50% !important;
animation: ipu-spin 0.65s linear infinite !important;
display: inline-block !important;
}
@keyframes ipu-spin { to { transform:rotate(360deg); } } @media (max-width:540px) {
#ipu-wrap .ipu-queue { grid-template-columns: repeat(3,1fr) !important; }
#ipu-wrap .ipu-file-remove { opacity:1 !important; }
}