@media (max-width: 850px) {
  #photoCanvas { touch-action: none; }
  body.editing .brandbar { display: none; }
  body.editing .workspace { gap: 8px; }
  body.editing .stage-card {
    position: sticky; top: 0; z-index: 10; min-height: 0; height: 48svh;
    border-radius: 0 0 18px 18px; box-shadow: 0 10px 30px #000;
  }
  body.editing .editor-state, body.editing .photo-stage { height: 100%; }
  body.editing .move-tip { display: none; }
  body.editing .controls { border-radius: 18px; padding: 13px 12px 18px; }
  .style-strip {
    display: flex; overflow-x: auto; gap: 8px; margin: 10px -2px 13px;
    padding: 2px 2px 7px; scroll-snap-type: x proximity;
  }
  .style-card { min-width: 148px; display: grid; gap: 3px; padding: 8px; scroll-snap-align: start; }
  .style-card svg { width: 70px; height: 25px; }
  .style-card small { font-size: .72rem; }
  .sliders { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .tone-group { margin-top: 12px; }
  .footer-actions {
    position: sticky; bottom: 0; background: #151310ee; padding: 10px 0;
    margin-bottom: -8px; backdrop-filter: blur(8px);
  }
}
@media (max-width: 420px) {
  body.editing .stage-card { height: 46svh; }
  .controls h2 { font-size: 1.45rem; }
  .sliders { grid-template-columns: 1fr 1fr; }
  .sliders label { font-size: .82rem; }
  .compare-btn { padding: 8px 10px; }
  .disclaimer { margin-bottom: 70px; }
}