/*
 * 11zon Theme — DocuTools Plugin Override
 * Signature: white/blue, full-width blue select button dropzone,
 * amber top-border highlight on hover, corporate blue identity.
 */

:root {
    --dtp-header-h:           64px;

    /* Blue accent */
    --dtp-accent:             #1565C0;
    --dtp-accent-dark:        #0D47A1;
    --dtp-accent-light:       #E3F2FD;
    --dtp-accent-muted:       rgba(21,101,192,.12);
    --dtp-accent-muted2:      #BBDEFB;

    /* Hub hero → white with light blue tint */
    --dtp-hero-bg:            #F0F8FF;
    --dtp-hero-text:          #111827;
    --dtp-hero-sub:           #6B7280;
    --dtp-hero-stat-val:      #1565C0;
    --dtp-hero-stat-lbl:      #9CA3AF;
    --dtp-hero-gradient:      radial-gradient(circle 500px at 80% 50%, rgba(21,101,192,.08), transparent 70%);

    /* Hub tab active */
    --dtp-tab-active-bg:      #1565C0;
    --dtp-tab-active-text:    #ffffff;

    /* Selection */
    --dtp-selected-border:    #1565C0;
    --dtp-selected-bg:        #E3F2FD;
    --dtp-drag-bg:            #E3F2FD;

    /* Progress & spinner */
    --dtp-progress-bg:        #1565C0;
    --dtp-spinner-color:      #1565C0;

    /* Merge badge */
    --dtp-badge-bg:           #1565C0;
    --dtp-badge-text:         #ffffff;

    /* Panel count */
    --dtp-panel-count-color:  #1565C0;

    /* Page check */
    --dtp-check-bg:           #1565C0;
    --dtp-check-shadow:       rgba(21,101,192,.35);

    /* Compress active */
    --dtp-cmp-active-bg:      #E3F2FD;
    --dtp-cmp-active-text:    #1565C0;

    /* Rotate active */
    --dtp-rot-active-bg:      #E3F2FD;
    --dtp-rot-active-shadow:  rgba(21,101,192,.15);

    /* Watermark */
    --dtp-wm-active-bg:       #1565C0;
    --dtp-wm-active-border:   #1565C0;

    /* Split info box */
    --dtp-info-bg:            #E3F2FD;
    --dtp-info-border:        #90CAF9;
    --dtp-info-text:          #0D47A1;

    /* Dropzone radius — 11zon uses more square */
    --dtp-dropzone-r:         8px;

    /* Button radius — 11zon uses square-ish */
    --dtp-btn-r:              8px;

    /* Panel width */
    --dtp-panel-w:            300px;

    /* Fonts */
    --dtp-font:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --dtp-font-h: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Hub hero ── */
.dtp-hub-hero { border-bottom: 1px solid #E5E7EB; }
.dtp-hub-hero h1 { font-weight: 700; }

/* ── Stage 1: 11zon-style dropzone
   Clean white box, dashed border, centered blue full-width button ── */
.dtp-dropzone {
    background: var(--white, #ffffff);
    border: 2px dashed #D1D5DB !important;
    border-radius: 8px !important;
    padding: 48px 32px !important;
}

[data-theme="dark"] .dtp-dropzone {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB;
}

.dtp-dropzone:hover,
.dtp-dropzone.drag-active {
    border-color: #1565C0 !important;
    background: #F0F8FF !important;
}

/* Upload icon — blue tint */
.dtp-dropzone__upload-icon {
    background: #1565C0 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}
.dtp-dropzone:hover .dtp-dropzone__upload-icon,
.dtp-dropzone.drag-active .dtp-dropzone__upload-icon {
    background: #0D47A1 !important;
    color: #ffffff !important;
}

/* Title & formats */
.dtp-dropzone__title { font-weight: 600; color: #374151 !important; }
.dtp-dropzone__formats { color: #9CA3AF !important; }

/* Select file button — 11zon uses full-width blue button */
.dtp-dropzone__btn {
    width: 100% !important;
    max-width: 400px !important;
    background: #1565C0 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 16px !important;
    padding: 15px 32px !important;
    box-shadow: 0 4px 16px rgba(21,101,192,.25) !important;
    display: flex !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}
.dtp-dropzone__btn:hover {
    background: #0D47A1 !important;
    opacity: 1;
    transform: none;
}

/* Trust row — add lock icon colour */
.dtp-trust-row { color: #6B7280 !important; }

/* ── Tool card — amber top border on hover (11zon signature) ── */
.dtp-tool-card {
    position: relative;
    overflow: hidden;
}
.dtp-tool-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #F59E0B;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.dtp-tool-card:hover::before { transform: scaleX(1); }
.dtp-tool-card:hover {
    border-color: #2196F3;
    box-shadow: 0 8px 24px rgba(21,101,192,.12);
}

/* ── Process button ── */
.dtp-process-btn { box-shadow: 0 4px 16px rgba(21,101,192,.3); }

/* ── Download button — blue ── */
.dtp-download-btn {
    background: #1565C0 !important;
    box-shadow: 0 6px 24px rgba(21,101,192,.3) !important;
}
.dtp-download-btn:hover {
    background: #0D47A1 !important;
    opacity: 1;
}

/* ── Result check ── */
.dtp-result-check { border-color: #1565C0 !important; }

/* ── Hub hero stat styles for light background ── */
.dtp-hub-hero__stats { justify-content: flex-start; }

/* ══════════════════════════════════════════════════════════
   THEME 3 (11zon) — LAYOUT B: DocuTools-style
   Same structure as DocuTools. Only colors changed to 11zon blue.
══════════════════════════════════════════════════════════ */

/* ── Design tokens — 11zon blue replacing DocuTools teal/lime ── */
body.dtp-layout-b {
    --lb-canvas:        #F0F8FF;
    --lb-canvas2:       #E3F2FD;
    --lb-chrome:        #0D2A4A;
    --lb-chrome2:       #0A2240;
    --lb-chrome3:       #0E3060;
    --lb-border:        rgba(21,101,192,.1);
    --lb-border-strong: rgba(21,101,192,.2);
    --lb-accent:        #1565C0;
    --lb-accent-h:      #1E88E5;
    --lb-accent-muted:  rgba(21,101,192,.1);
    --lb-accent-glow:   rgba(21,101,192,.25);
    --lb-cta:           #1565C0;
    --lb-cta-h:         #1E88E5;
    --lb-cta-text:      #FFFFFF;
    --lb-cta-shadow:    rgba(21,101,192,.4);
    --lb-text:          #0D1B2A;
    --lb-text-muted:    rgba(13,27,42,.5);
    --lb-text-faint:    rgba(13,27,42,.3);
    --lb-white:         #FFFFFF;
    --lb-dock-h:        72px;
}

/* ══════════════════════════════════════════
   OUTER SHELL
   ══════════════════════════════════════════ */

body.dtp-layout-b .dtp-configure-layout--designb {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 130px) !important;
    max-height: calc(100vh - 130px) !important;
    background: var(--lb-canvas) !important;
    overflow: hidden !important;
    position: relative !important;
}

body.dtp-layout-b .dtpb-stage2-root {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--lb-canvas) !important;
}

/* ── Desktop: make the merge tool's content area scrollable inside Layout B ── */
@media (min-width: 901px) {
    /* The merge tool renders mg-toolbar + mg-grid directly inside the stage root,
       not wrapped in .dtpb-preview. Give those a scrollable container. */
    body.dtp-layout-b .dtp-configure-layout--designb .mg-toolbar {
        flex-shrink: 0 !important;
    }
    body.dtp-layout-b .dtp-configure-layout--designb .mg-grid,
    body.dtp-layout-b .dtp-configure-layout--designb .mg-list {
        overflow-y: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
    }
    /* Ensure any direct scrollable content inside the stage root (not in dtpb-preview)
       also gets overflow-y: auto so it isn't clipped */
    body.dtp-layout-b .dtpb-stage2-root > *:not(.dtpb-toolbar):not(.dtpb-mobile-pills):not(.dtpb-preview):not(.dtpb-options):not(.dtpb-dock) {
        overflow-y: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
        padding-bottom: calc(var(--lb-dock-h, 72px) + 32px) !important;
    }
    /* Merge tool: the top-level stage wrapper that contains mg-toolbar + mg-grid */
    body.dtp-layout-b .dtp-configure-layout--designb [class*="mg-stage"],
    body.dtp-layout-b .dtp-configure-layout--designb [class*="mg-wrap"],
    body.dtp-layout-b .dtp-configure-layout--designb [class*="mg-body"],
    body.dtp-layout-b .dtp-configure-layout--designb [class*="mg-content"],
    body.dtp-layout-b .dtp-configure-layout--designb .dtp-stage--configure > *:first-child {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
}

/* ══════════════════════════════════════════
   TOP TOOLBAR — injected by JS
   ══════════════════════════════════════════ */

body.dtp-layout-b .dtpb-toolbar {
    display: flex;
    align-items: center;
    height: 50px;
    flex-shrink: 0;
    background: var(--lb-chrome);
    padding: 0 20px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    z-index: 20;
    border-bottom: none;
}
body.dtp-layout-b .dtpb-toolbar::-webkit-scrollbar { display: none; }

body.dtp-layout-b .dtpb-toolbar-identity {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 20px;
    border-right: 1px solid rgba(255,255,255,.08);
    margin-right: 20px;
    flex-shrink: 0;
}
body.dtp-layout-b .dtpb-toolbar-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lb-cta);
    box-shadow: 0 0 8px var(--lb-cta-shadow);
    flex-shrink: 0;
}
body.dtp-layout-b .dtpb-toolbar-name {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -.01em;
    white-space: nowrap;
}

body.dtp-layout-b .dtpb-toolbar-groups {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
body.dtp-layout-b .dtpb-toolbar-groups::-webkit-scrollbar { display: none; }

body.dtp-layout-b .dtpb-toolbar-group {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 16px;
    border-right: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
body.dtp-layout-b .dtpb-toolbar-group:last-child { border-right: none; }

body.dtp-layout-b .dtpb-toolbar-group-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.28);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-right: 6px;
    white-space: nowrap;
}
body.dtp-layout-b .dtpb-tbar-btn {
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.45);
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
body.dtp-layout-b .dtpb-tbar-btn:hover {
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.1);
}
body.dtp-layout-b .dtpb-tbar-btn.active {
    background: var(--lb-accent);
    color: #fff;
    border-color: var(--lb-accent);
    box-shadow: 0 2px 10px var(--lb-accent-glow);
    font-weight: 700;
}

/* ══════════════════════════════════════════
   CANVAS — full width, light blue tint
   ══════════════════════════════════════════ */

body.dtp-layout-b .dtpb-preview {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--lb-canvas) !important;
    padding: 32px 40px calc(var(--lb-dock-h) + 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--lb-border-strong) transparent;
    /* Ensure children don't blow out the container width */
    width: 100% !important;
    box-sizing: border-box !important;
}
body.dtp-layout-b .dtpb-preview::-webkit-scrollbar { width: 5px; }
body.dtp-layout-b .dtpb-preview::-webkit-scrollbar-track { background: transparent; }
body.dtp-layout-b .dtpb-preview::-webkit-scrollbar-thumb {
    background: var(--lb-border-strong);
    border-radius: 5px;
}

/* ── Cap all preview content at 650px — document-viewer feel ── */
body.dtp-layout-b .dtpb-preview > * {
    max-width: 650px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.dtp-layout-b .dtpb-preview .dtp-pdf-infobar {
    background: var(--lb-white) !important;
    border: 1px solid var(--lb-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(21,101,192,.06) !important;
    max-width: 650px !important;
    width: 100% !important;
}
body.dtp-layout-b .dtpb-preview .dtp-pdf-infobar__name {
    color: var(--lb-text) !important;
    font-weight: 600;
}
body.dtp-layout-b .dtpb-preview .dtp-pdf-infobar__meta {
    color: var(--lb-text-muted) !important;
}

/* Page grid (multi-page tools like split/rotate) — stays wider */
body.dtp-layout-b .dtpb-preview .dtp-pages-grid {
    max-width: 650px !important;
    width: 100% !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 14px !important;
}

body.dtp-layout-b .dtpb-preview .dtp-page-thumb {
    background: var(--lb-white) !important;
    border: 1.5px solid var(--lb-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(21,101,192,.07) !important;
    transition: all .18s !important;
    position: relative !important;
    cursor: pointer !important;
}
body.dtp-layout-b .dtpb-preview .dtp-page-thumb:hover {
    border-color: var(--lb-accent) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(21,101,192,.15) !important;
}
body.dtp-layout-b .dtpb-preview .dtp-page-thumb.dtp-page--selected,
body.dtp-layout-b .dtpb-preview .dtp-page-thumb.selected {
    border-color: var(--lb-accent) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px var(--lb-accent-muted), 0 6px 20px rgba(21,101,192,.12) !important;
}
body.dtp-layout-b .dtpb-preview .dtp-page-thumb.dtp-page--selected::after,
body.dtp-layout-b .dtpb-preview .dtp-page-thumb.selected::after {
    content: '✓';
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lb-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 22px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 2px 8px var(--lb-accent-glow);
}

body.dtp-layout-b .dtpb-preview .dtp-img-preview {
    max-width: 650px !important;
    width: 100% !important;
    border: 1px solid var(--lb-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(21,101,192,.1) !important;
}

body.dtp-layout-b .dtpb-preview .dtp-file-list {
    max-width: 650px !important;
    width: 100% !important;
}
body.dtp-layout-b .dtpb-preview .dtp-file-item {
    background: var(--lb-white) !important;
    border: 1px solid var(--lb-border) !important;
    border-radius: 12px !important;
    color: var(--lb-text) !important;
    box-shadow: 0 1px 4px rgba(21,101,192,.05) !important;
    transition: all .15s !important;
}
body.dtp-layout-b .dtpb-preview .dtp-file-item:hover {
    border-color: var(--lb-accent) !important;
    box-shadow: 0 4px 16px rgba(21,101,192,.1) !important;
}
body.dtp-layout-b .dtpb-preview .dtp-file-item__name { color: var(--lb-text) !important; }
body.dtp-layout-b .dtpb-preview .dtp-file-item__meta { color: var(--lb-text-muted) !important; }
body.dtp-layout-b .dtpb-preview .dtp-file-item__drag { color: var(--lb-text-faint) !important; }

body.dtp-layout-b .dtpb-preview .dtp-merge-toolbar,
body.dtp-layout-b .dtpb-preview [class*="merge-toolbar"],
body.dtp-layout-b .dtpb-preview [class*="file-toolbar"] {
    background: var(--lb-white) !important;
    border: 1px solid var(--lb-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(21,101,192,.06) !important;
    max-width: 650px !important;
    width: 100% !important;
}
body.dtp-layout-b .dtpb-preview .dtp-merge-toolbar button,
body.dtp-layout-b .dtpb-preview [class*="merge-toolbar"] button {
    color: var(--lb-text-muted) !important;
}
body.dtp-layout-b .dtpb-preview .dtp-merge-toolbar button:hover,
body.dtp-layout-b .dtpb-preview [class*="merge-toolbar"] button:hover {
    color: var(--lb-accent) !important;
    background: var(--lb-accent-muted) !important;
}

/* ══════════════════════════════════════════
   OPTIONS SIDEBAR — hidden on desktop
   ══════════════════════════════════════════ */

body.dtp-layout-b .dtpb-options {
    display: none !important;
}

/* ══════════════════════════════════════════
   FLOATING DOCK — pinned bottom center
   injected by JS
   ══════════════════════════════════════════ */

body.dtp-layout-b .dtpb-dock {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

body.dtp-layout-b .dtpb-dock-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--lb-chrome);
    border-radius: 100px;
    padding: 8px 8px 8px 20px;
    box-shadow: 0 8px 32px rgba(13,42,74,.25), 0 2px 8px rgba(13,42,74,.15);
    pointer-events: all;
    white-space: nowrap;
}

body.dtp-layout-b .dtpb-dock .dtp-error-msg {
    font-size: 11px;
    color: #fca5a5;
    background: rgba(248,113,113,.12);
    border: 1px solid rgba(248,113,113,.25);
    border-radius: 100px;
    padding: 6px 16px;
    pointer-events: all;
    white-space: nowrap;
}
body.dtp-layout-b .dtpb-dock .dtp-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--lb-chrome2);
    border-radius: 100px;
    padding: 8px 18px;
    pointer-events: all;
    min-width: 220px;
}
body.dtp-layout-b .dtpb-dock .dtp-progress__bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.12) !important;
    border-radius: 4px;
    overflow: hidden;
}
body.dtp-layout-b .dtpb-dock .dtp-progress__bar {
    height: 100%;
    background: var(--lb-accent) !important;
    border-radius: 4px;
    transition: width .3s ease;
}
body.dtp-layout-b .dtpb-dock .dtp-progress__label {
    font-size: 11px;
    color: rgba(255,255,255,.45) !important;
    white-space: nowrap;
}

body.dtp-layout-b .dtpb-dock-count {
    font-size: 13px;
    color: rgba(255,255,255,.45);
    letter-spacing: -.01em;
}

body.dtp-layout-b .dtpb-dock .dtp-process-btn,
body.dtp-layout-b .dtp-configure-layout--designb .dtp-process-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 24px !important;
    border-radius: 100px !important;
    background: var(--lb-cta) !important;
    color: var(--lb-cta-text) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 20px var(--lb-cta-shadow) !important;
    transition: background .15s, transform .15s, box-shadow .15s !important;
    width: auto !important;
    pointer-events: all;
}
body.dtp-layout-b .dtpb-dock .dtp-process-btn:hover,
body.dtp-layout-b .dtp-configure-layout--designb .dtp-process-btn:hover {
    background: var(--lb-cta-h) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 28px var(--lb-cta-shadow) !important;
}
body.dtp-layout-b .dtpb-dock .dtp-process-btn:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

body.dtp-layout-b .dtpb-dock-back {
    font-size: 11px;
    color: var(--lb-text-faint);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    pointer-events: all;
    transition: color .15s;
    padding: 0;
}
body.dtp-layout-b .dtpb-dock-back:hover { color: var(--lb-text-muted); }

body.dtp-layout-b .dtpb-footer {
    display: none !important;
}

/* ══════════════════════════════════════════
   MOBILE — max 900px
   ══════════════════════════════════════════ */

@media (max-width: 900px) {

    body.dtp-layout-b .dtp-configure-layout--designb {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: static !important;
    }

    body.dtp-layout-b .dtpb-stage2-root {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.dtp-layout-b .dtpb-toolbar {
        display: none !important;
    }

    body.dtp-layout-b .dtpb-mobile-pills {
        display: flex !important;
        align-items: center;
        gap: 7px;
        padding: 10px 14px 10px;
        background: var(--lb-chrome);
        overflow-x: auto;
        scrollbar-width: none;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
    }
    body.dtp-layout-b .dtpb-mobile-pills::-webkit-scrollbar { display: none; }

    body.dtp-layout-b .dtpb-mobile-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 14px;
        border-radius: 100px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        border: 1px solid rgba(255,255,255,.15);
        color: rgba(255,255,255,.5);
        background: none;
        cursor: pointer;
        transition: all .15s;
        flex-shrink: 0;
    }
    body.dtp-layout-b .dtpb-mobile-pill.active {
        border-color: var(--lb-accent);
        color: #fff;
        background: var(--lb-accent);
    }

    body.dtp-layout-b .dtpb-preview {
        background: var(--lb-canvas) !important;
        padding: 16px 12px 140px !important;
        min-height: calc(100vh - 120px) !important;
        overflow-y: visible !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.dtp-layout-b .dtpb-preview .dtp-pages-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    body.dtp-layout-b .dtpb-preview .dtp-file-list,
    body.dtp-layout-b .dtpb-preview .dtp-pdf-infobar,
    body.dtp-layout-b .dtpb-preview .dtp-merge-toolbar {
        max-width: 100% !important;
        width: 100% !important;
    }

    body.dtp-layout-b .dtpb-options {
        display: none !important;
    }

    body.dtp-layout-b .dtpb-options.dtp-sheet--open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 92vh !important;
        z-index: 9995 !important;
        border-radius: 20px 20px 0 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,.1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 -12px 40px rgba(0,0,0,.4) !important;
        background: var(--lb-chrome) !important;
        padding: 0 14px 40px !important;
        animation: lb-sheet-in 0.32s cubic-bezier(0.32,0.72,0,1) both;
    }

    @keyframes lb-sheet-in {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    @keyframes lb-sheet-out {
        from { transform: translateY(0); }
        to   { transform: translateY(100%); }
    }

    body.dtp-layout-b .dtpb-options.dtp-sheet--open::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 100px;
        background: rgba(255,255,255,.18);
        margin: 12px auto 14px;
        flex-shrink: 0;
    }

    body.dtp-layout-b .dtpb-options .dtpb-options-inner,
    body.dtp-layout-b .dtpb-options #dtp-panel-body {
        padding: 4px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    body.dtp-layout-b .dtpb-options #dtp-panel-body > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.dtp-layout-b .dtpb-options .dtp-opt-group {
        background: var(--lb-chrome2) !important;
        border: 1px solid rgba(255,255,255,.07) !important;
        border-radius: 12px !important;
        padding: 13px 14px !important;
        margin: 0 !important;
    }
    body.dtp-layout-b .dtpb-options .dtp-opt-label {
        color: rgba(255,255,255,.35) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .09em !important;
        margin-bottom: 8px !important;
    }
    body.dtp-layout-b .dtpb-options .dtp-toggle-group {
        background: var(--lb-chrome3) !important;
    }
    body.dtp-layout-b .dtpb-options .dtp-toggle-btn {
        color: rgba(255,255,255,.45) !important;
        border-color: rgba(255,255,255,.08) !important;
        background: none !important;
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
    body.dtp-layout-b .dtpb-options .dtp-toggle-btn.active {
        background: var(--lb-accent) !important;
        color: #fff !important;
        border-color: var(--lb-accent) !important;
    }
    body.dtp-layout-b .dtpb-options .dtp-input,
    body.dtp-layout-b .dtpb-options .dtp-select {
        background: var(--lb-chrome3) !important;
        border-color: rgba(255,255,255,.1) !important;
        color: #fff !important;
        height: 38px !important;
        font-size: 13px !important;
    }
    body.dtp-layout-b .dtpb-options .dtp-check-row span {
        color: rgba(255,255,255,.55) !important;
        font-size: 13px !important;
    }
    body.dtp-layout-b .dtpb-options input[type="range"].dtp-slider {
        background: rgba(255,255,255,.12) !important;
    }
    body.dtp-layout-b .dtpb-options input[type="range"].dtp-slider::-webkit-slider-thumb {
        background: var(--lb-accent) !important;
    }
    body.dtp-layout-b .dtpb-options .dtp-slider-top { color: rgba(255,255,255,.3) !important; }
    body.dtp-layout-b .dtpb-options .dtp-slider-val { color: var(--lb-accent-h) !important; font-weight: 700 !important; }

    body.dtp-layout-b .dtpb-dock {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        z-index: 9990 !important;
        background: var(--lb-chrome) !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 0 !important;
        padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        pointer-events: all !important;
        width: 100% !important;
        box-sizing: border-box !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,.3) !important;
    }

    body.dtp-layout-b .dtpb-dock-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
    }

    body.dtp-layout-b .dtpb-dock .dtp-progress,
    body.dtp-layout-b .dtpb-dock .dtp-error-msg {
        display: none !important;
    }

    body.dtp-layout-b .dtpb-dock-count {
        display: none !important;
    }

    body.dtp-layout-b .dtpb-dock .dtp-process-btn,
    body.dtp-layout-b .dtp-configure-layout--designb .dtp-process-btn {
        width: 100% !important;
        height: 50px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        letter-spacing: -.01em !important;
        background: var(--lb-cta) !important;
        color: var(--lb-cta-text) !important;
        box-shadow: 0 4px 20px var(--lb-cta-shadow) !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: none !important;
        cursor: pointer !important;
    }

    body.dtp-layout-b .dtpb-dock-back {
        font-size: 12px !important;
        color: rgba(255,255,255,.3) !important;
        text-align: center !important;
        text-decoration: underline !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 2px 0 0 !important;
        width: 100% !important;
    }

    /* Floating settings button — bottom-left, above dock */
    #dtpb-settings-btn {
        position: fixed !important;
        bottom: 90px;
        left: 16px;
        z-index: 9992;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--lb-chrome);
        border: 1.5px solid var(--lb-accent);
        color: var(--lb-accent-h);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(21,101,192,.35), 0 2px 8px rgba(0,0,0,.2);
        transition: background .15s, transform .15s, box-shadow .15s;
        pointer-events: all;
        padding: 0;
    }
    #dtpb-settings-btn:hover,
    #dtpb-settings-btn:active {
        background: var(--lb-accent);
        color: #fff;
        transform: scale(1.06);
        box-shadow: 0 6px 24px rgba(21,101,192,.5);
    }
    #dtpb-settings-btn.active {
        background: var(--lb-accent);
        color: #fff;
        border-color: var(--lb-accent);
        box-shadow: 0 4px 20px rgba(21,101,192,.5);
    }

    body.dtp-layout-b #dtp-panel-fab,
    body.dtp-layout-b #dtp-panel-fab.dtp-fab--active,
    body.dtp-layout-b #dtp-panel-fab.dtp-fab--seen {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
}

@media (min-width: 901px) {
    body.dtp-layout-b .dtpb-mobile-pills { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   THEME 3 (11zon) — LAYOUT A: Classic Side Panel Override
   Action panel on the RIGHT, file workspace on the LEFT.
   Colors and fonts follow 11zon's corporate blue identity.
══════════════════════════════════════════════════════════ */

/* Ensure the grid layout is enforced — right panel */
.dtp-configure-layout {
    display: grid;
    grid-template-columns: 1fr var(--dtp-panel-w, 300px);
    height: calc(100vh - var(--dtp-header-h, 64px) - 66px);
}

/* Main workspace — light blue tint background */
.dtp-configure-main {
    background: #F0F8FF;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Right action panel — white with blue left border */
.dtp-configure-panel {
    background: #ffffff;
    border-left: 2px solid #BBDEFB;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Panel header — white bg, blue bottom border */
.dtp-panel-header {
    padding: 20px 22px 16px;
    border-bottom: 1.5px solid #E3F2FD;
    background: #ffffff;
}

.dtp-panel-header h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Panel body — scrollable options area */
.dtp-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
}

/* Option group labels — 11zon blue */
.dtp-panel-body .dtp-opt-label {
    color: #1565C0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* Active toggle buttons — blue */
.dtp-panel-body .dtp-toggle-btn.active {
    background: #1565C0;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(21,101,192,.25);
}

/* Inputs and selects — blue focus ring */
.dtp-panel-body .dtp-input:focus,
.dtp-panel-body .dtp-select:focus {
    border-color: #1565C0;
    box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}

/* Slider thumb — blue */
.dtp-panel-body input[type="range"].dtp-slider::-webkit-slider-thumb {
    background: #1565C0;
}
.dtp-panel-body input[type="range"].dtp-slider::-moz-range-thumb {
    background: #1565C0;
}

/* Panel footer — white, blue top border, stacked CTA */
.dtp-panel-footer {
    padding: 16px 22px 22px;
    border-top: 1.5px solid #E3F2FD;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Process button — full-width blue */
.dtp-panel-footer .dtp-process-btn {
    width: 100%;
    border-radius: 8px;
    height: 48px;
    font-size: 15px;
    font-weight: 700;
    background: #1565C0 !important;
    box-shadow: 0 4px 16px rgba(21,101,192,.3);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.dtp-panel-footer .dtp-process-btn:hover {
    background: #0D47A1 !important;
    box-shadow: 0 6px 20px rgba(21,101,192,.4);
}

/* Back/upload link — subtle grey */
.dtp-panel-footer .dtp-back-btn {
    font-size: 12px;
    color: #9CA3AF;
    text-align: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}
.dtp-panel-footer .dtp-back-btn:hover {
    color: #6B7280;
}

/* Progress bar — blue */
.dtp-panel-footer .dtp-progress__bar {
    background: #1565C0;
}
.dtp-panel-footer .dtp-progress__label {
    color: #6B7280;
    font-size: 12px;
}

/* Error message */
.dtp-panel-footer .dtp-error-msg {
    font-size: 12px;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 8px 12px;
}
/* ── Mobile Bottom Sheet theme vars — 11zon (blue/white) ── */
:root {
    --dtp-fab-bg:        #1565C0;
    --dtp-fab-active-bg: #0d47a1;
    --dtp-fab-text:      #fff;
    --dtp-fab-shadow:    rgba(21,101,192,0.45);
    --dtp-fab-pulse:     rgba(21,101,192,0.18);
    --dtp-fab-badge-bg:  rgba(21,101,192,0.15);
    --dtp-sheet-handle:  rgba(21,101,192,0.2);
}

/* Desktop keeps the side-by-side grid */
@media (min-width: 901px) {
    .z11-configure-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        height: calc(100vh - 130px);
    }
}

/* Bottom sheet panel colour on mobile */
@media (max-width: 900px) {
    #dtp-configure-panel { background: #fff !important; }
}
/* ═══════════════════════════════════════════════════════════
   Mobile Action Panel — Bottom Sheet
   Panel is HIDDEN BY DEFAULT via CSS on mobile.
   JS only toggles the --open class.
   ═══════════════════════════════════════════════════════════ */

/* ── FAB trigger button ── */
#dtp-panel-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    align-items: center;
    gap: 8px;
    padding: 12px 22px 12px 18px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.2s ease,
                background 0.2s ease;
    background: var(--dtp-fab-bg, #1A9AB5);
    color: var(--dtp-fab-text, #fff);
    box-shadow: 0 6px 28px var(--dtp-fab-shadow, rgba(26,154,181,0.45)),
                0 2px 8px rgba(0,0,0,0.15);
}

#dtp-panel-fab:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 10px 36px var(--dtp-fab-shadow, rgba(26,154,181,0.55)),
                0 4px 12px rgba(0,0,0,0.2);
}

#dtp-panel-fab.dtp-fab--active {
    background: var(--dtp-fab-active-bg, #0e6e84);
}

.dtp-fab-icon {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

#dtp-panel-fab.dtp-fab--active .dtp-fab-icon {
    transform: rotate(90deg);
}

.dtp-fab-label { line-height: 1; }

.dtp-fab-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    background: var(--dtp-fab-badge-bg, rgba(255,255,255,0.25));
    color: var(--dtp-fab-text, #fff);
    margin-left: 2px;
}

/* ── Backdrop ── */
#dtp-sheet-backdrop,
#dtp-sheet-backdrop.dtp-sheet-backdrop--visible {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ── Drag handle (hidden on desktop) ── */
.dtp-sheet-handle {
    display: none;
    justify-content: center;
    padding: 12px 0 6px;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}

.dtp-sheet-handle-bar {
    width: 40px;
    height: 4px;
    border-radius: 100px;
    background: var(--dtp-sheet-handle, rgba(128,128,128,0.35));
}

/* ════════════════════════════
   MOBILE ONLY — max 900px
   ════════════════════════════ */
@media (max-width: 900px) {

    #dtp-panel-fab { display: flex !important; }

    .dtp-sheet-handle { display: flex; }

    /* Kill the grid — main fills full width */
    .dtp-configure-layout,
    .z11-configure-layout,
    .sp-configure-layout,
    .t1-configure-layout,
    .dt-configure-layout {
        display: block !important;
        height: auto !important;
        grid-template-columns: unset !important;
    }

    /* Main area: full height + space for FAB */
    .dtp-configure-main,
    .z11-configure-main,
    .sp-configure-main,
    .t1-configure-main,
    .dt-configure-main {
        min-height: calc(100vh - 130px);
        padding-bottom: 100px !important;
        width: 100% !important;
    }

    /* ── CORE FIX: Panel ALWAYS hidden off-screen by default ── */
    #dtp-configure-panel,
    .dtp-configure-panel,
    .z11-configure-panel,
    .sp-configure-panel,
    .t1-configure-panel,
    .dt-configure-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 9995 !important;
        border-radius: 24px 24px 0 0 !important;
        border-left: none !important;
        border-top: none !important;
        max-height: 82vh !important;
        overflow-y: auto !important;
        transform: translateY(110%) !important;
        transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1) !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.22), 0 -2px 12px rgba(0,0,0,0.1) !important;
        will-change: transform;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Open state — slides into view */
    #dtp-configure-panel.dtp-sheet--open,
    .dtp-configure-panel.dtp-sheet--open,
    .z11-configure-panel.dtp-sheet--open,
    .sp-configure-panel.dtp-sheet--open,
    .t1-configure-panel.dtp-sheet--open,
    .dt-configure-panel.dtp-sheet--open {
        transform: translateY(0) !important;
    }

    /* FAB pulse hint on first load */
    #dtp-panel-fab { animation: dtp-fab-pulse 1.8s ease 0.8s 2; }
    #dtp-panel-fab.dtp-fab--seen { animation: none; }
}

@keyframes dtp-fab-pulse {
    0%, 100% { box-shadow: 0 6px 28px var(--dtp-fab-shadow, rgba(26,154,181,0.45)), 0 2px 8px rgba(0,0,0,0.15); }
    50% { box-shadow: 0 6px 28px var(--dtp-fab-shadow, rgba(26,154,181,0.45)), 0 0 0 10px var(--dtp-fab-pulse, rgba(26,154,181,0.15)), 0 2px 8px rgba(0,0,0,0.15); }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE OVERRIDES — tool page panels & inner UI
   ═══════════════════════════════════════════════════════════ */

/* Configure / action panels */
[data-theme="dark"] .dtp-configure-panel,
[data-theme="dark"] #dtp-configure-panel {
    background: #1F2937 !important;
    border-left-color: #374151 !important;
}

[data-theme="dark"] .dtp-panel-header {
    background: #1F2937 !important;
    border-bottom-color: #374151 !important;
}

[data-theme="dark"] .dtp-panel-header h2 {
    color: #F9FAFB !important;
}

[data-theme="dark"] .dtp-panel-body {
    background: #1F2937 !important;
}

[data-theme="dark"] .dtp-panel-footer {
    background: #1F2937 !important;
    border-top-color: #374151 !important;
}

/* Layout B right options panel */
[data-theme="dark"] body.dtp-layout-b .dtpb-options {
    background: #1F2937 !important;
    border-left-color: #374151 !important;
}

[data-theme="dark"] body.dtp-layout-b .dtpb-footer {
    background: #1F2937 !important;
    border-top-color: #374151 !important;
}

[data-theme="dark"] body.dtp-layout-b .dtpb-options-inner .dtp-opt-group {
    background: #111827 !important;
    border-color: #374151 !important;
}

/* Option group labels */
[data-theme="dark"] .dtp-panel-body .dtp-opt-label,
[data-theme="dark"] body.dtp-layout-b .dtpb-options-inner .dtp-opt-label {
    color: #60A5FA !important;
}

/* Option inputs and selects */
[data-theme="dark"] .dtp-panel-body input,
[data-theme="dark"] .dtp-panel-body select,
[data-theme="dark"] .dtp-panel-body textarea,
[data-theme="dark"] body.dtp-layout-b input,
[data-theme="dark"] body.dtp-layout-b select {
    background: #111827 !important;
    border-color: #374151 !important;
    color: #F9FAFB !important;
}

/* Mobile bottom sheet */
@media (max-width: 900px) {
    [data-theme="dark"] #dtp-configure-panel {
        background: #1F2937 !important;
    }
}

/* ── Fix: use theme's --header-h so content sits flush below the fixed header ── */
.dtp-tool-page {
    padding-top: var(--header-h) !important;
    margin-top: 0 !important;
    min-height: 100vh !important;
    height: auto !important;
    --tc: #1565C0 !important;
    --tc10: #1565C01a !important;
}

/* ── Hide footer on stage 1 & 2, show on stage 3 ── */
body.dtp-hide-footer .site-footer {
    display: none !important;
}

/* ── Fix: 2-column file grid on mobile (matches ilovepdf layout) ── */
.mg-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Hub (tools listing page) — verified class names
   ═══════════════════════════════════════════════════════════ */

/* Page & hub container — kill all white backgrounds */
[data-theme="dark"] .dtp-hub,
[data-theme="dark"] .dtp-hub > *,
[data-theme="dark"] .dtp-hub__body,
[data-theme="dark"] .dtp-hub__inner,
[data-theme="dark"] .dtp-hub__content,
[data-theme="dark"] .dtp-hub__grid-wrap,
[data-theme="dark"] .dtp-hub__section,
[data-theme="dark"] .dtp-hub__tool-grid { background: #111827 !important; color: #F9FAFB !important; }

/* The white "overflow" at rounded corners is the parent background showing through.
   Use transparent so the dark page background shows through corners naturally. */
[data-theme="dark"] .dtp-hub__search-wrap,
[data-theme="dark"] .dtp-hub__tabs,
[data-theme="dark"] .dtp-hub__tab {
    background-color: transparent !important;
    overflow: hidden;
}

/* The plugin wraps cards in a container — make sure it's dark too */
[data-theme="dark"] .dtp-hub .dtp-tool-card,
[data-theme="dark"] .dtp-hub .dtp-tool-card * { background-color: #1F2937 !important; }
[data-theme="dark"] .dtp-hub .dtp-tool-card:hover,
[data-theme="dark"] .dtp-hub .dtp-tool-card:hover * { background-color: #263348 !important; }

/* Specifically undo the wildcard for icons so their color backgrounds survive */
[data-theme="dark"] .dtp-hub .dtp-tool-card__icon,
[data-theme="dark"] .dtp-hub .dtp-tool-card__icon * { background-color: #111827 !important; }

/* Hero area */
[data-theme="dark"] .dtp-hub-hero {
    background: #1F2937 !important;
    border-bottom-color: #374151 !important;
}
[data-theme="dark"] .dtp-hub-hero h1,
[data-theme="dark"] .dtp-hub-hero h2 { color: #F9FAFB !important; }
[data-theme="dark"] .dtp-hub-hero p { color: #9CA3AF !important; }

/* Stats numbers */
[data-theme="dark"] .dtp-hub-hero__stat-num { color: #60A5FA !important; }
[data-theme="dark"] .dtp-hub-hero__stat-label { color: #9CA3AF !important; }
[data-theme="dark"] .dtp-hub-hero__stat strong { color: #FFFFFF !important; }
[data-theme="dark"] .dtp-hub-hero__stat span { color: #9CA3AF !important; }
[data-theme="dark"] .dtp-hub-hero__stat { color: #FFFFFF !important; }

/* Search wrap — transparent so rounded corners don't bleed white */
[data-theme="dark"] .dtp-hub__search-wrap {
    background: transparent !important;
    border-color: #374151 !important;
}
[data-theme="dark"] .dtp-hub__search {
    background: #1F2937 !important;
    color: #F9FAFB !important;
    border: none !important;
}
[data-theme="dark"] .dtp-hub__search::placeholder { color: #6B7280 !important; }
[data-theme="dark"] .dtp-hub__search-icon { color: #6B7280 !important; }

/* Category filter tabs container */
[data-theme="dark"] .dtp-hub__tabs { background: transparent !important; }

/* Individual inactive tabs */
[data-theme="dark"] .dtp-hub__tab {
    background: #1F2937 !important;
    border-color: #374151 !important;
    color: #9CA3AF !important;
}
[data-theme="dark"] .dtp-hub__tab:hover {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}
/* Active tab stays blue */
[data-theme="dark"] .dtp-hub__tab.active,
[data-theme="dark"] .dtp-hub__tab[aria-selected="true"] {
    background: #1565C0 !important;
    border-color: #1565C0 !important;
    color: #FFFFFF !important;
}

/* Tool cards */
[data-theme="dark"] .dtp-tool-card {
    background: #1F2937 !important;
    border-color: #374151 !important;
    box-shadow: none !important;
}
[data-theme="dark"] .dtp-tool-card:hover {
    background: #263348 !important;
    border-color: #2196F3 !important;
    box-shadow: 0 8px 24px rgba(33,150,243,.15) !important;
}
[data-theme="dark"] .dtp-tool-card__name,
[data-theme="dark"] .dtp-tool-card h3 { color: #F9FAFB !important; }
[data-theme="dark"] .dtp-tool-card__desc,
[data-theme="dark"] .dtp-tool-card p { color: #9CA3AF !important; }
[data-theme="dark"] .dtp-tool-card svg.dtp-tool-card__arrow { color: #60A5FA !important; }

/* Icon tray inside tool card */
[data-theme="dark"] .dtp-tool-card__icon { background: #111827 !important; }

/* No-results message */
[data-theme="dark"] .dtp-no-results { color: #9CA3AF !important; }

/* ── Color large tool icon background with full blue ── */
.bu-howto-icon-wrap {
    background: #1565C0 !important;
    color: #ffffff !important;
}

/* ── Mobile nav: grouped tools like 11zon.com ── */
.mobile-nav {
    padding: 0 0 32px 0 !important;
    gap: 0 !important;
}
.mobile-nav__all {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
}
.mobile-nav__all-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
}
.mobile-nav__group {
    border-bottom: 1px solid var(--gray-200);
}
.mobile-nav__cat-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
    text-align: left;
}
.mobile-nav__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform .2s ease;
    color: var(--gray-400, #9CA3AF);
}
.mobile-nav__cat-toggle[aria-expanded="true"] .mobile-nav__chevron {
    transform: rotate(180deg);
}
.mobile-nav__tools {
    padding: 0 0 8px;
}
.mobile-nav__tools[hidden] { display: none; }
.mobile-nav__tool-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
    text-decoration: none;
    color: var(--black);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s;
}
.mobile-nav__tool-link:hover {
    background: var(--gray-50, #F9FAFB);
}
.mobile-nav__tool-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #1565C0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mobile-nav__tool-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Dark mode */
[data-theme="dark"] .mobile-nav__cat-toggle,
[data-theme="dark"] .mobile-nav__tool-link { color: #D1D5DB; }
[data-theme="dark"] .mobile-nav__tool-link:hover { background: #374151; }
[data-theme="dark"] .mobile-nav__group { border-color: #374151; }
[data-theme="dark"] .mobile-nav__all { border-color: #374151; }


/* ═══════════════════════════════════════════════════════════
   DARK MODE — Stage 3 result page & "Continue to..." section
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] .dtp-stage--result,
[data-theme="dark"] #stage-result {
    background: #111827 !important;
}

[data-theme="dark"] .dtp-result__title {
    color: #F9FAFB !important;
}

[data-theme="dark"] .dtp-result__info {
    color: #9CA3AF !important;
}

[data-theme="dark"] .dtp-result-action {
    color: #9CA3AF !important;
}

[data-theme="dark"] .dtp-result-action:hover {
    color: #F9FAFB !important;
}

/* "Continue to..." card */
[data-theme="dark"] .dtp-related {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .dtp-related__title {
    color: #6B7280 !important;
    border-bottom-color: #374151 !important;
}

[data-theme="dark"] .dtp-related-item {
    border-bottom-color: #374151 !important;
}

[data-theme="dark"] .dtp-related-item:hover {
    background: #263348 !important;
}

[data-theme="dark"] .dtp-related-item__name {
    color: #F9FAFB !important;
}

[data-theme="dark"] .dtp-related-item__desc {
    color: #9CA3AF !important;
}

[data-theme="dark"] .dtp-related-item__arrow {
    color: #4B5563 !important;
}

[data-theme="dark"] .dtp-related-item:hover .dtp-related-item__arrow {
    color: #60A5FA !important;
}
/* ══════════════════════════════════════════════════════════════
   LAYOUT B — Desktop: Gear button + Options popover
   Dark chrome aesthetic matching the toolbar. Desktop only.
══════════════════════════════════════════════════════════════ */

/* Gear button in toolbar — pushed to far right */
body.dtp-layout-b .dtpb-gear-btn {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 14px !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.65) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all .15s !important;
    flex-shrink: 0 !important;
}
body.dtp-layout-b .dtpb-gear-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.25) !important;
}
body.dtp-layout-b .dtpb-gear-btn.active {
    background: var(--lb-accent) !important;
    color: #fff !important;
    border-color: var(--lb-accent) !important;
    box-shadow: 0 2px 12px var(--lb-accent-glow) !important;
}
body.dtp-layout-b .dtpb-gear-btn svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

/* Popover shell */
#dtpb-desk-popover {
    display: none;
    position: fixed;
    z-index: 9998;
    width: 280px;
    max-height: calc(100vh - 120px);
    background: var(--lb-chrome, #0D2A4A);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.25);
    overflow: hidden;
    flex-direction: column;
    animation: dtpb-pop-in .18s cubic-bezier(.34,1.2,.64,1) both;
}
#dtpb-desk-popover.dtpb-pop--open {
    display: flex;
}
@keyframes dtpb-pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Popover header */
.dtpb-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.dtpb-pop-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    letter-spacing: -.01em;
}
.dtpb-pop-close {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all .15s;
    flex-shrink: 0;
}
.dtpb-pop-close:hover {
    background: rgba(255,255,255,.14);
    color: #fff;
}

/* Popover body — scrollable */
.dtpb-pop-body {
    overflow-y: auto;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.dtpb-pop-body::-webkit-scrollbar { width: 4px; }
.dtpb-pop-body::-webkit-scrollbar-track { background: transparent; }
.dtpb-pop-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 4px;
}

/* Option groups inside popover — dark chrome style */
#dtpb-desk-popover .dtp-opt-group {
    background: var(--lb-chrome2, #0A2240) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 10px !important;
    padding: 12px 13px !important;
    margin: 0 !important;
}
#dtpb-desk-popover .dtp-opt-label {
    color: rgba(255,255,255,.3) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
    margin-bottom: 8px !important;
    display: block;
}
#dtpb-desk-popover .dtp-toggle-group {
    background: var(--lb-chrome3, #0E3060) !important;
    border-radius: 8px !important;
}
#dtpb-desk-popover .dtp-toggle-btn {
    color: rgba(255,255,255,.45) !important;
    border-color: rgba(255,255,255,.08) !important;
    background: none !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: all .15s;
}
#dtpb-desk-popover .dtp-toggle-btn.active {
    background: var(--lb-accent, #1565C0) !important;
    color: #fff !important;
    border-color: var(--lb-accent, #1565C0) !important;
}
#dtpb-desk-popover .dtp-input,
#dtpb-desk-popover .dtp-select {
    background: var(--lb-chrome3, #0E3060) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #fff !important;
    height: 34px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}
#dtpb-desk-popover .dtp-check-row span {
    color: rgba(255,255,255,.55) !important;
    font-size: 12px !important;
}
#dtpb-desk-popover input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 4px !important;
    background: rgba(255,255,255,.15) !important;
    border-radius: 4px !important;
    outline: none !important;
    cursor: pointer !important;
    border: none !important;
}
#dtpb-desk-popover input[type="range"]::-webkit-slider-runnable-track {
    height: 4px !important;
    background: rgba(255,255,255,.15) !important;
    border-radius: 4px !important;
}
#dtpb-desk-popover input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: var(--lb-accent, #1565C0) !important;
    box-shadow: 0 0 0 3px rgba(21,101,192,.3) !important;
    cursor: pointer !important;
    margin-top: -6px !important;
    border: none !important;
    transition: box-shadow .15s !important;
}
#dtpb-desk-popover input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(21,101,192,.35) !important;
}
#dtpb-desk-popover input[type="range"]::-moz-range-track {
    height: 4px !important;
    background: rgba(255,255,255,.15) !important;
    border-radius: 4px !important;
    border: none !important;
}
#dtpb-desk-popover input[type="range"]::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: var(--lb-accent, #1565C0) !important;
    box-shadow: 0 0 0 3px rgba(21,101,192,.3) !important;
    border: none !important;
    cursor: pointer !important;
}
#dtpb-desk-popover .dtp-slider-top { color: rgba(255,255,255,.3) !important; font-size: 11px !important; }
#dtpb-desk-popover .dtp-slider-val { color: var(--lb-accent-h, #1E88E5) !important; font-weight: 700 !important; }

/* Hide gear + popover on mobile */
@media (max-width: 900px) {
    body.dtp-layout-b .dtpb-gear-btn { display: none !important; }
    #dtpb-desk-popover { display: none !important; }
}

/* ── Override plugin's .cmp-cover-wrap min-height so preview isn't forced tall ── */
body.dtp-layout-b .cmp-cover-wrap {
    min-height: 0 !important;
    justify-content: flex-start !important;
}

/* ── Override inline styles on stamp/watermark preview wrapper ── */
body.dtp-layout-b .dtpb-preview > div[style*="min-height:300px"],
body.dtp-layout-b .dtpb-preview > div[style*="min-height: 300px"] {
    min-height: 0 !important;
    justify-content: flex-start !important;
}

/* ── Fix: hide .dtp-progress in dock when not actively processing ── */
@media (min-width: 901px) {
    body.dtp-layout-b .dtpb-dock .dtp-progress:not(.dtp-progress--active):not([data-active="true"]) {
        display: none !important;
    }
    /* Also hide if the progress bar is at 0 or empty */
    body.dtp-layout-b .dtpb-dock .dtp-progress .dtp-progress__bar[style*="width: 0"],
    body.dtp-layout-b .dtpb-dock .dtp-progress .dtp-progress__bar[style*="width:0"] {
        display: none !important;
    }
}

/* ── Fix: dtp-configure-main inside layout-b should also scroll on desktop ── */
@media (min-width: 901px) {
    body.dtp-layout-b .dtp-configure-layout--designb .dtp-configure-main {
        overflow-y: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
        padding-bottom: calc(var(--lb-dock-h, 72px) + 32px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Stage 2 wrapper / configure layout backgrounds
   ═══════════════════════════════════════════════════════════ */

/* Main scrollable workspace (hardcoded #F0F8FF in light mode) */
[data-theme="dark"] .dtp-configure-main,
[data-theme="dark"] #dtp-configure-main,
[data-theme="dark"] .dtp-configure-layout .dtp-configure-main {
    background: #111827 !important;
}

/* Configure layout outer wrapper */
[data-theme="dark"] .dtp-configure-layout,
[data-theme="dark"] #dtp-configure-layout-b {
    background: #111827 !important;
}

/* Tool page root */
[data-theme="dark"] .dtp-tool-page,
[data-theme="dark"] #dtp-tool-page {
    background: #111827 !important;
}

/* Stage wrappers */
[data-theme="dark"] .dtp-stage,
[data-theme="dark"] .dtp-stage--configure,
[data-theme="dark"] .dtp-stage-inner,
[data-theme="dark"] #stage-configure {
    background: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Merge tool stage 2 (mg-* classes)
   ═══════════════════════════════════════════════════════════ */

/* Toolbar (select all, sort, undo/redo, view toggle row) */
[data-theme="dark"] .mg-toolbar {
    background: #1F2937 !important;
    border-color: #374151 !important;
}
[data-theme="dark"] .mg-select-all-wrap {
    color: #D1D5DB !important;
}

/* Toolbar buttons (Sort A-Z, Undo, Redo, etc.) */
[data-theme="dark"] .mg-tool-btn {
    background: #1F2937 !important;
    border-color: #374151 !important;
    color: #D1D5DB !important;
}
[data-theme="dark"] .mg-tool-btn:hover {
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* View toggle (grid/list icons) */
[data-theme="dark"] .mg-view-toggle {
    background: #111827 !important;
}
[data-theme="dark"] .mg-view-btn {
    color: #6B7280 !important;
}
[data-theme="dark"] .mg-view-btn.active {
    background: #1F2937 !important;
    color: #F9FAFB !important;
}

/* Grid view — file cards */
[data-theme="dark"] .mg-card {
    background: #1F2937 !important;
    border-color: #374151 !important;
}
[data-theme="dark"] .mg-card--selected {
    border-color: #3B82F6 !important;
    background: #1e3a5f !important;
}
[data-theme="dark"] .mg-card.mg-drag-over {
    border-color: #3B82F6 !important;
    background: #1e3a5f !important;
}
[data-theme="dark"] .mg-card__thumb {
    background: #111827 !important;
}
[data-theme="dark"] .mg-card__name {
    color: #F9FAFB !important;
}
[data-theme="dark"] .mg-card__meta {
    color: #9CA3AF !important;
}
[data-theme="dark"] .mg-card__actions {
    border-top-color: #374151 !important;
}
[data-theme="dark"] .mg-card-btn {
    background: #111827 !important;
    border-color: #374151 !important;
    color: #9CA3AF !important;
}
[data-theme="dark"] .mg-card-btn:hover {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* Add file card (dashed) */
[data-theme="dark"] .mg-add-card {
    background: #1F2937 !important;
    border-color: #374151 !important;
}
[data-theme="dark"] .mg-add-card:hover {
    border-color: #3B82F6 !important;
    background: #1e3a5f !important;
}
[data-theme="dark"] .mg-add-card__icon {
    background: #111827 !important;
    color: #6B7280 !important;
}
[data-theme="dark"] .mg-add-card:hover .mg-add-card__icon {
    background: #1e3a5f !important;
    color: #60A5FA !important;
}
[data-theme="dark"] .mg-add-card__label {
    color: #9CA3AF !important;
}
[data-theme="dark"] .mg-add-card:hover .mg-add-card__label {
    color: #60A5FA !important;
}

/* List view — rows */
[data-theme="dark"] .mg-list-row {
    background: #1F2937 !important;
    border-color: #374151 !important;
}
[data-theme="dark"] .mg-list-row--selected {
    border-color: #3B82F6 !important;
    background: #1e3a5f !important;
}
[data-theme="dark"] .mg-list-row.mg-drag-over {
    border-color: #3B82F6 !important;
    background: #1e3a5f !important;
}
[data-theme="dark"] .mg-list-thumb {
    background: #111827 !important;
}
[data-theme="dark"] .mg-list-name {
    color: #F9FAFB !important;
}
[data-theme="dark"] .mg-list-meta {
    color: #9CA3AF !important;
}

/* Side panel info (file count) */
[data-theme="dark"] .mg-panel-info {
    border-bottom-color: #374151 !important;
}
[data-theme="dark"] .mg-panel-count {
    color: #D1D5DB !important;
}

/* Preview modal */
[data-theme="dark"] .mg-preview-modal {
    background: #1F2937 !important;
}
[data-theme="dark"] .mg-preview-modal__header {
    border-bottom-color: #374151 !important;
    color: #F9FAFB !important;
}
[data-theme="dark"] .mg-preview-close {
    color: #9CA3AF !important;
}
[data-theme="dark"] .mg-preview-close:hover {
    background: #374151 !important;
    color: #F9FAFB !important;
}
[data-theme="dark"] .mg-preview-modal__body {
    background: #111827 !important;
}
[data-theme="dark"] .mg-preview-modal__footer {
    border-top-color: #374151 !important;
    color: #6B7280 !important;
}


/* ═══════════════════════════════════════════════════════════
   Sheet panel — X close button (top-right) + click-outside overlay
   ═══════════════════════════════════════════════════════════ */

/* X close button injected inside the panel */
.dtpb-sheet-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background .15s, transform .15s;
    padding: 0;
    flex-shrink: 0;
}
.dtpb-sheet-close:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.08);
}

/* The panel needs position:relative so the X button anchors to it */
body.dtp-layout-b .dtpb-options.dtp-sheet--open {
    position: fixed !important;
}

/* Click-outside backdrop */
#dtpb-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: transparent;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   Stage 3 — reduce excessive side padding on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .dtp-stage--result.active {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .dtp-related {
        max-width: 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   Mobile stage 2 — lock page height so FAB stays in viewport
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    html:has(body.dtp-hide-footer),
    body.dtp-hide-footer {
        overflow: hidden !important;
        height: 100% !important;
    }
    body.dtp-hide-footer .dtp-tool-page {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: unset !important;
        overflow-y: auto !important;
    }
    body.dtp-hide-footer .dtp-configure-main,
    body.dtp-hide-footer .z11-configure-main,
    body.dtp-hide-footer .sp-configure-main,
    body.dtp-hide-footer .t1-configure-main,
    body.dtp-hide-footer .dt-configure-main {
        overflow-y: auto !important;
        height: calc(100vh - var(--dtp-header-h, 64px) - 66px) !important;
        height: calc(100dvh - var(--dtp-header-h, 64px) - 66px) !important;
        min-height: unset !important;
    }
}

/* Hide settings button when mobile menu is open */
#mobile-nav.open ~ * #dtpb-settings-btn,
#mobile-nav.open + #dtpb-settings-btn,
body:has(#mobile-nav.open) #dtpb-settings-btn {
    display: none !important;
}