/* Meme Craft Panel Builder — intentionally scoped so the core editor stays untouched. */
html body #memecraft-app-container.mcpb-enabled .mc-toolbar-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}

html.mcpb-open,
body.mcpb-open { overflow: hidden !important; }

.mcpb-modal {
    --mc-bg:#11131a;
    --mc-surface:#171a22;
    --mc-card:#1d202a;
    --mc-border:#343846;
    --mc-text:#f4f6fb;
    --mc-muted:#a8adba;
    --mc-accent:#8b5cf6;
    --mc-accent-soft:rgba(139,92,246,.14);
    --mc-on-accent:#fff;
    --mc-hover:#252937;
    --mc-shadow:rgba(0,0,0,.45);
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    box-sizing:border-box;
}
.mcpb-modal.is-open { display:flex; }
.mcpb-modal *, .mcpb-modal *::before, .mcpb-modal *::after { box-sizing:border-box; }
.mcpb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.mcpb-dialog {
    position:relative;
    z-index:1;
    width:min(820px,100%);
    max-height:min(760px,calc(100dvh - 36px));
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--mc-border);
    border-radius:22px;
    background:var(--mc-bg);
    color:var(--mc-text);
    box-shadow:0 28px 80px -28px var(--mc-shadow);
}
.mcpb-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:20px 22px 16px; border-bottom:1px solid var(--mc-border); background:var(--mc-card); }
.mcpb-head h2 { margin:2px 0 4px !important; color:var(--mc-text) !important; font:800 clamp(1.25rem,3vw,1.7rem)/1.1 'Inter',sans-serif !important; letter-spacing:-.02em !important; }
.mcpb-head p { margin:0 !important; color:var(--mc-muted) !important; font-size:.9rem !important; }
.mcpb-kicker { display:block; color:var(--mc-accent); font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.mcpb-close { flex:0 0 auto; width:40px; height:40px; border:1px solid var(--mc-border); border-radius:12px; background:var(--mc-bg); color:var(--mc-text); font-size:1.65rem; line-height:1; cursor:pointer; box-shadow:none; }
.mcpb-close:hover { border-color:var(--mc-accent); color:var(--mc-accent); }
.mcpb-body { overflow:auto; padding:18px 22px 20px; }
.mcpb-section + .mcpb-section { margin-top:20px; }
.mcpb-section-title { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:10px; }
.mcpb-section-title strong { font-size:.94rem; color:var(--mc-text); }
.mcpb-section-title span { color:var(--mc-muted); font-size:.76rem; text-align:right; }
.mcpb-layouts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.mcpb-layout { appearance:none; min-width:0; margin:0; padding:10px 8px 8px; border:1px solid var(--mc-border); border-radius:13px; background:var(--mc-card); color:var(--mc-muted); box-shadow:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; font:800 .68rem/1 'Inter',sans-serif; }
.mcpb-layout:hover, .mcpb-layout.is-active { border-color:var(--mc-accent); background:var(--mc-accent-soft); color:var(--mc-text); }
.mcpb-layout-mini { position:relative; display:block; width:52px; height:37px; overflow:hidden; border-radius:6px; background:var(--mc-bg); border:1px solid var(--mc-border); }
.mcpb-layout-mini > span { position:absolute; border:1.5px solid var(--mc-muted); background:var(--mc-surface); }
.mcpb-layout.is-active .mcpb-layout-mini > span { border-color:var(--mc-accent); }
.mcpb-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.mcpb-slot { position:relative; min-height:132px; overflow:hidden; border:1px dashed var(--mc-border); border-radius:14px; background:var(--mc-card); color:var(--mc-muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; transition:border-color .15s ease,background .15s ease,transform .15s ease; }
.mcpb-slot:hover, .mcpb-slot.is-dragging { border-color:var(--mc-accent); background:var(--mc-accent-soft); transform:translateY(-1px); }
.mcpb-slot .mcpb-icon { width:1.35rem; height:1.35rem; color:var(--mc-muted); flex:0 0 auto; }
.mcpb-slot strong { font-size:.78rem; color:var(--mc-text); }
.mcpb-slot small { font-size:.66rem; color:var(--mc-muted); }
.mcpb-slot-number, .mcpb-slot-badge { position:absolute; top:8px; left:8px; width:24px; height:24px; display:grid; place-items:center; border-radius:999px; background:var(--mc-bg); border:1px solid var(--mc-border); color:var(--mc-text); font-size:.67rem; font-weight:900; z-index:2; }
.mcpb-slot.has-image { border-style:solid; }
.mcpb-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mcpb-replace { position:absolute; right:8px; bottom:8px; z-index:2; margin:0; padding:7px 9px; border:1px solid var(--mc-border); border-radius:9px; background:color-mix(in srgb,var(--mc-bg) 90%,transparent); color:var(--mc-text); font:800 .65rem/1 'Inter',sans-serif; box-shadow:none; }
.mcpb-settings { display:grid; grid-template-columns:1.5fr .8fr 1fr; gap:9px; margin-top:18px; }
.mcpb-field { min-width:0; min-height:72px; padding:10px 12px; border:1px solid var(--mc-border); border-radius:13px; background:var(--mc-card); color:var(--mc-text); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.mcpb-field > span { width:100%; color:var(--mc-muted); font-size:.68rem; font-weight:800; }
.mcpb-field input[type="range"] { flex:1 1 110px; min-width:80px; accent-color:var(--mc-accent); }
.mcpb-field output { min-width:38px; color:var(--mc-text); font-size:.72rem; font-weight:800; }
.mcpb-color-field input[type="color"] { width:100%; height:30px; padding:0; border:0; border-radius:8px; background:none; cursor:pointer; }
.mcpb-segment { display:grid; grid-template-columns:1fr 1fr; width:100%; border:1px solid var(--mc-border); border-radius:9px; overflow:hidden; }
.mcpb-segment button { min-height:31px; margin:0; padding:0 8px; border:0; border-radius:0; background:var(--mc-bg); color:var(--mc-muted); box-shadow:none; font:800 .7rem/1 'Inter',sans-serif; cursor:pointer; }
.mcpb-segment button + button { border-left:1px solid var(--mc-border); }
.mcpb-segment button.is-active { background:var(--mc-accent-soft); color:var(--mc-accent); }
.mcpb-footer { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:14px 22px; border-top:1px solid var(--mc-border); background:var(--mc-card); }
.mcpb-status { min-width:0; color:var(--mc-muted); font-size:.75rem; text-align:center; }
.mcpb-primary, .mcpb-secondary { appearance:none; min-height:42px; margin:0; padding:0 15px; border-radius:11px; font:850 .78rem/1 'Inter',sans-serif; cursor:pointer; box-shadow:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.mcpb-primary { border:1px solid var(--mc-accent); background:var(--mc-accent); color:var(--mc-on-accent); }
.mcpb-primary:disabled { opacity:.45; cursor:not-allowed; }
.mcpb-secondary { border:1px solid var(--mc-border); background:var(--mc-bg); color:var(--mc-text); }
.mcpb-secondary:hover { border-color:var(--mc-accent); }
.mcpb-primary.is-busy { pointer-events:none; opacity:.7; }

@media (max-width:782px) {
    html body #memecraft-app-container.mcpb-enabled .mc-toolbar-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
    .mcpb-modal { padding:0; align-items:stretch; }
    .mcpb-dialog { width:100%; max-height:100dvh; height:100dvh; border:0; border-radius:0; }
    .mcpb-head { padding:calc(14px + env(safe-area-inset-top)) 15px 13px; }
    .mcpb-body { padding:15px; }
    .mcpb-layouts { grid-template-columns:repeat(5,minmax(74px,1fr)); overflow-x:auto; padding-bottom:3px; }
    .mcpb-layout { min-width:74px; }
    .mcpb-slots { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mcpb-slot { min-height:118px; }
    .mcpb-settings { grid-template-columns:1fr 1fr; }
    .mcpb-settings .mcpb-field:last-child { grid-column:1 / -1; }
    .mcpb-footer { position:sticky; bottom:0; padding:11px 15px calc(11px + env(safe-area-inset-bottom)); grid-template-columns:auto 1fr; }
    .mcpb-status { grid-column:1 / -1; grid-row:1; }
    .mcpb-secondary { grid-column:1; grid-row:2; }
    .mcpb-primary { grid-column:2; grid-row:2; }
}

@media (max-width:420px) {
    .mcpb-section-title span { display:none; }
    .mcpb-layout-mini { width:46px; height:32px; }
    .mcpb-slots { gap:7px; }
    .mcpb-slot { min-height:102px; }
    .mcpb-settings { grid-template-columns:1fr; }
    .mcpb-settings .mcpb-field:last-child { grid-column:auto; }
}

/* Compact image source chooser: reuses Meme Craft's existing template library. */
.mcpb-picker {
    position:absolute;
    inset:0;
    z-index:5;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:color-mix(in srgb,var(--mc-bg) 82%,transparent);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}
.mcpb-picker.is-open { display:flex; }
.mcpb-picker-card {
    width:min(680px,100%);
    max-height:min(650px,calc(100dvh - 72px));
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--mc-border);
    border-radius:18px;
    background:var(--mc-bg);
    box-shadow:0 24px 70px -24px var(--mc-shadow);
}
.mcpb-picker-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border-bottom:1px solid var(--mc-border);
    background:var(--mc-card);
}
.mcpb-picker-head h3 { margin:2px 0 0 !important; color:var(--mc-text) !important; font:850 1.05rem/1.15 'Inter',sans-serif !important; }
.mcpb-picker-close { width:36px; height:36px; flex:0 0 auto; margin:0; padding:0; border:1px solid var(--mc-border); border-radius:10px; background:var(--mc-bg); color:var(--mc-text); font-size:1.4rem; line-height:1; cursor:pointer; box-shadow:none; }
.mcpb-picker-close:hover { border-color:var(--mc-accent); color:var(--mc-accent); }
.mcpb-picker-actions { padding:13px 16px 10px; }
.mcpb-upload-btn { width:100%; min-height:44px; margin:0; padding:0 14px; border:1px dashed var(--mc-accent); border-radius:12px; background:var(--mc-accent-soft); color:var(--mc-text); display:flex; align-items:center; justify-content:center; gap:9px; font:850 .78rem/1 'Inter',sans-serif; cursor:pointer; box-shadow:none; }
.mcpb-upload-btn:hover { border-style:solid; }
.mcpb-picker-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 16px 10px; }
.mcpb-picker-tabs button { min-height:37px; margin:0; padding:0 10px; border:1px solid var(--mc-border); border-radius:10px; background:var(--mc-card); color:var(--mc-muted); font:800 .72rem/1 'Inter',sans-serif; cursor:pointer; box-shadow:none; }
.mcpb-picker-tabs button.is-active { border-color:var(--mc-accent); background:var(--mc-accent-soft); color:var(--mc-accent); }
.mcpb-picker-grid {
    flex:1 1 auto;
    min-height:0;
    max-height:430px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding:0 16px 16px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:112px;
    align-content:start;
    gap:9px;
}
.mcpb-picker-image {
    width:100%;
    height:112px;
    min-width:0;
    min-height:112px;
    margin:0;
    padding:5px;
    overflow:hidden;
    border:1px solid var(--mc-border);
    border-radius:12px;
    background:var(--mc-card);
    cursor:pointer;
    box-shadow:none;
}
.mcpb-picker-image:hover, .mcpb-picker-image:focus-visible { border-color:var(--mc-accent); outline:none; }
.mcpb-picker-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:8px; background:var(--mc-surface); }
.mcpb-picker-empty { grid-column:1 / -1; padding:28px 14px; border:1px dashed var(--mc-border); border-radius:12px; color:var(--mc-muted); text-align:center; font-size:.78rem; }

@media (max-width:782px) {
    .mcpb-picker { padding:10px; }
    .mcpb-picker-card { width:100%; max-height:calc(100dvh - 20px); }
    .mcpb-picker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:104px; max-height:55dvh; }
    .mcpb-picker-image { height:104px; min-height:104px; }
}

@media (max-width:420px) {
    .mcpb-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:112px; }
    .mcpb-picker-image { height:112px; min-height:112px; }
}


#memecraft-app-container .mcpb-toolbar-btn { gap:0; }
#memecraft-app-container .mcpb-toolbar-btn .mcpb-icon { width:1.75rem; height:1.75rem; color:#f4f4f5; transition:transform .18s ease,color .18s ease; }
#memecraft-app-container .mcpb-toolbar-btn:hover .mcpb-icon,
#memecraft-app-container .mcpb-toolbar-btn.active .mcpb-icon { color:#47B229; transform:scale(1.08); }
#memecraft-app-container .mcpb-toolbar-btn.active { border-color:rgba(71,178,41,.65) !important; background:rgba(71,178,41,.12) !important; }


/* v1.1.5 — lock inline Lucide SVGs to sane control sizes. */
.mcpb-modal svg.mcpb-icon {
    display:block !important;
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    max-width:18px !important;
    max-height:18px !important;
    flex:0 0 18px !important;
    stroke:currentColor !important;
    fill:none !important;
    pointer-events:none !important;
}
.mcpb-upload-btn svg.mcpb-icon {
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    max-width:20px !important;
    max-height:20px !important;
    flex-basis:20px !important;
}
.mcpb-slot svg.mcpb-icon {
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    flex-basis:22px !important;
}
.mcpb-close svg.mcpb-icon,
.mcpb-picker-close svg.mcpb-icon {
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    max-width:20px !important;
    max-height:20px !important;
    flex-basis:20px !important;
}
#memecraft-app-container .mcpb-toolbar-btn svg.mcpb-icon {
    width:1.75rem !important;
    height:1.75rem !important;
    min-width:1.75rem !important;
    min-height:1.75rem !important;
    max-width:1.75rem !important;
    max-height:1.75rem !important;
    flex-basis:1.75rem !important;
}
.mcpb-upload-btn {
    min-height:46px !important;
    height:auto !important;
    flex-direction:row !important;
}