/* Layer effect rows under each layer in the Layers panel (js/layers/fx-rows.js) */
.layers li.fx { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 30px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--fg-dim); cursor: default; user-select: none; position: relative; background: color-mix(in srgb, var(--fg) 3%, transparent); }
.layers li.fx:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.layers li.fx::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 50%; width: 6px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.layers li.fx .lp-eye { width: 18px; height: 18px; }
.layers li.fx .lp-eye svg { width: 13px; height: 13px; }
.layers li.fx.off .fx-name { text-decoration: line-through; opacity: .6; }
.fx-n { min-width: 14px; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-faint); }
.fx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layers li.fx .fx-edit { width: 22px; height: 20px; }
.layers li.fx .fx-edit svg { width: 13px; height: 13px; }
.layers li.fx.dragging { opacity: .4; }
.layers li.fx.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.layers li.fx.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.fx-dialog .fparams { min-width: 300px; }