/* OfferteFoto Uploader - minimal clean UI */
.ofu-shell{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; color:#0f172a; max-width:980px; margin:0 auto; padding:16px;}
.ofu-header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 18px;}
.ofu-brand{display:flex; align-items:center; gap:12px;}
.ofu-dot{width:14px; height:14px; border-radius:999px; background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.15);}
.ofu-title{font-size:18px; font-weight:800; line-height:1;}
.ofu-sub{font-size:12px; opacity:.7; margin-top:4px;}
.ofu-userbox{text-align:right;}
.ofu-username{font-weight:700;}
.ofu-userrole{font-size:12px; opacity:.65;}

.ofu-main{display:block;}
.ofu-card{background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(2,6,23,.06); margin-bottom:14px;}
.ofu-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.ofu-row-top{align-items:flex-start;}
.ofu-actions{display:flex; gap:10px; flex-wrap:wrap;}

.ofu-btn{appearance:none; border:0; border-radius:12px; padding:10px 12px; font-weight:700; cursor:pointer;}
.ofu-btn-light{background:#f1f5f9; color:#0f172a;}
.ofu-btn-light:hover{background:#e2e8f0;}
.ofu-btn-danger{background:#ef4444; color:#fff;}
.ofu-btn-danger:hover{background:#dc2626;}
.ofu-btn:disabled{opacity:.6; cursor:not-allowed;}

.ofu-search input{width:100%; padding:12px 12px; border:1px solid #e5e7eb; border-radius:12px; outline:none;}
.ofu-search input:focus{border-color:#94a3b8; box-shadow:0 0 0 4px rgba(148,163,184,.25);}

.ofu-list{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.ofu-item{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:#f8fafc; border:1px solid #e5e7eb; border-radius:14px; padding:12px; cursor:pointer;}
.ofu-item:hover{background:#f1f5f9;}
.ofu-item-title{font-weight:800;}
.ofu-item-sub{font-size:12px; opacity:.7; margin-top:4px;}
.ofu-item-right{font-weight:800; opacity:.7;}

.ofu-meta{font-size:12px; opacity:.7; margin-top:6px;}
.ofu-hint{font-size:12px; opacity:.7; margin-top:10px;}

.ofu-uploader{margin-top:12px; margin-bottom:8px;}
.ofu-drop{display:block; border:2px dashed #cbd5e1; border-radius:16px; padding:14px; cursor:pointer; background:#f8fafc;}
.ofu-drop:hover{background:#f1f5f9;}
.ofu-drop input{display:none;}
.ofu-drop-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.ofu-big{font-weight:900;}
.ofu-small{font-size:12px; opacity:.7;}

.ofu-progress{margin-top:10px;}
.ofu-progress-bar{height:10px; background:#e5e7eb; border-radius:999px; overflow:hidden;}
#ofuProgressBar{height:100%; width:0%; background:#22c55e;}
.ofu-progress-text{font-size:12px; opacity:.7; margin-top:6px;}

.ofu-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px;}
@media (max-width: 760px){ .ofu-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 420px){ .ofu-grid{grid-template-columns:repeat(1,minmax(0,1fr));} }

.ofu-photo{border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff;}
.ofu-thumb{aspect-ratio: 4/3; background:#0b1220; display:flex; align-items:center; justify-content:center;}
.ofu-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.ofu-photo-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px;}
.ofu-fn{font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:75%;}
.ofu-icon-btn{border:0; background:#fee2e2; color:#991b1b; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:900;}
.ofu-icon-btn:hover{background:#fecaca;}

.ofu-empty{padding:14px; border:1px dashed #cbd5e1; border-radius:14px; background:#f8fafc; opacity:.8;}
.ofu-hidden{display:none !important;}

.ofu-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 2px; opacity:.8; font-size:12px;}
.ofu-link{color:#0f172a; text-decoration:none; font-weight:700;}
.ofu-link:hover{text-decoration:underline;}

.ofu-login .login-username label,
.ofu-login .login-password label{display:block; font-weight:700; margin-bottom:6px;}
.ofu-login input[type="text"],
.ofu-login input[type="password"]{width:100%; max-width:420px; padding:12px; border:1px solid #e5e7eb; border-radius:12px;}
.ofu-login input[type="submit"]{margin-top:10px;}

.ofu-badge{font-size:11px; font-weight:800; padding:6px 8px; border-radius:999px; background:#e0f2fe; color:#075985; white-space:nowrap;}
.ofu-photo-queued .ofu-thumb{filter:saturate(0.9) brightness(0.95);}