/* /css-transform-generator only: function rows and the preview stage. Scoped under #trfApp. */
#trfApp .xr-fns { display: grid; gap: 8px; margin-bottom: 10px; }
#trfApp .xr-fn { display: grid; grid-template-columns: 110px repeat(3, minmax(0, 1fr)) auto; gap: 6px; align-items: end; padding: 8px 10px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); }
#trfApp .xr-fn-name { font-family: var(--xt-mono, monospace); font-weight: 700; font-size: .85rem; align-self: center; overflow-wrap: anywhere; }
#trfApp .xr-fn .ic-field { gap: 3px; }
#trfApp .xr-fn .ic-field label { font-size: .72rem; }
#trfApp .xr-fn input { width: 100%; min-width: 0; min-height: 38px; padding: 4px 6px; border: 1px solid var(--bm-line); border-radius: 8px; font: inherit; background: var(--bm-surface); color: var(--bm-ink); }
#trfApp .xr-fn input:focus { border-color: var(--bm-accent); outline: 3px solid var(--bm-accent-ring); }
#trfApp .xr-fn-btns { display: flex; gap: 4px; }
#trfApp .xr-fn-btns .bm-btn { padding: 6px 8px; }
#trfApp .xr-trf-stage { position: relative; display: grid; place-items: center; min-height: 280px; border: 1px solid var(--bm-line); border-radius: 14px; background: var(--bm-bg); overflow: hidden; }
#trfApp .xr-trf-ghost, #trfApp .xr-trf-box { grid-area: 1 / 1; width: 120px; height: 90px; border-radius: 10px; }
#trfApp .xr-trf-ghost { border: 2px dashed #9ca3af; }
#trfApp .xr-trf-box { position: relative; display: grid; place-items: center; background: linear-gradient(135deg, #6366f1, #22d3ee); color: #fff; font-weight: 800; opacity: .92; }
#trfApp .xr-trf-box::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #111827; left: calc(var(--ox, 50%) - 4px); top: calc(var(--oy, 50%) - 4px); }
@media (max-width: 520px) { #trfApp .xr-fn { grid-template-columns: repeat(3, minmax(0, 1fr)); } #trfApp .xr-fn-name { grid-column: 1 / -1; } }
@media (forced-colors: active) { #trfApp .xr-trf-box { border: 2px solid CanvasText; } }