/* ================================================================
   CHRISTWORLD NETWORK EKKLESIA — frontend/bg-freeform.css
   Dark "Freeform Creator" modal, shared by all Broadcast Graphics
   designers. Kept separate from broadcast-graphics.html's own
   (light CMS-themed) stylesheet since this modal is intentionally a
   dark studio surface, matching the reference screenshots.
================================================================= */
.ff-overlay{position:fixed;inset:0;background:rgba(10,10,16,.72);z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
.ff-modal{width:min(1600px,96vw);height:min(920px,92vh);background:#121018;border:1px solid #2A2738;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);font-family:'DM Sans',sans-serif;color:#EDEAF6}
.ff-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 22px 6px}
.ff-kicker{font-size:11px;letter-spacing:.12em;font-weight:700;color:#8F7CF5;text-transform:uppercase}
.ff-head h2{margin:2px 0 0;font-size:22px;font-weight:700;color:#fff}
.ff-head-right{display:flex;align-items:center;gap:14px;color:#9A94AD;font-size:12px}
.ff-x{background:#1C1A26;border:1px solid #2E2B3C;color:#C9C4DA;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:16px;line-height:1}
.ff-sub{display:flex;align-items:center;gap:18px;padding:8px 22px 14px;color:#9A94AD;font-size:12.5px;border-bottom:1px solid #221F2D}
.ff-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}
.ff-colorwrap{display:flex;align-items:center;gap:6px}
.ff-colorwrap input[type=color]{width:26px;height:26px;border:none;border-radius:6px;background:none;padding:0;cursor:pointer}
.ff-toolbar{display:flex;align-items:center;gap:8px;padding:12px 22px;border-bottom:1px solid #221F2D;flex-wrap:wrap}
.ff-toolbar .btn{background:#1C1A26;border:1px solid #2E2B3C;color:#E4E1EF}
.ff-toolbar .btn:hover{background:#242130}
.ff-font-select{background:#1C1A26;border:1px solid #2E2B3C;color:#E4E1EF;border-radius:8px;padding:7px 10px;font-size:12.5px}
.ff-layer-count{margin-left:auto;color:#746E85;font-size:12px}
.ff-body{flex:1;display:grid;grid-template-columns:220px 1fr 280px;overflow:hidden}
.ff-layers{border-right:1px solid #221F2D;overflow-y:auto;padding:12px}
.ff-layers-head{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;color:#746E85;margin-bottom:10px}
.ff-layers-head a{color:#8F7CF5;text-decoration:none;font-size:11px}
.ff-layer-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;margin-bottom:4px;border:1px solid transparent}
.ff-layer-row:hover{background:#1A1824}
.ff-layer-row.selected{background:#211D36;border-color:#4A3FAE}
.ff-layer-icon{width:26px;height:26px;border-radius:6px;background:#241F38;display:flex;align-items:center;justify-content:center;font-size:12px;color:#B6ACF5;flex-shrink:0}
.ff-layer-meta{flex:1;min-width:0}
.ff-layer-meta b{display:block;font-size:12.5px;font-weight:600;color:#EDEAF6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-layer-meta small{color:#746E85;font-size:10.5px}
.ff-layer-del{background:none;border:none;color:#746E85;cursor:pointer;font-size:14px;padding:2px 6px}
.ff-layer-del:hover{color:#E4556B}
.ff-layer-btn{background:none;border:none;color:#9A94AE;cursor:pointer;font-size:13px;padding:2px 5px}
.ff-layer-btn:hover,.ff-layer-btn[aria-pressed="true"]{color:#fff}
.ff-canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.ff-canvas-meta{position:absolute;top:10px;left:18px;font-size:10.5px;color:#58536A;letter-spacing:.04em}
.ff-canvas-meta.right{left:auto;right:18px}
.ff-canvas{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px #2A2738}
.ff-canvas.transparent-bg{background-image:repeating-conic-gradient(#2a2a3d 0% 25%,#1d1d2b 0% 50%);background-size:24px 24px}
.ff-node{cursor:move;outline:1px dashed transparent}
.ff-node:hover{outline-color:#4A3FAE}
.ff-node.selected{outline:1.5px solid #8F7CF5}
.ff-node-inner{width:100%;height:100%;pointer-events:none}
.ff-handle{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #8F7CF5;border-radius:2px;display:none}
.ff-node.selected .ff-handle{display:block}
.ff-handle-nw{top:-5px;left:-5px;cursor:nwse-resize}
.ff-handle-ne{top:-5px;right:-5px;cursor:nesw-resize}
.ff-handle-sw{bottom:-5px;left:-5px;cursor:nesw-resize}
.ff-handle-se{bottom:-5px;right:-5px;cursor:nwse-resize}
.ff-handle-n{top:-5px;left:50%;margin-left:-4px;cursor:ns-resize}
.ff-handle-s{bottom:-5px;left:50%;margin-left:-4px;cursor:ns-resize}
.ff-handle-e{right:-5px;top:50%;margin-top:-4px;cursor:ew-resize}
.ff-handle-w{left:-5px;top:50%;margin-top:-4px;cursor:ew-resize}
.ff-preview-anim .ff-node{animation:ffPreviewPulse 1.1s ease}
@keyframes ffPreviewPulse{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0}}
.ff-inspector{border-left:1px solid #221F2D;padding:16px;overflow-y:auto}
.ff-inspector .empty-note{color:#746E85;font-size:12.5px;line-height:1.5}
.ff-insp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ff-insp-head b{font-size:13px;color:#fff}
.ff-x-sm{background:none;border:none;color:#746E85;cursor:pointer;font-size:14px}
.ff-inspector .field{margin-bottom:12px}
.ff-inspector .field label{display:block;font-size:10.5px;letter-spacing:.06em;color:#8E88A1;margin-bottom:5px;text-transform:uppercase}
.ff-inspector .field textarea,.ff-inspector .field select,.ff-inspector .field input[type=file]{width:100%;background:#1C1A26;border:1px solid #2E2B3C;color:#EDEAF6;border-radius:8px;padding:8px 10px;font-size:12.5px;font-family:inherit}
.ff-inspector .field input[type=color]{width:100%;height:32px;border:1px solid #2E2B3C;border-radius:8px;background:#1C1A26;padding:2px;cursor:pointer}
.ff-insp-section{font-size:10.5px;letter-spacing:.08em;color:#58536A;margin:16px 0 8px;border-top:1px solid #221F2D;padding-top:14px}
.ff-num-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ff-num label{display:block;font-size:10px;color:#8E88A1;margin-bottom:4px}
.ff-num-ctl{display:flex;align-items:center;background:#1C1A26;border:1px solid #2E2B3C;border-radius:8px;overflow:hidden}
.ff-num-ctl button{background:none;border:none;color:#B6ACF5;width:24px;height:30px;cursor:pointer;font-size:13px}
.ff-num-ctl input{flex:1;min-width:0;background:none;border:none;color:#EDEAF6;text-align:center;font-size:12.5px;padding:0}
.ff-num-ctl span{color:#58536A;font-size:10.5px;padding-right:8px}
.ff-foot{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid #221F2D}
.ff-foot .btn{background:#1C1A26;border:1px solid #2E2B3C;color:#E4E1EF}
.ff-foot .btn-accent{background:#7C6FEE;border:none;color:#fff;font-weight:700}
@media (max-width:860px){ .ff-body{grid-template-columns:1fr} .ff-layers,.ff-inspector{display:none} }