/* ====== Reel Frame Maker — public customization module (Phase 2) ====== */

/* card + toolbar */
#rfm-gen .rfm-cust-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
#rfm-gen .rfm-cust-toggle,
#rfm-gen .rfm-cust-reset{
  flex:1;min-width:120px;font:600 12.5px Inter;color:var(--tx);
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;
  padding:10px 12px;cursor:pointer;transition:.15s
}
#rfm-gen .rfm-cust-toggle:hover,
#rfm-gen .rfm-cust-reset:hover{border-color:var(--accent)}
#rfm-gen .rfm-cust-toggle.on{background:rgba(209,43,61,.16);border-color:var(--accent);color:var(--tx)}

/* layers */
#rfm-gen .rfm-cust-sub{font:700 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-faint);margin:14px 0 8px}
#rfm-gen .rfm-cust-layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#rfm-gen .rfm-cust-layer{
  display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;cursor:pointer;transition:.15s
}
#rfm-gen .rfm-cust-layer:hover{border-color:var(--line-2)}
#rfm-gen .rfm-cust-layer.sel{border-color:var(--accent);background:rgba(209,43,61,.12)}
#rfm-gen .rfm-cust-layer .nm{flex:1;font:600 12.5px Inter;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rfm-gen .rfm-cust-layer button{
  width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--tx-dim);font-size:11px;cursor:pointer;transition:.15s;flex:none
}
#rfm-gen .rfm-cust-layer button:hover{border-color:var(--accent);color:var(--tx)}
#rfm-gen .rfm-cust-layer .rfm-drag-h{flex:none;cursor:grab;color:var(--tx-faint);font-size:13px;line-height:1;padding:0 2px;touch-action:none;user-select:none}
#rfm-gen .rfm-cust-layer .rfm-drag-h:active{cursor:grabbing}
#rfm-gen .rfm-cust-layer.rfm-dragging{opacity:.65;border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.35)}

/* canvas presets */
#rfm-gen .rfm-cust-presets{display:flex;gap:6px;flex-wrap:wrap}
#rfm-gen .rfm-cust-presets button{
  font:600 12px Inter;color:var(--tx-dim);background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;cursor:pointer;transition:.15s
}
#rfm-gen .rfm-cust-presets button:hover{border-color:var(--line-2)}
#rfm-gen .rfm-cust-presets button.on{background:rgba(209,43,61,.14);border-color:var(--accent);color:var(--tx)}

/* add elements */
#rfm-gen .rfm-cust-add-btns{display:flex;gap:8px}
#rfm-gen .rfm-cust-add-btn{
  flex:1;font:600 12.5px Inter;color:var(--tx);background:var(--panel-2);border:1px dashed var(--line-2);
  border-radius:10px;padding:9px 12px;cursor:pointer;transition:.15s
}
#rfm-gen .rfm-cust-add-btn:hover{border-color:var(--accent);border-style:solid}
#rfm-gen .rfm-cust-added{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
#rfm-gen .rfm-cust-added-row{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
#rfm-gen .rfm-cust-added-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#rfm-gen .rfm-cust-added-top .nm{font:700 10.5px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-faint)}
#rfm-gen .rfm-cust-added-row .rfm-cust-linkbtn{margin:0}
#rfm-gen .rfm-cust-added-row .rfm-cust-style{margin-top:8px}

/* per-field style panel */
#rfm-gen .rfm-cust-style{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);overflow:hidden}
#rfm-gen .rfm-cust-style>summary{
  list-style:none;cursor:pointer;padding:9px 12px;font:600 11.5px Inter;color:var(--tx-dim);
  display:flex;align-items:center;gap:6px;user-select:none
}
#rfm-gen .rfm-cust-style>summary::-webkit-details-marker{display:none}
#rfm-gen .rfm-cust-style>summary::before{content:"▸";color:var(--tx-faint);font-size:10px;transition:.15s}
#rfm-gen .rfm-cust-style[open]>summary::before{transform:rotate(90deg)}
#rfm-gen .rfm-cust-style[open]>summary{color:var(--tx);border-bottom:1px solid var(--line)}
#rfm-gen .rfm-cust-frow{display:flex;align-items:center;gap:10px;padding:8px 12px}
#rfm-gen .rfm-cust-frow:not(:last-child){border-bottom:1px solid rgba(255,255,255,.04)}
#rfm-gen .rfm-cust-flab{flex:none;width:88px;font:600 11.5px Inter;color:var(--tx-dim)}
#rfm-gen .rfm-cust-frow>select,
#rfm-gen .rfm-cust-frow>input[type=range]{flex:1;min-width:0}
#rfm-gen .rfm-cust-frow>.rfm-swatch{flex:1;height:30px}
#rfm-gen .rfm-cust-checks{display:flex;gap:16px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
#rfm-gen .rfm-cust-checks label{display:flex;align-items:center;gap:6px;font:600 12px Inter;color:var(--tx-dim);cursor:pointer}
#rfm-gen .rfm-cust-checks input{accent-color:var(--accent)}
#rfm-gen .rfm-cust-seg{display:flex;flex:1;gap:4px}
#rfm-gen .rfm-cust-seg button{
  flex:1;font:700 12px Inter;color:var(--tx-dim);background:var(--panel);border:1px solid var(--line);
  border-radius:7px;padding:6px 0;cursor:pointer;transition:.15s
}
#rfm-gen .rfm-cust-seg button.on{background:rgba(209,43,61,.16);border-color:var(--accent);color:var(--tx)}
#rfm-gen .rfm-cust-linkbtn{
  display:block;margin:8px 12px 12px;background:none;border:0;color:var(--accent);
  font:600 12px Inter;cursor:pointer;padding:0;text-align:left
}
#rfm-gen .rfm-cust-linkbtn:hover{text-decoration:underline}

/* preview overlay (selection + handles) */
#rfm-gen .rfm-reelwrap{position:relative}
#rfm-gen .rfm-cust-overlay{position:absolute;inset:0;pointer-events:none;z-index:4;outline:none;touch-action:none}
#rfm-gen .rfm-cust-overlay.on{pointer-events:auto;cursor:crosshair}
#rfm-gen .rfm-cust-sel{position:absolute;display:none;border:1.5px solid var(--accent-hi);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;box-sizing:border-box}
#rfm-gen .rfm-cust-h{
  position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--accent-hi);
  border-radius:50%;pointer-events:auto;box-shadow:0 1px 3px rgba(0,0,0,.5)
}
#rfm-gen .rfm-cust-h.nw{left:-6px;top:-6px;cursor:nwse-resize}
#rfm-gen .rfm-cust-h.n {left:calc(50% - 6px);top:-6px;cursor:ns-resize}
#rfm-gen .rfm-cust-h.ne{right:-6px;top:-6px;cursor:nesw-resize}
#rfm-gen .rfm-cust-h.e {right:-6px;top:calc(50% - 6px);cursor:ew-resize}
#rfm-gen .rfm-cust-h.se{right:-6px;bottom:-6px;cursor:nwse-resize}
#rfm-gen .rfm-cust-h.s {left:calc(50% - 6px);bottom:-6px;cursor:ns-resize}
#rfm-gen .rfm-cust-h.sw{left:-6px;bottom:-6px;cursor:nesw-resize}
#rfm-gen .rfm-cust-h.w {left:-6px;top:calc(50% - 6px);cursor:ew-resize}

/* ---------- visitor font (userfont.js, v1.9.0) ---------- */
.rfm-userfont-card input[type=file]{width:100%;margin:6px 0}
.rfm-userfont-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.rfm-userfont-name{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}