/* ============================================================
   ToolCMS PDF plugins — shared UI system (V3.9)
   - colour / radius follow site theme vars only
   - icons are CSS masks (no external requests, no extra files)
   - layout auto-fits any container width (no horizontal scroll)
   ============================================================ */

/* ---------- icon set (inline SVG, rendered via mask) ---------- */
.images-remove-bg-container {
    --i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    --i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
    --i-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    --i-dl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    --i-run: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E");
    --i-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13'/%3E%3C/svg%3E");
    --i-redo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7v6h-6'/%3E%3Cpath d='M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13'/%3E%3C/svg%3E");
    --i-reset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/%3E%3C/svg%3E");
    --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
    --i-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
    --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    --i-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
    --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    --i-up2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
    --i-dn2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --i-set: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
    --i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

/* ---------- root ---------- */
.images-remove-bg-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--text, #333);
    font-size: 14px;
    line-height: 1.6;
}

.images-remove-bg-container *,
.images-remove-bg-container *::before,
.images-remove-bg-container *::after { box-sizing: border-box; }

/* ---------- grid: auto-fits any container width ---------- */
.images-remove-bg-container .p-grid {
    display: grid;
    /* fixed two columns: auto-fit would open a third track on wide hosts
       that only the full-width result row would occupy, leaving dead space */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
}

/* the result panel takes its own full-width row, so the two panels above
   always share one height and neither column is left with dead space */
.images-remove-bg-container .p-full { grid-column: 1 / -1; }

/* a card fills the row height and its body absorbs the extra space */
.images-remove-bg-container .p-card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.images-remove-bg-container .p-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 10px);
    background: var(--bg-input, transparent);
    padding: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.images-remove-bg-container .p-card + .p-card { margin-top: 0; }

/* ---------- panel head ---------- */
.images-remove-bg-container .p-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
}

.images-remove-bg-container .p-head-ico {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 7px);
    color: var(--primary, #2563eb);
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* tinted chip derived from the theme colour, so dark mode follows too */
.images-remove-bg-container .p-head-ico::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: .13;
    border-radius: inherit;
}

.images-remove-bg-container .p-head-ico::after {
    content: "";
    position: relative;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
}

.images-remove-bg-container .p-head-txt { min-width: 0; }
.images-remove-bg-container .p-head-t {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #333);
    line-height: 1.35;
}
.images-remove-bg-container .p-head-s {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
}

/* icon variants */
.images-remove-bg-container .p-ico-up   { --ico: var(--i-up); }
.images-remove-bg-container .p-ico-set  { --ico: var(--i-set); }
.images-remove-bg-container .p-ico-out  { --ico: var(--i-out); }
.images-remove-bg-container .p-ico-file { --ico: var(--i-file); }
.images-remove-bg-container .p-ico-pic  { --ico: var(--i-pic); }
.images-remove-bg-container .p-ico-check { --ico: var(--i-check); }
.images-remove-bg-container .p-ico-run  { --ico: var(--i-run); }

/* ---------- dropzone ---------- */
.images-remove-bg-container .p-drop {
    position: relative;
    width: 100%;
    padding: 26px 16px;
    border: 1.5px dashed var(--border, #e5e7eb);
    border-radius: var(--radius, 10px);
    background: var(--bg-btn, #f9fafb);
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.images-remove-bg-container .p-drop::before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 9px;
    background-color: var(--primary, #2563eb);
    opacity: .85;
    -webkit-mask: var(--i-up) center / contain no-repeat;
    mask: var(--i-up) center / contain no-repeat;
}

.images-remove-bg-container .p-drop:hover,
.images-remove-bg-container .p-drop-on {
    border-color: var(--primary, #2563eb);
    background: var(--bg-input, #fff);
}

.images-remove-bg-container .p-drop-t {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #333);
}
.images-remove-bg-container .p-drop-s {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-secondary, #6b7280);
}

/* ---------- file list ---------- */
.images-remove-bg-container .p-list { width: 100%; margin-top: 12px; }

.images-remove-bg-container .p-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    margin-bottom: 7px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 7px);
    background: var(--bg-btn, #f9fafb);
}

.images-remove-bg-container .p-item:last-child { margin-bottom: 0; }

.images-remove-bg-container .p-item::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background-color: var(--primary, #2563eb);
    opacity: .8;
    -webkit-mask: var(--i-file) center / contain no-repeat;
    mask: var(--i-file) center / contain no-repeat;
}

.images-remove-bg-container .p-item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--text, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.images-remove-bg-container .p-item-meta {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}

.images-remove-bg-container .p-item-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 7px);
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: background-color .15s ease, color .15s ease;
}

.images-remove-bg-container .p-item-btn::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--ico, var(--i-x)) center / contain no-repeat;
    mask: var(--ico, var(--i-x)) center / contain no-repeat;
}

.images-remove-bg-container .p-item-btn:hover {
    background: var(--bg-btn-hover, #e5e7eb);
    color: var(--text, #333);
}

/* icon buttons: up / down / remove (assigned by JS via class) */
.images-remove-bg-container .p-btn-up   { --ico: var(--i-up2); }
.images-remove-bg-container .p-btn-down { --ico: var(--i-dn2); }
.images-remove-bg-container .p-btn-del  { --ico: var(--i-x); }
.images-remove-bg-container .p-btn-del:hover { color: var(--danger, #dc2626); }

.images-remove-bg-container .p-empty {
    padding: 14px 0;
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    text-align: center;
}

/* ---------- form ---------- */
.images-remove-bg-container .p-field { width: 100%; min-width: 0; margin-bottom: 12px; }

.images-remove-bg-container .p-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--text-secondary, #6b7280);
}

/* A control whose purpose is obvious from its own content needs no label, but
   dropping the text collapsed the element and pushed the control out of line
   with its neighbours. Keep the box, lose the words. */
.images-remove-bg-container .p-label:empty {
    min-height: 18px;
    margin-bottom: 5px;
}

.images-remove-bg-container .p-input,
.images-remove-bg-container .p-select,
.images-remove-bg-container .p-textarea {
    width: 100%;
    max-width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 7px);
    background: var(--bg-input, #fff);
    color: var(--text, #333);
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.images-remove-bg-container .p-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: var(--i-dn2);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 13px 13px;
    cursor: pointer;
}

/* the arrow must follow the text colour, so paint it with a mask layer */
.images-remove-bg-container .p-select {
    background-image: none;
}
.images-remove-bg-container .p-select-wrap { position: relative; }
.images-remove-bg-container .p-select-wrap::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -6px;
    background-color: var(--text-secondary, #6b7280);
    -webkit-mask: var(--i-dn2) center / contain no-repeat;
    mask: var(--i-dn2) center / contain no-repeat;
    pointer-events: none;
}

.images-remove-bg-container .p-input:focus,
.images-remove-bg-container .p-select:focus,
.images-remove-bg-container .p-textarea:focus {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2563eb) 14%, transparent);
}

.images-remove-bg-container .p-textarea {
    min-height: 116px;
    resize: vertical;
    font-size: 13px;
    line-height: 1.65;
}

/* ---------- options ---------- */
.images-remove-bg-container .p-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 4px;
}

.images-remove-bg-container .p-opt { min-width: 0; }

/* four equal-width controls on one row (font size / opacity / colour / angle) */
/* single-field row: let the control span the whole panel */
.images-remove-bg-container .p-opts-1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    margin-bottom: 4px;
}

.images-remove-bg-container .p-opts-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.images-remove-bg-container .p-opts-4 .p-select { padding-left: 8px; padding-right: 26px; }
.images-remove-bg-container .p-opts-4 .p-select-wrap::after { right: 7px; width: 11px; height: 11px; margin-top: -5px; }

/* batch result list: one row per output file */
.images-remove-bg-container .p-outs { width: 100%; }

.images-remove-bg-container .p-out {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    margin-bottom: 7px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 7px);
    background: var(--bg-btn, #f9fafb);
}

.images-remove-bg-container .p-out:last-child { margin-bottom: 0; }

.images-remove-bg-container .p-out::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background-color: var(--success, #16a34a);
    opacity: .9;
    -webkit-mask: var(--i-check) center / contain no-repeat;
    mask: var(--i-check) center / contain no-repeat;
}

.images-remove-bg-container .p-out-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--text, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.images-remove-bg-container .p-out-meta {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}
.images-remove-bg-container .p-opt .p-field { margin-bottom: 0; }

.images-remove-bg-container .p-note {
    display: flex;
    gap: 6px;
    margin: 11px 0 0;
    font-size: 11.5px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
    word-break: break-word;
}

.images-remove-bg-container .p-note::before {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    background-color: var(--warning, #d97706);
    opacity: .9;
    -webkit-mask: var(--i-warn) center / contain no-repeat;
    mask: var(--i-warn) center / contain no-repeat;
}

.images-remove-bg-container .p-note-plain::before { display: none; }

/* ---------- buttons ---------- */
.images-remove-bg-container .p-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

/* Run and reset placed inside the options grid, right after the control they
   act on. Only used when a plugin asks for it via act_after. */
.images-remove-bg-container .p-opt-actions {
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.images-remove-bg-container .p-actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 0;
    width: 100%;
}

/* flex-basis:0 makes the browser lay the label out at zero width first, which
   wraps the caption onto two lines and leaves a 51px button next to a 40px
   control. Growing from auto keeps one line. */
.images-remove-bg-container .p-actions-inline .p-btn { flex: 1 1 auto; }

.images-remove-bg-container .p-actions-tight {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.images-remove-bg-container .p-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    padding: 9px 16px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 7px);
    background: var(--bg-btn, #f3f4f6);
    color: var(--text, #333);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.images-remove-bg-container .p-btn::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--ico, none) center / contain no-repeat;
    mask: var(--ico, none) center / contain no-repeat;
}

.images-remove-bg-container .p-btn:hover:not(:disabled) { background: var(--bg-btn-hover, #e5e7eb); }
.images-remove-bg-container .p-btn:disabled { opacity: .5; cursor: not-allowed; }

.images-remove-bg-container .p-btn-primary {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
}
.images-remove-bg-container .p-btn-primary:hover:not(:disabled) {
    background: var(--primary-hover, #1d4ed8);
    border-color: var(--primary-hover, #1d4ed8);
}

.images-remove-bg-container .p-btn-ghost { background: transparent; }
.images-remove-bg-container .p-btn-ghost:hover:not(:disabled) { background: var(--bg-btn, #f3f4f6); }

.images-remove-bg-container .p-btn-run    { --ico: var(--i-run); }
.images-remove-bg-container .p-btn-dl     { --ico: var(--i-dl); }
.images-remove-bg-container .p-btn-reset  { --ico: var(--i-reset); }
.images-remove-bg-container .p-btn-copy   { --ico: var(--i-copy); }
.images-remove-bg-container .p-btn-stop   { --ico: var(--i-stop); }

/* ---------- progress ---------- */
.images-remove-bg-container .p-progress {
    width: 100%;
    height: 7px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--border, #e5e7eb);
    overflow: hidden;
}

.images-remove-bg-container .p-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--primary, #2563eb);
    transition: width .25s ease;
}

/* ---------- message ---------- */
.images-remove-bg-container .p-message {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 11px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
    word-break: break-word;
}

.images-remove-bg-container .p-message::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    background-color: currentColor;
    -webkit-mask: var(--ico, var(--i-warn)) center / contain no-repeat;
    mask: var(--ico, var(--i-warn)) center / contain no-repeat;
}

.images-remove-bg-container .p-message:empty { display: none; }
.images-remove-bg-container .p-message:empty::before { display: none; }

.images-remove-bg-container .p-message-success { color: var(--success, #16a34a); }
.images-remove-bg-container .p-message-success::before { --ico: var(--i-check); }
.images-remove-bg-container .p-message-error { color: var(--danger, #dc2626); }
.images-remove-bg-container .p-message-error::before { --ico: var(--i-err); }
.images-remove-bg-container .p-message-warning { color: var(--warning, #d97706); }

/* ---------- stats ---------- */
.images-remove-bg-container .p-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    width: 100%;
}

.images-remove-bg-container .p-stats:empty { display: none; }

.images-remove-bg-container .p-stat {
    flex: 1 1 132px;
    max-width: 240px;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 7px);
    background: var(--bg-btn, #f9fafb);
}

.images-remove-bg-container .p-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.images-remove-bg-container .p-stat-value {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #333);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- result hero ---------- */
.images-remove-bg-container .p-done {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm, 7px);
    background: var(--bg-btn, #f9fafb);
    color: var(--success, #16a34a);
}

.images-remove-bg-container .p-done::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: var(--i-check) center / contain no-repeat;
    mask: var(--i-check) center / contain no-repeat;
}

.images-remove-bg-container .p-done-t {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------- preview / thumbs ---------- */
.images-remove-bg-container .p-preview {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    padding: 11px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 7px);
    background: var(--bg-btn, #f9fafb);
    overflow-x: auto;
}

.images-remove-bg-container .p-thumbs { display: flex; flex-wrap: wrap; gap: 9px; }

.images-remove-bg-container .p-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 7px);
    overflow: hidden;
    background: var(--bg-input, #fff);
}

.images-remove-bg-container .p-thumb img { display: block; width: 100%; height: auto; }

.images-remove-bg-container .p-thumb-tag {
    display: block;
    padding: 4px 0;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    text-align: center;
    border-top: 1px solid var(--border, #e5e7eb);
}

/* ---------- misc ---------- */
.images-remove-bg-container .p-hidden { display: none !important; }

.images-remove-bg-container .p-h3 {
    margin: 0 0 11px;
    padding: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #333);
    border: 0;
    background: none;
}

/* ---------- mid containers: stack controls, tighten space ---------- */
@media (max-width: 640px) {
    .images-remove-bg-container .p-grid { grid-template-columns: 1fr; gap: 12px; }
    .images-remove-bg-container .p-card { padding: 14px; }
    .images-remove-bg-container .p-drop { padding: 22px 14px; }
    .images-remove-bg-container .p-drop::before { width: 30px; height: 30px; margin-bottom: 7px; }
    .images-remove-bg-container .p-actions { gap: 8px; }
}

/* ---------- narrow containers: full-width buttons, single column ---------- */
@media (max-width: 420px) {
    .images-remove-bg-container .p-card { padding: 12px; }
    .images-remove-bg-container .p-drop { padding: 18px 10px; }
    .images-remove-bg-container .p-btn { flex: 1 1 100%; }
    .images-remove-bg-container .p-opts { grid-template-columns: 1fr; }
    .images-remove-bg-container .p-opts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .images-remove-bg-container .p-stats .p-stat { flex: 1 1 calc(50% - 5px); max-width: none; }
    .images-remove-bg-container .p-head-s { display: none; }
}