/* FB Post Creator v12.0 — Editor CSS */

/* ── Scoped reset: only the properties themes commonly break ── */
.fpc-editor, .fpc-editor *,.fpc-editor *::before,.fpc-editor *::after{
  box-sizing:border-box;
}
.fpc-editor{
  --bg0:#0c0c10;--bg1:#111116;--bg2:#15151c;--bg3:#1c1c25;--bg4:#242430;--bg5:#2d2d3c;
  --ln:rgba(255,255,255,.07);--ln2:rgba(255,255,255,.12);
  --t0:#f0f0f3;--t1:#b2b2c4;--t2:#70708a;--t3:#45455a;
  --ac:#2563eb;--ach:#3b7fff;--red:#e84040;--r:5px;
  font-family:-apple-system,"Segoe UI",sans-serif;
  color:var(--t0);background:var(--bg0);
  font-size:14px;line-height:1.4;
  /* defeat theme max-width and padding on content wrappers */
  max-width:none!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
}
.fpc-editor input,.fpc-editor select,.fpc-editor button,.fpc-editor textarea{font-family:inherit;}
.fpc-editor{display:flex;flex-direction:column;height:100vh;min-height:560px;overflow:hidden;position:relative;direction:ltr;unicode-bidi:isolate;}
body:not(.wp-admin) .fpc-editor{height:92vh;border-radius:10px;border:1px solid var(--ln2);}
/* Poster text lines — isolated from both theme and editor resets */
.fpc-poster .fpc-text-line{
  display:block;position:relative;z-index:2;
  padding:5px 10px;box-sizing:border-box;
  cursor:move;min-width:40px;unicode-bidi:plaintext;
  width:100%;word-break:break-word;
  overflow-wrap:break-word;white-space:pre-wrap;
  margin:0!important;
  max-width:none!important;
}

/* ── TOOLBAR ── */
.fpc-toolbar{display:flex;align-items:center;height:42px;padding:0 10px;background:var(--bg1);border-bottom:1px solid var(--ln);flex-shrink:0;gap:6px;direction:ltr;unicode-bidi:isolate;}
.fpc-tb-left{display:flex;align-items:center;gap:7px;min-width:140px}
.fpc-tb-center{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;flex-wrap:wrap}
.fpc-tb-right{display:flex;align-items:center;gap:6px;min-width:140px;justify-content:flex-end}
.fpc-brand{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;white-space:nowrap}
.fpc-vbadge{font-size:9px;background:var(--bg4);color:var(--t2);padding:2px 5px;border-radius:20px;border:1px solid var(--ln2)}
.fpc-tbsep{width:1px;height:16px;background:var(--ln2);margin:0 1px;flex-shrink:0}
.fpc-tbtn{display:inline-flex;align-items:center;gap:3px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t1);font-size:10px;padding:4px 8px;border-radius:var(--r);cursor:pointer;transition:background .13s,color .13s;white-space:nowrap}
.fpc-tbtn:hover{background:var(--bg4);color:var(--t0)}
.fpc-tbtn:disabled{opacity:.3;cursor:not-allowed}
.fpc-tbsel{background:var(--bg3);border:1px solid var(--ln2);color:var(--t1);font-size:10px;padding:4px 6px;border-radius:var(--r);cursor:pointer}
.fpc-dl-btn{display:inline-flex;align-items:center;gap:4px;background:var(--ac);color:#fff;border:none;font-size:11px;font-weight:600;padding:5px 12px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.fpc-dl-btn:hover{background:var(--ach)}
.fpc-lang-btn{font-size:9px;letter-spacing:.02em}

/* ── BODY ── */
.fpc-body{display:flex;flex:1;min-height:0;overflow:hidden;direction:ltr;unicode-bidi:isolate;}

/* ── ICON NAV ── */
.fpc-icons{width:88px;min-height:0;background:var(--bg1);border-right:1px solid var(--ln);display:flex;flex-direction:column;align-items:stretch;padding:6px 4px;gap:0;flex-shrink:0;overflow-y:auto;direction:ltr;unicode-bidi:isolate;}
.fpc-icons::-webkit-scrollbar{width:0}
.fpc-icon-group{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;direction:ltr;}
.fpc-icon{width:100%;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:none;color:var(--t3);cursor:pointer;border-radius:6px;font-size:8px;font-weight:500;letter-spacing:.02em;transition:color .13s,background .13s;padding:5px 2px;overflow:hidden;}
.fpc-icon:hover{background:var(--bg3);color:var(--t1)}
.fpc-icon.active{background:rgba(37,99,235,.18);color:var(--ac)}
.fpc-icon.active svg{color:var(--ac)}
.fpc-icon svg{width:18px;height:18px;flex-shrink:0}
.fpc-icon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block;line-height:1.1;}
.fpc-icon-sep{width:100%;height:1px;background:var(--ln2);margin:4px 0;flex-shrink:0}
.fpc-icon-group-label{font-size:7px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;padding:3px 0 1px;text-align:center;width:100%;opacity:.6}

/* ── PROPS PANEL ── */
.fpc-props{width:300px;min-width:300px;min-height:0;background:var(--bg2);border-right:1px solid var(--ln);overflow-y:auto;flex-shrink:0;direction:ltr;unicode-bidi:isolate;}
.fpc-props::-webkit-scrollbar{width:3px}
.fpc-props::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px}
.fpc-panel{display:none}
.fpc-panel.active{display:block}
.fpc-ph{padding:9px 12px 7px;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t2);border-bottom:1px solid var(--ln);position:sticky;top:0;background:var(--bg2);z-index:10;display:flex;align-items:center;justify-content:space-between;direction:ltr;}
.fpc-ph-actions{display:flex;gap:4px;direction:ltr;}
.fpc-ph-btn{background:var(--bg4);border:1px solid var(--ln2);color:var(--t1);font-size:10px;padding:2px 7px;border-radius:var(--r);cursor:pointer}
.fpc-ph-btn:hover{background:var(--bg5);color:var(--t0)}
.fpc-pb{padding:10px 12px;display:flex;flex-direction:column;gap:9px;direction:ltr;}
.fpc-sect-head{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);padding:5px 0 2px;border-top:1px solid var(--ln);margin-top:3px}

/* ── TEXT BLOCKS ── */
.fpc-tblock{border-bottom:1px solid var(--ln);transition:background .12s}
.fpc-tblock.drag-ghost{opacity:.4}
.fpc-tblock.drag-over-top{border-top:2px solid var(--ac)}
.fpc-tbhead{display:flex;align-items:center;gap:5px;padding:8px 12px;cursor:pointer;font-size:11px;color:var(--t1);transition:background .12s;user-select:none}
.fpc-tbhead:hover{background:var(--bg3)}
.fpc-drag-handle{cursor:grab;color:var(--t3);font-size:13px;flex-shrink:0}
.fpc-drag-handle:active{cursor:grabbing}
.fpc-tbname{flex:1;font-size:10px;font-weight:500}
.fpc-tbdot{width:8px;height:8px;border-radius:50%;border:1px solid var(--ln2);flex-shrink:0}
.fpc-tbchev{font-size:8px;color:var(--t3);transition:transform .16s;flex-shrink:0}
.fpc-tblock:not(.open) .fpc-tbchev{transform:rotate(-90deg)}
.fpc-tbbody{padding:4px 12px 12px;display:flex;flex-direction:column;gap:8px}
.fpc-tblock:not(.open) .fpc-tbbody{display:none}
.fpc-tb-actions{display:flex;gap:4px;padding:0 12px 8px;margin-top:-4px;flex-wrap:wrap}
.fpc-tb-actions button{flex:1;min-width:60px;font-size:9px;padding:3px 2px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t2);border-radius:var(--r);cursor:pointer;white-space:nowrap}
.fpc-tb-actions button:hover{background:var(--bg4);color:var(--t1)}
.fpc-tb-actions .fpc-del-line:hover{border-color:var(--red);color:var(--red)}
.fpc-copy-style:hover{background:var(--ac)!important;color:#fff!important;border-color:var(--ac)!important}
.fpc-paste-style{opacity:.5}
.fpc-paste-style.active,.fpc-paste-style[style]{opacity:1}

/* ── FORM ELEMENTS ── */
.fpc-f{display:flex;flex-direction:column;gap:3px}
.fpc-f label{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.06em}
.fpc-f-full{width:100%}
.fpc-row{display:flex;gap:6px;direction:ltr;}
.fpc-row2 .fpc-f{flex:1}
.fpc-row3{display:flex;gap:6px}
.fpc-row3 .fpc-f{flex:1;min-width:0}
.fpc-ta{width:100%;min-height:54px;resize:vertical;background:var(--bg3);border:1px solid var(--ln2);color:var(--t0);font-size:12px;padding:6px;border-radius:var(--r);line-height:1.5;unicode-bidi:plaintext}
.fpc-ta:focus{outline:none;border-color:var(--ac)}
.fpc-ta.rtl-detected{direction:rtl;text-align:right}
.fpc-f input[type="number"],.fpc-f input[type="text"]{width:100%;background:var(--bg3);border:1px solid var(--ln2);color:var(--t0);font-size:11px;padding:5px 6px;border-radius:var(--r)}
.fpc-f input[type="number"]:focus,.fpc-f input[type="text"]:focus,.fpc-f select:focus{outline:none;border-color:var(--ac)}
.fpc-f select{width:100%;background:var(--bg3);border:1px solid var(--ln2);color:var(--t0);font-size:11px;padding:5px 6px;border-radius:var(--r)}
.fpc-sl{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--bg5);border-radius:4px;cursor:pointer}
.fpc-sl::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--t0);border-radius:50%;border:2px solid var(--ac);cursor:pointer}
.fpc-val{color:var(--ac);font-weight:600}
.fpc-aligns{display:flex;gap:2px}
.fpc-abtn{flex:1;background:var(--bg3);border:1px solid var(--ln2);color:var(--t2);padding:4px 0;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.fpc-abtn:hover{background:var(--bg4);color:var(--t1)}
.fpc-abtn.active{background:var(--ac);border-color:var(--ac);color:#fff}
.fpc-csw{position:relative;width:34px;height:26px}
.fpc-cn{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0}
.fpc-sw{width:34px;height:26px;border-radius:var(--r);border:2px solid var(--ln2);pointer-events:none;background-image:linear-gradient(45deg,#777 25%,transparent 25%),linear-gradient(-45deg,#777 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#777 75%),linear-gradient(-45deg,transparent 75%,#777 75%);background-size:7px 7px;background-position:0 0,0 3.5px,3.5px -3.5px,-3.5px 0}
.fpc-upzone{border:1.5px dashed var(--ln2);border-radius:var(--r);padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--t2);font-size:10px;cursor:pointer;transition:border-color .13s,background .13s}
.fpc-upzone:hover{border-color:var(--ac);background:rgba(37,99,235,.06)}
.fpc-lnk{color:var(--ac);cursor:pointer}
.fpc-lnk input[type="file"]{display:none}
.fpc-ghost{width:100%;padding:5px;background:transparent;border:1px solid var(--ln2);color:var(--t2);border-radius:var(--r);font-size:10px;cursor:pointer;transition:background .12s,color .12s}
.fpc-ghost:hover{background:var(--bg4);color:var(--t0)}
.fpc-ghost.fpc-danger:hover{border-color:var(--red);color:var(--red);background:rgba(232,64,64,.08)}
.fpc-sep{height:1px;background:var(--ln);margin:2px 0}

/* ── BG CONTROLS ── */
.fpc-fit-group{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.fpc-fit-btn{padding:4px 0;font-size:9px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t2);border-radius:var(--r);cursor:pointer;transition:all .12s;text-align:center}
.fpc-fit-btn.active,.fpc-fit-btn:hover{background:var(--ac);border-color:var(--ac);color:#fff}
.fpc-pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.fpc-pos-btn{aspect-ratio:1;font-size:12px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t2);border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.fpc-pos-btn:hover,.fpc-pos-btn.active{background:var(--ac);border-color:var(--ac);color:#fff}

/* ── IMAGE LAYER LIST ── */
.fpc-il-item{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--ln);cursor:pointer;font-size:10px;color:var(--t1)}
.fpc-il-item:hover{color:var(--t0)}
.fpc-il-item.active{color:var(--ac)}
.fpc-il-thumb{width:28px;height:28px;object-fit:cover;border-radius:3px;border:1px solid var(--ln2);flex-shrink:0}

/* ── PAT/STK GRIDS ── */
.fpc-pat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fpc-pat-btn{aspect-ratio:1;border-radius:var(--r);border:2px solid var(--ln2);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg3);transition:border-color .13s}
.fpc-pat-btn:hover,.fpc-pat-btn.active{border-color:var(--ac)}
.fpc-pat-btn svg{width:100%;height:100%}
.fpc-stk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.fpc-stk-btn{aspect-ratio:1;border-radius:var(--r);border:1px solid var(--ln2);cursor:pointer;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:18px;transition:border-color .13s,background .13s}
.fpc-stk-btn:hover{border-color:var(--ac);background:var(--bg4)}
/* Badge panel */
.fpc-badge-card{border-radius:var(--r);border:1.5px solid var(--ln2);cursor:pointer;background:var(--bg3);transition:border-color .15s,transform .12s,box-shadow .15s;overflow:hidden;height:52px;display:flex;align-items:stretch;}
.fpc-badge-card:hover{border-color:var(--ac);transform:scale(1.03);box-shadow:0 4px 16px rgba(0,0,0,.4);}
.fpc-badge-card > div{width:100%;height:100%;}
/* Badge inner span — the visible coloured pill/shape */
.fpc-badge-inner{line-height:inherit;vertical-align:middle;}

/* ── FX ROWS ── */
.fpc-fx-row{display:grid;grid-template-columns:58px 1fr 34px;align-items:center;gap:5px}
.fpc-fx-lbl{font-size:9px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpc-cc-num{width:34px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t0);font-size:9px;padding:3px 3px;border-radius:var(--r);text-align:center;-moz-appearance:textfield}
.fpc-cc-num::-webkit-inner-spin-button,.fpc-cc-num::-webkit-outer-spin-button{-webkit-appearance:none}
.fpc-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.fpc-preset-btn{padding:5px 0;font-size:8px;text-align:center;background:var(--bg3);border:1px solid var(--ln2);color:var(--t2);border-radius:var(--r);cursor:pointer;transition:all .12s;line-height:1.3}
.fpc-preset-btn:hover{background:var(--bg4);color:var(--t0)}
.fpc-preset-btn.active{border-color:var(--ac);color:var(--ac)}

/* ── PALETTE ── */
.fpc-pal-card{border-radius:var(--r);border:1px solid var(--ln2);overflow:hidden;cursor:pointer;transition:border-color .13s;margin-bottom:6px}
.fpc-pal-card:hover{border-color:var(--ac)}
.fpc-pal-swatches{display:flex;height:24px}
.fpc-pal-swatches span{flex:1}
.fpc-pal-name{font-size:9px;color:var(--t2);padding:4px 7px}

/* ── CANVAS AREA ── */
.fpc-canvas-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.fpc-canvas-bg{flex:1;min-width:0;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background:#0c0c10;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;direction:ltr;unicode-bidi:isolate;min-height:0;}
.fpc-cwrap{position:relative;transform-origin:center center;will-change:transform;transition:transform .08s;overflow:visible;flex-shrink:0;}
.fpc-cwrap::after{content:'';position:absolute;inset:-1px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 16px 60px rgba(0,0,0,.7);pointer-events:none}
.fpc-poster{width:1080px;height:1080px;background:#1a237e;background-size:cover;background-position:center;overflow:visible;position:relative;display:flex;flex-direction:column;justify-content:center;direction:ltr;unicode-bidi:isolate;}
/* ── BOTTOM BAR ── */
.fpc-zbar{display:flex;align-items:center;gap:4px;padding:0 8px;height:36px;background:var(--bg1);border-top:1px solid var(--ln);flex-shrink:0;direction:ltr;unicode-bidi:isolate;}
.fpc-zbar-group{display:flex;align-items:center;gap:3px;}
.fpc-zbar-sep{width:1px;height:18px;background:var(--ln2);margin:0 4px;flex-shrink:0;}
.fpc-zbar-lbl{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;margin-right:2px;}
.fpc-zbar-val{font-size:10px;color:var(--t2);background:var(--bg3);border:1px solid var(--ln2);border-radius:3px;padding:1px 6px;white-space:nowrap;}
.fpc-zbar-dim{font-size:9px;color:var(--t2);white-space:nowrap;}
.fpc-zbar-sel{background:var(--bg3);border:1px solid var(--ln2);color:var(--t1);font-size:10px;padding:2px 5px;border-radius:var(--r);cursor:pointer;}
.fpc-sel-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;}
.fpc-zbtn{width:22px;height:22px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t1);border-radius:var(--r);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;}
.fpc-zbtn:hover{background:var(--bg4);color:var(--t0)}
.fpc-zbtn svg{display:block;}
.fpc-zbtn.active{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:#3b7fff;}
.fpc-zlbl{font-size:10px;color:var(--t2);min-width:34px;text-align:center;}
.fpc-zfit{padding:2px 7px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t2);font-size:9px;border-radius:var(--r);cursor:pointer;}
.fpc-zfit:hover{background:var(--bg4);color:var(--t0)}
.fpc-align-btn{color:var(--t2);}
.fpc-align-btn:hover{color:var(--t0);}
/* Grid overlay */
.fpc-grid-overlay{position:absolute;inset:0;pointer-events:none;z-index:100;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:calc(1080px/12) calc(1080px/12);}
.fpc-grid-overlay.thirds{
  background-image:linear-gradient(rgba(37,99,235,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.25) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:calc(1080px/3) calc(1080px/3),calc(1080px/3) calc(1080px/3),calc(1080px/12) calc(1080px/12),calc(1080px/12) calc(1080px/12);}

/* ── RIGHT PANEL ── */
.fpc-right{width:172px;min-width:172px;min-height:0;background:var(--bg2);border-left:1px solid var(--ln);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}
.fpc-right::-webkit-scrollbar{width:3px}
.fpc-right::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px}
.fpc-right .fpc-ph{background:var(--bg2)}
/* Unified layer rows */
.fpc-lyr-row{display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:9px;color:var(--t1);cursor:pointer;border-left:2px solid transparent;transition:background .1s;user-select:none;}
.fpc-lyr-row:hover{background:var(--bg3)}
.fpc-lyr-row.active{background:rgba(37,99,235,.12);border-left-color:var(--ac);color:var(--t0)}
.fpc-lyr-row.primary-lyr{background:rgba(37,99,235,.22)!important;border-left-color:#60a5fa!important;}
.fpc-lyr-row.hidden-lyr{opacity:.35}
.fpc-lyr-row.locked-lyr .fpc-lyr-name{color:var(--t3)}
.fpc-lyr-thumb{width:22px;height:22px;object-fit:cover;border-radius:2px;flex-shrink:0;background:var(--bg4);}
.fpc-lyr-icon{width:22px;height:22px;border-radius:2px;flex-shrink:0;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:10px;}
.fpc-lyr-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;}
.fpc-lyr-btn{width:16px;height:16px;background:none;border:none;color:var(--t3);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px;flex-shrink:0;}
.fpc-lyr-btn:hover{color:var(--t0);background:var(--bg4)}
.fpc-lyr-btn.on{color:var(--ac)}
.fpc-lyr-drag-handle{font-size:10px;color:var(--t3);cursor:grab;padding:0 2px;flex-shrink:0;line-height:1;}
.fpc-lyr-drag-handle:active{cursor:grabbing;}
.fpc-lyr-drop-line{height:2px;background:var(--ac);margin:0 8px;border-radius:1px;}
.fpc-lyr-type{font-size:7px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;padding:3px 8px 1px;margin-top:2px;}
.fpc-hist-item{padding:5px 11px;font-size:9px;color:var(--t2);cursor:pointer;border-left:2px solid transparent}
.fpc-hist-item.cur{color:var(--ac);border-left-color:var(--ac)}
.fpc-hist-item.old{opacity:.4}
.fpc-saved-row{display:flex;align-items:center;gap:6px;padding:6px 11px;cursor:pointer;font-size:9px;color:var(--t1);border-bottom:1px solid var(--ln);transition:background .12s}
.fpc-saved-row:hover{background:var(--bg3)}
.fpc-saved-del{margin-left:auto;background:none;border:none;color:var(--t3);cursor:pointer;font-size:10px;padding:1px 3px;border-radius:3px}
.fpc-saved-del:hover{color:var(--red)}

/* ── FLOATING FORMAT BAR — now a top bar inside canvas area ── */
#fpc-fmt-bar{
  display:none;flex-direction:column;gap:0;
  background:var(--bg1);border-bottom:1px solid var(--ln2);
  padding:4px 10px;flex-shrink:0;z-index:100;
  direction:ltr;unicode-bidi:isolate;
}
#fpc-fmt-bar.visible{display:flex;}
.fpc-fmt-row{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;min-height:30px;padding:0 0 2px;direction:ltr;}
.fpc-fmt-row2{border-top:1px solid var(--ln2);padding:3px 0 2px;}
.fpc-fmt-row3{display:flex;align-items:center;gap:4px;padding:3px 0 2px;border-top:1px solid var(--ln2);flex-wrap:wrap;direction:ltr;}
#fpc-fmt-bar select,#fpc-fmt-size,#fpc-fmt-lineh,#fpc-fmt-shblur,#fpc-fmt-shx,#fpc-fmt-shy,#fpc-fmt-stw,#fpc-fmt-ls,#fpc-fmt-ps,#fpc-fmt-indent,#fpc-fmt-pt,#fpc-fmt-pr,#fpc-fmt-pb,#fpc-fmt-pl{background:var(--bg3);border:1px solid var(--ln2);color:var(--t0);border-radius:3px;font-size:10px;padding:2px 4px;height:24px;box-sizing:border-box;}
#fpc-fmt-bar select{width:110px;}
#fpc-fmt-size,#fpc-fmt-lineh{width:44px;}
#fpc-fmt-sel-size{width:42px;}
#fpc-fmt-shblur,#fpc-fmt-shx,#fpc-fmt-shy,#fpc-fmt-stw{width:36px;}
.fpc-fmt-btn{height:24px;min-width:24px;padding:0 5px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t1);font-size:11px;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fpc-fmt-btn:hover{background:var(--bg5);color:var(--t0);}
.fpc-fmt-btn.active{background:rgba(37,99,235,.25);border-color:var(--ac);color:var(--t0);}
.fpc-fmt-apply-color{height:24px;padding:0 6px;background:var(--bg3);border:1px solid var(--ln2);color:#ff0000;font-size:10px;font-weight:700;border-radius:3px;cursor:pointer;letter-spacing:.02em;flex-shrink:0;}
.fpc-fmt-apply-color:hover{background:var(--bg5);}
.fpc-fmt-del{color:var(--red)!important;}
.fpc-fmt-del:hover{background:rgba(232,64,64,.15)!important;}
.fpc-fmt-sep{width:1px;height:16px;background:var(--ln2);margin:0 3px;flex-shrink:0;}
.fpc-fmt-color-wrap{position:relative;width:24px;height:24px;border-radius:3px;overflow:hidden;border:1px solid var(--ln2);cursor:pointer;flex-shrink:0;}
.fpc-fmt-color-wrap input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0;}
.fpc-fmt-color-wrap span{position:absolute;inset:0;pointer-events:none;border-radius:2px;}
#fpc-fmt-color-swatch{background:#fff;}
/* ── QUICK COLOR SWATCHES ── */
.fpc-fmt-swatches{display:flex;align-items:center;gap:3px;flex-shrink:0;}
.fpc-qswatch{width:18px;height:18px;border-radius:4px;cursor:pointer;display:inline-block;flex-shrink:0;border:1.5px solid rgba(0,0,0,.2);transition:transform .1s,box-shadow .1s;box-sizing:border-box;}
.fpc-qswatch:hover{transform:scale(1.25);box-shadow:0 0 0 2px var(--ac);z-index:1;position:relative;}
.fpc-qswatch.active-swatch{box-shadow:0 0 0 2px var(--ac),0 0 0 3px rgba(255,255,255,.5);transform:scale(1.15);}

/* ── PAINT SWATCHES ── */
.fpc-paint-canvas.eyedrop-cur{cursor:crosshair!important;}
.fpc-paint-swatches{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:2px;}
.fpc-pswatch{width:18px;height:18px;border-radius:3px;cursor:pointer;display:inline-block;border:1.5px solid rgba(255,255,255,.15);transition:transform .1s,box-shadow .1s;box-sizing:border-box;flex-shrink:0;}
.fpc-pswatch:hover{transform:scale(1.3);box-shadow:0 0 0 2px var(--ac);position:relative;z-index:1;}
.fpc-pswatch.active-pswatch{box-shadow:0 0 0 2px var(--ac),0 0 0 3px rgba(255,255,255,.3);transform:scale(1.15);}
.fpc-precent-swatch{width:14px;height:14px;border-radius:2px;cursor:pointer;display:inline-block;border:1px solid rgba(255,255,255,.2);transition:transform .1s;}
.fpc-precent-swatch:hover{transform:scale(1.2);}
#fpc-paint-color-hex:hover{border-color:var(--ac);color:var(--t0);}

/* ── ISLAMIC PANEL ── */
.fpc-callg-btn{padding:6px 4px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t0);border-radius:4px;cursor:pointer;font-size:9px;text-align:center;line-height:1.4;transition:border-color .12s;}
.fpc-callg-btn:hover{border-color:var(--ac);}
.fpc-callg-arabic{font-family:'Lateef',serif;font-size:18px;direction:rtl;display:block;margin-bottom:2px;}
.fpc-hadith-item{background:var(--bg3);border-radius:4px;padding:7px 8px;margin-bottom:4px;border:1px solid transparent;}
.fpc-hadith-item:hover{border-color:var(--ln2);}
.fpc-hadith-text{font-size:10px;color:var(--t1);line-height:1.5;margin-bottom:5px;}
.fpc-hadith-meta{display:flex;align-items:center;justify-content:space-between;}
.fpc-hadith-ref{font-size:9px;color:var(--t3);}
.fpc-hadith-place{font-size:9px;padding:2px 7px;background:rgba(37,99,235,.12);border:1px solid var(--ac);color:var(--ac);border-radius:3px;cursor:pointer;}
.fpc-hadith-place:hover{background:rgba(37,99,235,.22);}

/* ── TEXT TOOL PANEL ── */
.fpc-txt-hint{display:flex;flex-direction:column;gap:3px;padding:4px 0 6px;}
.fpc-txt-hint span{font-size:9px;color:var(--t2);padding:3px 8px;background:var(--bg3);border-radius:3px;}

/* ── PRESET STRIP ── */
#fpc-preset-strip{display:flex;flex-direction:column;gap:4px;padding:4px 0;}
.fpc-preset-item{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--bg3);border-radius:4px;cursor:pointer;border:1px solid transparent;transition:border-color .12s;}
.fpc-preset-item:hover{border-color:var(--ac);background:var(--bg4);}
.fpc-preset-thumb{width:36px;height:36px;border-radius:3px;object-fit:cover;flex-shrink:0;background:var(--bg4);}
.fpc-preset-name{font-size:9px;color:var(--t1);}

/* ── TEXT LAYER LIST ── */
#fpc-text-list{display:flex;flex-direction:column;gap:2px;padding:4px 0;}
.fpc-txt-item{display:flex;align-items:center;gap:5px;padding:4px 8px;background:var(--bg3);border-radius:4px;cursor:pointer;border-left:2px solid transparent;transition:background .1s;}
.fpc-txt-item:hover{background:var(--bg4);}
.fpc-txt-item.active{background:var(--bg4);border-left-color:var(--ac);}
.fpc-txt-item-preview{font-size:9px;color:var(--t1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fpc-txt-item-del{background:none;border:none;color:var(--t3);cursor:pointer;font-size:10px;padding:1px 3px;border-radius:2px;flex-shrink:0;}
.fpc-txt-item-del:hover{color:var(--red);}
.fpc-txt-item-btn{background:none;border:none;color:var(--t3);cursor:pointer;font-size:9px;padding:1px 3px;border-radius:2px;flex-shrink:0;line-height:1;}
.fpc-txt-item-btn:hover:not(:disabled){background:var(--bg5);color:var(--t1);}

/* ── TOOL CURSORS ── */
.fpc-poster.fpc-tool-text{cursor:text!important;}
.fpc-poster.fpc-tool-select{cursor:default!important;}
/* ── TEXT BOX ON CANVAS ── */
.fpc-txt-box{position:absolute;z-index:2;cursor:move;min-width:40px;min-height:20px;box-sizing:border-box;unicode-bidi:plaintext;}
.fpc-txt-box.selected{outline:1.5px dashed rgba(37,99,235,.7);outline-offset:3px;}
.fpc-txt-box.editing{cursor:text;outline:1.5px solid var(--ac);outline-offset:3px;}
.fpc-txt-box[contenteditable=true]{outline:1.5px solid var(--ac);outline-offset:3px;}
/* Badge mode: shrink-wrap to content */
.fpc-txt-box.fpc-badge-box{display:inline-block!important;width:auto!important;white-space:nowrap!important;max-width:90%!important;word-break:normal!important;overflow-wrap:normal!important;}

/* Resize handles — hidden until selected */
.fpc-tb-handle{position:absolute;width:10px;height:10px;background:var(--ac);border:1.5px solid #fff;border-radius:2px;z-index:10;display:none;box-sizing:border-box;}
.fpc-txt-box.selected .fpc-tb-handle{display:block;}
/* Left edge — centered vertically */
.fpc-tb-handle-w{left:-5px;top:50%;transform:translateY(-50%);cursor:w-resize;}
/* Right edge — centered vertically */
.fpc-tb-handle-e{right:-5px;top:50%;transform:translateY(-50%);cursor:e-resize;}
/* Bottom-right corner */
.fpc-tb-handle-se{right:-5px;bottom:-5px;cursor:se-resize;}
/* Rotation handle — circle above box */
.fpc-tb-handle-rot{left:50%;top:-26px;transform:translateX(-50%);cursor:grab;border-radius:50%;background:#2563eb;border-color:#fff;width:11px;height:11px;}
.fpc-tb-handle-rot:active{cursor:grabbing;}
.fpc-tb-handle-rot::before{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:1px;height:8px;background:rgba(37,99,235,.5);}
/* Snap guide lines */
.fpc-snap-guide{position:absolute;pointer-events:none;z-index:9990;background:rgba(239,68,68,.85);}
.fpc-snap-guide-h{left:0;right:0;height:1px;}
.fpc-snap-guide-v{top:0;bottom:0;width:1px;}
/* Word paint picker */
#fpc-word-paint{position:fixed;z-index:99999;background:var(--bg1);border:1px solid var(--ln2);border-radius:7px;padding:5px 8px;display:none;align-items:center;gap:5px;box-shadow:0 4px 20px rgba(0,0,0,.5);}
#fpc-word-paint .fpc-wp-sw{width:18px;height:18px;border-radius:50%;border:2px solid var(--ln2);cursor:pointer;transition:transform .1s;}
#fpc-word-paint .fpc-wp-sw:hover{transform:scale(1.25);}
#fpc-word-paint .fpc-wp-pick{width:22px;height:22px;border-radius:50%;overflow:hidden;position:relative;cursor:pointer;border:2px solid var(--ln2);}
#fpc-word-paint .fpc-wp-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}

/* ── AI CAPTION WRITER ── */
#fpc-ai-generate{transition:opacity .15s,transform .1s;}
#fpc-ai-generate:hover{opacity:.9;}
#fpc-ai-generate:active{transform:scale(.98);}
#fpc-ai-generate.loading{opacity:.7;pointer-events:none;}
#fpc-ai-generate.loading #fpc-ai-gen-icon{animation:fpc-spin .7s linear infinite;display:inline-block;}
@keyframes fpc-spin{to{transform:rotate(360deg);}}
.fpc-ai-card{background:var(--bg3);border:1px solid var(--ln2);border-radius:5px;padding:8px 10px;margin-bottom:6px;position:relative;}
.fpc-ai-card:hover{border-color:var(--ac);}
.fpc-ai-card-type{font-size:8px;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);margin-bottom:4px;font-weight:600;}
.fpc-ai-card-text{font-size:11px;color:var(--t0);line-height:1.45;word-break:break-word;}
.fpc-ai-card-text[contenteditable=true]{outline:1px solid var(--ac);border-radius:2px;padding:2px;}
.fpc-ai-card-actions{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;}
.fpc-ai-card-btn{font-size:9px;padding:2px 7px;background:var(--bg4);border:1px solid var(--ln2);color:var(--t1);border-radius:3px;cursor:pointer;}
.fpc-ai-card-btn:hover{background:var(--bg5);color:var(--t0);}
.fpc-ai-card-btn.place{background:rgba(37,99,235,.15);border-color:var(--ac);color:var(--ac);}
.fpc-ai-card-btn.place:hover{background:rgba(37,99,235,.25);}
.fpc-ai-tpl-btn{padding:5px 4px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t1);border-radius:4px;cursor:pointer;font-size:9px;text-align:center;transition:all .12s;white-space:nowrap;}
.fpc-ai-tpl-btn:hover{background:var(--bg4);color:var(--t0);}
.fpc-ai-tpl-btn.active{background:rgba(37,99,235,.15);border-color:var(--ac);color:var(--ac);font-weight:600;}

/* ── RICH TEXT TOOLBAR ── */
.fpc-rt-bar{display:flex;align-items:center;gap:3px;padding:4px 6px;background:var(--bg4);border-radius:var(--r);margin-bottom:4px;flex-wrap:wrap;}
.fpc-rt-lbl{font-size:8px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-right:2px;}
.fpc-rt-btn{height:22px;padding:0 7px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t1);font-size:11px;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.fpc-rt-btn:hover{background:var(--bg5);color:var(--t0);}
.fpc-rt-color-wrap{display:flex;align-items:center;gap:0;}
.fpc-rt-color{width:22px;height:22px;border:none;padding:0;background:none;border-radius:3px 0 0 3px;cursor:pointer;border:1px solid var(--ln2);}
.fpc-rt-apply-color{height:22px;padding:0 6px;background:var(--bg3);border:1px solid var(--ln2);border-left:none;color:#ff0000;font-size:12px;font-weight:700;border-radius:0 3px 3px 0;cursor:pointer;}
.fpc-rt-apply-color:hover{background:var(--bg5);}
.fpc-rt-hint{font-size:8px;color:var(--t3);padding:0 4px 4px;font-style:italic;}
.fpc-overlay-div{position:absolute;inset:0;z-index:1;pointer-events:none}
.fpc-text-line.fpc-abs{position:absolute!important}
.fpc-text-line:hover::after{content:'';position:absolute;inset:0;border:1px dashed rgba(37,99,235,.5);pointer-events:none;border-radius:2px}
.fpc-curved-svg{position:absolute;z-index:6;top:0;left:0;pointer-events:none}
.fpc-pat-layer{position:absolute;inset:0;z-index:3;pointer-events:none;}
.fpc-stk-el{position:absolute;z-index:5;cursor:move;user-select:none}
.fpc-il-el{position:absolute!important;z-index:4;cursor:move;user-select:none;max-width:none!important;max-height:none!important;overflow:hidden;}
.fpc-il-img{width:100%!important;height:100%!important;display:block!important;max-width:none!important;max-height:none!important;pointer-events:none;object-fit:fill;}
.fpc-il-el.selected{outline:2px solid var(--ac)}
/* ── IMAGE LAYER RESIZE HANDLES ── */
.fpc-il-handle{position:absolute;width:10px;height:10px;background:var(--ac);border:1.5px solid #fff;border-radius:2px;z-index:20;box-sizing:border-box;display:none;}
.fpc-il-handle-nw{top:-5px;left:-5px;cursor:nw-resize;}
.fpc-il-handle-n {top:-5px;left:50%;transform:translateX(-50%);cursor:n-resize;}
.fpc-il-handle-ne{top:-5px;right:-5px;cursor:ne-resize;}
.fpc-il-handle-e {top:50%;right:-5px;transform:translateY(-50%);cursor:e-resize;}
.fpc-il-handle-se{bottom:-5px;right:-5px;cursor:se-resize;}
.fpc-il-handle-s {bottom:-5px;left:50%;transform:translateX(-50%);cursor:s-resize;}
.fpc-il-handle-sw{bottom:-5px;left:-5px;cursor:sw-resize;}
.fpc-il-handle-w {top:50%;left:-5px;transform:translateY(-50%);cursor:w-resize;}
.fpc-il-el.selected .fpc-il-handle{display:block;}
.fpc-il-el.selected{outline:2px solid var(--ac);outline-offset:1px;}
.fpc-logo-el{position:absolute!important;z-index:10;pointer-events:none;max-width:none!important;max-height:none!important;}
.fpc-wm-layer{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.fpc-cc-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ── TEMPLATE MODAL ── */
.fpc-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
.fpc-overlay.open{display:flex}
.fpc-modal{background:var(--bg2);border:1px solid var(--ln2);border-radius:10px;width:580px;max-width:95vw;max-height:82vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.8)}
.fpc-slmodal{width:380px}
.fpc-mhead{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid var(--ln);font-size:12px;font-weight:600;position:sticky;top:0;background:var(--bg2);z-index:1}
.fpc-mclose{background:none;border:none;color:var(--t2);font-size:13px;cursor:pointer;padding:2px 6px;border-radius:var(--r)}
.fpc-mclose:hover{background:var(--bg4);color:var(--t0)}
.fpc-tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.fpc-tcard{cursor:pointer;border-radius:7px;border:2px solid transparent;overflow:hidden;transition:border-color .13s,transform .13s}
.fpc-tcard:hover{border-color:var(--ln2);transform:translateY(-2px)}
.fpc-tcard.active{border-color:var(--ac)}
.fpc-tcard p{font-size:9px;color:var(--t2);text-align:center;padding:4px 0 2px}
.fpc-tprev{height:85px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:5px;font-family:'Jameel Noori Nastaleeq',sans-serif}
.fpc-tprev .tb1,.fpc-tprev .tb2,.fpc-tprev .tb3{font-size:11px;text-align:center;padding:1px 4px;line-height:1.4;width:100%}
.tpl1{background:#1a237e}.tpl1 .tb1{background:#ff611c;color:#fff}.tpl1 .tb2{background:#000;color:#eee}.tpl1 .tb3{background:#152846;color:#ddd}
.tpl2{background:#111}.tpl2 .tb1{background:#ffc300;color:#000}.tpl2 .tb2{background:#4a0e93;color:#fff}.tpl2 .tb3{background:#000;color:#fff}
.tpl3{background:#222}.tpl3 .tb1{background:#0069c3;color:#fff}.tpl3 .tb2{background:#c10f00;color:#fff}.tpl3 .tb3{background:#4400bd;color:#fff}
.tpl4{background:linear-gradient(160deg,#1a1a2e,#0f3460)}.tpl4 .tb2{color:#ffdd00;font-size:15px;font-weight:900}
.tpl5{background:#0f3460}.tpl5 .tb2{border-left:3px solid #ffdd00;text-align:left;padding-left:4px;color:#fff}
.tpl6{background:linear-gradient(160deg,#1b4332,#081c15)}.tpl6 .tb1{color:#f5d020}.tpl6 .tb2{color:#fff}.tpl6 .tb3{color:#c9a84c}
.tpl7{background:linear-gradient(160deg,#1b4332,#0a2018)}.tpl7 .tb1{background:#1b4332;color:#f5d020}.tpl7 .tb2{background:#081c15;color:#fff}.tpl7 .tb3{background:#0a2018;color:#c9a84c}
.tpl8{background:#6d0025}.tpl8 .tb1{background:#6d0025;color:#ffd700}.tpl8 .tb2{background:#4a0018;color:#fff8e7}.tpl8 .tb3{background:#2d000f;color:#ffd700}
.tpl9{background:#b5451b}.tpl9 .tb1{background:#b5451b;color:#fff}.tpl9 .tb2{background:#7c2d12;color:#fff3e0}.tpl9 .tb3{background:#4e1a0c;color:#ffccbc}
.tpl10{background:#f5f0e8}.tpl10 .tb1{background:#f5f0e8;color:#2d2d2d}.tpl10 .tb2{background:#ede8dc;color:#555}.tpl10 .tb3{background:#e0dbd0;color:#888}
.tpl11{background:#c62828}.tpl11 .tb1{background:#c62828;color:#fff}.tpl11 .tb2{background:#b71c1c;color:#ffebee}.tpl11 .tb3{background:#7f0000;color:#ff8a80}
.tpl12{background:#0d1b2a}.tpl12 .tb1{background:#0d1b2a;color:#c9a84c}.tpl12 .tb2{background:#1b2a3b;color:#fff}.tpl12 .tb3{background:#0d1b2a;color:#c9a84c}
.tpl13{background:#1a237e}.tpl13 .tb1{background:#1a237e;color:#fff;text-align:right}.tpl13 .tb2{background:#283593;color:#e8f5e9;text-align:right}.tpl13 .tb3{background:#1a237e;color:#c5cae9;text-align:right}
.tpl14{background:#00695c}.tpl14 .tb1{background:#00695c;color:#fff}.tpl14 .tb2{background:#004d40;color:#e0f2f1}.tpl14 .tb3{background:#00251a;color:#a7ffeb}
.tpl15{background:#212121}.tpl15 .tb1{background:#212121;color:#ffd700}.tpl15 .tb2{background:#303030;color:#fff}.tpl15 .tb3{background:#1a1a1a;color:#ffd700}
.tpl16{background:#4a148c}.tpl16 .tb1{background:#4a148c;color:#fff}.tpl16 .tb2{background:#38006b;color:#e1bee7}.tpl16 .tb3{background:#12005e;color:#ce93d8}

/* ── RIGHT-CLICK CONTEXT MENU ── */
#fpc-ctx{position:fixed;z-index:99999;background:var(--bg2);border:1px solid var(--ln2);border-radius:8px;padding:5px 0;min-width:180px;box-shadow:0 8px 28px rgba(0,0,0,.55);display:none}
#fpc-ctx.visible{display:block}
.fpc-ctx-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12px;color:var(--t1);cursor:pointer;white-space:nowrap;transition:background .1s}
.fpc-ctx-item:hover{background:var(--bg4);color:var(--t0)}
.fpc-ctx-item .fpc-ctx-ico{font-size:14px;width:16px;text-align:center;opacity:.8}
.fpc-ctx-sep{height:1px;background:var(--ln2);margin:4px 8px}
.fpc-ctx-item.danger{color:#f47373}
.fpc-ctx-item.danger:hover{background:#3a1a1a}

/* ── COPY/PASTE STYLE ── */
.fpc-style-copy{font-size:10px;padding:2px 7px;background:var(--bg4);border:1px solid var(--ln2);border-radius:4px;color:var(--t2);cursor:pointer;margin-left:4px;transition:all .13s}
.fpc-style-copy:hover{background:var(--ac);color:#fff;border-color:var(--ac)}
.fpc-style-copy.copied{background:#27ae60;color:#fff;border-color:#27ae60}
.fpc-paste-hint{font-size:10px;color:var(--ac);padding:3px 8px;display:none}
.fpc-paste-hint.visible{display:block}

/* ── CROP MODAL ── */
.fpc-crop-arena{position:relative;height:360px;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
#fpc-crop-canvas{display:block;max-width:100%;max-height:360px}
.fpc-crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.5);cursor:move;box-sizing:border-box}
.fpc-crop-rule{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:33.33% 33.33%}
.fpc-ch{position:absolute;width:12px;height:12px;background:#fff;border-radius:2px}
.fpc-ch-tl{top:-1px;left:-1px;cursor:nw-resize}
.fpc-ch-tr{top:-1px;right:-1px;cursor:ne-resize}
.fpc-ch-bl{bottom:-1px;left:-1px;cursor:sw-resize}
.fpc-ch-br{bottom:-1px;right:-1px;cursor:se-resize}
.fpc-crop-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg2);border-top:1px solid var(--ln)}

/* ── TOAST ── */
.fpc-toast{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);background:var(--bg5);color:var(--t0);border:1px solid var(--ln2);font-size:11px;padding:6px 15px;border-radius:20px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .2s;z-index:3000;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.fpc-toast.show{opacity:1}
@keyframes fpc-spin{to{transform:rotate(360deg)}}
.fpc-spin{display:inline-block;animation:fpc-spin .7s linear infinite}

/* ── POSTER TEMPLATE OVERRIDES ── */
.fpc-poster.template-1{padding:60px;background:#1a237e}
.fpc-poster.template-2{padding:50px;background:#111;justify-content:flex-end}
.fpc-poster.template-3{padding:70px;background:#222;justify-content:space-between}
.fpc-poster.template-4{background:linear-gradient(160deg,#1a1a2e,#0f3460);padding:80px 60px}
.fpc-poster.template-5{background:#0f3460;padding:60px}
.fpc-poster.template-6{background:linear-gradient(160deg,#1b4332,#081c15);padding:100px 80px}
.fpc-islamic-border{position:absolute;top:28px;left:28px;right:28px;bottom:28px;border:4px solid #c9a84c;z-index:2;pointer-events:none}
.fpc-ic{position:absolute;width:56px;height:56px;border-color:#f5d020;border-style:solid;z-index:3}
.fpc-ic-tl{top:18px;left:18px;border-width:6px 0 0 6px}
.fpc-ic-tr{top:18px;right:18px;border-width:6px 6px 0 0}
.fpc-ic-bl{bottom:18px;left:18px;border-width:0 0 6px 6px}
.fpc-ic-br{bottom:18px;right:18px;border-width:0 6px 6px 0}

/* ── RTL LANG MODE ── */
.fpc-editor.lang-ur .fpc-ph,.fpc-editor.lang-ur .fpc-tbname,.fpc-editor.lang-ur .fpc-f label{font-family:'Jameel Noori Nastaleeq',sans-serif;font-size:115%}

/* ── RESPONSIVE ── */
@media(max-width:900px){.fpc-right{display:none}}
@media(max-width:760px){.fpc-icons{width:80px}.fpc-props{width:240px;min-width:240px}.fpc-tb-center{display:none}}

/* ── PAINT TOOLS ── */
.fpc-paint-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.fpc-ptool{aspect-ratio:1;background:var(--bg3);border:2px solid var(--ln2);color:var(--t1);border-radius:var(--r);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .12s}
.fpc-ptool:hover{background:var(--bg4);border-color:var(--ln2);color:var(--t0)}
.fpc-ptool.active{background:var(--ac);border-color:var(--ac);color:#fff}
.fpc-paint-canvas{position:absolute;inset:0;z-index:9;cursor:crosshair;touch-action:none}
.fpc-paint-canvas.eraser-cur{cursor:cell}

/* ── GRADIENT PANEL ── */
.fpc-grad-stop{display:flex;align-items:center;gap:5px;margin-bottom:7px;width:100%;box-sizing:border-box;}
.fpc-grad-stop .fpc-csw{flex:0 0 30px;width:30px;min-width:30px;}
.fpc-grad-stop .fpc-grad-sp{flex:1 1 0%;min-width:0;width:0;height:6px;cursor:pointer;accent-color:var(--ac);}
.fpc-grad-stop .fpc-grad-spv{flex:0 0 38px;width:38px;font-size:10px;color:var(--t2);text-align:right;white-space:nowrap;}
.fpc-grad-stop .fpc-grad-rmstop{flex:0 0 22px;width:22px;min-width:22px;padding:0!important;font-size:11px;height:22px;display:flex;align-items:center;justify-content:center;}
.fpc-grad-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:4px}
.fpc-grad-preset{height:32px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;transition:border-color .12s}
.fpc-grad-preset:hover,.fpc-grad-preset.active{border-color:var(--ac)}

/* ── QR PANEL ── */
#fpc-qr-preview canvas,#fpc-qr-preview img{border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ── QUICK STYLES ── */
.fpc-qs-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fpc-qs-btn{padding:10px 6px;border-radius:var(--r);border:1.5px solid var(--ln2);background:var(--bg3);cursor:pointer;font-size:13px;text-align:center;transition:border-color .12s;line-height:1.2}
.fpc-qs-btn:hover{border-color:var(--ac)}
.fpc-qs-btn span{display:block;font-size:9px;color:var(--t3);margin-top:2px}
.fpc-tfx-btn{padding:5px 7px!important;text-align:left!important}
.fpc-tfx-btn.active{border-color:var(--ac);background:var(--bg2)}

/* ── FRAMES ── */
.fpc-frames-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:4px}
.fpc-frame-thumb{aspect-ratio:1;border:2px solid var(--ln2);border-radius:var(--r);cursor:pointer;background:var(--bg3);display:flex;align-items:center;justify-content:center;padding:3px;transition:border-color .12s}
.fpc-frame-thumb:hover,.fpc-frame-thumb.active{border-color:var(--ac)}
.fpc-frame-thumb svg{width:100%;height:100%;opacity:.8}
.fpc-frame-layer{position:absolute;inset:0;z-index:5;pointer-events:none}

/* ── EMOJI PICKER ── */
.fpc-emoji-cat-head{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;padding:6px 0 3px;font-weight:600}
.fpc-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-bottom:6px}
.fpc-emoji-btn{font-size:20px;padding:4px 2px;background:none;border:none;cursor:pointer;border-radius:4px;transition:background .1s;text-align:center;line-height:1.3}
.fpc-emoji-btn:hover{background:var(--bg4)}
.fpc-emoji-btn.selected{background:var(--ac);border-radius:6px}
#fpc-emoji-search::placeholder{color:var(--t3)}

/* ── EMOJI DRAG DROP ── */
.fpc-emoji-btn[draggable="true"]{cursor:grab}
.fpc-emoji-btn[draggable="true"]:active{cursor:grabbing}
#fpc-poster.fpc-drop-target{outline:3px dashed var(--ac);outline-offset:-3px}

/* ── ZOOM TOOL ── */
.fpc-cvbg.zoom-in-mode  { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='7' stroke='white' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='10' cy='10' r='7' stroke='black' stroke-width='3' fill='none' opacity='.3'/%3E%3Cline x1='7' y1='10' x2='13' y2='10' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='10' y1='7' x2='10' y2='13' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10 10, zoom-in; }
.fpc-cvbg.zoom-out-mode { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='7' stroke='white' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='10' cy='10' r='7' stroke='black' stroke-width='3' fill='none' opacity='.3'/%3E%3Cline x1='7' y1='10' x2='13' y2='10' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10 10, zoom-out; }
.fpc-cvbg.zoom-area-mode { cursor: crosshair; }
#fpc-zoom-rect { border-radius: 2px; }

/* ── HAND / PAN TOOL ── */
.fpc-cvbg.hand-mode { cursor: grab; }
.fpc-cvbg.hand-mode.panning { cursor: grabbing; }

/* ── EYEDROPPER ── */
#fpc-eye-preview { width:28px;height:28px;border-radius:50%;border:2px solid var(--ln2);display:inline-block;vertical-align:middle;cursor:pointer;flex-shrink:0; }

/* ── TEXT SPACING / DIRECTION ROW ── */
.fpc-dir-btn { font-size:10px;padding:2px 7px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t2);border-radius:var(--r);cursor:pointer;white-space:nowrap; }
.fpc-dir-btn.active { background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:#3b7fff; }

/* ── NON-DESTRUCTIVE CROP ── */
.fpc-crop-nd-bar { display:flex;align-items:center;gap:6px;padding:4px 8px;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.3);border-radius:var(--r);font-size:10px;color:#7dd3fc;flex-wrap:wrap; }

/* ── PARAGRAPH SPACING via CSS custom property ── */
.fpc-txt-box span[style*="unicode-bidi:isolate"] { padding-bottom: var(--fpc-para-sp, 0px); }
.fpc-txt-box br + * { margin-top: var(--fpc-para-sp, 0px); }

/* ── AI Loading Overlay ───────────────────────────────────── */
#fpc-ai-overlay.active{display:flex!important;}
@keyframes fpc-dot-pulse{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.fpc-ai-dot{display:inline-block;animation:fpc-dot-pulse 1.4s ease-in-out infinite;}
.fpc-ai-dot:nth-child(1){animation-delay:0s;}
.fpc-ai-dot:nth-child(2){animation-delay:.2s;}
.fpc-ai-dot:nth-child(3){animation-delay:.4s;}

/* ── AI Panel Tabs ─────────────────────────────────────────── */
.fpc-ai-tab{transition:color .15s,border-color .15s;color:var(--t3)!important;border-bottom-color:transparent!important;}
.fpc-ai-tab.active{color:var(--ac)!important;border-bottom-color:var(--ac)!important;}
.fpc-ai-tab.active{color:var(--ac)!important;border-bottom-color:var(--ac)!important;}
.fpc-ai-tab:hover{color:var(--t1)!important;}
.fpc-ai-tabpane{display:none;}
.fpc-ai-tabpane.active{display:block;}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE LAYOUT
   Breakpoints:
     ≤1100px  — hide right panel
     ≤820px   — narrow props panel, smaller icons
     ≤600px   — mobile: bottom sheet panel, icon bar becomes tab bar
     ≤400px   — very small phones
══════════════════════════════════════════════════════════════ */

/* ── 1100px: hide right layers panel ───────────────────────── */
/* ── 820px: narrow props, smaller icon bar ─────────────────── */
@media(max-width:820px){
  .fpc-icons{width:72px;padding:4px 2px;}
  .fpc-icon{width:60px;height:48px;font-size:9px;}
  .fpc-icon svg,.fpc-icon .fpc-ico{width:16px;height:16px;}
  .fpc-props{width:260px;min-width:200px;}
  .fpc-tb-center{display:none!important;}
  .fpc-tb-left .fpc-brand{display:none;}
  .fpc-tb-right .fpc-tbname{display:none;}
}

/* ── 600px: MOBILE layout — slide-up panel drawer ───────────── */
@media(max-width:600px){
  /* Editor takes full viewport */
  .fpc-editor{height:100vh!important;height:100dvh!important;border-radius:0!important;border:none!important;}

  /* ── TOOLBAR ── compact single row, essential only */
  .fpc-toolbar{
    height:52px!important;
    padding:0 10px!important;
    gap:6px;
    flex-wrap:nowrap!important;
    overflow:hidden;
  }
  .fpc-tb-left{gap:5px;flex-shrink:0;}
  .fpc-tb-center{display:none!important;}
  .fpc-tb-right{gap:5px;flex-shrink:0;}
  /* Brand: show icon only, hide text */
  .fpc-brand span:last-child{display:none;}
  .fpc-brand svg{width:22px!important;height:22px!important;}
  .fpc-vbadge{display:none;}
  /* Show only essential toolbar buttons */
  #fpc-tpl-btn{display:none!important;}
  #fpc-save-btn{display:none!important;}
  #fpc-load-btn{display:none!important;}
  #fpc-saveastp-btn{display:none!important;}
  #fpc-anim-btn{display:none!important;}
  /* Undo/redo — icon only, no text */
  #fpc-undo-btn,#fpc-redo-btn{
    padding:7px 10px!important;
    font-size:16px!important;
    min-width:38px;
  }
  /* Download button — prominent */
  #fpc-dl-btn{
    padding:9px 14px!important;
    font-size:13px!important;
    font-weight:700!important;
    border-radius:8px!important;
  }
  #fpc-share-btn{
    padding:9px 11px!important;
    font-size:17px!important;
  }
  #fpc-export-fmt{
    padding:7px 6px!important;
    font-size:11px!important;
    max-width:72px;
  }
  .fpc-tbsep{display:none!important;}
  /* Show mobile-only toolbar controls */
  .fpc-mob-only{display:inline-flex!important;}
  /* ── ZBAR: handled by responsive rules below ── */

  /* ── BODY: stack vertically ── */
  .fpc-body{flex-direction:column;overflow:hidden;min-height:0;}

  /* ── ICON BAR: horizontal tab bar at bottom ── */
  .fpc-icons{
    width:100%!important;
    height:68px!important;
    flex-direction:row!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-right:none!important;
    border-top:1px solid var(--ln)!important;
    padding:6px 8px 6px!important;
    gap:3px!important;
    order:3;
    flex-shrink:0;
    touch-action:pan-x;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    background:var(--bg1);
    box-sizing:border-box!important;
  }
  .fpc-icons::-webkit-scrollbar{height:0;}
  .fpc-icon-group{display:contents;}
  .fpc-icon-sep{display:none!important;}
  .fpc-icon-group-label{display:none!important;}
  /* ── LARGER ICON BUTTONS ── */
  .fpc-icon{
    width:58px!important;
    height:56px!important;
    flex-shrink:0!important;
    flex-direction:column!important;
    font-size:9px!important;
    font-weight:500!important;
    border-radius:10px!important;
    padding:5px 3px 4px!important;
    gap:3px!important;
    scroll-snap-align:start;
    letter-spacing:.01em;
    overflow:hidden;
    line-height:1.1;
  }
  .fpc-icon span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:54px;
    display:block;
  }
  .fpc-icon svg,
  .fpc-icon .fpc-ico{
    width:22px!important;
    height:22px!important;
    flex-shrink:0!important;
  }
  .fpc-icon.active{
    background:rgba(37,99,235,.22)!important;
    color:var(--ac)!important;
  }

  /* ── CANVAS area ── */
  .fpc-canvas-bg,.fpc-cvbg{
    order:1;flex:1;min-height:0;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
    align-items:flex-start!important;
    justify-content:center!important;
    padding:8px 6px!important;
  }
  .fpc-cwrap{
    transform-origin:top center!important;
    flex-shrink:0!important;
    margin:0 auto!important;
    position:relative!important;
  }

  /* ── PROPS PANEL: slide-up drawer ── */
  .fpc-props{
    order:2;
    position:fixed!important;
    bottom:68px!important;
    left:0!important;right:0!important;
    width:100%!important;min-width:0!important;
    max-height:62vh!important;
    height:auto;
    border-right:none!important;
    border-top:2px solid var(--ac)!important;
    border-radius:18px 18px 0 0!important;
    z-index:1000;
    transform:translateY(105%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:0 -10px 40px rgba(0,0,0,.7);
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .fpc-props.mob-open{transform:translateY(0)!important;}
  .fpc-props .fpc-pb:last-child{padding-bottom:28px!important;}

  /* Drag handle pill */
  .fpc-props::before{
    content:'';display:block;
    width:40px;height:4px;
    background:var(--ln2);border-radius:2px;
    margin:10px auto 2px;
  }

  /* Panel header — larger tap target */
  .fpc-ph{
    position:sticky;top:0;z-index:2;
    background:var(--bg2);
    padding:12px 16px 10px!important;
    font-size:10px!important;
    cursor:pointer;
    border-radius:18px 18px 0 0;
  }

  /* Right panel hidden */
  .fpc-right{display:none!important;}

  /* ── FORMAT BAR — above icon bar ── */
  #fpc-fmt-bar{
    position:fixed!important;
    bottom:68px!important;
    left:0!important;right:0!important;
    border-radius:0!important;
    border-top:1px solid var(--ln2)!important;
    flex-wrap:wrap;
    z-index:999;
    max-height:100px;
    overflow:auto;
  }

  /* AI overlay full-screen */
  #fpc-ai-overlay > div{
    width:92vw!important;
    min-width:0!important;
    padding:24px 20px!important;
  }

  /* Modals full-screen */
  .fpc-overlay{align-items:flex-end!important;}
  .fpc-modal{
    width:100%!important;max-width:100%!important;
    border-radius:18px 18px 0 0!important;
    max-height:82vh!important;
  }

  /* Share modal 2×2 grid */
  #fpc-share-modal .fpc-modal > div > div[style*="grid"]{
    grid-template-columns:1fr 1fr!important;
  }
}

/* ── 400px: very small phones ───────────────────────────────── */
@media(max-width:400px){
  .fpc-icons{height:62px!important;padding:4px 6px 4px!important;}
  .fpc-icon{width:52px!important;height:54px!important;font-size:8px!important;}
  .fpc-icon svg,.fpc-icon .fpc-ico{width:20px!important;height:20px!important;}
  .fpc-props{bottom:62px!important;}
  #fpc-fmt-bar{bottom:62px!important;}
  .fpc-toolbar{padding:0 8px!important;height:48px!important;}
  #fpc-dl-btn{padding:7px 10px!important;font-size:12px!important;}
}


/* ── Multi-select & Lock ─────────────────────────────────────── */
.fpc-txt-box.selected{outline:1.5px dashed rgba(37,99,235,.7);outline-offset:3px;}
.fpc-txt-box.primary-sel{outline:2px solid #2563eb;outline-offset:3px;}
.fpc-txt-item.locked{opacity:.55;}
.fpc-txt-item.locked .fpc-txt-item-preview::before{content:'🔒 ';font-size:9px;}
.fpc-txt-item.multi-sel{background:rgba(37,99,235,.18)!important;border-left-color:var(--ac)!important;}

/* ── Alignment toolbar ────────────────────────────────────────── */
#fpc-align-bar{display:flex;flex-wrap:wrap;gap:3px;padding:6px 10px 4px;border-top:1px solid var(--ln2);}
#fpc-align-bar button{height:26px;min-width:26px;padding:0 5px;background:var(--bg3);border:1px solid var(--ln2);color:var(--t1);font-size:11px;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#fpc-align-bar button:hover{background:var(--bg5);color:#fff;}
#fpc-align-bar .fpc-abar-sep{width:1px;background:var(--ln2);margin:2px 2px;align-self:stretch;}
.fpc-txt-box.fpc-locked{outline:1px dashed rgba(148,163,184,.3)!important;cursor:not-allowed!important;}
.fpc-txt-box.fpc-locked::after{content:'🔒';position:absolute;top:2px;right:4px;font-size:10px;pointer-events:none;opacity:.6;}
.fpc-il-el.multi-group-sel{outline:2px dashed rgba(37,99,235,.7)!important;outline-offset:2px;}

/* ═══════════════════════════════════════════════════════════════
   ANIMATION EDITOR — RESPONSIVE LAYOUT
   Modal: max 1900px wide, two-column grid, responsive breakpoints
═══════════════════════════════════════════════════════════════ */

/* Large screens (>1400px): bigger preview canvas */
@media(min-width:1400px){
  .fpc-anim-editor .fpc-anim-grid{
    grid-template-columns: minmax(340px,420px) minmax(460px,1fr) !important;
  }
  .fpc-anim-editor #fpc-anim-prev-canvas,
  .fpc-anim-editor #fpc-prev-overlay{
    max-width:380px!important;max-height:380px!important;
    width:380px!important;height:380px!important;
  }
  .fpc-anim-editor .fpc-anim-prev-area{min-height:400px!important;}
  .fpc-anim-editor #fpc-anim-timeline{max-height:320px!important;}
}

/* Medium-large (1100–1399px): comfortable two columns */
@media(min-width:1100px) and (max-width:1399px){
  .fpc-anim-editor .fpc-anim-grid{
    grid-template-columns: minmax(300px,360px) minmax(460px,1fr) !important;
  }
  .fpc-anim-editor #fpc-anim-prev-canvas,
  .fpc-anim-editor #fpc-prev-overlay{
    max-width:320px!important;max-height:320px!important;
    width:320px!important;height:320px!important;
  }
}

/* Tablet landscape (900–1099px): tighter two columns */
@media(min-width:900px) and (max-width:1099px){
  .fpc-anim-editor .fpc-anim-grid{
    grid-template-columns: 260px minmax(460px,1fr) !important;
  }
  .fpc-anim-editor #fpc-anim-prev-canvas,
  .fpc-anim-editor #fpc-prev-overlay{
    max-width:224px!important;max-height:224px!important;
    width:224px!important;height:224px!important;
  }
}

/* Tablet portrait (<900px): stack vertically */
@media(max-width:899px){
  .fpc-anim-editor.fpc-modal{
    max-height:98vh!important;
    border-radius:12px!important;
  }
  .fpc-anim-editor .fpc-anim-grid{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .fpc-anim-editor .fpc-anim-left{
    border-right:none!important;
    border-bottom:1px solid var(--ln2);
    flex-direction:row!important;
    flex-wrap:wrap;
    max-height:none!important;
  }
  .fpc-anim-editor .fpc-anim-prev-area{
    min-height:160px!important;
    flex:0 0 220px!important;
    width:220px;
  }
  .fpc-anim-editor #fpc-anim-prev-canvas,
  .fpc-anim-editor #fpc-prev-overlay{
    max-width:190px!important;max-height:190px!important;
    width:190px!important;height:190px!important;
  }
  /* Settings panel beside preview on tablet */
  .fpc-anim-editor .fpc-anim-left > div:last-child{
    flex:1;min-width:200px;border-top:none!important;
    border-left:1px solid var(--ln2);
  }
  /* Playback bar spans full width */
  .fpc-anim-editor .fpc-anim-left > div:not(.fpc-anim-prev-area):not(:last-child){
    flex:0 0 100%;border-left:none!important;
  }
  /* Timeline rows need a scroll limit */
  .fpc-anim-editor #fpc-anim-timeline{max-height:180px!important;}
  /* Layer control fields: fewer columns */
  .fpc-anim-editor #fpc-anim-lyr-fields{
    grid-template-columns:repeat(3,1fr)!important;
  }
  .fpc-anim-editor #fpc-anim-video-fields{
    grid-template-columns:repeat(2,1fr)!important;
  }
}

/* Mobile (<600px): single column, preview collapsed */
@media(max-width:599px){
  .fpc-anim-editor.fpc-modal{
    border-radius:14px 14px 0 0!important;
    max-height:98vh!important;
  }
  .fpc-anim-editor .fpc-anim-prev-area{
    min-height:130px!important;
    flex:0 0 150px!important;
    width:150px;
    padding:6px!important;
  }
  .fpc-anim-editor #fpc-anim-prev-canvas,
  .fpc-anim-editor #fpc-prev-overlay{
    max-width:130px!important;max-height:130px!important;
    width:130px!important;height:130px!important;
  }
  .fpc-anim-editor #fpc-anim-lyr-fields{
    grid-template-columns:repeat(2,1fr)!important;
  }
  .fpc-anim-editor #fpc-anim-video-fields{
    grid-template-columns:1fr 1fr!important;
  }
  .fpc-anim-editor #fpc-anim-ruler{font-size:8px!important;}
  /* Ruler label width narrower on mobile */
  .fpc-anim-editor .fpc-anim-lyr-row > div:first-child{
    width:80px!important;font-size:9px!important;
  }
  .fpc-anim-editor #fpc-anim-timeline .fpc-anim-lyr-row{
    padding:2px 6px!important;
  }
}

/* Very small phones (<400px) */
@media(max-width:399px){
  .fpc-anim-editor .fpc-anim-prev-area{ display:none!important; }
  .fpc-anim-editor .fpc-anim-left > div[style*="background:#111"]{ display:none!important; }
}

/* ═══════════════════════════════════════════════════════════════
   ZBAR — RESPONSIVE FIXES
   Problem: zbar hidden on mobile loses Download/Quality/Animate
   Solution: responsive scroll + split critical buttons to toolbar
═══════════════════════════════════════════════════════════════ */

/* Base: zbar scrolls horizontally instead of wrapping/overflowing */
.fpc-zbar{
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap!important;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* IE/Edge */
}
.fpc-zbar::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

/* ── 900px tablet: compact zbar, hide low-priority items ─────── */
@media(max-width:900px){
  .fpc-zbar{height:32px!important;padding:0 6px!important;}
  .fpc-zbar-lbl{display:none!important;}          /* hide labels */
  .fpc-zbar-sep{margin:0 2px!important;}
  .fpc-zbtn{width:26px!important;height:26px!important;}
  /* Hide canvas size + sel info + grid — low priority on tablet */
  #fpc-canvas-size{display:none!important;}
  #fpc-sel-info{display:none!important;}
}

/* ── 600px mobile: show slim zbar with only essentials ───────── */
@media(max-width:600px){
  /* Override the previous display:none — bring zbar back */
  .fpc-zbar{
    display:flex!important;
    height:40px!important;
    padding:0 8px!important;
    background:var(--bg1)!important;
    border-top:1px solid var(--ln)!important;
    border-bottom:none!important;
    gap:4px!important;
    order:10;                    /* push below canvas in flex column */
  }

  /* Hide everything except zoom + download + quality + animate */
  .fpc-zbar-sep{display:none!important;}
  .fpc-zbar-lbl{display:none!important;}
  .fpc-zbar-val{display:none!important;}
  .fpc-zbar-dim{display:none!important;}
  .fpc-grid-btn{display:none!important;}
  .fpc-align-btn{display:none!important;}
  #fpc-sel-info{display:none!important;}

  /* Zoom controls — smaller */
  .fpc-zbtn{
    width:30px!important;height:30px!important;
    font-size:16px!important;
    flex-shrink:0!important;
  }
  .fpc-zlbl{
    display:block!important;
    font-size:10px!important;
    min-width:36px!important;
    text-align:center!important;
  }
  .fpc-zfit{
    display:block!important;
    padding:5px 8px!important;
    font-size:10px!important;
  }

  /* Spacer pushes right items to far right */
  .fpc-zbar > div[style*="flex:1"]{ flex:1!important; }

  /* Quality select — visible and compact */
  #fpc-export-fmt{
    display:block!important;
    padding:5px 6px!important;
    font-size:11px!important;
    height:30px;
    max-width:80px;
    flex-shrink:0;
  }

  /* Animate button — show in zbar on mobile (hidden from toolbar) */
  #fpc-anim-btn{
    display:inline-flex!important;
    font-size:10px!important;
    padding:5px 8px!important;
    height:30px;
    flex-shrink:0;
    white-space:nowrap;
  }

  /* Download button */
  #fpc-dl-btn{
    padding:5px 10px!important;
    font-size:12px!important;
    font-weight:700!important;
    height:30px;
    flex-shrink:0;
    white-space:nowrap;
  }

  /* Share button */
  #fpc-share-btn{
    padding:5px 8px!important;
    font-size:15px!important;
    height:30px;
    flex-shrink:0;
  }

  /* Move Download/Share/Animate out of toolbar on mobile to avoid duplication */
  /* They live in zbar now — hide from toolbar area to avoid duplication */
  /* Note: these are already in fpc-zbar so toolbar versions should be hidden */
}

/* ── 400px: absolute minimum — zoom only + download ─────────── */
@media(max-width:400px){
  .fpc-zbar{
    display:flex!important;
    height:38px!important;
    padding:0 6px!important;
    gap:3px!important;
  }
  #fpc-anim-btn{display:none!important;}
  .fpc-zfit{padding:4px 6px!important;font-size:9px!important;}
  .fpc-zlbl{min-width:28px!important;font-size:9px!important;}
}

/* fpc-zbar-hide-sm: hidden on mobile, visible on desktop */
.fpc-zbar-hide-sm{ display:flex; }
@media(max-width:600px){
  .fpc-zbar-hide-sm{ display:none!important; }
}


/* Advanced Animate clean-up: TTS Studio + Animation Studio panels only */
#panel-tts-studio{padding:10px 10px 14px!important;}
#panel-tts-studio .fpc-sect-head:first-child{
  position:sticky;top:0;z-index:5;margin:-10px -10px 10px!important;padding:10px 12px!important;
  background:linear-gradient(180deg,var(--bg1),rgba(15,23,42,.96));border-bottom:1px solid var(--ln);
}
#panel-tts-studio > div:not(.fpc-sect-head){
  background:rgba(15,23,42,.42);border:1px solid rgba(148,163,184,.13);border-radius:10px;
  padding:9px!important;margin-bottom:10px!important;box-shadow:0 8px 24px rgba(0,0,0,.12);
}
#panel-tts-studio textarea,#panel-tts-studio select,#panel-tts-studio input[type="number"]{
  border-radius:8px!important;border-color:rgba(148,163,184,.22)!important;background:rgba(2,6,23,.42)!important;
}
#panel-tts-studio textarea:focus,#panel-tts-studio select:focus{border-color:rgba(167,139,250,.72)!important;box-shadow:0 0 0 2px rgba(124,58,237,.18)!important;}
#panel-tts-studio .fpc-tts2-prov-btn{border-radius:8px!important;min-height:30px;}
#fpc-tts2-sync-options{
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.10))!important;
  border-color:rgba(147,197,253,.28)!important;
}
.fpc-tts2-clean-note{
  margin-top:7px;padding:7px 8px;border-radius:8px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.20);
  color:#bbf7d0;font-size:9px;line-height:1.45;
}
#fpc-anim-right{width:330px!important;min-width:330px!important;background:linear-gradient(180deg,var(--bg2),rgba(15,23,42,.98))!important;}
#fpc-anim-tabs{gap:4px;padding:6px 8px!important;border-bottom:1px solid var(--ln)!important;}
#fpc-anim-tabs .fpc-anim-tab{
  border:1px solid rgba(148,163,184,.12)!important;border-radius:8px!important;margin-bottom:0!important;background:rgba(2,6,23,.25)!important;
  color:var(--t2)!important;padding:7px 4px!important;
}
#fpc-anim-tabs .fpc-anim-tab.active{background:rgba(37,99,235,.18)!important;border-color:rgba(96,165,250,.42)!important;color:#bfdbfe!important;}
#fpc-anim-right .fpc-anim-section,#fpc-anim-right .fpc-anim-field-group{
  background:rgba(15,23,42,.45);border:1px solid rgba(148,163,184,.12);border-radius:10px;padding:10px!important;margin:10px 10px!important;
}
#fpc-anim-right .fpc-anim-section-head,#fpc-anim-right .fpc-anim-field-label{font-size:10px!important;letter-spacing:.25px;color:#dbeafe!important;}
#fpc-anim-right .fpc-mini-sel,#fpc-anim-right .fpc-mini-inp,#fpc-anim-right textarea{
  border-radius:8px!important;background:rgba(2,6,23,.42)!important;border-color:rgba(148,163,184,.22)!important;
}
#fpc-anim-right .fpc-anim-add-btn,#fpc-anim-right .fpc-tbtn,#fpc-anim-right .fpc-ghost{border-radius:8px!important;}