.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 14px; align-items: start; }
@media (max-width: 880px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
.pf-left .drop { min-height: 420px; }
.pf-tools .btn { font-size: 16px; min-width: 36px; }
.pf-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; place-items: center; min-height: 300px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.pf-stage canvas { display: block; max-width: 100%; max-height: 66vh; width: auto; height: auto; border-radius: 6px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pf-badge { position: absolute; top: 20px; left: 20px; background: var(--surface); color: var(--text); }
.pf-presets { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.pf-preset { flex: none; display: grid; gap: 6px; justify-items: center; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); scroll-snap-align: start; color: var(--text-2); font-size: 12px; font-weight: 600; transition: border-color var(--dur), color var(--dur); }
.pf-preset:hover { border-color: var(--line-strong); color: var(--text); }
.pf-preset[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pf-preset canvas { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; display: block; }
.pf-sliders { gap: 8px; }
.pf-group { margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pf-slider { gap: 2px; }
.pf-slider .pf-val { color: var(--text); font-size: 12px; }
#qWrap { min-width: 140px; }
.pf-left, .pf-right { min-width: 0; grid-template-columns: minmax(0, 1fr); }