/* ============================================================
   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) ---------- */
.pdf-merge-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-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 ---------- */
.pdf-merge-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;
}

.pdf-merge-container *,
.pdf-merge-container *::before,
.pdf-merge-container *::after { box-sizing: border-box; }

/* ---------- grid: auto-fits any container width ---------- */
.pdf-merge-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 */
.pdf-merge-container .p-full { grid-column: 1 / -1; }

/* a card fills the row height and its body absorbs the extra space */
.pdf-merge-container .p-card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.pdf-merge-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;
}

.pdf-merge-container .p-card + .p-card { margin-top: 0; }

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

.pdf-merge-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 */
.pdf-merge-container .p-head-ico::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: .13;
    border-radius: inherit;
}

.pdf-merge-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;
}

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

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

/* ---------- dropzone ---------- */
.pdf-merge-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;
}

.pdf-merge-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;
}

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

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

/* ---------- file list ---------- */
.pdf-merge-container .p-list { width: 100%; margin-top: 12px; }

.pdf-merge-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);
}

.pdf-merge-container .p-item:last-child { margin-bottom: 0; }

.pdf-merge-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;
}

.pdf-merge-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;
}

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

.pdf-merge-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;
}

.pdf-merge-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;
}

.pdf-merge-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) */
.pdf-merge-container .p-btn-up   { --ico: var(--i-up2); }
.pdf-merge-container .p-btn-down { --ico: var(--i-dn2); }
.pdf-merge-container .p-btn-del  { --ico: var(--i-x); }
.pdf-merge-container .p-btn-del:hover { color: var(--danger, #dc2626); }

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

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

.pdf-merge-container .p-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}

.pdf-merge-container .p-input,
.pdf-merge-container .p-select,
.pdf-merge-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;
}

.pdf-merge-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 */
.pdf-merge-container .p-select {
    background-image: none;
}
.pdf-merge-container .p-select-wrap { position: relative; }
.pdf-merge-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;
}

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

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

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

.pdf-merge-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 */
.pdf-merge-container .p-opts-1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    margin-bottom: 4px;
}

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

.pdf-merge-container .p-opts-4 .p-select { padding-left: 8px; padding-right: 26px; }
.pdf-merge-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 */
.pdf-merge-container .p-outs { width: 100%; }

.pdf-merge-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);
}

.pdf-merge-container .p-out:last-child { margin-bottom: 0; }

.pdf-merge-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;
}

.pdf-merge-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;
}

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

.pdf-merge-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;
}

.pdf-merge-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;
}

.pdf-merge-container .p-note-plain::before { display: none; }

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

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

.pdf-merge-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;
}

.pdf-merge-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;
}

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

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

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

.pdf-merge-container .p-btn-run    { --ico: var(--i-run); }
.pdf-merge-container .p-btn-dl     { --ico: var(--i-dl); }
.pdf-merge-container .p-btn-reset  { --ico: var(--i-reset); }
.pdf-merge-container .p-btn-copy   { --ico: var(--i-copy); }
.pdf-merge-container .p-btn-stop   { --ico: var(--i-stop); }

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

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

/* ---------- message ---------- */
.pdf-merge-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;
}

.pdf-merge-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;
}

.pdf-merge-container .p-message:empty { display: none; }
.pdf-merge-container .p-message:empty::before { display: none; }

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

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

.pdf-merge-container .p-stats:empty { display: none; }

.pdf-merge-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);
}

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

.pdf-merge-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 ---------- */
.pdf-merge-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);
}

.pdf-merge-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;
}

.pdf-merge-container .p-done-t {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------- preview / thumbs ---------- */
.pdf-merge-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;
}

.pdf-merge-container .p-thumbs { display: flex; flex-wrap: wrap; gap: 9px; }

.pdf-merge-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);
}

.pdf-merge-container .p-thumb img { display: block; width: 100%; height: auto; }

.pdf-merge-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 ---------- */
.pdf-merge-container .p-hidden { display: none !important; }

.pdf-merge-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) {
    .pdf-merge-container .p-grid { grid-template-columns: 1fr; gap: 12px; }
    .pdf-merge-container .p-card { padding: 14px; }
    .pdf-merge-container .p-drop { padding: 22px 14px; }
    .pdf-merge-container .p-drop::before { width: 30px; height: 30px; margin-bottom: 7px; }
    .pdf-merge-container .p-actions { gap: 8px; }
}

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

.p-hidden { display: none; }
