/* Organized modal, controls under preview, confirm overlay */
.sufo-uploader{display:inline-flex;align-items:center;gap:10px;margin:8px 0}
.sufo-uploader .sufo-file{position:absolute;left:-9999px;visibility:hidden}
.sufo-uploader .sufo-btn{appearance:none;border:1px solid #b81d2f;background:#b81d2f;color:#fff;border-radius:.75rem;padding:8px 12px;cursor:pointer;font-size:14px;line-height:1}
.sufo-uploader .sufo-btn:hover{background:#0c1220}
.sufo-uploader .sufo-fn{font-size:13px;color:#4b5563}

#sufs-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100000; display:none; }
#sufs-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(92vw,980px); height:min(88vh,720px); background:#fff; border-radius:.75rem; box-shadow:0 10px 30px rgba(0,0,0,.25); display:none; z-index:100001; }
.sufs-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eee; }
.sufs-body{ padding:12px; flex:1; overflow:hidden; display:flex; align-items:stretch; justify-content:stretch; }
#sufs-preview-wrap{ position:relative; border:0; border-radius:.75rem; box-shadow:none; overflow:hidden; background:#fff; padding:12px; box-sizing:border-box; flex:1; display:flex; flex-direction:column; gap:10px; }
#sufs-preview{ position:relative; flex:1; min-height:360px; }
#sufs-stage{ position:relative; display:block; width:100%; height:100%; max-width:100%; max-height:100%; overflow:hidden; background:#f6f7fb; border:1px solid #E7E9ED; border-radius:8px; }
#sufs-stage canvas.sufs-canvas{ position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); }
#sufs-stage img.sufs-overlay-img{ position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; pointer-events:none; z-index:3; }

/* Controls under the proof */
.sufs-actions-under{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-start; }
.sufs-actions-under .btn{ appearance:none; border:1px solid #d0d4db; background:#fff; border-radius:8px; padding:8px 10px; font-size:13px; cursor:pointer }
.sufs-actions-under .btn:hover{ background:#f0f3f8 }

.sufs-footer{ display:flex; justify-content:flex-end; gap:8px; padding:10px 12px; border-top:1px solid #E7E9ED }

/* Confirm overlay inside modal */
.sufs-confirm{ position:absolute; inset:0; background:rgba(255,255,255,.86); display:none; align-items:center; justify-content:center; z-index:100; }
.sufs-confirm .box{ width:min(560px,92%); background:#fff; border:1px solid #e7e9ed; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:16px; }
.sufs-confirm .title{ font-weight:600; font-size:16px; margin-bottom:6px; }
.sufs-confirm .msg{ font-size:13px; color:#4b5563; margin-bottom:12px; }
.sufs-confirm .actions{ display:flex; gap:8px; justify-content:flex-end; }
.sufs-confirm .btn{ appearance:none; border:1px solid #d0d4db; background:#fff; border-radius:8px; padding:8px 10px; font-size:13px; cursor:pointer }
.sufs-confirm .btn.primary{ background:#111827; color:#fff; border-color:#111827 }
.sufs-confirm .btn.primary:hover{ background:#0c1220 }


/* Legend line above actions */
.sufs-legend{font-size:13px;color:#374151;background:#f9fafb;border:1px dashed #E5E7EB;padding:8px 10px;border-radius:8px;margin-top:6px}


/* Ensure modal header at top: title left, close on right */
#sufs-modal{display:flex;flex-direction:column}
.sufs-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #E7E9ED}
.sufs-header .sufs-title{font-weight:600}
.sufs-header .sufs-close{margin-left:auto}

/* Center legend with actual colored rules */
.sufs-legend{display:flex;justify-content:center;gap:18px;align-items:center;text-align:center}
.sufs-legend .item{display:inline-flex;align-items:center;gap:8px}
.sufs-legend .rule{display:inline-block;width:40px;height:0;border-top:3px solid #111827;border-radius:2px}
.sufs-legend .rule.black{border-top-color:#111827}
.sufs-legend .rule.red{border-top-color:#b81d2f}
.sufs-legend .rule.blue{border-top-color:#1e40af}

/* Make Approve buttons the requested red */
.sufs-actions-under .btn.primary{background:#b81d2f;color:#fff;border-color:#b81d2f}
.sufs-actions-under .btn.primary:hover{filter:brightness(.92)}
.sufs-confirm .btn.primary{background:#b81d2f;color:#fff;border-color:#b81d2f}
.sufs-confirm .btn.primary:hover{filter:brightness(.92)}

.sufo-btn:hover{filter:brightness(.92)}