/* ===========================================================================
   Modern Image Uploader — styles (reuse --primary/--secondary green theme)
   =========================================================================== */
.pm-uploader{
    --up-radius:16px;
    position:relative;display:block;width:100%;
    border:2px dashed var(--border,#d7dde3);border-radius:var(--up-radius);
    background:linear-gradient(180deg,#fff, #f8fbfa);
    padding:20px;cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s;
    outline:none;
}
.pm-uploader:hover,.pm-uploader:focus-visible{
    border-color:var(--primary,#0f9f6e);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary,#0f9f6e) 12%, transparent);
}
.pm-uploader.is-drag{
    border-color:var(--primary,#0f9f6e);border-style:solid;
    background:color-mix(in srgb, var(--primary,#0f9f6e) 8%, #fff);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--primary,#0f9f6e) 16%, transparent);
}
.pm-uploader.is-ready{border-style:solid;border-color:color-mix(in srgb, var(--primary,#0f9f6e) 45%, #d7dde3);}
.pm-uploader.is-error{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12);}
.pm-up-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

/* ---- Empty state ---- */
.pm-up-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;pointer-events:none;}
.pm-up-empty .pm-up-btn{pointer-events:auto;}
.pm-up-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
    background:color-mix(in srgb, var(--primary,#0f9f6e) 12%, #fff);color:var(--primary,#0f9f6e);}
.pm-up-icon svg{width:24px;height:24px;}
.pm-up-title{font-weight:700;color:#1f2937;font-size:.98rem;}
.pm-up-hint{font-size:.78rem;color:#6b7280;}
.pm-up-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px;}

/* ---- Buttons ---- */
.pm-up-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;
    border:1px solid var(--border,#d7dde3);border-radius:10px;background:#fff;color:#374151;
    font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.pm-up-btn svg{width:16px;height:16px;}
.pm-up-btn:hover{background:#f3f4f6;border-color:#c3ccd4;}
.pm-up-browse,.pm-up-cam{background:var(--primary,#0f9f6e);border-color:var(--primary,#0f9f6e);color:#fff;}
.pm-up-browse:hover,.pm-up-cam:hover{filter:brightness(.95);background:var(--primary,#0f9f6e);color:#fff;}
.pm-up-remove{color:#b91c1c;border-color:#fca5a5;}
.pm-up-remove:hover{background:#fef2f2;}

/* ---- Preview state ---- */
.pm-up-preview{display:flex;gap:14px;align-items:center;}
.pm-up-thumb{position:relative;flex:0 0 auto;width:84px;height:84px;border-radius:12px;overflow:hidden;
    background:#eef2f1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.pm-up-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pm-uploader.is-square .pm-up-thumb{border-radius:50%;}
.pm-up-badge{position:absolute;right:4px;bottom:4px;width:22px;height:22px;border-radius:50%;
    display:none;place-items:center;background:var(--primary,#0f9f6e);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.pm-up-badge svg{width:13px;height:13px;}
.pm-uploader.is-ready .pm-up-badge{display:grid;animation:pmPop .25s ease;}
@keyframes pmPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.pm-up-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;}
.pm-up-name{font-size:.9rem;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pm-up-meta{font-size:.8rem;color:#6b7280;}
.pm-up-save{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;
    background:#dcfce7;color:#166534;font-weight:700;font-size:.72rem;}
.pm-up-tools{display:flex;gap:8px;margin-top:4px;}

/* ---- Progress bar ---- */
.pm-up-bar{height:6px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-top:2px;}
.pm-up-bar i{display:block;height:100%;width:0;border-radius:999px;
    background:linear-gradient(90deg,var(--primary,#0f9f6e),var(--secondary,#0b7285));
    transition:width .25s ease;}

/* ---- Status line ---- */
.pm-up-status{margin-top:10px;font-size:.82rem;min-height:1em;}
.pm-up-status.is-error{color:#b91c1c;}
.pm-up-status.is-ok{color:#166534;}

@media (max-width:480px){
    .pm-uploader{padding:16px;}
    .pm-up-preview{flex-direction:column;text-align:center;}
    .pm-up-info{align-items:center;}
    .pm-up-tools{justify-content:center;}
}