/* ════ Static Banner Edit Studio (rze-) ════ */
.rze-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(15,20,30,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:18px}
.rze-overlay.open{display:flex}
.rze-modal{display:flex;flex-direction:column;width:min(1080px,96vw);max-height:94vh;background:#f4f6fa;border:1px solid #d8deea;border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.45);overflow:hidden;font-family:Inter,Arial,sans-serif}

/* header */
.rze-head{display:flex;align-items:center;gap:14px;padding:13px 16px;background:#fff;border-bottom:1px solid #e6eaf2}
.rze-title{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;color:#1a2236;min-width:0}
.rze-title i{color:#4f46e5}
.rze-title-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rze-gate{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:#6b7280;background:#f1f3f7;border:1px solid #e3e7ef;padding:5px 11px;border-radius:20px;white-space:nowrap}
.rze-gate.is-prem{color:#7a4d12;background:linear-gradient(180deg,#fdf0d8,#fbe6bf);border-color:#f0cf90}
.rze-gate.flash{animation:rzeFlash .5s ease 2}
@keyframes rzeFlash{0%,100%{background:#f1f3f7}50%{background:#ffe1c2;border-color:#f0a35a}}
.rze-head-actions{display:flex;align-items:center;gap:8px}
.rze-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid #d8deea;background:#fff;color:#2a3140;font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:9px;cursor:pointer;font-family:inherit;transition:.15s}
.rze-btn:hover{background:#f3f5fb;border-color:#c4ccdc}
.rze-save{background:#4f46e5;border-color:#4f46e5;color:#fff}
.rze-save:hover{background:#4338ca;border-color:#4338ca}
.rze-x{border:0;background:none;font-size:24px;line-height:1;color:#9aa3b8;cursor:pointer;padding:0 4px}
.rze-x:hover{color:#2a3140}

/* toolbar */
.rze-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:10px 16px;background:#fbfcfe;border-bottom:1px solid #eceff5;min-height:46px}
.rze-tb-empty,.rze-tb-imghint{font-size:12px;color:#8a93a6;font-weight:600}
.rze-tb-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#4f46e5;background:#eef0ff;padding:4px 9px;border-radius:7px}
.rze-tb-grp{display:inline-flex;align-items:center;gap:6px}
.rze-tb-gl{font-size:10.5px;font-weight:700;color:#9aa3b8;text-transform:uppercase;letter-spacing:.4px}
.rze-tb-sel{font-family:inherit;font-size:12.5px;font-weight:600;color:#2a3140;border:1px solid #d8deea;border-radius:8px;padding:6px 8px;background:#fff;cursor:pointer;max-width:140px}
.rze-tb-size{display:inline-flex;align-items:center;gap:8px}
.rze-tb-num{width:52px;font-family:inherit;font-size:12.5px;font-weight:700;color:#101725;border:1px solid #d8deea;border-radius:8px;padding:6px 7px;text-align:center;background:#fff}
.rze-tb-num:disabled{color:#b3bacb;background:#f3f5f9}
.rze-tb-autolbl{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#475067;cursor:pointer}
.rze-tb-auto{accent-color:#4f46e5;cursor:pointer}
.rze-tb-color{width:32px;height:30px;border:1px solid #d8deea;border-radius:8px;background:#fff;cursor:pointer;padding:2px}
.rze-tb-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #d8deea;background:#fff;color:#475067;font-weight:700;font-size:12.5px;padding:7px 10px;border-radius:8px;cursor:pointer;font-family:inherit;transition:.14s}
.rze-tb-btn:hover{background:#f3f5fb;color:#2a3140}
.rze-tb-btn.on{background:#eef0ff;border-color:#c7ccfb;color:#4f46e5}
.rze-tb-del{margin-left:auto;color:#c8364c;border-color:#f0c3cc}
.rze-tb-del:hover{background:#fdf1f3;color:#a32338}

/* board (named -board not -stage: dark-tools.css force-lights any [class*="-stage"]) */
.rze-scroll{flex:1;min-height:0;overflow:auto;background:#e8ecf3 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="10" height="10" fill="%23dfe4ee"/><rect x="10" y="10" width="10" height="10" fill="%23dfe4ee"/></svg>')}
.rze-pad{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:40px}
.rze-board{position:relative;transform-origin:center center;box-shadow:0 8px 30px rgba(15,23,42,.28);background-repeat:no-repeat;flex:none}
.rze-clip{position:absolute;inset:0;overflow:hidden}   /* content clips at the banner edge — WYSIWYG with the saved canvas */

/* elements */
.rze-el{position:absolute;box-sizing:border-box;cursor:move;user-select:none}
.rze-el.rze-image img{pointer-events:none}
.rze-el.rze-text{cursor:move;line-height:1.18}
.rze-el.rze-text>div{pointer-events:none}
.rze-el:hover{outline:1px dashed rgba(79,70,229,.6)}
.rze-el.sel{z-index:50}                                  /* ring/handles draw the selection (in the un-clipped board) */
.rze-el.editing{cursor:text;outline:1.5px solid #4f46e5;background:rgba(255,255,255,.35);-webkit-user-select:text;user-select:text}
.rze-el.editing>div{pointer-events:auto}
.rze-tnc{pointer-events:none}

/* selection ring + resize handles — live in the board (NOT the clipped content layer), positioned on the element's box */
.rze-ring{position:absolute;outline:1.5px solid #4f46e5;pointer-events:none;z-index:48;box-sizing:border-box}
.rze-h{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid #4f46e5;border-radius:3px;z-index:60;box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translate(-50%,-50%)}
.rze-h-nw{cursor:nwse-resize}
.rze-h-n{cursor:ns-resize}
.rze-h-ne{cursor:nesw-resize}
.rze-h-e{cursor:ew-resize}
.rze-h-se{cursor:nwse-resize}
.rze-h-s{cursor:ns-resize}
.rze-h-sw{cursor:nesw-resize}
.rze-h-w{cursor:ew-resize}

/* footer */
.rze-foot{display:flex;align-items:center;gap:14px;padding:9px 16px;background:#fff;border-top:1px solid #e6eaf2}
.rze-hint{font-size:11.5px;color:#8a93a6;font-weight:600}
.rze-hint i{color:#a9b0c2;margin-right:5px}
.rze-zoom{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.rze-zbtn{width:28px;height:28px;border:1px solid #d8deea;background:#fff;border-radius:7px;font-size:16px;font-weight:700;color:#475067;cursor:pointer;line-height:1}
.rze-zbtn:hover{background:#f3f5fb}
.rze-zlabel{font-size:12px;font-weight:800;color:#475067;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}

/* keep the login modal reachable ABOVE the editor overlay (z 9000) when the free gate fires */
.login-modal{z-index:9500 !important}

/* dark mode: the editor modal stays light — neutralise dark-tools.css's global
   `html.dark input/select{background:#11151b!important}` for controls inside the modal */
html.dark .rze-overlay input,html.dark .rze-overlay select{background:#fff !important;color:#101725 !important;border-color:#d8deea !important}
html.dark .rze-overlay .rze-tb-num:disabled{background:#f3f5f9 !important;color:#b3bacb !important}
html.dark .rze-overlay .rze-tb-color{padding:2px !important}

/* the Edit button on each result tile (added to resize.css's .result-item) */
.result-canvas-wrap{position:relative}   /* anchor the "Edited" badge to the thumbnail */
.result-actions{display:flex;gap:7px;width:100%}
.result-actions .btn-dl{flex:1}
.btn-edit{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #4f46e5;background:#eef0ff;color:#4f46e5;font-weight:700;font-size:12px;padding:8px 10px;border-radius:9px;cursor:pointer;font-family:inherit;transition:.15s}
.btn-edit:hover{background:#4f46e5;color:#fff}
.result-edited-badge{position:absolute;top:7px;left:7px;display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:#fff;background:#16a34a;padding:2px 7px;border-radius:20px;z-index:3}

@media(max-width:640px){
  .rze-modal{width:96vw;max-height:96vh}
  .rze-toolbar{gap:7px;padding:9px 12px}
  .rze-tb-sel{max-width:110px}
  .rze-head{flex-wrap:wrap}
  .rze-gate{order:3;margin-left:0}
}
